@nanoporetech-digital/components 8.0.0-alpha.2 → 8.0.0-alpha.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 (161) hide show
  1. package/dist/cjs/{fade-C3xL9ihU.js → fade-CqKYrZYq.js} +1 -1
  2. package/dist/cjs/{fullscreen-pHBD1-3e.js → fullscreen-D-fHJ_IJ.js} +1 -1
  3. package/dist/cjs/index-IR1lkhwT.js +4 -4
  4. package/dist/cjs/{lazyload-D2pj9J7r.js → lazyload-DK1ITMfR.js} +1 -1
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/cjs/nano-avatar_5.cjs.entry.js +7 -7
  7. package/dist/cjs/nano-breadcrumb.cjs.entry.js +1 -1
  8. package/dist/cjs/nano-collapsible-comparison.cjs.entry.js +1 -1
  9. package/dist/cjs/nano-components.cjs.js +1 -1
  10. package/dist/cjs/nano-cta.cjs.entry.js +2 -1
  11. package/dist/cjs/{nano-data-table-BkyqQiTG.js → nano-data-table-C_KLyFMO.js} +6 -3
  12. package/dist/cjs/nano-data-table.cjs.entry.js +1 -1
  13. package/dist/cjs/nano-datalist_3.cjs.entry.js +8 -8
  14. package/dist/cjs/nano-file-upload.cjs.entry.js +48 -29
  15. package/dist/cjs/nano-footer.cjs.entry.js +3 -3
  16. package/dist/cjs/nano-global-nav.cjs.entry.js +1 -1
  17. package/dist/cjs/nano-icon_3.cjs.entry.js +2 -2
  18. package/dist/cjs/nano-progress-bar.cjs.entry.js +3 -17
  19. package/dist/cjs/nano-rating.cjs.entry.js +4 -4
  20. package/dist/cjs/nano-resize-observe_2.cjs.entry.js +3 -3
  21. package/dist/cjs/nano-slide.cjs.entry.js +1 -1
  22. package/dist/cjs/{nano-slides-B3-XISfn.js → nano-slides-BhpvytBB.js} +7 -7
  23. package/dist/cjs/nano-slides.cjs.entry.js +1 -1
  24. package/dist/cjs/nano-sortable.cjs.entry.js +1 -1
  25. package/dist/cjs/nano-spinner.cjs.entry.js +1 -1
  26. package/dist/cjs/nano-sticker.cjs.entry.js +2 -2
  27. package/dist/cjs/nano-tab-content.cjs.entry.js +2 -2
  28. package/dist/cjs/nano-tab.cjs.entry.js +2 -2
  29. package/dist/cjs/nano-table.cjs.entry.js +2 -2
  30. package/dist/cjs/{page-dots-DHz-mQDL.js → page-dots-DeSuT5bE.js} +1 -1
  31. package/dist/cjs/{style-BccHkuhC.js → style-Bf3iH5GX.js} +16 -2
  32. package/dist/cjs/{table.worker-NnDnfSFs.js → table.worker-C5ofbi7M.js} +1 -1
  33. package/dist/collection/components/cta/cta.js +2 -1
  34. package/dist/collection/components/data-table/table.js +5 -2
  35. package/dist/collection/components/datalist/datalist.js +6 -6
  36. package/dist/collection/components/file-upload/file-upload.css +140 -215
  37. package/dist/collection/components/file-upload/file-upload.js +66 -44
  38. package/dist/collection/components/footer/footer.css +2 -3
  39. package/dist/collection/components/footer/footer.js +4 -3
  40. package/dist/collection/components/progress-bar/progress-bar.css +78 -33
  41. package/dist/collection/components/progress-bar/progress-bar.js +18 -61
  42. package/dist/collection/components/rating/rating.js +4 -4
  43. package/dist/collection/components/resize-observe/resize-observe.js +1 -1
  44. package/dist/collection/components/select/select.js +7 -7
  45. package/dist/collection/components/skeleton/skeleton.js +2 -2
  46. package/dist/collection/components/slides/slide.js +1 -1
  47. package/dist/collection/components/slides/slides.js +3 -3
  48. package/dist/collection/components/sortable/sortable.js +1 -1
  49. package/dist/collection/components/spinner/spinner.js +1 -1
  50. package/dist/collection/components/sticker/sticker.js +2 -2
  51. package/dist/collection/components/table/table.js +2 -2
  52. package/dist/collection/components/tabs/tab-content.js +2 -2
  53. package/dist/collection/components/tabs/tab.js +2 -2
  54. package/dist/collection/components/tag/tag.js +2 -2
  55. package/dist/collection/components/tooltip/tooltip.js +2 -2
  56. package/dist/collection/utils/style.js +16 -2
  57. package/dist/components/cta.js +2 -1
  58. package/dist/components/datalist.js +6 -6
  59. package/dist/components/nano-data-table.js +5 -2
  60. package/dist/components/nano-file-upload.js +58 -33
  61. package/dist/components/nano-footer.js +5 -4
  62. package/dist/components/nano-rating.js +4 -4
  63. package/dist/components/nano-slide.js +1 -1
  64. package/dist/components/nano-sortable.js +1 -1
  65. package/dist/components/nano-tab-content.js +2 -2
  66. package/dist/components/nano-tab.js +2 -2
  67. package/dist/components/nano-table.js +2 -2
  68. package/dist/components/progress-bar.js +7 -23
  69. package/dist/components/resize-observe.js +1 -1
  70. package/dist/components/select.js +7 -7
  71. package/dist/components/skeleton.js +2 -2
  72. package/dist/components/slides.js +3 -3
  73. package/dist/components/spinner.js +1 -1
  74. package/dist/components/sticker.js +2 -2
  75. package/dist/components/style.js +16 -2
  76. package/dist/components/tag.js +2 -2
  77. package/dist/components/tooltip.js +2 -2
  78. package/dist/esm/{fade-BTgTGh6q.js → fade-CnaZvOTY.js} +1 -1
  79. package/dist/esm/{fullscreen-BTpZyXkc.js → fullscreen-BIFliVxG.js} +1 -1
  80. package/dist/esm/index-DXvE-U_j.js +4 -4
  81. package/dist/esm/{lazyload-BYoZ43fz.js → lazyload-D_Ju_KaC.js} +1 -1
  82. package/dist/esm/loader.js +1 -1
  83. package/dist/esm/nano-avatar_5.entry.js +7 -7
  84. package/dist/esm/nano-breadcrumb.entry.js +1 -1
  85. package/dist/esm/nano-collapsible-comparison.entry.js +1 -1
  86. package/dist/esm/nano-components.js +1 -1
  87. package/dist/esm/nano-cta.entry.js +2 -1
  88. package/dist/esm/{nano-data-table-DDBCyBmN.js → nano-data-table-CJbVKIuu.js} +6 -3
  89. package/dist/esm/nano-data-table.entry.js +1 -1
  90. package/dist/esm/nano-datalist_3.entry.js +8 -8
  91. package/dist/esm/nano-file-upload.entry.js +48 -29
  92. package/dist/esm/nano-footer.entry.js +4 -4
  93. package/dist/esm/nano-global-nav.entry.js +1 -1
  94. package/dist/esm/nano-icon_3.entry.js +2 -2
  95. package/dist/esm/nano-progress-bar.entry.js +4 -18
  96. package/dist/esm/nano-rating.entry.js +4 -4
  97. package/dist/esm/nano-resize-observe_2.entry.js +3 -3
  98. package/dist/esm/nano-slide.entry.js +1 -1
  99. package/dist/esm/{nano-slides-CvZxKg4X.js → nano-slides-B9KjZVqC.js} +7 -7
  100. package/dist/esm/nano-slides.entry.js +1 -1
  101. package/dist/esm/nano-sortable.entry.js +1 -1
  102. package/dist/esm/nano-spinner.entry.js +1 -1
  103. package/dist/esm/nano-sticker.entry.js +2 -2
  104. package/dist/esm/nano-tab-content.entry.js +2 -2
  105. package/dist/esm/nano-tab.entry.js +2 -2
  106. package/dist/esm/nano-table.entry.js +2 -2
  107. package/dist/esm/{page-dots-_tkpExQM.js → page-dots-BmS6HUrx.js} +1 -1
  108. package/dist/esm/{style-BrRDhFfF.js → style-xLaX004n.js} +16 -2
  109. package/dist/esm/{table.worker-webIEBZt.js → table.worker-CsTdjWrS.js} +1 -1
  110. package/dist/nano-components/{fade-BTgTGh6q.js → fade-CnaZvOTY.js} +1 -1
  111. package/dist/nano-components/{fullscreen-BTpZyXkc.js → fullscreen-BIFliVxG.js} +1 -1
  112. package/dist/nano-components/{lazyload-BYoZ43fz.js → lazyload-D_Ju_KaC.js} +1 -1
  113. package/dist/nano-components/nano-avatar_5.entry.js +1 -1
  114. package/dist/nano-components/nano-breadcrumb.entry.js +1 -1
  115. package/dist/nano-components/nano-collapsible-comparison.entry.js +1 -1
  116. package/dist/nano-components/nano-components.css +23 -19
  117. package/dist/nano-components/nano-components.esm.js +1 -1
  118. package/dist/nano-components/nano-cta.entry.js +1 -1
  119. package/dist/nano-components/{nano-data-table-DDBCyBmN.js → nano-data-table-CJbVKIuu.js} +1 -1
  120. package/dist/nano-components/nano-data-table.entry.js +1 -1
  121. package/dist/nano-components/nano-datalist_3.entry.js +1 -1
  122. package/dist/nano-components/nano-file-upload.entry.js +1 -1
  123. package/dist/nano-components/nano-footer.entry.js +1 -1
  124. package/dist/nano-components/nano-global-nav.entry.js +1 -1
  125. package/dist/nano-components/nano-icon_3.entry.js +1 -1
  126. package/dist/nano-components/nano-progress-bar.entry.js +1 -1
  127. package/dist/nano-components/nano-rating.entry.js +1 -1
  128. package/dist/nano-components/nano-resize-observe_2.entry.js +1 -1
  129. package/dist/nano-components/nano-slide.entry.js +1 -1
  130. package/dist/nano-components/{nano-slides-CvZxKg4X.js → nano-slides-B9KjZVqC.js} +3 -3
  131. package/dist/nano-components/nano-slides.entry.js +1 -1
  132. package/dist/nano-components/nano-sortable.entry.js +1 -1
  133. package/dist/nano-components/nano-spinner.entry.js +1 -1
  134. package/dist/nano-components/nano-sticker.entry.js +1 -1
  135. package/dist/nano-components/nano-tab-content.entry.js +1 -1
  136. package/dist/nano-components/nano-tab.entry.js +1 -1
  137. package/dist/nano-components/nano-table.entry.js +1 -1
  138. package/dist/nano-components/{page-dots-_tkpExQM.js → page-dots-BmS6HUrx.js} +1 -1
  139. package/dist/nano-components/style-xLaX004n.js +4 -0
  140. package/dist/nano-components/{table.worker-webIEBZt.js → table.worker-CsTdjWrS.js} +1 -1
  141. package/dist/style/components.css +1 -1
  142. package/dist/style/components.css.map +1 -1
  143. package/dist/style/core.css +1 -1
  144. package/dist/style/core.css.map +1 -1
  145. package/dist/style/dark.css +1 -1
  146. package/dist/style/dark.css.map +1 -1
  147. package/dist/style/light.css +1 -1
  148. package/dist/style/light.css.map +1 -1
  149. package/dist/style/nano.css +1 -1
  150. package/dist/style/nano.css.map +1 -1
  151. package/dist/types/components/file-upload/file-upload.d.ts +14 -9
  152. package/dist/types/components/progress-bar/progress-bar.d.ts +6 -13
  153. package/dist/types/components.d.ts +43 -53
  154. package/docs-json.json +111 -172
  155. package/docs-vscode.json +16 -9
  156. package/hydrate/index.js +132 -110
  157. package/hydrate/index.mjs +132 -110
  158. package/package.json +3 -3
  159. package/dist/collection/components/file-upload/file-upload-list.js +0 -3
  160. package/dist/nano-components/style-BrRDhFfF.js +0 -4
  161. package/dist/types/components/file-upload/file-upload-list.d.ts +0 -0
@@ -701,30 +701,30 @@ export class Select {
701
701
  disabled,
702
702
  clearControl: this.clearable,
703
703
  }))(this);
704
- return (h(Host, { key: 'dd8d62d6064ca5bbca75c9b5b308ab2c8140c778', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
704
+ return (h(Host, { key: 'b85a8a4b4566ce33e0e7bae347c765037d1ec34b', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
705
705
  'has-value': !!this.value.length || !!this.inputSearchVal.length,
706
706
  'has-focus': this.hasFocus,
707
707
  'is-invalid': this._invalid === true,
708
708
  'is-valid': this._invalid === false,
709
709
  'nano-select': true,
710
- } }, h(FormControlWrap, { key: '811e296732a794fe171b99ab8831fb8a9f014c43', ...wrapOptions, class: {
710
+ } }, h(FormControlWrap, { key: '42335a9fda2b4e2560f33e5d4c40a58403e482d2', ...wrapOptions, class: {
711
711
  'has-error': !!this.errorMessage &&
712
712
  this.showInlineError &&
713
713
  this._invalid === true,
714
714
  'has-helper': this.hasHelperSlot,
715
715
  'is-open': this.hasOpened,
716
716
  masked: this.mask,
717
- } }, h(FormControl, { key: '667499839b71ae46a1e8b8ee410e20334518a212', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (h("div", { key: '3d4d2f085444d08bad5ea6893779d62eec37e4c1', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
718
- this.mask && (h("div", { key: 'e7354f6e04484f1f56f0a8adc1a83a1fd9217230', class: "select__mask" }, this.getLabel(this.value))),
719
- h("input", { key: 'c751e574ade62cf7ec18b61b54f79e7066652236', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
720
- ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '800b2ba2ba4b397bf23e1e1f872dacf82fbac2c6', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
717
+ } }, h(FormControl, { key: '7571a30e6a3f0b231d9e0b7a6e2f662fe3bd8183', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (h("div", { key: 'e92b079944fb81314da40799ba8f11f5644d5fa7', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
718
+ this.mask && (h("div", { key: '488c94ddb9e49c9e3f5a099a77cb0e879a02e1e2', class: "select__mask" }, this.getLabel(this.value))),
719
+ h("input", { key: '3fc66f07b7c9220e2c9d3eb02b1b268f52921a46', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
720
+ ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '1737bc4d8e6267659ebbd981cd043e0a3f0e20e3', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
721
721
  e.preventDefault();
722
722
  this.removeValue(e.detail.value);
723
723
  }, onNanoOptionsUpdated: this.setOptions, onNanoSelect: this.setValue,
724
724
  // @ts-expect-error - this bubbles from the nano-dropdown
725
725
  onNanoShow: () => (this.hasOpened = true), onNanoHide: () => (this.hasOpened = false) }, this.allowCustomValues &&
726
726
  this.multiple &&
727
- !!this.inputSearchVal && (h("nano-option", { key: '93149856e07a8b0be5b2ba6d7145c1ed37b7c876', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '9214159801d2b7f2a8bc2251a964d60980766dd6', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '742e550ebb274935ea61f0ae01d34e696058b146' }))), h("select", { key: 'e56355bad1e009cb1a46ef727e8e16894c38d325', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
727
+ !!this.inputSearchVal && (h("nano-option", { key: '23a03a568fc87bd041b4c4e702afba215e637423', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: 'edd9ba1b076740baeaa34f62aa27f598bda7114d', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '80e401156f240faf7fa04fef7915aa982305abd3' }))), h("select", { key: 'ba8bc3b4d7149e249c26f82da6816afa1b25fabf', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
728
728
  this.valArray.map((val) => {
729
729
  return (h("option", { value: val, selected: true }, val));
730
730
  }), !this.allowCustomValues &&
@@ -13,10 +13,10 @@ export class Skeleton {
13
13
  /** When `true`, the skeleton will animate. */
14
14
  animated = true;
15
15
  render() {
16
- return (h(Host, { key: 'fcfda9d2eb69c98089f410f30087a5cc773b4dd7', class: "nano-skeleton" }, h("div", { key: '6f489367c6e9a366d8fc4290244141a8a0b1c4d8', class: {
16
+ return (h(Host, { key: 'f73bd1aaaf1ed443643eb6fee3421071be76b064', class: "nano-skeleton" }, h("div", { key: 'a4023374bcd7855ef2638623b2dbf29ac758f0a6', class: {
17
17
  skeleton: true,
18
18
  animate: this.animated,
19
- } }, h("div", { key: 'd54f326dd7e8d181702d6ab16ca08c6c88c654e0', class: "skeleton__indicator" }, "\u00A0"))));
19
+ } }, h("div", { key: 'bf89fd85a10834bb798515f46b51a4b26d0f885f', class: "skeleton__indicator" }, "\u00A0"))));
20
20
  }
21
21
  static get is() { return "nano-skeleton"; }
22
22
  static get encapsulation() { return "shadow"; }
@@ -30,7 +30,7 @@ export class Slide {
30
30
  });
31
31
  }
32
32
  render() {
33
- return (h(Host, { key: '6d319ed9290a227544d3a2ad2e8ad42be30c73a6', class: "nano-slide" }, h("slot", { key: 'd8670dbaab37a0c50b5991136271e6b9b6b79e34' })));
33
+ return (h(Host, { key: 'e2de4b21a269c802cf727b7ffd8433d4f959d3fb', class: "nano-slide" }, h("slot", { key: '0d3fd5785d8e617307fd6590e0ffbca33693c410' })));
34
34
  }
35
35
  static get is() { return "nano-slide"; }
36
36
  static get encapsulation() { return "shadow"; }
@@ -499,15 +499,15 @@ export class Slides {
499
499
  this.destroyflickity();
500
500
  }
501
501
  render() {
502
- return (h(Host, { key: '778b37c200236cc6940c12f4ed28355c83804434', class: "nano-slides" }, h("div", { key: '29bb9128e4c2e13f754b15deb335d100a4bbd8cc', class: {
502
+ return (h(Host, { key: '88e0cbecd056181f9b3f8c244d8b7c59dfb94e16', class: "nano-slides" }, h("div", { key: '728f56cad9f2dc011dcc5c1051061102aaf0da63', class: {
503
503
  slideshow: true,
504
504
  ready: this.ready,
505
505
  'not-ready': !this.ready,
506
- }, part: "base" }, h("div", { key: 'bc5e82987d73da6ba47bcc0d6d85694660e63539', ref: (div) => (this.flickityEl = div), class: {
506
+ }, part: "base" }, h("div", { key: 'f4d40a6cf600378f311c8d74485802ad37a0840b', ref: (div) => (this.flickityEl = div), class: {
507
507
  'flickity-container': true,
508
508
  'slides-ready': this.slidesReady,
509
509
  'slides-not-ready': !this.slidesReady,
510
- }, part: "slide-container" }, h("slot", { key: 'a26b2ef0d1b133231dec665fd670bdfda1bca949' })), h("div", { key: 'e02f3971f707f6fedeae00d879be04d4b576119a', class: "ui-extras" }, h("slot", { key: '97cabadc46d2011e2ca41d8f5c7c26ef53e32b6a', name: "ui" })))));
510
+ }, part: "slide-container" }, h("slot", { key: 'a2d787ba9f4299216bfd99af5a39d6940c1ddd3a' })), h("div", { key: '2f25d4f413ca885408a0062d57b40c57c813ae32', class: "ui-extras" }, h("slot", { key: '234f553982373a1914455fc0c4b339ac6d147dc2', name: "ui" })))));
511
511
  }
512
512
  static get is() { return "nano-slides"; }
513
513
  static get encapsulation() { return "shadow"; }
@@ -733,7 +733,7 @@ export class Sortable {
733
733
  }
734
734
  }
735
735
  render() {
736
- return (h(Host, { key: '864871b13cc5f7a14e5b3a72c7776daec8f75bf0', class: "nano-sortable" }, h("div", { key: '9645cde622750e8d9476430712bb71ca090b6d0d', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: '5083e13e75b08b68732fccc7181d2358e5a3198d' })));
736
+ return (h(Host, { key: '2d575a0cd296fe9c691962f7075f2b808f7abe01', class: "nano-sortable" }, h("div", { key: 'c2178832b34f1c069b09eff039940ab52bc22b61', class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", { key: '703feb95010c77a8945dfc34bd57a5acb16b40d1' })));
737
737
  }
738
738
  static get is() { return "nano-sortable"; }
739
739
  static get encapsulation() { return "shadow"; }
@@ -22,7 +22,7 @@ export class Spinner {
22
22
  this.hasText = !!this.el.childNodes.length;
23
23
  }
24
24
  render() {
25
- return (h(Host, { key: 'dbc40d7788bbf362c854bb8e2edfec5eba74dab7', class: "nano-spinner" }, h("div", { key: '43ed7c0bc040a058f5ae2e667d060bc977ab1cd6', class: "spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { key: 'e5b5e56150e94540cb10114ea50414fbfa388f9b', class: "spinner__loader" }, this.type === 'dna' && (h("div", { key: 'd710dd242b6f87267dd7e5e027e06970d50bf404', class: "spinner__dna" }, h("div", { key: '8a352a82329fab518e60016e02b6a8ed5acc2f09', class: "spinner__dnatrack spinner__dnatrack--1" }, h("div", { key: '11df9066edf3c1976e3a2389d01ec16db6351449', class: "spinner__dnadot spinner__dnadot--1" }), h("div", { key: '4b3491c97ff57acc3630e084965c22f4f2be21ac', class: "spinner__dnadot spinner__dnadot--2" })), h("div", { key: '539be4e37c8ef5942c96a9e956da72edaa85a717', class: "spinner__dnatrack spinner__dnatrack--2" }, h("div", { key: 'cb819582c58208d071303faa623a6d1204eae265', class: "spinner__dnadot spinner__dnadot--3" }), h("div", { key: '852c3b793018c03021555321f9c10f5060a129f0', class: "spinner__dnadot spinner__dnadot--4" })), h("div", { key: '915260775e7f710e9d54c80ebe66a4be9ffb4d56', class: "spinner__dnatrack spinner__dnatrack--3" }, h("div", { key: 'bad113420011fbeff7421a347459060ea0e27c32', class: "spinner__dnadot spinner__dnadot--5" }), h("div", { key: 'e2d6aee7635d1262116119240f4d4e7518b26fc6', class: "spinner__dnadot spinner__dnadot--6" })), h("div", { key: '0ccd6e6d73eca5bcc50073bd4502d88cdd1aaaeb', class: "spinner__dnatrack spinner__dnatrack--4" }, h("div", { key: '1046da948f271f9a8812e1795eca262a86eb5e77', class: "spinner__dnadot spinner__dnadot--7" }), h("div", { key: '65b4f08dd543597c477bf3bb3d1b01d2de29d897', class: "spinner__dnadot spinner__dnadot--8" })), h("div", { key: '7e6df709a6c943e14cafdbcff845a40aaedadca9', class: "spinner__dnatrack spinner__dnatrack--5" }, h("div", { key: '70e7baee2dea251a9413905a0f8df825ea8a1c9f', class: "spinner__dnadot spinner__dnadot--9" }), h("div", { key: 'ca16ebfa9ab9932f67dbe542eacced2056644295', class: "spinner__dnadot spinner__dnadot--10" })))), this.type === 'circle' && h("span", { key: 'fa9e17f125e1f435f75538b24111cefbbce930c8', class: "spinner__spin" })), this.hasText && (h("div", { class: "spinner__text", key: "spinner-text" }, h("slot", { key: 'c2ce2c01f09a02201a1247f9db1baae3afd62c55' }))), this.overlay && (h("div", { class: "spinner__overlay", key: "spinner-overlay" })))));
25
+ return (h(Host, { key: '63fe6e79bb79f14d88ce4b74b5d9b442dd66c0f8', class: "nano-spinner" }, h("div", { key: '825e76fc8c27ffdb29cd6fe400f16153a40012c6', class: "spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { key: '952c81492216e657c3ed5599633be668b00e9663', class: "spinner__loader" }, this.type === 'dna' && (h("div", { key: '662ec66b3dc5032b74384a64a6456149e63b6043', class: "spinner__dna" }, h("div", { key: '8903ba83721f26de70ceec96ac9626d54e84fa1c', class: "spinner__dnatrack spinner__dnatrack--1" }, h("div", { key: 'b7c0413a4835842211525d009ebd27bcb61fdf64', class: "spinner__dnadot spinner__dnadot--1" }), h("div", { key: 'b065ee7924903e8481be2e8c20fe0b3e8a95b8de', class: "spinner__dnadot spinner__dnadot--2" })), h("div", { key: '8af94c34ddbfa949d2592dd3692775d08ac0f178', class: "spinner__dnatrack spinner__dnatrack--2" }, h("div", { key: 'a0fcda6d79d4498fcf884f1065bacabff1962b7a', class: "spinner__dnadot spinner__dnadot--3" }), h("div", { key: '07700762e2f92f3fbb48e8e5fe95924061100303', class: "spinner__dnadot spinner__dnadot--4" })), h("div", { key: 'a9385349047a5e44a1f7911d2e1b33d894d5838a', class: "spinner__dnatrack spinner__dnatrack--3" }, h("div", { key: '0477205976d9e4e4d1c9c4ed9c2a5b5056f4c1e6', class: "spinner__dnadot spinner__dnadot--5" }), h("div", { key: '25e86c6c2274f40ba903bece7b91f7d33ea0d89a', class: "spinner__dnadot spinner__dnadot--6" })), h("div", { key: '5029e8ec7b7369e92e05d136da43febcf7f69555', class: "spinner__dnatrack spinner__dnatrack--4" }, h("div", { key: '95718654b9ad41d07bd9d63a1518d53dc333c252', class: "spinner__dnadot spinner__dnadot--7" }), h("div", { key: '3f1deedd8122a536fad519e9aadaa3d3f3d8550a', class: "spinner__dnadot spinner__dnadot--8" })), h("div", { key: 'eadc04b711c3d3c1ab2b20544270e543d0d8b141', class: "spinner__dnatrack spinner__dnatrack--5" }, h("div", { key: '1055242e36a1ba393045d4852f45033e2c13194c', class: "spinner__dnadot spinner__dnadot--9" }), h("div", { key: '073943e72dd9e94f87da5e35372f3b3cb9c0bd9f', class: "spinner__dnadot spinner__dnadot--10" })))), this.type === 'circle' && h("span", { key: 'f16b19fecaf1bdb72349b26b7a92ceb90e3ce449', class: "spinner__spin" })), this.hasText && (h("div", { class: "spinner__text", key: "spinner-text" }, h("slot", { key: 'a3a2650a1ef9d5c305042c4fa5cc9ea2df0a9226' }))), this.overlay && (h("div", { class: "spinner__overlay", key: "spinner-overlay" })))));
26
26
  }
27
27
  static get is() { return "nano-spinner"; }
28
28
  static get encapsulation() { return "shadow"; }
@@ -599,12 +599,12 @@ export class Sticker {
599
599
  this.hasBootstrapped = false;
600
600
  }
601
601
  render() {
602
- return (h(Host, { key: '684a30435688dd24ba583b9ad18f262b00863220', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: '1a27a9545b9e00e492efc809ef10ac291f13f421', class: {
602
+ return (h(Host, { key: 'a087de590970eacfe2f2f08e3af044f3925c7156', sticky: !this.isRootSticker && !this.stickToEle && this.isSticky, hide: this.hide && this.isStuck, siblings: this.stuckCounter, index: this.stickerIndex, stuck: this.isStuck && this.isSticky, "placed-bottom": this.positions.includes('bottom'), "placed-top": this.positions.includes('top'), "placed-end": this.positions.includes('end'), "placed-start": this.positions.includes('start'), class: "nano-sticker" }, h("div", { key: 'ee02e96ed98fa0564fa99d272a23c891801a9934', class: {
603
603
  sticker: true,
604
604
  sticky: this.isRootSticker && this.isSticky,
605
605
  stuck: this.isStuck && this.isRootSticker && this.isSticky,
606
606
  hide: this.isRootSticker && this.hide && this.isStuck,
607
- }, ref: (div) => (this.sticker = div) }, h("div", { key: '323a9081a4b7aec17c6bcc0cc85558fa54fa5253', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '9fc54c6354a8de64bebbaa54881fa4b21f116ba5' })))));
607
+ }, ref: (div) => (this.sticker = div) }, h("div", { key: '03eb024bd50a757a5a75097e34dd70fc36638fa7', class: "sticker-content", ref: (div) => (this.content = div) }, h("slot", { key: '50cc24e4a2cb1d7cef2a439b99b688579a77e338' })))));
608
608
  }
609
609
  static get is() { return "nano-sticker"; }
610
610
  static get encapsulation() { return "shadow"; }
@@ -227,10 +227,10 @@ export class NanoTable {
227
227
  this.cleanUpObservers();
228
228
  }
229
229
  render() {
230
- return (h(Host, { key: '3c45a2880bd20a771bcc682355452312340db56d', class: {
230
+ return (h(Host, { key: '84b2998c112a5d929d5dba88961a309ce4d0fff9', class: {
231
231
  'nano-table': true,
232
232
  'nano-table--props-ready': this.propsReady,
233
- } }, this.scrollable && (h("nano-masked-overflow", { key: '6b29ca4c8c64deae80def0d3958dc25c4d6cd1c0', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '83dce90d6e5425b0fd2a2443d0d90b7acfc9c141', class: "nano-table__overflow" }))), h("slot", { key: 'cff62841c17cf20c2ff5872944dbd38bbe438369' })));
233
+ } }, this.scrollable && (h("nano-masked-overflow", { key: 'c6175d1bfd32160743c04b35132e97cc1cc7c873', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: 'f96a85d3d852aa79def9f34b5c666c8d4c747c9f', class: "nano-table__overflow" }))), h("slot", { key: '4d7871702885a4a077e26b529b56c008949fa156' })));
234
234
  }
235
235
  static get is() { return "nano-table"; }
236
236
  static get encapsulation() { return "scoped"; }
@@ -24,10 +24,10 @@ export class NanoTabContent {
24
24
  requestAnimationFrame(() => (this.ready = true));
25
25
  }
26
26
  render() {
27
- return (h(Host, { key: '7afee777be86f5847c5ac4c8de6babae3199b01d', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
27
+ return (h(Host, { key: '69b49712bc8bab3a9bd6857c836265ce897ec2da', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
28
28
  ready: this.ready,
29
29
  'nano-tab-content': true,
30
- } }, h("div", { key: 'c316e2c15458eeb9fb6162d81060b81a1132e795', part: "base", class: "nano-tab-content" }, h("slot", { key: '532eedd714e732749cfe9b303b1f4c633e89491c' }))));
30
+ } }, h("div", { key: '82758de9b18d8ccacd47ebf84151905eb6b88cc0', part: "base", class: "nano-tab-content" }, h("slot", { key: '67156ec26a34bf03503e721b1ec2869e3997e847' }))));
31
31
  }
32
32
  static get is() { return "nano-tab-content"; }
33
33
  static get encapsulation() { return "shadow"; }
@@ -51,12 +51,12 @@ export class NanoTab {
51
51
  }
52
52
  };
53
53
  render() {
54
- return (h(Host, { key: '67fe232bda16bf41bf1268a1891cfeb6483ebd02', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: '6f07d7d5a89071e094fe3deb19e88ec66a524f3d', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
54
+ return (h(Host, { key: '0b4d0660a4347b133c859db5fa6dcff84bdd38bf', id: this.host.id || this.tabId, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: "nano-tab" }, h("div", { key: 'abce836bb90bd210011de38d906293dac6b26235', part: `base${this.active ? ' base--active' : ''}${this.disabled ? ' base--disabled' : ''}${this.closable ? ' base--closable' : ''}`, class: {
55
55
  tab: true,
56
56
  'tab--active': this.active,
57
57
  'tab--disabled': this.disabled,
58
58
  'tab--closable': this.closable,
59
- } }, h("slot", { key: '4c8dce458c8ae3ed526d4aed7332650be891510c', name: "start" }), h("div", { key: 'e71cced02347ffaa432b5711af54666ac0a6cfd6', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '382f7f77b009e3a5cf3af3d3b94b02e639bf2934' })), h("slot", { key: '82a2c81ab573d3c78b7d913f4b7ab146e7c6d5b2', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: '14e812f9acd5e081a1eba5014f6d4fe4b79371e2', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
59
+ } }, h("slot", { key: '8e563821478aa0bd9b6257d5927d52c91d036fec', name: "start" }), h("div", { key: 'e18098d994c6598d17b11a337db295a12f2016d5', part: "label", ref: (el) => (this.tab = el), tabindex: this.disabled || !this.active ? '-1' : '0', class: "tab__label" }, h("slot", { key: '9ab71f7ead9b29eee4d37d1070741466babb7e6e' })), h("slot", { key: '381b12cce253bd9bb10ef1c14ddf766ffff4f658', name: "end" }), this.closable && !this.disabled && (h("nano-icon-button", { key: '515bbbe004907a476ae477da49d0a47430f48d78', label: "Close this tab", iconName: "light/xmark", class: "tab__close-button", onClick: this.handleCloseClick, onKeyDown: this.handleCloseKeydown, part: "close-button" })))));
60
60
  }
61
61
  static get is() { return "nano-tab"; }
62
62
  static get encapsulation() { return "shadow"; }
@@ -41,8 +41,8 @@ export class NanoTag {
41
41
  render() {
42
42
  return (this.closable &&
43
43
  !this.containsAnchor() && [
44
- h("slot", { key: '0d6e99e16dc034266f43677f5dbb47b7a390d562' }),
45
- h("nano-icon-button", { key: '08586a086598c37e6d4af76df6ff19ca1723b3d8', label: "Close", "icon-name": "light/xmark-large", onKeyDown: this.onKeyDown, onClick: this.handleClick }),
44
+ h("slot", { key: 'a1a5a458c6bb76ab3c565d33830236a5bbda9408' }),
45
+ h("nano-icon-button", { key: '23201b4215ff0aefbc34fdaba31b9006499e2716', label: "Close", "icon-name": "light/xmark-large", onKeyDown: this.onKeyDown, onClick: this.handleClick }),
46
46
  ]);
47
47
  }
48
48
  static get is() { return "nano-tag"; }
@@ -227,10 +227,10 @@ export class Tooltip {
227
227
  this.popover.destroy();
228
228
  }
229
229
  render() {
230
- return (h(Host, { key: '46e02e20dbf3922cfd6accd2a1b458a7acc7f7d7', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: 'ab5a74099fab3ada3560426bea7ec8d2a646b9b3', onSlotchange: this.handleSlotChange }), h("div", { key: 'b3dbae1010de35f3583d5c74488ffef20d5e23bd', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: 'b2280419b506610603bbb3ce6db3e25c3a6fc12a', part: "base", ref: (el) => (this.tooltip = el), class: {
230
+ return (h(Host, { key: '4b98bb9ee733405debbece4d5ac0b2395f5d54f3', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, h("slot", { key: 'c9f5956a38f9a892ad756a8c20ac316b1d975392', onSlotchange: this.handleSlotChange }), h("div", { key: '31f46bf3e11ba2981883ed2dfdc6cefddace7e77', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, h("div", { key: '85854e52a5b4a10a1c12798f3d24b6d1aaefc21f', part: "base", ref: (el) => (this.tooltip = el), class: {
231
231
  tooltip: true,
232
232
  'tooltip--open': this.open,
233
- }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: '86b3f1f338cbc8b37223253fde3e9588c9e43601', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '8566c4ea2d7ebbb476de6b127f7d0750ec38c450', class: "tooltip-arrow", "data-popper-arrow": true })))));
233
+ }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { key: 'fa8b9006cb18ab66060be9c969a70e49c609bc19', name: "content", onSlotchange: () => this.setLabel() }, this.content), h("div", { key: '298cdad62b389ec2759559a6dc26fc02f4d5ba3f', class: "tooltip-arrow", "data-popper-arrow": true })))));
234
234
  }
235
235
  static get is() { return "nano-tooltip"; }
236
236
  static get encapsulation() { return "shadow"; }
@@ -23,9 +23,23 @@ export function addGlobalStylesheetToShadow(shadowRoot) {
23
23
  let rule = null;
24
24
  let globalStylesheet = [];
25
25
  for (stylesheet of globalStylesheets) {
26
- if (!(stylesheet instanceof CSSStyleSheet))
26
+ if (!(stylesheet instanceof CSSStyleSheet)) {
27
27
  continue;
28
- for (rule of stylesheet.cssRules) {
28
+ }
29
+ let cssRules;
30
+ try {
31
+ // Attempt to access the cssRules of the stylesheet
32
+ cssRules = stylesheet?.cssRules;
33
+ // no cssRules? skip it
34
+ if (!cssRules)
35
+ continue;
36
+ }
37
+ catch (e) {
38
+ // some stylesheets may not be accessible due to CORS or other restrictions
39
+ console.warn('Unable to access stylesheet:', stylesheet, e);
40
+ continue;
41
+ }
42
+ for (rule of cssRules) {
29
43
  // arbitrary piece of text to check for that appears early in the `nano-components` stylesheet
30
44
  // this is a bit fragile but does the job
31
45
  if (rule instanceof CSSLayerBlockRule &&
@@ -27,9 +27,10 @@ const NanoCta = /*@__PURE__*/ proxyCustomElement(class NanoCta extends HTMLEleme
27
27
  /** Predefined styles when displaying a number of CTAs together */
28
28
  group;
29
29
  componentWillLoad() {
30
- if (!this.host.querySelector('button, a')) {
30
+ if (!this.host.querySelector('button, a, div')) {
31
31
  const button = document.createElement('button');
32
32
  button.classList.add('nano-internal-cta');
33
+ button.type = 'button';
33
34
  this.host.childNodes.forEach((node) => {
34
35
  button.appendChild(node);
35
36
  });
@@ -103,7 +103,7 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
103
103
  writeTask(() => {
104
104
  if (this.open) {
105
105
  const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
106
- this.nanoDropdown.style.setProperty('--max-height', window.innerHeight - (height + top + 40) + 'px');
106
+ this.nanoDropdown.style.setProperty('--max-height', `max(${window.innerHeight - (height + top + 40)}px, 48vw)`);
107
107
  }
108
108
  this.nanoDropdown.open = this.open;
109
109
  if (this.connectedInput) {
@@ -525,18 +525,18 @@ const DataList = /*@__PURE__*/ proxyCustomElement(class DataList extends HTMLEle
525
525
  }
526
526
  }
527
527
  render() {
528
- return (h(Host, { key: 'c869f626deae72020846edf761d0d8f1b59c34e7', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
528
+ return (h(Host, { key: 'b9c67e5dfc3c26c4eac219d9bdc9081aa79d7122', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
529
529
  ? 'Select options from the list below'
530
- : undefined }, h("nano-dropdown", { key: '8fa52dc246705c9af636b1c96ee37df8b6bd746d', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
530
+ : undefined }, h("nano-dropdown", { key: '29a0de977f7be1a39c5c869a5ab366bb64711d9e', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
531
531
  dlist__dropdown: true,
532
532
  'dlist--isfiltered': this.isFiltered,
533
- }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '998896a220e3cf3f010bda3354bb530ac0cc9296', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
533
+ }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: '86769c73825853c557ed7a1dfb0f86898ce6504f', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
534
534
  dlist__menu: true,
535
535
  'dlist__menu--open': this.dropwdownOpen,
536
- }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '8f585edd48ec29a847818d1e9af8baf0bc4b4ddf', name: "list-top" }), h("slot", { key: '3bdd8c0a51d63b6fcf3a25d630212db4ba7d8a9b' }), h("slot", { key: 'a7b997daebd6a1e25f1a4a97e4354b966ceeebd6', name: "internal-opts" }), h("slot", { key: '41ebc4da7244b1e4fb532a2fbb0356ea51eb865a', name: "list-bottom" })), h("nano-menu", { key: 'd5d360f4e8d3c78780477572d385daaa4bb12c15', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
536
+ }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: 'f5ea0623591a368f38ce3c1e41ef431c4a9f5960', name: "list-top" }), h("slot", { key: '98804885ffb99528138867d2747af3acef3f64f7' }), h("slot", { key: '1341dc10f96570c04613153cf939aaf7dc21f0d3', name: "internal-opts" }), h("slot", { key: '84d86a667a69cd571f7b96dc29d1ddd58c3d482c', name: "list-bottom" })), h("nano-menu", { key: '9b09caa70bd106eb9e64c714072c0b88275f34c6', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
537
537
  dlist__menu: true,
538
538
  'dlist__menu--open': this.dropwdownOpen,
539
- } }, h("slot", { key: '3cc55519054da79e57dc70ecc936c0e67e7e3949', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '0662bfdc4056f2111647550d9aba6a331653d2f3', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
539
+ } }, h("slot", { key: '58187330291198ff00571570e2b6b6bfdc79c905', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '72ea39405f558d10de86a14704ed48e869f01426', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
540
540
  }
541
541
  static get watchers() { return {
542
542
  "open": ["openWatcher"],
@@ -1812,10 +1812,13 @@ const NanoDataTable$1 = /*@__PURE__*/ proxyCustomElement(class NanoDataTable ext
1812
1812
  return (h$1(Host, { class: "nano-data-table" }, h$1("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h$1("nano-resize-observe", { onNanoResize: () => {
1813
1813
  if (this.tablePinnedService)
1814
1814
  this.tablePinnedService.onResize();
1815
- } }), Wrap(h$1("div", { class: `${CSSNAMESPACE}__wrap` }, h$1("nano-progress-bar", { indeterminate: true, class: {
1815
+ } }), Wrap(h$1("div", { class: `${CSSNAMESPACE}__wrap` }, h$1("nano-progress-bar", {
1816
+ // indeterminate
1817
+ class: {
1816
1818
  [`${CSSNAMESPACE}__progress-bar`]: true,
1817
1819
  [`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
1818
- } }), h$1("table", { "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-data-table-' + this.renderId }, h$1("caption", { class: {
1820
+ }
1821
+ }), h$1("table", { "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-data-table-' + this.renderId }, h$1("caption", { class: {
1819
1822
  [`${CSSNAMESPACE}__caption`]: true,
1820
1823
  [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
1821
1824
  } }, h$1("slot", { name: "caption" }, this.caption)), h$1("thead", null, h$1(TableHeadFootRow, { rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [
@@ -3,11 +3,12 @@
3
3
  */
4
4
  import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
5
5
  import { h } from './renderer.js';
6
+ import { d as defineCustomElement$5 } from './cta.js';
6
7
  import { d as defineCustomElement$4 } from './icon.js';
7
8
  import { d as defineCustomElement$3 } from './icon-button.js';
8
9
  import { d as defineCustomElement$2 } from './tooltip.js';
9
10
 
10
- const fileUploadCss = ".sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentcolor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--label-color--invalid:var(--nano-input-label-color-invalid, \"currentcolor\");--drop-bg:#f2f7f9;--drop-text:#756f6a;--drop-height:3.5em;--drop-border-tint:var(--nano-color-primary-rgb, 0 116 149);--drop-border-width:2px;--drop-border-radius:5px;--drop-bg--invalid:var(--nano-input-background-color, white);--drop-border--invalid:var(--nano-color-danger-rgb, 239 65 53);--btn-bg:var(--nano-color-primary, #007495);--btn-text:var(--nano-color-primary-contrast, #fff);--btn-icon-size:var(--nano-btn-icon-size, 1.4em);--btn-padding-top:var(--nano-btn-padding-top, 0.5em);--btn-padding-bottom:var(--nano-btn-padding-bottom, 0.5em);--btn-padding-start:var(--nano-btn-padding-start, 1rem);--btn-padding-end:var(--nano-btn-padding-end, 1rem)}[disabled].sc-nano-file-upload-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload__label.sc-nano-file-upload{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-file-upload-h:not([invalid=false]) .file-upload__label.sc-nano-file-upload{color:var(--label-color--invalid)}.file-upload__input.sc-nano-file-upload{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{block-size:1em;margin-block:calc(var(--label-padding) / 2) var(--label-padding);margin-inline:3px 0;position:relative}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--invalid-msg-color);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1}.file-upload__help.sc-nano-file-upload{font-style:italic;opacity:1;color:var(--help-msg-color)}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--drop-bg);color:var(--drop-text);min-block-size:var(--drop-height);display:flex;align-items:center;justify-content:center;font-size:0.9em;position:relative;transition:background-color 0.15s ease-in-out;padding:0.5rem}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{opacity:0.7}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:var(--drop-bg--invalid)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload{background-color:#fff}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-radius:var(--drop-border-radius);border-width:var(--drop-border-width);border-color:rgb(var(--drop-border-tint)/50%);border-style:dashed;inset:0;transition:top 0.1s ease-in-out, bottom 0.1s ease-in-out, left 0.1s ease-in-out, right 0.1s ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{border-color:rgb(var(--drop-border--invalid)/100%)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:rgb(var(--drop-border-tint)/100%);text-decoration:underline;border-radius:2px;z-index:1;cursor:pointer;position:relative}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__list.sc-nano-file-upload{list-style:none;margin:0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;transform:translateZ(0);animation:hideListItem 0.3s ease-in-out forwards}@keyframes hideListItem{0%{opacity:1;transform:translateY(0);transform:translateZ(0)}100%{opacity:0;transform:translateY(10px);transform:translateZ(0)}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem 0.3s ease-in-out forwards}@keyframes showListItem{0%{opacity:0;transform:translateY(10px);transform:translateZ(0)}100%{opacity:1;transform:translateY(0);transform:translateZ(0)}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;padding:5px;margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.9em;color:var(--help-msg-color)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{background:var(--nano-color-blue--faded);border-radius:5px;margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:rgb(var(--drop-border--invalid) / 100%)}.file-upload__button.sc-nano-file-upload{padding:0;border:none;background-color:transparent;font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, border-color 100ms ease-in-out, color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:400;cursor:pointer;background:rgba(0, 0, 0, 0.02);background-color:var(--btn-bg);color:var(--btn-text);--nano-btn-icon-size:var(--btn-icon-size);--nano-btn-line-height:var(--btn-icon-size);--nano-btn-padding-top:var(--btn-padding-top);--nano-btn-padding-bottom:var(--btn-padding-bottom);--nano-btn-padding-start:var(--btn-padding-start);--nano-btn-padding-end:var(--btn-padding-end);max-inline-size:100%;font-size:0.9em}.file-upload__button.sc-nano-file-upload::-moz-focus-inner{border:0;padding:0}.file-upload__button.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:focus{text-decoration:none;color:inherit}@media print{.file-upload__button.sc-nano-file-upload{display:none}}.file-upload__button.sc-nano-file-upload:focus,.file-upload__button.button--focus.sc-nano-file-upload{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.file-upload__button.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload nano-spinner.sc-nano-file-upload{--base-color-rgb:255 255 255;margin-inline:0.5em 0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.file-upload__button.button--icon-start.sc-nano-file-upload nano-icon.sc-nano-file-upload,.file-upload__button.button--icon-start.sc-nano-file-upload nano-spinner.sc-nano-file-upload{margin-inline:0 0.5em}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.file-upload__button.sc-nano-file-upload:active:not(.button--disabled,.sc-nano-file-upload:disabled){box-shadow:none}.file-upload__button--disabled.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload:disabled{opacity:0.6}.file-upload__button--disabled.sc-nano-file-upload:hover,.file-upload__button.sc-nano-file-upload:disabled:hover{cursor:default}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled,.sc-nano-file-upload:disabled),.file-upload__button.button--active.sc-nano-file-upload{background-color:var(--nano-color-primary-shade, #00637f);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:hover:not(.button--disabled,.sc-nano-file-upload:disabled).button--keyline,.file-upload__button.button--active.button--keyline.sc-nano-file-upload{background-color:var(--btn-bg);color:var(--btn-text)}.file-upload__button.sc-nano-file-upload:focus{color:var(--btn-text)}.file-upload__button.button--keyline.sc-nano-file-upload{background:transparent;border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--btn-bg);border-color:var(--btn-bg)}.file-upload__button.button--keyline.sc-nano-file-upload:hover:not(.button--disabled,.sc-nano-file-upload:disabled),.file-upload__button.button--keyline.sc-nano-file-upload:not(:focus,.button--focus).sc-nano-file-upload,.file-upload__button.button--keyline.button--active.sc-nano-file-upload{box-shadow:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__button.sc-nano-file-upload{opacity:0.4}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;background-color:transparent;display:flex;align-items:stretch;inline-size:auto;color:var(--clear-btn-color)}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload{color:var(--clear-btn-color--invalid)}.file-upload__button.sc-nano-file-upload .file-upload__clear-btn.sc-nano-file-upload .nano-icon.sc-nano-file-upload{margin-inline:0.4rem 0;margin-block:0}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{display:flex;align-items:center}.file-upload__button.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload span.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}";
11
+ const fileUploadCss = ".sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{box-sizing:border-box}[hidden].sc-nano-file-upload{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-file-upload-h,*.sc-nano-file-upload,*.sc-nano-file-upload::before,*.sc-nano-file-upload::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-file-upload-h{min-block-size:1rem;display:block;--color-error:var(--nano-color-danger-1100);--color-error-light:var(--nano-color-danger-100);--color-text:var(--nano-color-neutral-1400);--color-drop-browse:var(--nano-color-primary-1200);--color-drop-border:var(--nano-color-primary-1200);--color-drop-bg:var(--nano-color-primary-75);--drop-height:3.5em;--color-btn-bg:var(--nano-color-base-0);--color-btn-border:var(--nano-color-primary-1000);--color-btn-text:var(--nano-color-primary-1000)}[disabled].sc-nano-file-upload-h:not([disabled=false]){cursor:not-allowed}[disabled].sc-nano-file-upload-h:not([disabled=false]) *.sc-nano-file-upload{pointer-events:none !important}.file-upload--invalid.sc-nano-file-upload{--color-drop-bg:var(--color-error-light)}.file-upload--dragging.sc-nano-file-upload{--color-drop-bg:var(--nano-color-success-50)}.file-upload__label.sc-nano-file-upload{font-size:var(--nano-font-size-xs);margin:0;line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__label.sc-nano-file-upload{color:var(--nano-color-neutral-1200)}.file-upload__input.sc-nano-file-upload{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload,.file-upload__more.sc-nano-file-upload,.file-upload__label.sc-nano-file-upload{display:block;inline-size:100%;white-space:nowrap;text-overflow:ellipsis}.file-upload__more.sc-nano-file-upload{margin-block:var(--nano-spacing-sm) 0;position:relative}.file-upload__more.sc-nano-file-upload:has(.file-upload__error) .file-upload__help.sc-nano-file-upload{display:none !important}.file-upload__error.sc-nano-file-upload,.file-upload__help.sc-nano-file-upload{inset-block-start:0;inset-inline-start:0;font-style:italic;font-size:var(--nano-font-size-2xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload,.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:1}.file-upload__error.sc-nano-file-upload{color:var(--color-error);opacity:0;display:none;transition:all var(--nano-transition-fast) ease;transition-behavior:allow-discrete}.file-upload--invalid.sc-nano-file-upload .file-upload__error.sc-nano-file-upload{opacity:1;display:block}.file-upload__help.sc-nano-file-upload{opacity:1;color:var(--color-text);display:block}.file-upload--invalid.sc-nano-file-upload .file-upload__help.sc-nano-file-upload{opacity:0;display:none}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__help.sc-nano-file-upload{color:var(--nano-color-neutral-1200);opacity:0.8}.file-upload__drop.sc-nano-file-upload{position:relative;inline-size:100%;display:inline-block}.file-upload__drop-area.sc-nano-file-upload{flex-direction:column;background-color:var(--color-drop-bg);color:var(--color-text);min-block-size:var(--drop-height);padding:var(--nano-spacing-md);display:flex;align-items:center;justify-content:center;position:relative;transition:background-color var(--nano-transition-x-fast) ease-in-out;font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose)}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload{color:var(--nano-color-neutral-1200);background-color:var(--nano-color-neutral-300);border-color:var(--nano-color-neutral-1200)}.file-upload__drop-area.sc-nano-file-upload::after{content:\"\";position:absolute;border-width:1px;background-color:var(--color-drop-border);-webkit-mask-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6%2c 8' stroke-dashoffset='0'/%3e%3c/svg%3e\");mask-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6%2c 8' stroke-dashoffset='0'/%3e%3c/svg%3e\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;inset:0;transition:top var(--nano-transition-x-fast) ease-in-out, bottom var(--nano-transition-x-fast) ease-in-out, left var(--nano-transition-x-fast) ease-in-out, right var(--nano-transition-x-fast) ease-in-out}.file-upload--invalid.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{background-color:var(--color-error)}.file-upload--dragging.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload::after{background-color:var(--nano-color-success-1100);inset:5px}.file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:var(--color-drop-browse);text-decoration:underline;z-index:1;cursor:pointer;position:relative}[disabled].sc-nano-file-upload-h:not([disabled=false]) .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{color:var(--nano-color-neutral-1200);opacity:0.8}.file-upload--focus.sc-nano-file-upload .file-upload__drop-area.sc-nano-file-upload span.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__list.sc-nano-file-upload{list-style:none;margin:var(--nano-spacing-xs) 0 0;padding:0}.file-upload__list-wrap.sc-nano-file-upload{position:relative;inset-block-start:-4px}.file-upload__list-item.sc-nano-file-upload{inline-size:100%;margin:0 0 2px;display:flex;align-items:center;animation:hideListItem var(--nano-transition-fast) ease-in-out forwards}@keyframes hideListItem{0%{opacity:1}100%{opacity:0}}.file-upload__list-item--active.sc-nano-file-upload{animation:showListItem var(--nano-transition-fast) ease-in-out forwards}@keyframes showListItem{0%{opacity:0}100%{opacity:1}}.file-upload__list.sc-nano-file-upload .list-title.sc-nano-file-upload{background:var(--color-drop-bg);padding:var(--nano-spacing-xs);margin-inline-end:2px;display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--nano-font-size-2xs);color:var(--color-text)}.file-upload__list.sc-nano-file-upload .list-button.sc-nano-file-upload{--padding:0.406rem;background:var(--color-drop-bg);margin:2px}.file-upload__list.sc-nano-file-upload .list-error.sc-nano-file-upload{--color:var(--color-error)}.file-upload__drop-area.sc-nano-file-upload,.file-upload__button.sc-nano-file-upload{margin-block:var(--nano-spacing-sm) 0}.file-upload__button.sc-nano-file-upload{max-inline-size:100%;display:flex}.is-invalid.sc-nano-file-upload-h .file-upload__button.sc-nano-file-upload{color:var(--color-error)}.file-upload--dragging.sc-nano-file-upload .file-upload__button.sc-nano-file-upload{--nano-btn-border-style:dashed}.file-upload__clear-btn.sc-nano-file-upload{margin:0;font-size:inherit;padding:0;border:0;outline:none;display:flex;align-items:center;inline-size:auto;color:var(--color-btn-text);background:var(--color-btn-bg)}.is-invalid.sc-nano-file-upload-h .file-upload__clear-btn.sc-nano-file-upload{color:var(--color-error)}.file-upload__clear-btn.sc-nano-file-upload:focus-visible>nano-icon.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__clear-btn.sc-nano-file-upload .nano-icon.sc-nano-file-upload{margin:0.1rem 0 0 var(--nano-spacing-sm)}.file-upload--focus.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__btn-content.sc-nano-file-upload div.sc-nano-file-upload{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0;display:block}.file-upload--focus.sc-nano-file-upload .file-upload__btn-content.sc-nano-file-upload div.sc-nano-file-upload{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.file-upload__icon.sc-nano-file-upload{align-self:center;margin-inline-start:var(--nano-spacing-sm);size:var(--nano-icon-size-small)}.file-upload__icon-error.sc-nano-file-upload{color:var(--color-error);opacity:0}.file-upload--invalid.sc-nano-file-upload .file-upload__icon-error.sc-nano-file-upload{opacity:1}.file-upload__icon-success.sc-nano-file-upload{color:var(--nano-color-success-1100);opacity:0}.file-upload--valid.sc-nano-file-upload .file-upload__icon-success.sc-nano-file-upload{opacity:1}";
11
12
 
12
13
  let fileInputIds = 0;
13
14
  let getDataTransfer = () => new DataTransfer();
@@ -66,12 +67,18 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
66
67
  capture;
67
68
  /** The maximum file size allowed per file (Megabytes) */
68
69
  maxFileSize = 1;
69
- /** The maximum file size allowed per file (bytes). */
70
+ /** The maximum number of files that can be selected. Defaults to 1 */
70
71
  maxFiles = 1;
72
+ _label = '';
71
73
  /** String to place within a label element. */
72
- label;
74
+ get label() {
75
+ return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
76
+ }
77
+ set label(value) {
78
+ this._label = value;
79
+ }
73
80
  /** Placeholder only used within single file uploads. */
74
- placeholder = 'Choose a file...';
81
+ placeholder = 'Choose a file';
75
82
  /** Visually hide the label - but make it accessible. */
76
83
  hideLabel = false;
77
84
  /** If `true`, the user must select a file to upload before submitting a form. */
@@ -80,11 +87,11 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
80
87
  disabled = false;
81
88
  /** If `true`, a clear icon will appear in the input when there is a value.
82
89
  * Clicking it clears the input. Only used within single file uploads. */
83
- clearInput = false;
90
+ clearable = false;
84
91
  /** Whether to show validation errors underneath input */
85
92
  showInlineError = true;
86
93
  /** When should the field perform validation */
87
- validateOn = 'submit';
94
+ validateOn = 'submitThenDirty';
88
95
  /** The form element to associate with this input (its form owner). Must be the id of a form. */
89
96
  form;
90
97
  shouldValidate() {
@@ -96,7 +103,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
96
103
  this.showInlineValidation();
97
104
  });
98
105
  }
99
- _invalid = false;
106
+ _invalid = null;
100
107
  /** This will be true when the control is in an invalid state.
101
108
  * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly */
102
109
  get invalid() {
@@ -176,7 +183,6 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
176
183
  async showError(message) {
177
184
  if (this.inputEl) {
178
185
  this.inputEl.setCustomValidity(message);
179
- this.validate();
180
186
  this.showInlineValidation();
181
187
  }
182
188
  }
@@ -228,7 +234,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
228
234
  checkFileType(type) {
229
235
  if (!this.accept)
230
236
  return true;
231
- return this.accept.match(type) && this.accept.match(type).length > 0;
237
+ return !!type && this.accept.match(type) && this.accept.match(type).length > 0;
232
238
  }
233
239
  validate = () => {
234
240
  this.errorMessage = '';
@@ -238,24 +244,36 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
238
244
  error = this.inputEl.validationMessage;
239
245
  }
240
246
  else {
241
- this.fileList.forEach((fileItem) => {
242
- error = null;
243
- if (!this.checkFileSize(fileItem.file.size)) {
244
- error =
245
- 'Maximum file size exceeded. Max file size is ' +
246
- this.maxFileSize +
247
- 'Mb';
248
- }
249
- else if (!this.checkFileType(fileItem.file.type))
250
- error = `File type is not allowed (${this.accept})`;
251
- fileItem.validationMessage = error;
252
- fileItem.valid = !error;
253
- });
254
- if (this.fileList.length > this.maxFiles)
255
- error = `Maxinum number of files exceeded (${this.maxFiles})`;
247
+ if (this.fileList.length > this.maxFiles) {
248
+ error = `Maximum number of files exceeded (${this.maxFiles})`;
249
+ }
250
+ else {
251
+ this.fileList.forEach((fileItem) => {
252
+ let listeItemError = null;
253
+ if (!this.checkFileSize(fileItem.file.size)) {
254
+ listeItemError =
255
+ 'Maximum file size exceeded. Max file size is ' +
256
+ this.maxFileSize +
257
+ 'Mb';
258
+ }
259
+ else if (!this.checkFileType(fileItem.file.type)) {
260
+ listeItemError = `File type is not allowed (${this.accept})`;
261
+ }
262
+ fileItem.validationMessage = listeItemError;
263
+ fileItem.valid = !listeItemError;
264
+ if (listeItemError) {
265
+ error = listeItemError;
266
+ }
267
+ });
268
+ }
256
269
  }
257
- if (error)
270
+ if (error) {
258
271
  this.inputEl.setCustomValidity(error);
272
+ }
273
+ else {
274
+ this.inputEl.setCustomValidity('');
275
+ this.errorMessage = '';
276
+ }
259
277
  };
260
278
  showInlineValidation(ev) {
261
279
  if (this.validateOn === 'submitThenDirty')
@@ -371,9 +389,10 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
371
389
  h("div", { class: 'file-upload__' + eleType + '-wrap' }, h("label", { class: `file-upload__` + eleType, htmlFor: this.fileInputId, id: labelId, onDrop: (e) => {
372
390
  this.onDrop(e);
373
391
  this.onDragStop(e);
374
- }, onDragEnd: this.onDragStop, onDragLeave: this.onDragStop, onDragEnter: this.onDragStart, onDragOver: this.onDragStart }, (!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (h("div", { class: `file-upload__label ${this.hideLabel ? 'visually-hide' : ''}` }, !!this.label && !!this.label.length ? this.label : '', !this.label && this.hasLabelSlot && eleType !== 'drop' && (h("slot", { name: "label" })))), eleType === 'drop' && (h("div", { class: "file-upload__drop-area" }, h("div", null, this.hasLabelSlot && h("slot", { name: "label" })), h("div", null, "Drag and drop or\u00A0", h("span", null, "browse")))), eleType === 'btn' && (h("div", { class: `file-upload__button button--keyline button--icon-start ${this.hasFocus ? 'button--focus' : ''}` }, h("div", { class: `file-upload__btn-content` }, h("nano-icon", { name: "regular/cloud-arrow-up" }), h("span", null, this.fileList.length
392
+ }, onDragEnd: this.onDragStop, onDragLeave: this.onDragStop, onDragEnter: this.onDragStart, onDragOver: this.onDragStart }, (!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (h("div", { class: `file-upload__label ${this.hideLabel ? 'visually-hide' : ''}` }, !!this.label && !!this.label.length ? this.label : '', !this.label && this.hasLabelSlot && eleType !== 'drop' && (h("slot", { name: "label" })))), eleType === 'drop' && (h("div", { class: "file-upload__drop-area" }, h("div", null, this.hasLabelSlot && h("slot", { name: "label" })), h("div", null, "Drag and drop or\u00A0", h("span", null, "browse")))), eleType === 'btn' && (h("div", { class: `file-upload__button button--keyline button--icon-start ${this.hasFocus ? 'button--focus' : ''}` }, h("nano-cta", { secondary: true, class: `file-upload__btn-content` }, h("div", { class: "button", disabled: this.disabled }, this.fileList.length
375
393
  ? this.fileList[0].file.name
376
- : this.placeholder), !!this.value && this.clearInput && !this.disabled && (h("button", { type: "button", class: "icon file-upload__clear-btn", tabindex: "-1", onClick: this.onClearClick }, h("nano-icon", { name: "light/xmark" })))))), h("input", { "aria-labelledby": labelId + ' ' + moreId + ' ' + listId, type: "file", id: this.fileInputId, accept: this.accept, class: "file-upload__input", multiple: this.maxFiles > 1, disabled: this.disabled, name: this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
394
+ : this.placeholder)), !!this.value && this.clearable && !this.disabled && (h("button", { type: "button", class: "icon file-upload__clear-btn", tabindex: "0", "aria-label": "Clear selected file", onClick: this.onClearClick }, h("nano-icon", { name: "light/xmark" }))), !this.disabled && this.showInlineError &&
395
+ (this._invalid ? (h("nano-icon", { name: "solid/circle-xmark", class: "file-upload__icon file-upload__icon-error" })) : (h("nano-icon", { name: "solid/circle-check", class: "file-upload__icon file-upload__icon-success" }))))), h("input", { "aria-labelledby": labelId + ' ' + moreId + ' ' + listId, type: "file", id: this.fileInputId, accept: this.accept, class: "file-upload__input", multiple: this.maxFiles > 1, disabled: this.disabled, name: this.canChangeFileList ? undefined : this.name, form: this.form, ref: (input) => {
377
396
  if (this.canChangeFileList) {
378
397
  this.publicInputEl = input;
379
398
  return;
@@ -400,11 +419,12 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
400
419
  ];
401
420
  };
402
421
  render() {
403
- return (h(Host, { key: '2bd95bf5d3c725d84679a373eac2f87b491ae2bd', class: "nano-file-upload" }, h("div", { key: '026b77c3165ea04d5ed9a2f8536fd5089ed3ee8e', class: {
422
+ return (h(Host, { key: '4f495870314e3f688517b34be6749cf2b77810ea', class: "nano-file-upload" }, h("div", { key: '9baa63fe75b200913f82abb4304d73e22fbb4be4', class: {
404
423
  'file-upload': true,
405
424
  'file-upload--dragging': this.isDragging,
406
425
  'file-upload--focus': this.hasFocus,
407
- 'file-upload--invalid': this._invalid,
426
+ 'file-upload--invalid': this._invalid === true,
427
+ 'file-upload--valid': this._invalid === false,
408
428
  } }, this.maxFiles > 1 ? h(this.dropArea, null) : h(this.button, null))));
409
429
  }
410
430
  static get watchers() { return {
@@ -423,16 +443,16 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
423
443
  "capture": [1],
424
444
  "maxFileSize": [2, "max-file-size"],
425
445
  "maxFiles": [2, "max-files"],
426
- "label": [1],
446
+ "label": [6145],
427
447
  "placeholder": [1],
428
448
  "hideLabel": [4, "hide-label"],
429
449
  "required": [4],
430
450
  "disabled": [516],
431
- "clearInput": [4, "clear-input"],
451
+ "clearable": [4],
432
452
  "showInlineError": [516, "show-inline-error"],
433
453
  "validateOn": [1025, "validate-on"],
434
454
  "form": [1],
435
- "invalid": [2564],
455
+ "invalid": [2568],
436
456
  "validityMessage": [2049, "validity-message"],
437
457
  "files": [6160],
438
458
  "value": [6145],
@@ -460,13 +480,18 @@ function defineCustomElement$1() {
460
480
  if (typeof customElements === "undefined") {
461
481
  return;
462
482
  }
463
- const components = ["nano-file-upload", "nano-icon", "nano-icon-button", "nano-tooltip"];
483
+ const components = ["nano-file-upload", "nano-cta", "nano-icon", "nano-icon-button", "nano-tooltip"];
464
484
  components.forEach(tagName => { switch (tagName) {
465
485
  case "nano-file-upload":
466
486
  if (!customElements.get(tagName)) {
467
487
  customElements.define(tagName, FileUpload);
468
488
  }
469
489
  break;
490
+ case "nano-cta":
491
+ if (!customElements.get(tagName)) {
492
+ defineCustomElement$5();
493
+ }
494
+ break;
470
495
  case "nano-icon":
471
496
  if (!customElements.get(tagName)) {
472
497
  defineCustomElement$4();