@nanoporetech-digital/components 5.0.0 → 5.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/cjs/nano-dropdown.cjs.entry.js +1 -1
  3. package/dist/cjs/nano-dropdown.cjs.entry.js.map +1 -1
  4. package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js +1 -1
  5. package/dist/cjs/nano-grid_2.cjs.entry.js +16 -9
  6. package/dist/cjs/nano-grid_2.cjs.entry.js.map +1 -1
  7. package/dist/cjs/nano-input.cjs.entry.js +2 -2
  8. package/dist/cjs/nano-input.cjs.entry.js.map +1 -1
  9. package/dist/cjs/{nano-table-11052a34.js → nano-table-66318604.js} +2 -2
  10. package/dist/cjs/{nano-table-11052a34.js.map → nano-table-66318604.js.map} +1 -1
  11. package/dist/cjs/nano-table.cjs.entry.js +1 -1
  12. package/dist/cjs/{table.worker-83433a8b.js → table.worker-e102343e.js} +2 -2
  13. package/dist/cjs/table.worker-e102343e.js.map +1 -0
  14. package/dist/collection/components/dropdown/dropdown.css +2 -1
  15. package/dist/collection/components/grid/grid.js +16 -9
  16. package/dist/collection/components/grid/grid.js.map +1 -1
  17. package/dist/collection/components/input/input.css +1 -1
  18. package/dist/collection/components/input/input.js +1 -1
  19. package/dist/collection/components/input/input.js.map +1 -1
  20. package/dist/collection/components/select/select.css +1 -1
  21. package/dist/components/dropdown.js +1 -1
  22. package/dist/components/dropdown.js.map +1 -1
  23. package/dist/components/grid.js +16 -9
  24. package/dist/components/grid.js.map +1 -1
  25. package/dist/components/input.js +2 -2
  26. package/dist/components/input.js.map +1 -1
  27. package/dist/components/select.js +1 -1
  28. package/dist/esm/nano-dropdown.entry.js +1 -1
  29. package/dist/esm/nano-dropdown.entry.js.map +1 -1
  30. package/dist/esm/nano-global-nav-user-profile_3.entry.js +1 -1
  31. package/dist/esm/nano-grid_2.entry.js +16 -9
  32. package/dist/esm/nano-grid_2.entry.js.map +1 -1
  33. package/dist/esm/nano-input.entry.js +2 -2
  34. package/dist/esm/nano-input.entry.js.map +1 -1
  35. package/dist/esm/{nano-table-ba637f26.js → nano-table-eda322db.js} +2 -2
  36. package/dist/esm/{nano-table-ba637f26.js.map → nano-table-eda322db.js.map} +1 -1
  37. package/dist/esm/nano-table.entry.js +1 -1
  38. package/dist/esm/{table.worker-1cae39c9.js → table.worker-245a7006.js} +2 -2
  39. package/dist/esm/table.worker-245a7006.js.map +1 -0
  40. package/dist/nano-components/nano-components.esm.js +1 -1
  41. package/dist/nano-components/p-17b099cc.entry.js +5 -0
  42. package/dist/nano-components/p-17b099cc.entry.js.map +1 -0
  43. package/dist/nano-components/{p-deb0799c.entry.js → p-40b1c72f.entry.js} +2 -2
  44. package/dist/nano-components/{p-deb0799c.entry.js.map → p-40b1c72f.entry.js.map} +1 -1
  45. package/dist/nano-components/{p-158c73b0.entry.js → p-5157d7ba.entry.js} +2 -2
  46. package/dist/nano-components/{p-fc585ea2.js → p-99167ef0.js} +2 -2
  47. package/dist/nano-components/p-9b5429e1.entry.js +5 -0
  48. package/dist/nano-components/p-9b5429e1.entry.js.map +1 -0
  49. package/dist/nano-components/{p-553acf24.entry.js → p-d1a5326f.entry.js} +2 -2
  50. package/dist/nano-components/{p-365c997a.js → p-df264b79.js} +2 -2
  51. package/docs-json.json +6 -1
  52. package/hydrate/index.js +20 -13
  53. package/package.json +2 -2
  54. package/dist/cjs/table.worker-83433a8b.js.map +0 -1
  55. package/dist/esm/table.worker-1cae39c9.js.map +0 -1
  56. package/dist/nano-components/p-00cf8021.entry.js +0 -5
  57. package/dist/nano-components/p-00cf8021.entry.js.map +0 -1
  58. package/dist/nano-components/p-87bc66b5.entry.js +0 -5
  59. package/dist/nano-components/p-87bc66b5.entry.js.map +0 -1
  60. /package/dist/nano-components/{p-158c73b0.entry.js.map → p-5157d7ba.entry.js.map} +0 -0
  61. /package/dist/nano-components/{p-fc585ea2.js.map → p-99167ef0.js.map} +0 -0
  62. /package/dist/nano-components/{p-553acf24.entry.js.map → p-d1a5326f.entry.js.map} +0 -0
  63. /package/dist/nano-components/{p-365c997a.js.map → p-df264b79.js.map} +0 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,33 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [5.1.1](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v5.1.0...v5.1.1) (2023-07-12)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **input:** datalists cut off from `container-type` css ([8984953](https://git.oxfordnanolabs.local/Digital/nano-components/commits/8984953c4e1567b196b3e20ccf72686ed36f3cdd))
12
+
13
+
14
+
15
+
16
+
17
+ # [5.1.0](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v5.0.0...v5.1.0) (2023-07-12)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * **grid:** stop content dictating col width. Insert more explicit css row rules. ([e6e5702](https://git.oxfordnanolabs.local/Digital/nano-components/commits/e6e570204d7f65d2de10ca876fb9b36fc6c452ad))
23
+
24
+
25
+ ### Features
26
+
27
+ * **dropdown:** make `auto` the default value for `--overflow`. ([7051139](https://git.oxfordnanolabs.local/Digital/nano-components/commits/7051139578a32ff28e5de1809b8df24142507c68))
28
+
29
+
30
+
31
+
32
+
6
33
  # [5.0.0](https://git.oxfordnanolabs.local/Digital/nano-components/compare/v4.10.0...v5.0.0) (2023-07-07)
7
34
 
8
35
 
package/dist/cjs/nano-dropdown.cjs.entry.js CHANGED
@@ -10,7 +10,7 @@ const activeElement = require('./active-element-2f9bf0aa.js');
10
10
  const popover = require('./popover-088646b2.js');
11
11
  const tabbable = require('./tabbable-4a2b1566.js');
12
12
 
13
- const dropdownCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:hidden;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--menu-height:var(--max-menu-height, 50vh);display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width)}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;min-block-size:20px;overflow:var(--overflow);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";
13
+ const dropdownCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:auto;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--menu-height:var(--max-menu-height, 50vh);display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width)}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;min-block-size:20px;overflow:var(--overflow);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";
14
14
 
15
15
  let dropDownIds = 0;
16
16
  const Dropdown = class {
package/dist/cjs/nano-dropdown.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"nano-dropdown.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,WAAW,GAAG,8tDAA8tD;;ACiBlvD,IAAI,WAAW,GAAG,CAAC,CAAC;MAaP,QAAQ;;;;;;;IACX,eAAU,GAAG,YAAY,WAAW,EAAE,EAAE,CAAC;IACzC,YAAO,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;IACrC,sBAAiB,GAAG,KAAK,CAAC;IAM1B,YAAO,GAAG,KAAK,CAAC;IAuOhB,gBAAW,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,QAAQ;QAAE,OAAO;MAC3B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;KACvC,CAAC;IAgFM,yBAAoB,GAAG,CAAC,KAAoB;;MAElD,IAAI,CAAC,WAAW,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;QACrD,IAAI,CAAC,IAAI,EAAE,CAAC;QACZ,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,IAAI,CAAC,IAAI;UAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;OACrC;KACF,CAAC;IAEM,4BAAuB,GAAG;MAChC,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC,CAAC;oBA/TiB,IAAI;gBAGwB,KAAK;yBAsB5B,IAAI;;oBAWI,IAAI;qBAYE,cAAc;oBAKjC,CAAC;oBAKD,CAAC;iBAMJ,KAAK;;;;EAvErB,IAAY,IAAI;IACd,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,WAAW,CAAwB,CAAC;GACpE;EAWD,gBAAgB;IACd,IAAI,IAAI,CAAC,iBAAiB;MAAE,OAAO;IAEnC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;IAEtC,IAAI,IAAI,CAAC,iBAAiB,EAAE;MAC1B,IAAI,CAAC,iBAAiB,CAAC,YAAY,CACjC,eAAe,EACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CACrB,CAAC;MACF,OAAO;KACR;IAED,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAChC;EAmBD,oBAAoB;IAClB,IAAI,CAAC,aAAa,EAAE,CAAC;IACrB,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAChC;EA4BD,0BAA0B;IACxB,IAAI,CAAC,IAAI,CAAC,OAAO;MAAE,OAAO;IAE1B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;MACtB,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,UAAU;MAC3C,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;KACxB,CAAC,CAAC;GACJ;;EAqCD,aAAa,CAAC,EAAe;IAC3B,IAAI,CAAE,EAAE,CAAC,MAA6B,CAAC,aAAa;MAAE,OAAO;IAC7D,EAAE,CAAC,eAAe,EAAE,CAAC;IAErB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACpC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CACzB,eAAe,EACf;MACE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;KACxC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;IAEF,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS;MACvB,EAAE,CAAC,MAA6B,CAAC,aAAa,CAAC,YAAY,GAAG,IAAI,CAAC;GACvE;EAGD,cAAc,CAAC,EAAe;IAC5B,IAAI,CAAE,EAAE,CAAC,MAA6B,CAAC,aAAa;MAAE,OAAO;IAC7D,EAAE,CAAC,eAAe,EAAE,CAAC;IACrB,IAAI,CAAE,EAAE,CAAC,MAAsB,CAAC,aAAa;MAAE,OAAO;IACtD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS;MACvB,EAAE,CAAC,MAAsB,CAAC,aAAa,CAAC,YAAY,GAAG,IAAI,CAAC;GAChE;EAGD,iBAAiB,CAAC,KAAkB;IAClC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;;IAG3C,IAAI,IAAI,CAAC,aAAa,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW;MACpE,IAAI,CAAC,IAAI,EAAE,CAAC;GACf;;;EAMD,MAAM,IAAI;IACR,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IAEjB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IAEtC,IAAI,QAAQ,CAAC,gBAAgB,EAAE;MAC7B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;MAC/B,OAAO;KACR;IAED,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACpB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;IAE/B,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;IACrE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;GAClE;;EAID,MAAM,IAAI;IACR,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAElB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IAEtC,IAAI,QAAQ,CAAC,gBAAgB,EAAE;MAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;MAC/B,OAAO;KACR;IAED,IAAI,IAAI,CAAC,OAAO;MAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACtC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;IAE/B,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;IACxE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAEpE,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAAE;MACtD,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;KAChC;GACF;;;;;;;;EAUO,iBAAiB,CAAC,CAAS;;IACjC,MAAMA,eAAa,GAAGC,8BAAgB,EAAE,CAAC;IAEzC,IAAI,CAAC,KAAI,MAAA,CAAC,CAAC,YAAY,EAAE,0CAAE,MAAM,CAAA,EAAE;MACjC,MAAM,QAAQ,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;MACnE,OAAO,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,QAAQ,CAAC;KACvE;IAED,QACED,eAAa;MACbA,eAAa,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;QACjE,IAAI,CAAC,iBAAiB;MACxBA,eAAa,KAAK,IAAI,CAAC,iBAAiB,EACxC;GACH;;;;EAUO,uBAAuB;IAC7B,IAAI,CAAC,IAAI,CAAC,OAAO;MAAE,OAAO;IAE1B,IAAI,iBAA8B,CAAC;IACnC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;IAE9B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CACjC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAC/C,CAAC;MACF,iBAAiB,GAAG,gBAAgB,CAAC,GAAG,CAACE,kCAAyB,CAAC,CAAC,CAAC,CAAC,CAAC;KACxE;SAAM;MACL,iBAAiB,GAAGA,kCAAyB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC9D;IAED,IAAI,iBAAiB,EAAE;MACrB,iBAAiB,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;MACxD,iBAAiB,CAAC,YAAY,CAC5B,eAAe,EACf,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,CAC7B,CAAC;MACF,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;KAC5C;GACF;;EAIO,qBAAqB,CAAC,KAAoB;;IAEhD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;MAC1B,IAAI,CAAC,IAAI,EAAE,CAAC;MACZ,OAAO;KACR;;IAGD,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;MACvB,UAAU,CAAC;QACT,IACE,QAAQ,CAAC,aAAa;UACtB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAC5B,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,WAAW,EAAE,CAC7C,KAAK,IAAI,CAAC,iBAAiB,EAC5B;UACA,IAAI,CAAC,IAAI,EAAE,CAAC;UACZ,OAAO;SACR;OACF,CAAC,CAAC;KACJ;;IAGD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;;MAE7D,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;QAAE,OAAO;MACxD,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;MACrB,OAAO;KACR;;IAGD,MAAM,KAAK,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IACnC,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,EAAE;MACtE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;MAC9D,OAAO;KACR;GACF;EAEO,uBAAuB,CAAC,KAAiB;;IAG/C,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE;MAClC,IAAI,CAAC,IAAI,EAAE,CAAC;MACZ,OAAO;KACR;GACF;EAiBO,aAAa;IACnB,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,UAAU;MAAE,OAAO;IAElE,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,IAAI,CAAC,IAAI;QAAE,IAAI,CAAC,IAAI,EAAE,CAAC;MAC3B,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;MACvB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;IAED,IAAI,CAAC,OAAO,GAAG,IAAIC,eAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE;MACzE,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,UAAU;MAC3C,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,iBAAiB,EAAE,IAAI,CAAC,KAAK;MAC7B,WAAW,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;MAC5C,WAAW,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;MAC5C,eAAe,EAAE;QACf,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;UACd,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC;SAC1B;aAAM,IAAI,IAAI,CAAC,IAAI,EAAE;UACpB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC/B;OACF;KACF,CAAC,CAAC;;IAEH,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;GACF;;EAID,iBAAiB;IACf,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnE,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEvE,IAAI,CAAC,IAAI,CAAC,iBAAiB;MAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC;GACjE;EAED,gBAAgB;IACd,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACpB,IAAI,CAAC,aAAa,EAAE,CAAC;IACrB,UAAU,CAAC,MAAM,IAAI,CAAC,uBAAuB,EAAE,EAAE,GAAG,CAAC,CAAC;GACvD;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW;MAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IACvC,IAAI,IAAI,CAAC,OAAO;MAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;GAC1C;EAED,MAAM;IACJ,QACEC,iBACE,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,gBAAgB,EAAE,IAAI,CAAC,IAAI;OAC5B,IAEDA,kBACE,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,mBAAmB,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAChC,SAAS,EAAE,IAAI,CAAC,oBAAoB,EACpC,OAAO,EAAE,IAAI,CAAC,WAAW,IAEzBA,kBAAM,IAAI,EAAC,SAAS,EAAC,YAAY,EAAE,IAAI,CAAC,uBAAuB,GAAI,CAC9D,EAEPA,iBAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,sBAAsB,IACpEA,iBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,mBAAmB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,iBAClD,CAAC,IAAI,CAAC,IAAI,EACvB,IAAI,EACF,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,OAAO,GAAG,OAAO,GAAG,QAAQ,gBAG/D,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,OAAO,GAAG,SAAS,GAAG,MAAM,qBAEhD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,IAE3D,IAAI,CAAC,WAAW,KACfA,kBACE,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAC,4BAA4B,eAEhC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,OAAO;UACtC,SAAS;UACT,QAAQ,IAGb,IAAI,CAAC,WAAW,CACZ,CACR,EACDA,qBAAQ,CACJ,CACF,CACF,EACN;GACH;;;;;;;;;;;;;;;","names":["activeElement","getActiveElement","getNearestTabbableElement","Popover","h"],"sources":["./src/components/dropdown/dropdown.scss?tag=nano-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /**\n * @prop --width: width of the dropdown. Defaults to 'auto'\n * @prop --border: Defaults to #{$layer-border-style}\n * @prop --border-radius: Defaults to #{$layer-bg-color};\n * @prop --background: Defaults to #{$layer-bg-color};\n * @prop --padding: padding of the drop down. Default to '10px 0';\n * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;\n * @prop --dropdown-z-index: Defaults to #{$layer-index-dropdown};\n * @prop --min-width: Defaults to 0;\n * @prop --box-shadow: #{$layer-shadow-large};\n */\n\n --width: auto;\n --border: #{$layer-border-style};\n --border-radius: #{$layer-border-radius};\n --background: #{$layer-bg-color};\n --padding: 10px 0;\n --overflow: hidden;\n --dropdown-z-index: #{$layer-index-dropdown};\n --min-width: 0;\n --box-shadow: #{$layer-shadow-large};\n --menu-height: var(--max-menu-height, 50vh);\n\n display: flex;\n}\n\n.dropdown {\n position: relative;\n\n &__trigger {\n display: block;\n }\n\n &__positioner {\n position: absolute;\n z-index: var(--dropdown-z-index);\n min-inline-size: var(--min-width);\n\n @media (max-width: 35.9375em) {\n z-index: 100;\n }\n }\n\n &__panel {\n padding: var(--padding);\n background: var(--background);\n min-inline-size: var(--min-width);\n inline-size: var(--width);\n border: var(--border);\n border-radius: var(--border-radius);\n color: currentcolor;\n box-shadow: var(--box-shadow);\n opacity: 0;\n transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;\n min-block-size: 20px;\n overflow: var(--overflow);\n box-sizing: content-box !important;\n\n &.loading {\n overflow-y: hidden;\n }\n\n &.top {\n transform: translateY(-20px) translateZ(0);\n }\n\n &.bottom {\n transform: translateY(20px) translateZ(0);\n }\n\n .dropdown__positioner.popover-visible & {\n opacity: 1;\n transform: translateY(0) translateZ(0);\n }\n\n ::slotted(nano-menu) {\n max-block-size: var(--menu-height);\n }\n }\n\n &__accessible-title {\n @include visually-hide();\n }\n}\n","import {\n Component,\n Element,\n Event,\n Method,\n Prop,\n Watch,\n h,\n Listen,\n ComponentInterface,\n EventEmitter,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport Popover, { PopoverPlacement } from '../../utils/popover';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../../interface';\n\nlet dropDownIds = 0;\n\n/**\n * Dropdowns show additional content in a panel.\n * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).\n * @slot trigger - The dropdown's trigger.\n * @slot - The dropdown's content.\n */\n@Component({\n tag: 'nano-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n private dropdownId = `dropdown-${dropDownIds++}`;\n private labelId = this.dropdownId + '-title';\n private ignoreOpenWatcher = false;\n private panel: HTMLElement;\n private popover: Popover;\n private trigger: HTMLElement;\n private positioner: HTMLElement;\n private accessibleTrigger: HTMLElement;\n private didLoad = false;\n private get menu() {\n return this.host.querySelector('nano-menu') as HTMLNanoMenuElement;\n }\n\n @Element() host: HTMLNanoDropdownElement;\n\n /** Determines if the dropdown should open automatically when the trigger is clicked */\n @Prop() autoOpen = true;\n\n /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch('open')\n handleOpenChange() {\n if (this.ignoreOpenWatcher) return;\n\n this.open ? this.show() : this.hide();\n\n if (this.accessibleTrigger) {\n this.accessibleTrigger.setAttribute(\n 'aria-expanded',\n this.open.toString()\n );\n return;\n }\n\n this.updateAccessibleTrigger();\n }\n\n /**\n * Determines whether the dropdown should hide when a menu item is selected.\n */\n @Prop() closeOnSelect = true;\n\n /**\n * The dropdown will close when the user interacts outside of this element (e.g. clicking).\n */\n @Prop({ mutable: true }) containingElement: HTMLElement;\n\n /**\n * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\n * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)\n */\n @Prop() tetherTo: HTMLElement = null;\n\n @Watch('tetherTo')\n handleTetherToChange() {\n this.createPopover();\n this.updateAccessibleTrigger();\n }\n\n /**\n * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n * inside of the viewport.\n */\n @Prop() placement: PopoverPlacement = 'bottom-start';\n\n /**\n * The distance in pixels from which to offset the panel away from its trigger.\n */\n @Prop() distance = 2;\n\n /**\n * The distance in pixels from which to offset the panel along its trigger.\n */\n @Prop() skidding = 0;\n\n /**\n * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto|scroll`.\n */\n @Prop() hoist = false;\n\n @Watch('placement')\n @Watch('distance')\n @Watch('skidding')\n @Watch('hoist')\n handlePopoverOptionsChange() {\n if (!this.popover) return;\n\n this.popover.setOptions({\n strategy: this.hoist ? 'fixed' : 'absolute',\n placement: this.placement,\n skidding: this.skidding,\n distance: this.distance,\n });\n }\n\n /**\n * Title used to describe the dropdown content for accessibility\n */\n @Prop() dialogTitle!: string;\n\n // Events\n\n /**\n * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.\n */\n @Event() nanoShow: EventEmitter;\n\n /**\n * Emitted after the dropdown opens and all transitions are complete.\n */\n @Event() nanoAfterShow: EventEmitter;\n\n /**\n * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.\n */\n @Event() nanoHide: EventEmitter;\n\n /**\n * Emitted after the dropdown closes and all transitions are complete.\n */\n @Event() nanoAfterHide: EventEmitter;\n\n // this is a massive hack to make stencil expose the `EventEmitter` type in the final build\n // because the `Dropdown` class is used as a type in `nano-datalist`\n /** @internal */\n @Prop() eventType: EventEmitter;\n\n // Listeners\n\n @Listen('nanoOpen')\n secondaryOpen(ev: CustomEvent) {\n if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n ev.stopPropagation();\n\n this.panel.classList.add('loading');\n this.panel.addEventListener(\n 'transitionend',\n () => {\n this.panel.classList.remove('loading');\n },\n { once: true }\n );\n\n this.panel.style.minHeight =\n (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n }\n\n @Listen('nanoClose')\n secondaryClose(ev: CustomEvent) {\n if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n ev.stopPropagation();\n if (!(ev.target as HTMLElement).parentElement) return;\n this.panel.style.minHeight =\n (ev.target as HTMLElement).parentElement.scrollHeight + 'px';\n }\n\n @Listen('nanoSelect')\n handlePanelSelect(event: CustomEvent) {\n const target = event.target as HTMLElement;\n\n // Hide the dropdown when a menu item is selected\n if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')\n this.hide();\n }\n\n // Methods\n\n /** Shows the dropdown panel */\n @Method()\n async show() {\n this.ignoreOpenWatcher = true;\n this.open = true;\n\n const nanoShow = this.nanoShow.emit();\n\n if (nanoShow.defaultPrevented) {\n this.open = false;\n this.ignoreOpenWatcher = false;\n return;\n }\n\n this.popover.show();\n this.ignoreOpenWatcher = false;\n\n document.addEventListener('mousedown', this.handleDocumentMouseDown);\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n }\n\n /** Hides the dropdown panel */\n @Method()\n async hide() {\n this.ignoreOpenWatcher = true;\n this.open = false;\n\n const nanoHide = this.nanoHide.emit();\n\n if (nanoHide.defaultPrevented) {\n this.open = true;\n this.ignoreOpenWatcher = false;\n return;\n }\n\n if (this.popover) this.popover.hide();\n this.ignoreOpenWatcher = false;\n\n document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n if (this.accessibleTrigger && this.focusEleInDropDwn()) {\n this.accessibleTrigger.focus();\n }\n }\n\n // Private methods\n\n /**\n * Decides if the current active element or element\n * connected to the current event is connected to the Dropdown\n * @param e\n * @returns whether the current focus is within the dropdown\n */\n private focusEleInDropDwn(e?: Event) {\n const activeElement = getActiveElement();\n\n if (e && e.composedPath()?.length) {\n const ddInPath = e.composedPath().includes(this.containingElement);\n return !e.composedPath().includes(this.accessibleTrigger) && ddInPath;\n }\n\n return (\n activeElement &&\n activeElement.closest(this.containingElement.tagName.toLowerCase()) ===\n this.containingElement &&\n activeElement !== this.accessibleTrigger\n );\n }\n\n private togglePanel = () => {\n if (!this.autoOpen) return;\n this.open ? this.hide() : this.show();\n };\n\n // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n private updateAccessibleTrigger() {\n if (!this.didLoad) return;\n\n let accessibleTrigger: HTMLElement;\n this.accessibleTrigger = null;\n\n if (!this.tetherTo) {\n const assignedElements = Array.from(\n this.host.querySelectorAll('[slot=\"trigger\"]')\n );\n accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];\n } else {\n accessibleTrigger = getNearestTabbableElement(this.tetherTo);\n }\n\n if (accessibleTrigger) {\n accessibleTrigger.setAttribute('aria-haspopup', 'true');\n accessibleTrigger.setAttribute(\n 'aria-expanded',\n this.open ? 'true' : 'false'\n );\n this.accessibleTrigger = accessibleTrigger;\n }\n }\n\n // Handlers\n\n private handleDocumentKeyDown(event: KeyboardEvent) {\n // Close when escape is pressed\n if (event.key === 'Escape') {\n this.hide();\n return;\n }\n\n // Close when tabbing results in the focus leaving the close element\n if (event.key === 'Tab') {\n setTimeout(() => {\n if (\n document.activeElement &&\n document.activeElement.closest(\n this.containingElement.tagName.toLowerCase()\n ) !== this.containingElement\n ) {\n this.hide();\n return;\n }\n });\n }\n\n // If a menu is present, focus on it when certain keys are pressed\n if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n // must have menu item, must have pressed down, must be open and must not have focus within dd\n if (!this.open || this.focusEleInDropDwn(event)) return;\n event.preventDefault();\n this.menu.setFocus();\n return;\n }\n\n // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)\n const ePath = event.composedPath();\n if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {\n this.menu.dispatchEvent(new KeyboardEvent(event.type, event));\n return;\n }\n }\n\n private handleDocumentMouseDown(event: MouseEvent) {\n // Close when clicking outside of the close element\n\n if (!this.focusEleInDropDwn(event)) {\n this.hide();\n return;\n }\n }\n\n private handleTriggerKeyDown = (event: KeyboardEvent) => {\n // Open the panel when pressing down or up while focused on the trigger\n if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n this.show();\n event.preventDefault();\n event.stopPropagation();\n\n if (this.menu) this.menu.setFocus();\n }\n };\n\n private handleTriggerSlotChange = () => {\n this.updateAccessibleTrigger();\n };\n\n private createPopover() {\n if ((!this.tetherTo && !this.trigger) || !this.positioner) return;\n\n if (this.popover) {\n if (this.open) this.hide();\n this.popover.destroy();\n this.popover = null;\n }\n\n this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {\n strategy: this.hoist ? 'fixed' : 'absolute',\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n transitionElement: this.panel,\n onAfterHide: () => this.nanoAfterHide.emit(),\n onAfterShow: () => this.nanoAfterShow.emit(),\n onTransitionEnd: () => {\n if (!this.open) {\n this.panel.scrollTop = 0;\n } else if (this.menu) {\n this.menu.showActiveElement();\n }\n },\n });\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n // Stencil hooks\n\n connectedCallback() {\n this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n\n if (!this.containingElement) this.containingElement = this.host;\n }\n\n componentDidLoad() {\n this.didLoad = true;\n this.createPopover();\n setTimeout(() => this.updateAccessibleTrigger(), 100);\n }\n\n disconnectedCallback() {\n if (this.host.isConnected) this.hide();\n if (this.popover) this.popover.destroy();\n }\n\n render() {\n return (\n <div\n part=\"base\"\n id={this.dropdownId}\n class={{\n dropdown: true,\n 'dropdown--open': this.open,\n }}\n >\n <span\n part=\"trigger\"\n class=\"dropdown__trigger\"\n ref={(el) => (this.trigger = el)}\n onKeyDown={this.handleTriggerKeyDown}\n onClick={this.togglePanel}\n >\n <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n </span>\n\n <div ref={(el) => (this.positioner = el)} class=\"dropdown__positioner\">\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class={`dropdown__panel ${this.placement.split('-').join(' ')}`}\n aria-hidden={!this.open}\n role={\n this.host.getAttribute('role') === 'group' ? 'group' : 'dialog'\n }\n aria-modal={\n this.host.getAttribute('role') === 'group' ? undefined : 'true'\n }\n aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n >\n {this.dialogTitle && (\n <span\n id={this.labelId}\n class=\"dropdown__accessible-title\"\n aria-live={\n this.host.getAttribute('role') === 'group'\n ? undefined\n : 'polite'\n }\n >\n {this.dialogTitle}\n </span>\n )}\n <slot />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"nano-dropdown.entry.cjs.js","mappings":"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","names":["activeElement","getActiveElement","getNearestTabbableElement","Popover","h"],"sources":["./src/components/dropdown/dropdown.scss?tag=nano-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /**\n * @prop --width: width of the dropdown. Defaults to 'auto'\n * @prop --border: Defaults to #{$layer-border-style}\n * @prop --border-radius: Defaults to #{$layer-bg-color};\n * @prop --background: Defaults to #{$layer-bg-color};\n * @prop --padding: padding of the drop down. Default to '10px 0';\n * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;\n * @prop --dropdown-z-index: Defaults to #{$layer-index-dropdown};\n * @prop --min-width: Defaults to 0;\n * @prop --box-shadow: #{$layer-shadow-large};\n * @prop --max-menu-height: max height of a slotted menu. defaults to 50vh\n */\n\n --width: auto;\n --border: #{$layer-border-style};\n --border-radius: #{$layer-border-radius};\n --background: #{$layer-bg-color};\n --padding: 10px 0;\n --overflow: auto;\n --dropdown-z-index: #{$layer-index-dropdown};\n --min-width: 0;\n --box-shadow: #{$layer-shadow-large};\n --menu-height: var(--max-menu-height, 50vh);\n\n display: flex;\n}\n\n.dropdown {\n position: relative;\n\n &__trigger {\n display: block;\n }\n\n &__positioner {\n position: absolute;\n z-index: var(--dropdown-z-index);\n min-inline-size: var(--min-width);\n\n @media (max-width: 35.9375em) {\n z-index: 100;\n }\n }\n\n &__panel {\n padding: var(--padding);\n background: var(--background);\n min-inline-size: var(--min-width);\n inline-size: var(--width);\n border: var(--border);\n border-radius: var(--border-radius);\n color: currentcolor;\n box-shadow: var(--box-shadow);\n opacity: 0;\n transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;\n min-block-size: 20px;\n overflow: var(--overflow);\n box-sizing: content-box !important;\n\n &.loading {\n overflow-y: hidden;\n }\n\n &.top {\n transform: translateY(-20px) translateZ(0);\n }\n\n &.bottom {\n transform: translateY(20px) translateZ(0);\n }\n\n .dropdown__positioner.popover-visible & {\n opacity: 1;\n transform: translateY(0) translateZ(0);\n }\n\n ::slotted(nano-menu) {\n max-block-size: var(--menu-height);\n }\n }\n\n &__accessible-title {\n @include visually-hide();\n }\n}\n","import {\n Component,\n Element,\n Event,\n Method,\n Prop,\n Watch,\n h,\n Listen,\n ComponentInterface,\n EventEmitter,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport Popover, { PopoverPlacement } from '../../utils/popover';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../../interface';\n\nlet dropDownIds = 0;\n\n/**\n * Dropdowns show additional content in a panel.\n * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).\n * @slot trigger - The dropdown's trigger.\n * @slot - The dropdown's content.\n */\n@Component({\n tag: 'nano-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n private dropdownId = `dropdown-${dropDownIds++}`;\n private labelId = this.dropdownId + '-title';\n private ignoreOpenWatcher = false;\n private panel: HTMLElement;\n private popover: Popover;\n private trigger: HTMLElement;\n private positioner: HTMLElement;\n private accessibleTrigger: HTMLElement;\n private didLoad = false;\n private get menu() {\n return this.host.querySelector('nano-menu') as HTMLNanoMenuElement;\n }\n\n @Element() host: HTMLNanoDropdownElement;\n\n /** Determines if the dropdown should open automatically when the trigger is clicked */\n @Prop() autoOpen = true;\n\n /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch('open')\n handleOpenChange() {\n if (this.ignoreOpenWatcher) return;\n\n this.open ? this.show() : this.hide();\n\n if (this.accessibleTrigger) {\n this.accessibleTrigger.setAttribute(\n 'aria-expanded',\n this.open.toString()\n );\n return;\n }\n\n this.updateAccessibleTrigger();\n }\n\n /**\n * Determines whether the dropdown should hide when a menu item is selected.\n */\n @Prop() closeOnSelect = true;\n\n /**\n * The dropdown will close when the user interacts outside of this element (e.g. clicking).\n */\n @Prop({ mutable: true }) containingElement: HTMLElement;\n\n /**\n * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\n * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)\n */\n @Prop() tetherTo: HTMLElement = null;\n\n @Watch('tetherTo')\n handleTetherToChange() {\n this.createPopover();\n this.updateAccessibleTrigger();\n }\n\n /**\n * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n * inside of the viewport.\n */\n @Prop() placement: PopoverPlacement = 'bottom-start';\n\n /**\n * The distance in pixels from which to offset the panel away from its trigger.\n */\n @Prop() distance = 2;\n\n /**\n * The distance in pixels from which to offset the panel along its trigger.\n */\n @Prop() skidding = 0;\n\n /**\n * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto|scroll`.\n */\n @Prop() hoist = false;\n\n @Watch('placement')\n @Watch('distance')\n @Watch('skidding')\n @Watch('hoist')\n handlePopoverOptionsChange() {\n if (!this.popover) return;\n\n this.popover.setOptions({\n strategy: this.hoist ? 'fixed' : 'absolute',\n placement: this.placement,\n skidding: this.skidding,\n distance: this.distance,\n });\n }\n\n /**\n * Title used to describe the dropdown content for accessibility\n */\n @Prop() dialogTitle!: string;\n\n // Events\n\n /**\n * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.\n */\n @Event() nanoShow: EventEmitter;\n\n /**\n * Emitted after the dropdown opens and all transitions are complete.\n */\n @Event() nanoAfterShow: EventEmitter;\n\n /**\n * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.\n */\n @Event() nanoHide: EventEmitter;\n\n /**\n * Emitted after the dropdown closes and all transitions are complete.\n */\n @Event() nanoAfterHide: EventEmitter;\n\n // this is a massive hack to make stencil expose the `EventEmitter` type in the final build\n // because the `Dropdown` class is used as a type in `nano-datalist`\n /** @internal */\n @Prop() eventType: EventEmitter;\n\n // Listeners\n\n @Listen('nanoOpen')\n secondaryOpen(ev: CustomEvent) {\n if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n ev.stopPropagation();\n\n this.panel.classList.add('loading');\n this.panel.addEventListener(\n 'transitionend',\n () => {\n this.panel.classList.remove('loading');\n },\n { once: true }\n );\n\n this.panel.style.minHeight =\n (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n }\n\n @Listen('nanoClose')\n secondaryClose(ev: CustomEvent) {\n if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n ev.stopPropagation();\n if (!(ev.target as HTMLElement).parentElement) return;\n this.panel.style.minHeight =\n (ev.target as HTMLElement).parentElement.scrollHeight + 'px';\n }\n\n @Listen('nanoSelect')\n handlePanelSelect(event: CustomEvent) {\n const target = event.target as HTMLElement;\n\n // Hide the dropdown when a menu item is selected\n if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')\n this.hide();\n }\n\n // Methods\n\n /** Shows the dropdown panel */\n @Method()\n async show() {\n this.ignoreOpenWatcher = true;\n this.open = true;\n\n const nanoShow = this.nanoShow.emit();\n\n if (nanoShow.defaultPrevented) {\n this.open = false;\n this.ignoreOpenWatcher = false;\n return;\n }\n\n this.popover.show();\n this.ignoreOpenWatcher = false;\n\n document.addEventListener('mousedown', this.handleDocumentMouseDown);\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n }\n\n /** Hides the dropdown panel */\n @Method()\n async hide() {\n this.ignoreOpenWatcher = true;\n this.open = false;\n\n const nanoHide = this.nanoHide.emit();\n\n if (nanoHide.defaultPrevented) {\n this.open = true;\n this.ignoreOpenWatcher = false;\n return;\n }\n\n if (this.popover) this.popover.hide();\n this.ignoreOpenWatcher = false;\n\n document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n if (this.accessibleTrigger && this.focusEleInDropDwn()) {\n this.accessibleTrigger.focus();\n }\n }\n\n // Private methods\n\n /**\n * Decides if the current active element or element\n * connected to the current event is connected to the Dropdown\n * @param e\n * @returns whether the current focus is within the dropdown\n */\n private focusEleInDropDwn(e?: Event) {\n const activeElement = getActiveElement();\n\n if (e && e.composedPath()?.length) {\n const ddInPath = e.composedPath().includes(this.containingElement);\n return !e.composedPath().includes(this.accessibleTrigger) && ddInPath;\n }\n\n return (\n activeElement &&\n activeElement.closest(this.containingElement.tagName.toLowerCase()) ===\n this.containingElement &&\n activeElement !== this.accessibleTrigger\n );\n }\n\n private togglePanel = () => {\n if (!this.autoOpen) return;\n this.open ? this.hide() : this.show();\n };\n\n // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n private updateAccessibleTrigger() {\n if (!this.didLoad) return;\n\n let accessibleTrigger: HTMLElement;\n this.accessibleTrigger = null;\n\n if (!this.tetherTo) {\n const assignedElements = Array.from(\n this.host.querySelectorAll('[slot=\"trigger\"]')\n );\n accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];\n } else {\n accessibleTrigger = getNearestTabbableElement(this.tetherTo);\n }\n\n if (accessibleTrigger) {\n accessibleTrigger.setAttribute('aria-haspopup', 'true');\n accessibleTrigger.setAttribute(\n 'aria-expanded',\n this.open ? 'true' : 'false'\n );\n this.accessibleTrigger = accessibleTrigger;\n }\n }\n\n // Handlers\n\n private handleDocumentKeyDown(event: KeyboardEvent) {\n // Close when escape is pressed\n if (event.key === 'Escape') {\n this.hide();\n return;\n }\n\n // Close when tabbing results in the focus leaving the close element\n if (event.key === 'Tab') {\n setTimeout(() => {\n if (\n document.activeElement &&\n document.activeElement.closest(\n this.containingElement.tagName.toLowerCase()\n ) !== this.containingElement\n ) {\n this.hide();\n return;\n }\n });\n }\n\n // If a menu is present, focus on it when certain keys are pressed\n if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n // must have menu item, must have pressed down, must be open and must not have focus within dd\n if (!this.open || this.focusEleInDropDwn(event)) return;\n event.preventDefault();\n this.menu.setFocus();\n return;\n }\n\n // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)\n const ePath = event.composedPath();\n if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {\n this.menu.dispatchEvent(new KeyboardEvent(event.type, event));\n return;\n }\n }\n\n private handleDocumentMouseDown(event: MouseEvent) {\n // Close when clicking outside of the close element\n\n if (!this.focusEleInDropDwn(event)) {\n this.hide();\n return;\n }\n }\n\n private handleTriggerKeyDown = (event: KeyboardEvent) => {\n // Open the panel when pressing down or up while focused on the trigger\n if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n this.show();\n event.preventDefault();\n event.stopPropagation();\n\n if (this.menu) this.menu.setFocus();\n }\n };\n\n private handleTriggerSlotChange = () => {\n this.updateAccessibleTrigger();\n };\n\n private createPopover() {\n if ((!this.tetherTo && !this.trigger) || !this.positioner) return;\n\n if (this.popover) {\n if (this.open) this.hide();\n this.popover.destroy();\n this.popover = null;\n }\n\n this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {\n strategy: this.hoist ? 'fixed' : 'absolute',\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n transitionElement: this.panel,\n onAfterHide: () => this.nanoAfterHide.emit(),\n onAfterShow: () => this.nanoAfterShow.emit(),\n onTransitionEnd: () => {\n if (!this.open) {\n this.panel.scrollTop = 0;\n } else if (this.menu) {\n this.menu.showActiveElement();\n }\n },\n });\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n // Stencil hooks\n\n connectedCallback() {\n this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n\n if (!this.containingElement) this.containingElement = this.host;\n }\n\n componentDidLoad() {\n this.didLoad = true;\n this.createPopover();\n setTimeout(() => this.updateAccessibleTrigger(), 100);\n }\n\n disconnectedCallback() {\n if (this.host.isConnected) this.hide();\n if (this.popover) this.popover.destroy();\n }\n\n render() {\n return (\n <div\n part=\"base\"\n id={this.dropdownId}\n class={{\n dropdown: true,\n 'dropdown--open': this.open,\n }}\n >\n <span\n part=\"trigger\"\n class=\"dropdown__trigger\"\n ref={(el) => (this.trigger = el)}\n onKeyDown={this.handleTriggerKeyDown}\n onClick={this.togglePanel}\n >\n <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n </span>\n\n <div ref={(el) => (this.positioner = el)} class=\"dropdown__positioner\">\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class={`dropdown__panel ${this.placement.split('-').join(' ')}`}\n aria-hidden={!this.open}\n role={\n this.host.getAttribute('role') === 'group' ? 'group' : 'dialog'\n }\n aria-modal={\n this.host.getAttribute('role') === 'group' ? undefined : 'true'\n }\n aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n >\n {this.dialogTitle && (\n <span\n id={this.labelId}\n class=\"dropdown__accessible-title\"\n aria-live={\n this.host.getAttribute('role') === 'group'\n ? undefined\n : 'polite'\n }\n >\n {this.dialogTitle}\n </span>\n )}\n <slot />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js CHANGED
@@ -256,7 +256,7 @@ const NavItem = class {
256
256
  };
257
257
  NavItem.style = navItemCss;
258
258
 
259
- const selectCss = ".sc-nano-select-h {\n box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n display: none !important;\n}\n[disabled].sc-nano-select-h:not([disabled=false]) {\n opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-select {\n container-type: inline-size;\n min-inline-size: 100%;\n display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n display: flex;\n gap: 1rem;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n display: none;\n}\n@container (min-width: 350px) {\n .form-ctrl.has-helper-end .form-ctrl__helper-end {\n display: block !important;\n }\n .form-ctrl.has-helper-end .form-ctrl__helper {\n display: none !important;\n }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n clip: rect(1px, 1px, 1px, 1px);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n block-size: 1px;\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n padding-block: 0;\n -webkit-padding-end: 0;\n padding-inline-end: 0;\n -webkit-padding-start: var(--padding-start);\n padding-inline-start: var(--padding-start);\n color: var(--label-color);\n position: absolute;\n font-size: 1.15em;\n transform: translateY(-50%);\n transform-origin: top left;\n inset-block-start: 50%;\n transition: all 0.125s ease-in;\n opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(-110%);\n font-size: 0.8em;\n opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 50%;\n}\n.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-select {\n color: var(--label-color);\n font-size: var(--label-font-size);\n -webkit-padding-after: var(--padding-bottom);\n padding-block-end: var(--padding-bottom);\n line-height: 1;\n display: flex;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n margin-block: unset;\n -webkit-margin-end: 5px;\n margin-inline-end: 5px;\n -webkit-margin-start: 0;\n margin-inline-start: 0;\n opacity: 0;\n -webkit-appearance: none;\n appearance: none;\n transition: 0.3s ease opacity;\n font-size: 0.9em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n margin-block: unset;\n -webkit-margin-end: 0;\n margin-inline-end: 0;\n -webkit-margin-start: auto;\n margin-inline-start: auto;\n font-size: 0.9em;\n opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n opacity: 0.5;\n}\n.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select {\n color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__label.sc-nano-select {\n color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n block-size: 1em;\n position: relative;\n margin-block: 4px var(--padding-bottom);\n margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n font-style: italic;\n color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-select {\n opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n flex: 1 1 30%;\n min-inline-size: 150px;\n font-size: var(--invalid-msg-font-size);\n color: var(--help-msg-color);\n font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n opacity: 0;\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n border-radius: var(--input-border-radius);\n inline-size: 100%;\n padding: 0 !important;\n position: relative;\n flex: 1 0 auto;\n display: flex;\n background: var(--input-bg-color);\n border: var(--input-border-style);\n border-width: var(--input-border-width);\n font-size: var(--input-font-size);\n -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--focus);\n border: var(--input-border-style--focus);\n border-width: var(--input-border-width);\n -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid);\n border-width: var(--input-border-width);\n -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n -webkit-padding-start: 0 !important;\n padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid-focus);\n border-width: var(--input-border-width);\n -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n -webkit-padding-start: 0 !important;\n padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n display: flex;\n align-items: stretch;\n flex: 1;\n max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n --nano-icon-size: 1.4em;\n margin-block: 0;\n margin-inline: 0;\n font-size: 1em;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n display: flex;\n align-items: stretch;\n inline-size: auto;\n}\n\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n --nano-icon-size: 1.4em;\n padding-inline: unset;\n -webkit-padding-start: var(--padding-start);\n padding-inline-start: var(--padding-start);\n -webkit-padding-end: var(--padding-end);\n padding-inline-end: var(--padding-end);\n font-size: 1em;\n align-items: center;\n display: flex;\n block-size: 100%;\n z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s > *, [disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n color: var(--clear-btn-color);\n padding: 0;\n opacity: 0;\n inline-size: 0;\n -webkit-appearance: none;\n appearance: none;\n align-items: center;\n overflow: hidden;\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n padding-block: 0;\n padding-inline: var(--padding-start) var(--padding-end);\n opacity: 1;\n inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-select-h {\n \n --placeholder-color: var(--nano-input-placeholder-color, initial);\n --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n --color-invalid: var(--nano-color-danger-rgb, 239 65 53);\n --color--focus-rgb:\n var(\n --nano-color-base-rgb,\n var(--nano-color-primary-rgb, 0 116 149)\n );\n --input-font-size: var(--nano-input-font-size, 0.87em);\n --input-text-color: var(--nano-input-text-color, #4a4a4a);\n --input-border-width: var(--nano-input-border-width, 1px);\n --input-border-hint-width: 3px;\n --input-border-color: var(--nano-input-border-color, #e4e6e8);\n --input-border-radius: var(--nano-input-border-radius, 0);\n --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n --input-bg-color: var(--nano-input-background-color, #fff);\n --input-bg-color--focus: var(--input-bg-color);\n --input-bg-color--invalid: var(--nano-input-background-color, white);\n --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n --help-msg-color: var(--nano-input-help-color, #616d6e);\n --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n --label-color: var(--nano-input-label-color, \"currentcolor\");\n --label-color--focus: var(--label-color);\n --label-color--invalid: var(--nano-input-label-color-invalid, \"currentcolor\");\n --label-font-size: var(--nano-input-label-color, 1em);\n --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n \n position: relative;\n width: 100%;\n padding: 0 !important;\n font-family: var(--nano-font-family, inherit);\n display: block;\n}\n\n.nano-color.sc-nano-select-h {\n --input-border-style--focus:\n var(--nano-input-border-style, solid) var(\n --nano-color-tint,\n var(--nano-color-primary-tint, #2689a5)\n );\n --multi-input-value-bg: var(--nano-color-tint-rgb);\n --multi-input-value-border: var(--nano-color-shade);\n --multi-input-value-text-color: var(--nano-color-contrast);\n color: var(--nano-color-base);\n}\n\nnano-item.sc-nano-select-h:not(.item-label), nano-item:not(.item-label) .sc-nano-select-h {\n --padding-start: 0;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n display: none;\n}\n\n.select__native-input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding: unset;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: 0;\n border-radius: var(--input-border-radius);\n text-overflow: ellipsis;\n color: var(--input-text-color);\n display: inline-block;\n flex: 1;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n border: 0;\n outline: none;\n background: transparent;\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n box-sizing: border-box;\n resize: none;\n overflow: hidden;\n cursor: default;\n line-height: 2.5em;\n \n \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n line-height: 2.1em;\n min-height: 2.1em;\n -webkit-padding-before: 1.4em;\n padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n background: transparent;\n}\n.select__native-input.sc-nano-select::-moz-selection {\n background: transparent;\n}\n.select__native-input.sc-nano-select::placeholder {\n color: var(--placeholder-color);\n font-family: inherit;\n font-style: var(--placeholder-font-style);\n font-weight: var(--placeholder-font-weight);\n opacity: var(--placeholder-opacity);\n line-height: inherit;\n min-height: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n line-height: 2.8em;\n text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n -webkit-appearance: none;\n appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n resize: vertical;\n overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n line-height: 1.5em;\n padding-block: var(--padding-top) var(--padding-bottom);\n white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n -webkit-padding-before: 1.8em;\n padding-block-start: 1.8em;\n}\n.masked.sc-nano-select-h .select__native-input.sc-nano-select {\n opacity: 0;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: 0;\n border-radius: var(--input-border-radius);\n pointer-events: none;\n line-height: 2.5em;\n min-height: 2.5em;\n}\n\n.select__multi-wrap.sc-nano-select {\n padding-block: 0 var(--padding-bottom);\n padding-inline: 0 0;\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n overflow: hidden;\n align-items: flex-start;\n}\n.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select {\n -webkit-padding-before: 1em;\n padding-block-start: 1em;\n}\n.select__multi-input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-bottom) 0;\n min-width: 50px;\n width: 100%;\n max-height: 100%;\n -webkit-appearance: none;\n appearance: none;\n border: 0;\n outline: none;\n display: inline-block;\n background: transparent;\n flex: 0;\n position: relative;\n box-sizing: border-box;\n line-height: calc(2.5em - var(--padding-bottom));\n height: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:last-child {\n flex: 1;\n}\n.select__multi-value.sc-nano-select {\n margin-block: var(--padding-bottom) 0;\n margin-inline: var(--padding-start) -3px;\n background: rgb(var(--multi-input-value-bg)/80%);\n color: var(--multi-input-value-text-color);\n border: 1px solid;\n border-color: var(--multi-input-value-border);\n padding: 0.35em 0.5em;\n max-width: 100%;\n display: flex;\n align-items: center;\n font-size: var(--input-font-size);\n letter-spacing: 1px;\n max-height: calc(2.5em - 8px);\n}\n.select__multi-value.sc-nano-select span.sc-nano-select {\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n overflow: hidden;\n line-height: 1;\n}\n.select__multi-value-remove.sc-nano-select {\n background-position: center;\n -webkit-padding-start: 0.5em;\n padding-inline-start: 0.5em;\n margin: 0;\n color: inherit;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n -webkit-appearance: none;\n appearance: none;\n display: flex;\n align-items: center;\n inset-block-start: 0;\n font-size: 1em;\n}\n.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select {\n --color: var(--multi-input-value-text-color);\n}\n\n.form-ctrl__float-label.sc-nano-select {\n width: calc(100% - (1em + var(--padding-start) * 2));\n}\n.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(-110%);\n font-size: 0.8em;\n}\n.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(21%);\n inset-block-start: 0;\n}\n\n.has-focus.sc-nano-select-h select.sc-nano-select, .has-focus.sc-nano-select-h a.sc-nano-select, .has-focus.sc-nano-select-h button.sc-nano-select {\n pointer-events: auto;\n}";
259
+ const selectCss = ".sc-nano-select-h {\n box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n display: none !important;\n}\n[disabled].sc-nano-select-h:not([disabled=false]) {\n opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-select {\n min-inline-size: 100%;\n display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n display: flex;\n gap: 1rem;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n display: none;\n}\n@container (min-width: 350px) {\n .form-ctrl.has-helper-end .form-ctrl__helper-end {\n display: block !important;\n }\n .form-ctrl.has-helper-end .form-ctrl__helper {\n display: none !important;\n }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n display: block;\n container-type: inline-size;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n clip: rect(1px, 1px, 1px, 1px);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n block-size: 1px;\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n padding-block: 0;\n -webkit-padding-end: 0;\n padding-inline-end: 0;\n -webkit-padding-start: var(--padding-start);\n padding-inline-start: var(--padding-start);\n color: var(--label-color);\n position: absolute;\n font-size: 1.15em;\n transform: translateY(-50%);\n transform-origin: top left;\n inset-block-start: 50%;\n transition: all 0.125s ease-in;\n opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(-110%);\n font-size: 0.8em;\n opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 50%;\n}\n.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-select {\n color: var(--label-color);\n font-size: var(--label-font-size);\n -webkit-padding-after: var(--padding-bottom);\n padding-block-end: var(--padding-bottom);\n line-height: 1;\n display: flex;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n margin-block: unset;\n -webkit-margin-end: 5px;\n margin-inline-end: 5px;\n -webkit-margin-start: 0;\n margin-inline-start: 0;\n opacity: 0;\n -webkit-appearance: none;\n appearance: none;\n transition: 0.3s ease opacity;\n font-size: 0.9em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n margin-block: unset;\n -webkit-margin-end: 0;\n margin-inline-end: 0;\n -webkit-margin-start: auto;\n margin-inline-start: auto;\n font-size: 0.9em;\n opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n opacity: 0.5;\n}\n.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select {\n color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__label.sc-nano-select {\n color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n block-size: 1em;\n position: relative;\n margin-block: 4px var(--padding-bottom);\n margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n font-style: italic;\n color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-select {\n opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n flex: 1 1 30%;\n min-inline-size: 150px;\n font-size: var(--invalid-msg-font-size);\n color: var(--help-msg-color);\n font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n opacity: 0;\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n border-radius: var(--input-border-radius);\n inline-size: 100%;\n padding: 0 !important;\n position: relative;\n flex: 1 0 auto;\n display: flex;\n background: var(--input-bg-color);\n border: var(--input-border-style);\n border-width: var(--input-border-width);\n font-size: var(--input-font-size);\n -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--focus);\n border: var(--input-border-style--focus);\n border-width: var(--input-border-width);\n -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid);\n border-width: var(--input-border-width);\n -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n -webkit-padding-start: 0 !important;\n padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid-focus);\n border-width: var(--input-border-width);\n -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n -webkit-padding-start: 0 !important;\n padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n display: flex;\n align-items: stretch;\n flex: 1;\n max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n --nano-icon-size: 1.4em;\n margin-block: 0;\n margin-inline: 0;\n font-size: 1em;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n display: flex;\n align-items: stretch;\n inline-size: auto;\n}\n\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n --nano-icon-size: 1.4em;\n padding-inline: unset;\n -webkit-padding-start: var(--padding-start);\n padding-inline-start: var(--padding-start);\n -webkit-padding-end: var(--padding-end);\n padding-inline-end: var(--padding-end);\n font-size: 1em;\n align-items: center;\n display: flex;\n block-size: 100%;\n z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s > *, [disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n color: var(--clear-btn-color);\n padding: 0;\n opacity: 0;\n inline-size: 0;\n -webkit-appearance: none;\n appearance: none;\n align-items: center;\n overflow: hidden;\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n padding-block: 0;\n padding-inline: var(--padding-start) var(--padding-end);\n opacity: 1;\n inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-select-h {\n \n --placeholder-color: var(--nano-input-placeholder-color, initial);\n --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n --color-invalid: var(--nano-color-danger-rgb, 239 65 53);\n --color--focus-rgb:\n var(\n --nano-color-base-rgb,\n var(--nano-color-primary-rgb, 0 116 149)\n );\n --input-font-size: var(--nano-input-font-size, 0.87em);\n --input-text-color: var(--nano-input-text-color, #4a4a4a);\n --input-border-width: var(--nano-input-border-width, 1px);\n --input-border-hint-width: 3px;\n --input-border-color: var(--nano-input-border-color, #e4e6e8);\n --input-border-radius: var(--nano-input-border-radius, 0);\n --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n --input-bg-color: var(--nano-input-background-color, #fff);\n --input-bg-color--focus: var(--input-bg-color);\n --input-bg-color--invalid: var(--nano-input-background-color, white);\n --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n --help-msg-color: var(--nano-input-help-color, #616d6e);\n --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n --label-color: var(--nano-input-label-color, \"currentcolor\");\n --label-color--focus: var(--label-color);\n --label-color--invalid: var(--nano-input-label-color-invalid, \"currentcolor\");\n --label-font-size: var(--nano-input-label-color, 1em);\n --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n \n position: relative;\n width: 100%;\n padding: 0 !important;\n font-family: var(--nano-font-family, inherit);\n display: block;\n}\n\n.nano-color.sc-nano-select-h {\n --input-border-style--focus:\n var(--nano-input-border-style, solid) var(\n --nano-color-tint,\n var(--nano-color-primary-tint, #2689a5)\n );\n --multi-input-value-bg: var(--nano-color-tint-rgb);\n --multi-input-value-border: var(--nano-color-shade);\n --multi-input-value-text-color: var(--nano-color-contrast);\n color: var(--nano-color-base);\n}\n\nnano-item.sc-nano-select-h:not(.item-label), nano-item:not(.item-label) .sc-nano-select-h {\n --padding-start: 0;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n display: none;\n}\n\n.select__native-input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding: unset;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: 0;\n border-radius: var(--input-border-radius);\n text-overflow: ellipsis;\n color: var(--input-text-color);\n display: inline-block;\n flex: 1;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n border: 0;\n outline: none;\n background: transparent;\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n box-sizing: border-box;\n resize: none;\n overflow: hidden;\n cursor: default;\n line-height: 2.5em;\n \n \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n line-height: 2.1em;\n min-height: 2.1em;\n -webkit-padding-before: 1.4em;\n padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n background: transparent;\n}\n.select__native-input.sc-nano-select::-moz-selection {\n background: transparent;\n}\n.select__native-input.sc-nano-select::placeholder {\n color: var(--placeholder-color);\n font-family: inherit;\n font-style: var(--placeholder-font-style);\n font-weight: var(--placeholder-font-weight);\n opacity: var(--placeholder-opacity);\n line-height: inherit;\n min-height: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n line-height: 2.8em;\n text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n -webkit-appearance: none;\n appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n resize: vertical;\n overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n line-height: 1.5em;\n padding-block: var(--padding-top) var(--padding-bottom);\n white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n -webkit-padding-before: 1.8em;\n padding-block-start: 1.8em;\n}\n.masked.sc-nano-select-h .select__native-input.sc-nano-select {\n opacity: 0;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: 0;\n border-radius: var(--input-border-radius);\n pointer-events: none;\n line-height: 2.5em;\n min-height: 2.5em;\n}\n\n.select__multi-wrap.sc-nano-select {\n padding-block: 0 var(--padding-bottom);\n padding-inline: 0 0;\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n overflow: hidden;\n align-items: flex-start;\n}\n.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select {\n -webkit-padding-before: 1em;\n padding-block-start: 1em;\n}\n.select__multi-input.sc-nano-select {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-bottom) 0;\n min-width: 50px;\n width: 100%;\n max-height: 100%;\n -webkit-appearance: none;\n appearance: none;\n border: 0;\n outline: none;\n display: inline-block;\n background: transparent;\n flex: 0;\n position: relative;\n box-sizing: border-box;\n line-height: calc(2.5em - var(--padding-bottom));\n height: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:last-child {\n flex: 1;\n}\n.select__multi-value.sc-nano-select {\n margin-block: var(--padding-bottom) 0;\n margin-inline: var(--padding-start) -3px;\n background: rgb(var(--multi-input-value-bg)/80%);\n color: var(--multi-input-value-text-color);\n border: 1px solid;\n border-color: var(--multi-input-value-border);\n padding: 0.35em 0.5em;\n max-width: 100%;\n display: flex;\n align-items: center;\n font-size: var(--input-font-size);\n letter-spacing: 1px;\n max-height: calc(2.5em - 8px);\n}\n.select__multi-value.sc-nano-select span.sc-nano-select {\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n overflow: hidden;\n line-height: 1;\n}\n.select__multi-value-remove.sc-nano-select {\n background-position: center;\n -webkit-padding-start: 0.5em;\n padding-inline-start: 0.5em;\n margin: 0;\n color: inherit;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n -webkit-appearance: none;\n appearance: none;\n display: flex;\n align-items: center;\n inset-block-start: 0;\n font-size: 1em;\n}\n.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select {\n --color: var(--multi-input-value-text-color);\n}\n\n.form-ctrl__float-label.sc-nano-select {\n width: calc(100% - (1em + var(--padding-start) * 2));\n}\n.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(-110%);\n font-size: 0.8em;\n}\n.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n transform: translateY(21%);\n inset-block-start: 0;\n}\n\n.has-focus.sc-nano-select-h select.sc-nano-select, .has-focus.sc-nano-select-h a.sc-nano-select, .has-focus.sc-nano-select-h button.sc-nano-select {\n pointer-events: auto;\n}";
260
260
 
261
261
  let selectIds = 0;
262
262
  const Select = class {
package/dist/cjs/nano-grid_2.cjs.entry.js CHANGED
@@ -163,7 +163,7 @@ const Grid = class {
163
163
  --current-grid-size: "grid size: ${bp.name}";
164
164
  ${bp.template
165
165
  ? `grid-template: ${bp.template};`
166
- : `grid-template-columns: repeat(${bp.cols}, 1fr);`}
166
+ : `grid-template-columns: repeat(${bp.cols}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`}
167
167
  }
168
168
  ${[...Array(bp.cols)]
169
169
  .map((_, i) => {
@@ -173,19 +173,26 @@ const Grid = class {
173
173
  ::slotted([grid-states~="${bp.name}-col-start-${gItm}"]) {
174
174
  grid-column-start: ${gItm} !important;
175
175
  }
176
- .grid > [grid-states~="${bp.name}-row-start-${gItm}"],
177
- ::slotted([grid-states~="${bp.name}-row-start-${gItm}"]) {
178
- grid-row-start: ${gItm} !important;
179
- }
180
176
  .grid > [grid-states~="${bp.name}-col-span-${gItm}"],
181
177
  ::slotted([grid-states~="${bp.name}-col-span-${gItm}"]) {
182
178
  grid-column-end: span ${gItm} !important;
183
179
  }
184
- .grid > [grid-states~="${bp.name}-row-span-${gItm}"],
185
- ::slotted([grid-states~="${bp.name}-row-span-${gItm}"]) {
186
- grid-row-end: span ${gItm} !important;
187
- }
188
180
  `;
181
+ })
182
+ .join('')}
183
+ ${[...Array(24)]
184
+ .map((_, i) => {
185
+ const gItm = i + 1;
186
+ return /* css */ `
187
+ .grid > [grid-states~="${bp.name}-row-start-${gItm}"],
188
+ ::slotted([grid-states~="${bp.name}-row-start-${gItm}"]) {
189
+ grid-row-start: ${gItm} !important;
190
+ }
191
+ .grid > [grid-states~="${bp.name}-row-span-${gItm}"],
192
+ ::slotted([grid-states~="${bp.name}-row-span-${gItm}"]) {
193
+ grid-row-end: span ${gItm} !important;
194
+ }
195
+ `;
189
196
  })
190
197
  .join('')}
191
198
  ${this.showHelper &&
package/dist/cjs/nano-grid_2.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"nano-grid.nano-img.entry.cjs.js","mappings":";;;;;;;;;AACA;AAEA,MAAM,gCAAgC,GAAG,CAAC;EACxC,IAAI;IACF,OAAO,CAAC,CAAC,IAAI,aAAa,EAAE,CAAC;GAC9B;EAAC,OAAO,CAAC,EAAE;IACV,OAAO,KAAK,CAAC;GACd;AACH,CAAC,GAAG,CAAC;AAEL,MAAM,SAAS,GAAwC,IAAI,OAAO,EAAE,CAAC;AAOrE;;;;;;;;;;;;;;;SAegB,kBAAkB,CAChC,OAAkC,EAAE;EAEpC,OAAO,CAAC,MAA0B,EAAE,WAAmB;IACrD,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;MAC1B,IAAI,CAAC,gBAAgB,GAAG,WAAW,CAAC;KACrC;IAED,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,mBAAmB,EAAE,GAAG,MAAM,CAAC;IAClE,IAAI,CAAC,iBAAiB;MACpB,OAAO,CAAC,IAAI,CACV,yFAAyF,MAAM,CAAC,WAAW,CAAC,IAAI,6GAA6G,CAC9N,CAAC;IAEJ,IAAI,gCAAgC,EAAE;MACpC,MAAM,aAAa,GAAG,CAAC,QAA4B;QACjD,IACE,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC;WAC/B,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC;YACtB,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;UAE9D,OAAO;QAET,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;QACzD,MAAM,IAAI,GAAGA,gBAAU,CAAC,QAAQ,CAAC,CAAC;QAClC,MAAM,OAAO,GACX,OAAO,QAAQ,CAAC,WAAW,CAAC,KAAK,UAAU;YACvC,QAAQ,CAAC,WAAW,CAAC,EAAE;YACvB,QAAQ,CAAC,WAAW,CAAC,CAAC;QAC5B,MAAM,IAAI,IAAI,IAAI,CAAC,UAAU,IAAI,QAAQ,CAAQ,CAAC;QAClD,IAAI,CAAC,kBAAkB,GAAG;UACxB,IAAI,IAAI,CAAC,kBAAkB,IAAI,EAAE,CAAC;UAClC,qBAAqB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC;SACvD,CAAC;OACH,CAAC;MAEF,MAAM,CAAC,iBAAiB,GAAG;QACzB,MAAM,cAAc,GAClB,iBAAiB,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpD,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,OAAO,cAAc,CAAC;OACvB,CAAC;MAEF,MAAM,CAAC,mBAAmB,GAAG;QAC3B,MAAM,gBAAgB,GACpB,mBAAmB,IAAI,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACxD,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,OAAO,gBAAgB,CAAC;OACzB,CAAC;KACH;SAAM;MACL,MAAM,CAAC,MAAM,GAAG;QACd,MAAM,OAAO,GACX,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,UAAU;YACnC,IAAI,CAAC,WAAW,CAAC,EAAE;YACnB,IAAI,CAAC,WAAW,CAAC,CAAC;QACxB,IAAI,YAAY,GAAU,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5C,IAAI,MAAM,CAAC,YAAY,CAAC,EAAE;UACxB,iBAAiB,CAAC,YAAY,EAAE,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;SACnE;aAAM;UACL,YAAY,GAAGC,QAACC,UAAI,QAAE,YAAY,CAAQ,CAAC;UAE3C,IAAI,EAAE,cAAc,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE;YAC9C,iBAAiB,CAAC,YAAY,EAAE,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;WACnE;eAAM;YACL,IAAI,CAAC,MAAM,CAAC,oBAAoB,EAAE;cAChC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;cAC9C,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;cACvC,KAAK,CAAC,YAAY,CAChB,qBAAqB,EACrB,MAAM,CAAC,WAAW,CAAC,IAAI,CACxB,CAAC;cACF,KAAK,CAAC,SAAS,GAAG,OAAO,CAAC;cAC1B,MAAM,CAAC,oBAAoB,GAAG,KAAK,CAAC;cACpC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;aAClC;WACF;SACF;QAED,OAAO,YAAY,CAAC;OACrB,CAAC;KACH;GACF,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO;EAClD,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAChCD,mBAAO,IAAI,EAAC,UAAU,yBAAsB,UAAU,IACnD,OAAO,CACF,CACT,CAAC;AACJ,CAAC;AAED,SAAS,qBAAqB,CAC5B,QAA4B,EAC5B,MAA0B,EAC1B,OAAe,EACf,IAA+B;EAE/B,IAAI,CAAC,MAAM,CAAC,oBAAoB,EAAE;IAChC,MAAM,CAAC,oBAAoB,GAAG,EAAE,CAAC;GAClC;EAED,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;EAE5C,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,GAAG,CAAC,EAAE;IACrC,MAAM,CAAC,oBAAoB,CAAC,GAAG,CAAC,GAAG,IAAI,aAAa,EAAE,CAAC;IACvD,MAAM,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;GACnD;EAED,OAAO,MAAM,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;AAC1C,CAAC;AAED,SAAS,MAAM,CAAC,IAAI;EAClB,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE;IACvB,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE;MAC7B,IAAI,IAAI,CAAC,IAAI,CAAC,KAAKC,UAAI,EAAE;QACvB,OAAO,IAAI,CAAC;OACb;KACF;GACF;EACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,eAAe,CAAC,IAAI;EAC3B,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE;IACvB,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE;MAC7B,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE;QAC7B,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC;OACnB;KACF;GACF;AACH;;ACrKA,MAAM,OAAO,GAAG,0+BAA0+B;;;;;;;;;;;;;;;;MCsB7+B,IAAI;;;IACP,UAAK,GAKP,EAAE,CAAC;IAkHuD,WAAM,GACpE;MACE,MAAM,GAAG,aAAa;QACpB,IAAI,CAAC,KAAK;SACT,GAAG,CACF,CAAC,EAAE,eAAe;mCAEhB,OAAO,EAAE,CAAC,UAAU,KAAK,QAAQ;UAC7B,EAAE,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI;UACxB,EAAE,CAAC,UACT;;iDAEuC,EAAE,CAAC,IAAI;gBAExC,EAAE,CAAC,QAAQ;UACP,kBAAkB,EAAE,CAAC,QAAQ,GAAG;UAChC,iCAAiC,EAAE,CAAC,IAAI,SAC9C;;cAEA,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;SAClB,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;QACR,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;QACnB,iBAAiB;2CACU,EAAE,CAAC,IAAI,cAAc,IAAI;6CACvB,EAAE,CAAC,IAAI,cAAc,IAAI;yCAC7B,IAAI;;2CAEF,EAAE,CAAC,IAAI,cAAc,IAAI;6CACvB,EAAE,CAAC,IAAI,cAAc,IAAI;sCAChC,IAAI;;2CAEC,EAAE,CAAC,IAAI,aAAa,IAAI;6CACtB,EAAE,CAAC,IAAI,aAAa,IAAI;4CACzB,IAAI;;2CAEL,EAAE,CAAC,IAAI,aAAa,IAAI;6CACtB,EAAE,CAAC,IAAI,aAAa,IAAI;yCAC5B,IAAI;;eAE9B,CAAC;OACD,CAAC;SACD,IAAI,CAAC,EAAE,CAAC;cAET,IAAI,CAAC,UAAU;kBACL;4CACoB,EAAE,CAAC,IAAI;;;aAIvC;;SAEH,CACA;SACA,IAAI,CAAC,EAAE,CAAC;KACZ,CAAC;MACA,OAAO,GAAG,CAAC;KACZ,CAAC;;iBArK6B,GAAG;iBAIH,GAAG;iBAIH,GAAG;kBAIF,IAAI;;;;;;;;;;;sBAiCS,KAAK;;EAiBpD,kBAAkB;IAChB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAEhB,IAAI,IAAI,CAAC,KAAK;MACZ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,KAAK;QAChB,UAAU,EAAE,CAAC;QACb,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,IAAI,CAAC,IAAI;OACpB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,KAAK;MACZ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,KAAK;QAChB,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,IAAI,CAAC,IAAI;OACpB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,KAAK;MACZ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,KAAK;QAChB,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,IAAI,CAAC,IAAI;OACpB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,MAAM;MACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,MAAM;QACjB,UAAU,EAAE,IAAI,CAAC,KAAK;QACtB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI,CAAC,KAAK;OACrB,CAAC,CAAC;IACL,IAAI,IAAI,CAAC,OAAO;MACd,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,IAAI,CAAC,OAAO;QAClB,UAAU,EAAE,IAAI,CAAC,MAAM;QACvB,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,IAAI,CAAC,MAAM;OACtB,CAAC,CAAC;IAEL,IAAI,CAAC,QAAQ;MACX,IAAI,CAAC,KAAK;SACP,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC,UAAU,IAAI,EAAE,CAAC,QAAQ,IAAI,EAAE,EAAE,CAAC;SAC/D,IAAI,CAAC,EAAE,CAAC;QACX,UAAU;QACV,IAAI,CAAC,UAAU,CAAC;GACnB;EA4DD,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACED,QAACC,UAAI,QACHD,iBAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,IAC3BA,qBAAQ,CACJ,EACL,IAAI,CAAC,UAAU,KACdA,iBAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,IACzC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,OAClBA,iBAAK,KAAK,EAAC,mBAAmB,GAAG,CAClC,CAAC,CACE,CACP,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;AA7ED;EAAC,kBAAkB,CAAC,EAAE,gBAAgB,EAAE,UAAU,EAAE,CAAC;;oCAwDjD;;;ACtMN,MAAM,MAAM,GAAG,g3DAAg3D;;MCuBl3D,GAAG;;;;;;IAEN,YAAO,GAAwD,EAAE,CAAC;IAiGlE,WAAM,GAAG;MACf,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;MAC3B,UAAU,CAAC,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;KAC/C,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,aAAQ,GAAG,CAAC,CAA2C;MAC7D,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,MAAM,CAAC;QAC5C,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,MAAM,CAAC;OAClC,CAAC,CAAC;;MAGH,MAAM,OAAO,GAAG,EAAE,CAAC;MACnB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;SACtB,IAAI,EAAE;SACN,OAAO,CAAC,CAAC,EAAE;QACV,IAAI,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM;UAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;OACjE,CAAC,CAAC;MAEL,IAAI,OAAO,CAAC,MAAM;QAAE,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;QAEhD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;KAC3B,CAAC;;;qBApH4B,KAAK;qBACN,IAAI;;;;;gBAwCT,IAAI;;sBAWc,SAAS;;EAhDnD,WAAW;IACT,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACvB,IAAI,CAAC,KAAK,EAAE,CAAC;GACd;EASD,UAAU;IACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;GACtB;EAMD,aAAa;IACX,IAAI,CAAC,IAAI,CAAC,MAAM;MAAE,OAAO;IAEzB,OAAO,IAAI,CAAC,OAAO,CAAC;IACpB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;IAElB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM;OACzB,KAAK,CAAC,GAAG,CAAC;OACV,GAAG,CAAC,CAAC,KAAK;MACT,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC;MAC7D,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;MAC/C,OAAO,EAAE,CAAC;KACX,CAAC;OACD,IAAI,CAAC,IAAI,CAAC,CAAC;GACf;EAKD,WAAW;IACT,IAAI,CAAC,IAAI,CAAC,IAAI;MAAE,IAAI,CAAC,IAAI,EAAE,CAAC;GAC7B;EAkBO,KAAK;IACX,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS;MAAE,OAAO;IACzC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACd,IAAI,CAAC,IAAI,EAAE,CAAC;MACZ,OAAO;KACR;IACD,IACE,OAAQ,MAAc,KAAK,WAAW;MACtC,sBAAsB,IAAI,MAAM,EAChC;MACA,IAAI,CAAC,QAAQ,EAAE,CAAC;MAChB,IAAI,CAAC,EAAE,GAAG,IAAI,oBAAoB,CAAC,CAAC,IAAI;QACtC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE;UAC1B,IAAI,CAAC,IAAI,EAAE,CAAC;UACZ,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;OACF,CAAC,CAAC;MAEH,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC5B;;MAAM,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC;GAC3C;EAEO,IAAI;IACV,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;IAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;IACzB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;GAC7B;EA6BO,QAAQ;IACd,IAAI,IAAI,CAAC,EAAE,EAAE;MACX,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;MACrB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;KACrB;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,EAAE,CAAC;IAClB,IAAI,CAAC,aAAa,EAAE,CAAC;IACrB,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAED,gBAAgB;IACd,IAAI,CAAC,KAAK,EAAE,CAAC;GACd;EAED,oBAAoB;IAClB,IAAI,CAAC,QAAQ,EAAE,CAAC;GACjB;EAED,MAAM;IACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QAC1B,EAAE,kBAAkB,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,EAAE;QAC9C,EAAE,CAAC;IAEP,QACEA,iBAAK,KAAK,EAAC,KAAK,IACdA,2BAAe,KAAK,EAAC,aAAa,GAAiB,EAClD,CAAC,CAAC,IAAI,CAAC,UAAU,KAChBA,iBACE,KAAK,EAAE;QACL,MAAM,EAAE,IAAI,CAAC,SAAS;QACtB,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,IAAI,CAAC,UAAU,KAAK,OAAO;OACzC,EACD,KAAK,EAAE,OAAO,IAEdA,qBAAQ,CACJ,CACP,EACDA,iBACE,KAAK,EAAE;QACL,UAAU,EAAE,IAAI;QAChB,MAAM,EAAE,IAAI,CAAC,SAAS;QACtB,IAAI,EAAE,IAAI,CAAC,UAAU;QACrB,WAAW,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS;OAC3C,EACD,QAAQ,EAAC,OAAO,EAChB,GAAG,EAA8B,IAAI,CAAC,OAAO,EAC7C,OAAO,EAAyC,SAAS,EACzD,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,SAAS,GACvB,EACFA,iCACE,KAAK,EAAC,eAAe,EACrB,uBAAuB,EAAE,IAAI,CAAC,QAAQ,EACtC,MAAM,EAAE,IAAI,CAAC,SAAS,GACtB,CACE,EACN;GACH;;;;;;;;;;;;;;","names":["getElement","h","Host"],"sources":["./src/utils/constructible-style.tsx","./src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","./src/components/grid/grid.tsx","./src/components/img/img.scss?tag=nano-img&encapsulation=shadow","./src/components/img/img.tsx"],"sourcesContent":["import { h, Host, getElement, VNode, ComponentInterface } from '@stencil/core';\n// import type { VNode, HTMLStencilElement } from \"@stencil/core\";\n\nconst supportsConstructibleStylesheets = (() => {\n try {\n return !!new CSSStyleSheet();\n } catch (e) {\n return false;\n }\n})();\n\nconst cacheKeys: WeakMap<ComponentInterface, string> = new WeakMap();\n\ndeclare type ConstructibleStyleDecorator = (\n target: ComponentInterface,\n propertyKey: string\n) => void;\n\n/**\n * Dynamically create a constructible stylesheet which is applied to the component.\n * The stylesheet is then cached for future instances of the component.\n * @usage\nAs a string:\n```\n@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\nAs a function:\n```\n@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.\n * @returns `@ConstructableStyle` decorator\n */\nexport function ConstructibleStyle(\n opts: ConstructibleStyleOptions = {}\n): ConstructibleStyleDecorator {\n return (target: ComponentInterface, propertyKey: string) => {\n if (!opts.cacheKeyProperty) {\n opts.cacheKeyProperty = propertyKey;\n }\n\n const { componentWillLoad, render, componentWillRender } = target;\n if (!componentWillLoad)\n console.warn(\n `ConstructibleStyle requires you to have a \\`componentWillLoad\\` lifecycle method in \\`${target.constructor.name}\\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`\n );\n\n if (supportsConstructibleStylesheets) {\n const addStylesheet = (instance: ComponentInterface) => {\n if (\n !instance[opts.cacheKeyProperty] ||\n (cacheKeys.get(instance) &&\n cacheKeys.get(instance) === instance[opts.cacheKeyProperty])\n )\n return;\n\n cacheKeys.set(instance, instance[opts.cacheKeyProperty]);\n const host = getElement(instance);\n const cssText =\n typeof instance[propertyKey] === 'function'\n ? instance[propertyKey]()\n : instance[propertyKey];\n const root = (host.shadowRoot || document) as any;\n root.adoptedStyleSheets = [\n ...(root.adoptedStyleSheets || []),\n getOrCreateStylesheet(instance, target, cssText, opts),\n ];\n };\n\n target.componentWillLoad = function () {\n const willLoadResult =\n componentWillLoad && componentWillLoad.call(this);\n addStylesheet(this);\n return willLoadResult;\n };\n\n target.componentWillRender = function () {\n const willRenderResult =\n componentWillRender && componentWillRender.call(this);\n addStylesheet(this);\n return willRenderResult;\n };\n } else {\n target.render = function () {\n const cssText =\n typeof this[propertyKey] === 'function'\n ? this[propertyKey]()\n : this[propertyKey];\n let renderedNode: VNode = render.call(this);\n\n if (isHost(renderedNode)) {\n appendStyleToHost(renderedNode, target.constructor.name, cssText);\n } else {\n renderedNode = <Host>{renderedNode}</Host>;\n\n if (!('attachShadow' in HTMLElement.prototype)) {\n appendStyleToHost(renderedNode, target.constructor.name, cssText);\n } else {\n if (!target.__constructableStyle) {\n const style = document.createElement('style');\n style.setAttribute('type', 'text/css');\n style.setAttribute(\n 'constructible-style',\n target.constructor.name\n );\n style.innerHTML = cssText;\n target.__constructableStyle = style;\n document.head.appendChild(style);\n }\n }\n }\n\n return renderedNode;\n };\n }\n };\n}\n\nfunction appendStyleToHost(node, targetName, cssText) {\n (getHostChildren(node) || []).push(\n <style type=\"text/css\" constructible-style={targetName}>\n {cssText}\n </style>\n );\n}\n\nfunction getOrCreateStylesheet(\n instance: ComponentInterface,\n target: ComponentInterface,\n cssText: string,\n opts: ConstructibleStyleOptions\n): CSSStyleSheet {\n if (!target.__constructableStyle) {\n target.__constructableStyle = {};\n }\n\n const key = instance[opts.cacheKeyProperty];\n\n if (!target.__constructableStyle[key]) {\n target.__constructableStyle[key] = new CSSStyleSheet();\n target.__constructableStyle[key].replace(cssText);\n }\n\n return target.__constructableStyle[key];\n}\n\nfunction isHost(node): boolean {\n for (const prop in node) {\n if (node.hasOwnProperty(prop)) {\n if (node[prop] === Host) {\n return true;\n }\n }\n }\n return false;\n}\n\nfunction getHostChildren(node): Array<VNode> {\n for (const prop in node) {\n if (node.hasOwnProperty(prop)) {\n if (Array.isArray(node[prop])) {\n return node[prop];\n }\n }\n }\n}\n\nexport interface ConstructibleStyleOptions {\n /**\n * Set this in case an instance of a component could produce different styles based on variables.\n * This will ensure that you get new styles for each mode.\n * @example\n```\n@Prop() mode: string;\n@ConstructableStyle({ cacheKeyProperty: \"mode\" }) style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n */\n cacheKeyProperty?: string;\n}\n","@use 'sass:math';\n\n@import '../../global/style/nano-theme/base';\n\n:host {\n /**\n * @prop --grid-col-gap: gap between all columns. Defaults to theme's global padding\n * @prop --grid-row-gap: gap between all rows. Defaults to theme's global padding\n */\n\n --grid-col-gap: #{$spacing-medium};\n --grid-row-gap: #{$spacing-medium};\n --current-grid-size: \"grid size: s\";\n\n container-type: inline-size;\n display: block;\n\n .grid {\n display: grid;\n gap: var(--grid-row-gap) var(--grid-col-gap);\n block-size: inherit;\n min-block-size: inherit;\n }\n}\n\n:host([show-helper]:not([show-helper='false'])) {\n position: relative;\n\n .grid--helper {\n position: absolute;\n inset: 0;\n pointer-events: none;\n\n &::before {\n content: var(--current-grid-size);\n font-size: 30px;\n position: absolute;\n inline-size: 100%;\n inset-inline-start: 0;\n text-align: center;\n inset-block-start: 50%;\n transform: translateY(-50%);\n color: rgb(0 0 0 / 20%);\n text-transform: uppercase;\n z-index: 99;\n pointer-events: none;\n }\n }\n\n .grid__helper-item {\n display: none;\n background: hsl(204deg 80% 72% / 25%);\n }\n}\n","import { Component, h, Prop, Host, State, Watch } from '@stencil/core';\nimport { ConstructibleStyle } from '../../utils/constructible-style';\n\n/**\n * A lightweight, context-aware CSS grid implementation.\n *\n * - Define multiple grids templates at different breakpoints\n * - Uses `@container` queries to select the correct grid depending on the current dimensions\n * - Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n * - SSR optimised\n\n * @part grid - the main grid element.\n * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`\n * @part helper - a replica grid showed when `show-helper` is true\n *\n * @slot - default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement.\n */\n@Component({\n tag: 'nano-grid',\n styleUrl: 'grid.scss',\n shadow: true,\n})\nexport class Grid {\n private grids: {\n cols: number;\n breakpoint: number | string;\n name: string;\n template?: string;\n }[] = [];\n @State() cacheKey: string;\n\n /** the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop() sSize: number | string = 300;\n\n /** the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop() mSize: number | string = 550;\n\n /** the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop() lSize: number | string = 800;\n\n /** the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop() xlSize: number | string = 1000;\n\n /** the number of columns the grid has at the small breakpoint. */\n @Prop() sCols: number;\n\n /** the number of columns the grid has at the medium breakpoint. */\n @Prop() mCols: number;\n\n /** the number of columns the grid has at the large breakpoint. */\n @Prop() lCols: number;\n\n /** the number of columns the grid has at the xl breakpoint. */\n @Prop() xlCols: number;\n\n /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */\n @Prop() xxlCols: number;\n\n /** Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect */\n @Prop() sTpl?: string;\n\n /** Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect */\n @Prop() mTpl?: string;\n\n /** Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect */\n @Prop() lTpl?: string;\n\n /** Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect */\n @Prop() xlTpl?: string;\n\n /** Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect */\n @Prop() xxlTpl?: string;\n\n /** shows a grid helper to visualise where columns are */\n @Prop({ reflect: true }) showHelper: boolean = false;\n\n @Watch('sTpl')\n @Watch('mTpl')\n @Watch('lTpl')\n @Watch('xlTpl')\n @Watch('xxlTpl')\n @Watch('sSize')\n @Watch('mSize')\n @Watch('lSize')\n @Watch('xlSize')\n @Watch('sCols')\n @Watch('mCols')\n @Watch('lCols')\n @Watch('xlCols')\n @Watch('xxlCols')\n @Watch('showHelper')\n constructSizeArray() {\n this.grids = [];\n\n if (this.sCols)\n this.grids.push({\n cols: this.sCols,\n breakpoint: 0,\n name: 's',\n template: this.sTpl,\n });\n if (this.mCols)\n this.grids.push({\n cols: this.mCols,\n breakpoint: this.sSize,\n name: 'm',\n template: this.mTpl,\n });\n if (this.lSize)\n this.grids.push({\n cols: this.lCols,\n breakpoint: this.mSize,\n name: 'l',\n template: this.lTpl,\n });\n if (this.xlCols)\n this.grids.push({\n cols: this.xlCols,\n breakpoint: this.lSize,\n name: 'xl',\n template: this.xlTpl,\n });\n if (this.xxlCols)\n this.grids.push({\n cols: this.xxlCols,\n breakpoint: this.xlSize,\n name: 'xxl',\n template: this.xxlTpl,\n });\n\n this.cacheKey =\n this.grids\n .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template || ''}`)\n .join('') +\n '-helper-' +\n this.showHelper;\n }\n\n @ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }) protected styles =\n () => {\n const css = /* css */ `\n ${this.grids\n .map(\n (bp) => /* css */ `\n @container (min-width: ${\n typeof bp.breakpoint === 'number'\n ? bp.breakpoint + 1 + 'px'\n : bp.breakpoint\n }) {\n .grid {\n --current-grid-size: \"grid size: ${bp.name}\";\n ${\n bp.template\n ? `grid-template: ${bp.template};`\n : `grid-template-columns: repeat(${bp.cols}, 1fr);`\n }\n }\n ${[...Array(bp.cols)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n .grid > [grid-states~=\"${bp.name}-col-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-start-${gItm}\"]) {\n grid-column-start: ${gItm} !important;\n }\n .grid > [grid-states~=\"${bp.name}-row-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-start-${gItm}\"]) {\n grid-row-start: ${gItm} !important;\n }\n .grid > [grid-states~=\"${bp.name}-col-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-span-${gItm}\"]) {\n grid-column-end: span ${gItm} !important;\n }\n .grid > [grid-states~=\"${bp.name}-row-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-span-${gItm}\"]) {\n grid-row-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${\n this.showHelper &&\n /* css */ `\n .grid--helper :nth-child(-n+${bp.cols}) {\n display: block !important;\n }\n `\n }\n }\n `\n )\n .join('')}\n `;\n return css;\n };\n\n componentWillLoad() {\n this.constructSizeArray();\n }\n\n render() {\n return (\n <Host>\n <div part=\"grid\" class=\"grid\">\n <slot />\n </div>\n {this.showHelper && (\n <div class=\"grid grid--helper\" part=\"helper\">\n {[...Array(24)].map(() => (\n <div class=\"grid__helper-item\" />\n ))}\n </div>\n )}\n </Host>\n );\n }\n}\n",":host {\n /**\n * @prop --padding: padding around any content. Only relevent on `<nano-img background>`\n */\n --padding: 0;\n\n display: inline-block;\n object-fit: cover;\n object-position: center;\n background-size: cover;\n background-position: center;\n\n * {\n border-radius: inherit;\n }\n}\n\n:host([background]:not([background='false'])) {\n display: block;\n}\n\n.img {\n position: relative;\n object-fit: inherit;\n object-position: inherit;\n background-color: inherit;\n background-position: inherit;\n background-size: inherit;\n background-origin: inherit;\n background-attachment: inherit;\n background-repeat: inherit;\n flex: 1 1 100%;\n display: flex;\n flex-direction: column;\n min-block-size: inherit;\n max-block-size: inherit;\n max-inline-size: inherit;\n min-height: inherit;\n min-width: inherit;\n block-size: inherit;\n inline-size: inherit;\n height: inherit;\n width: inherit;\n max-height: inherit;\n max-width: inherit;\n aspect-ratio: inherit;\n}\n\n.img__loader,\n.img__observer {\n position: absolute;\n inset: 0;\n block-size: 100%;\n inline-size: 100%;\n z-index: -1;\n}\n\n.img__image,\n.img__bg {\n border-radius: inherit;\n display: block;\n opacity: 0;\n transition: 0.5s ease opacity, 0.3s ease filter 0.4s;\n filter: blur(5px);\n flex: 1;\n\n &.loaded {\n opacity: 1;\n filter: blur(0);\n\n @media not all and (min-resolution: 0.001dpcm) {\n @supports (-webkit-appearance: none) {\n filter: blur(0);\n }\n }\n }\n}\n\n.img__image {\n object-fit: inherit;\n object-position: inherit;\n max-inline-size: 100%;\n min-block-size: inherit;\n max-block-size: inherit;\n min-height: inherit;\n min-width: inherit;\n block-size: auto;\n inline-size: inherit;\n height: inherit;\n width: inherit;\n max-height: inherit;\n max-width: inherit;\n aspect-ratio: inherit;\n\n &.hide {\n visibility: hidden;\n\n &.no-height {\n block-size: 1px;\n position: absolute;\n z-index: -1;\n }\n }\n}\n\n.img__bg {\n background-color: inherit;\n background-position: inherit;\n background-size: inherit;\n background-origin: inherit;\n background-attachment: inherit;\n background-repeat: inherit;\n overflow: auto;\n padding: var(--padding);\n\n &.no-height {\n position: absolute;\n inset: 0;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n State,\n Prop,\n Watch,\n h,\n ComponentInterface,\n Build,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\n/**\n * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n */\n@Component({\n tag: 'nano-img',\n styleUrl: 'img.scss',\n shadow: true,\n})\nexport class Img implements ComponentInterface {\n private io?: IntersectionObserver;\n private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n @Element() host!: HTMLNanoImgElement;\n\n @State() loadSrc?: string;\n @State() loadError?: () => void;\n @State() hasLoaded: boolean = false;\n @State() imgStates: string = null;\n @State() _src: string;\n @Watch('_src')\n _srcChanged() {\n this.hasLoaded = false;\n this.addIO();\n }\n\n /** This attribute defines the alternative text describing the image.\n * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. */\n @Prop() alt?: string;\n\n /** The image URL. This attribute is mandatory for the `<img>` element. */\n @Prop() src!: string;\n @Watch('src')\n srcChanged() {\n this._src = this.src;\n }\n\n /** Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n @Prop() srcSet?: string;\n @Watch('srcSet')\n srcSetChanged() {\n if (!this.srcSet) return;\n\n delete this._srcSet;\n this._srcSet = {};\n\n this.imgStates = this.srcSet\n .split(',')\n .map((bpSrc) => {\n const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n this._srcSet[bp] = { src: src, active: false };\n return bp;\n })\n .join(', ');\n }\n\n /** Render image lazily, when it comes into the browser viewport **/\n @Prop() lazy: boolean = true;\n @Watch('lazy')\n lazyChanged() {\n if (!this.lazy) this.load();\n }\n\n /** Render the image as a background image **/\n @Prop() background?: boolean;\n\n /** When the image is rendered as a background, and there is no preset dimensions of the component,\n * you can set how the component height will be set. Via image size or via the content **/\n @Prop() autoHeight: 'content' | 'image' = 'content';\n\n /** Emitted when the img src has been set */\n @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n /** Emitted when the image has finished loading */\n @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n /** Emitted when the img fails to load */\n @Event() nanoImgError!: EventEmitter<void>;\n\n private addIO() {\n if (!this._src || this.hasLoaded) return;\n if (!this.lazy) {\n this.load();\n return;\n }\n if (\n typeof (window as any) !== 'undefined' &&\n 'IntersectionObserver' in window\n ) {\n this.removeIO();\n this.io = new IntersectionObserver((data) => {\n if (data[0].isIntersecting) {\n this.load();\n this.removeIO();\n }\n });\n\n this.io.observe(this.host);\n } else setTimeout(() => this.load(), 200);\n }\n\n private load() {\n this.loadError = this.onError;\n this.loadSrc = this._src;\n this.nanoImgWillLoad.emit();\n }\n\n private onLoad = () => {\n this.nanoImgDidLoad.emit();\n setTimeout(() => (this.hasLoaded = true), 50);\n };\n\n private onError = () => {\n this.nanoImgError.emit();\n };\n\n private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n Object.entries(e.detail).forEach(([bp, active]) => {\n this._srcSet[bp].active = active;\n });\n\n // sort and find the highest sized matching image.\n const srcOpts = [];\n Object.keys(this._srcSet)\n .sort()\n .forEach((bp) => {\n if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n });\n\n if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n // no matching image? Set back to default\n else this._src = this.src;\n };\n\n private removeIO() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n connectedCallback() {\n this.srcChanged();\n this.srcSetChanged();\n this.lazyChanged();\n }\n\n componentDidLoad() {\n this.addIO();\n }\n\n disconnectedCallback() {\n this.removeIO();\n }\n\n render() {\n const bgStyle = !!this.loadSrc\n ? { 'background-image': `url(${this.loadSrc})` }\n : {};\n\n return (\n <div class=\"img\">\n <nano-skeleton class=\"img__loader\"></nano-skeleton>\n {!!this.background && (\n <div\n class={{\n loaded: this.hasLoaded,\n img__bg: true,\n 'no-height': this.autoHeight === 'image',\n }}\n style={bgStyle}\n >\n <slot />\n </div>\n )}\n <img\n class={{\n img__image: true,\n loaded: this.hasLoaded,\n hide: this.background,\n 'no-height': this.autoHeight === 'content',\n }}\n decoding=\"async\"\n src={Build.isServer ? this.src : this.loadSrc}\n loading={Build.isServer && this.lazy ? 'lazy' : undefined}\n alt={this.alt}\n onLoad={this.onLoad}\n onError={this.loadError}\n />\n <nano-resize-observe\n class=\"img__observer\"\n onNanoResizeStateChange={this.onResize}\n states={this.imgStates}\n />\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"nano-grid.nano-img.entry.cjs.js","mappings":"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","names":["getElement","h","Host"],"sources":["./src/utils/constructible-style.tsx","./src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","./src/components/grid/grid.tsx","./src/components/img/img.scss?tag=nano-img&encapsulation=shadow","./src/components/img/img.tsx"],"sourcesContent":["import { h, Host, getElement, VNode, ComponentInterface } from '@stencil/core';\n// import type { VNode, HTMLStencilElement } from \"@stencil/core\";\n\nconst supportsConstructibleStylesheets = (() => {\n try {\n return !!new CSSStyleSheet();\n } catch (e) {\n return false;\n }\n})();\n\nconst cacheKeys: WeakMap<ComponentInterface, string> = new WeakMap();\n\ndeclare type ConstructibleStyleDecorator = (\n target: ComponentInterface,\n propertyKey: string\n) => void;\n\n/**\n * Dynamically create a constructible stylesheet which is applied to the component.\n * The stylesheet is then cached for future instances of the component.\n * @usage\nAs a string:\n```\n@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\nAs a function:\n```\n@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.\n * @returns `@ConstructableStyle` decorator\n */\nexport function ConstructibleStyle(\n opts: ConstructibleStyleOptions = {}\n): ConstructibleStyleDecorator {\n return (target: ComponentInterface, propertyKey: string) => {\n if (!opts.cacheKeyProperty) {\n opts.cacheKeyProperty = propertyKey;\n }\n\n const { componentWillLoad, render, componentWillRender } = target;\n if (!componentWillLoad)\n console.warn(\n `ConstructibleStyle requires you to have a \\`componentWillLoad\\` lifecycle method in \\`${target.constructor.name}\\`. Failure to add this function may cause ConstructibleStyle to fail due to StencilJS build optimizations.`\n );\n\n if (supportsConstructibleStylesheets) {\n const addStylesheet = (instance: ComponentInterface) => {\n if (\n !instance[opts.cacheKeyProperty] ||\n (cacheKeys.get(instance) &&\n cacheKeys.get(instance) === instance[opts.cacheKeyProperty])\n )\n return;\n\n cacheKeys.set(instance, instance[opts.cacheKeyProperty]);\n const host = getElement(instance);\n const cssText =\n typeof instance[propertyKey] === 'function'\n ? instance[propertyKey]()\n : instance[propertyKey];\n const root = (host.shadowRoot || document) as any;\n root.adoptedStyleSheets = [\n ...(root.adoptedStyleSheets || []),\n getOrCreateStylesheet(instance, target, cssText, opts),\n ];\n };\n\n target.componentWillLoad = function () {\n const willLoadResult =\n componentWillLoad && componentWillLoad.call(this);\n addStylesheet(this);\n return willLoadResult;\n };\n\n target.componentWillRender = function () {\n const willRenderResult =\n componentWillRender && componentWillRender.call(this);\n addStylesheet(this);\n return willRenderResult;\n };\n } else {\n target.render = function () {\n const cssText =\n typeof this[propertyKey] === 'function'\n ? this[propertyKey]()\n : this[propertyKey];\n let renderedNode: VNode = render.call(this);\n\n if (isHost(renderedNode)) {\n appendStyleToHost(renderedNode, target.constructor.name, cssText);\n } else {\n renderedNode = <Host>{renderedNode}</Host>;\n\n if (!('attachShadow' in HTMLElement.prototype)) {\n appendStyleToHost(renderedNode, target.constructor.name, cssText);\n } else {\n if (!target.__constructableStyle) {\n const style = document.createElement('style');\n style.setAttribute('type', 'text/css');\n style.setAttribute(\n 'constructible-style',\n target.constructor.name\n );\n style.innerHTML = cssText;\n target.__constructableStyle = style;\n document.head.appendChild(style);\n }\n }\n }\n\n return renderedNode;\n };\n }\n };\n}\n\nfunction appendStyleToHost(node, targetName, cssText) {\n (getHostChildren(node) || []).push(\n <style type=\"text/css\" constructible-style={targetName}>\n {cssText}\n </style>\n );\n}\n\nfunction getOrCreateStylesheet(\n instance: ComponentInterface,\n target: ComponentInterface,\n cssText: string,\n opts: ConstructibleStyleOptions\n): CSSStyleSheet {\n if (!target.__constructableStyle) {\n target.__constructableStyle = {};\n }\n\n const key = instance[opts.cacheKeyProperty];\n\n if (!target.__constructableStyle[key]) {\n target.__constructableStyle[key] = new CSSStyleSheet();\n target.__constructableStyle[key].replace(cssText);\n }\n\n return target.__constructableStyle[key];\n}\n\nfunction isHost(node): boolean {\n for (const prop in node) {\n if (node.hasOwnProperty(prop)) {\n if (node[prop] === Host) {\n return true;\n }\n }\n }\n return false;\n}\n\nfunction getHostChildren(node): Array<VNode> {\n for (const prop in node) {\n if (node.hasOwnProperty(prop)) {\n if (Array.isArray(node[prop])) {\n return node[prop];\n }\n }\n }\n}\n\nexport interface ConstructibleStyleOptions {\n /**\n * Set this in case an instance of a component could produce different styles based on variables.\n * This will ensure that you get new styles for each mode.\n * @example\n```\n@Prop() mode: string;\n@ConstructableStyle({ cacheKeyProperty: \"mode\" }) style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;\n```\n */\n cacheKeyProperty?: string;\n}\n","@use 'sass:math';\n\n@import '../../global/style/nano-theme/base';\n\n:host {\n /**\n * @prop --grid-col-gap: gap between all columns. Defaults to theme's global padding\n * @prop --grid-row-gap: gap between all rows. Defaults to theme's global padding\n */\n\n --grid-col-gap: #{$spacing-medium};\n --grid-row-gap: #{$spacing-medium};\n --current-grid-size: \"grid size: s\";\n\n container-type: inline-size;\n display: block;\n\n .grid {\n display: grid;\n gap: var(--grid-row-gap) var(--grid-col-gap);\n block-size: inherit;\n min-block-size: inherit;\n }\n}\n\n:host([show-helper]:not([show-helper='false'])) {\n position: relative;\n\n .grid--helper {\n position: absolute;\n inset: 0;\n pointer-events: none;\n\n &::before {\n content: var(--current-grid-size);\n font-size: 30px;\n position: absolute;\n inline-size: 100%;\n inset-inline-start: 0;\n text-align: center;\n inset-block-start: 50%;\n transform: translateY(-50%);\n color: rgb(0 0 0 / 20%);\n text-transform: uppercase;\n z-index: 99;\n pointer-events: none;\n }\n }\n\n .grid__helper-item {\n display: none;\n background: hsl(204deg 80% 72% / 25%);\n }\n}\n","import { Component, h, Prop, Host, State, Watch } from '@stencil/core';\nimport { ConstructibleStyle } from '../../utils/constructible-style';\n\n/**\n * A lightweight, context-aware CSS grid implementation.\n *\n * - Define multiple grids templates at different breakpoints\n * - Uses `@container` queries to select the correct grid depending on the current dimensions\n * - Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n * - SSR optimised\n\n * @part grid - the main grid element.\n * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`\n * @part helper - a replica grid showed when `show-helper` is true\n *\n * @slot - default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement.\n */\n@Component({\n tag: 'nano-grid',\n styleUrl: 'grid.scss',\n shadow: true,\n})\nexport class Grid {\n private grids: {\n cols: number;\n breakpoint: number | string;\n name: string;\n template?: string;\n }[] = [];\n @State() cacheKey: string;\n\n /** the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop() sSize: number | string = 300;\n\n /** the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop() mSize: number | string = 550;\n\n /** the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop() lSize: number | string = 800;\n\n /** the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` */\n @Prop() xlSize: number | string = 1000;\n\n /** the number of columns the grid has at the small breakpoint. */\n @Prop() sCols: number;\n\n /** the number of columns the grid has at the medium breakpoint. */\n @Prop() mCols: number;\n\n /** the number of columns the grid has at the large breakpoint. */\n @Prop() lCols: number;\n\n /** the number of columns the grid has at the xl breakpoint. */\n @Prop() xlCols: number;\n\n /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */\n @Prop() xxlCols: number;\n\n /** Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect */\n @Prop() sTpl?: string;\n\n /** Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect */\n @Prop() mTpl?: string;\n\n /** Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect */\n @Prop() lTpl?: string;\n\n /** Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect */\n @Prop() xlTpl?: string;\n\n /** Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect */\n @Prop() xxlTpl?: string;\n\n /** shows a grid helper to visualise where columns are */\n @Prop({ reflect: true }) showHelper: boolean = false;\n\n @Watch('sTpl')\n @Watch('mTpl')\n @Watch('lTpl')\n @Watch('xlTpl')\n @Watch('xxlTpl')\n @Watch('sSize')\n @Watch('mSize')\n @Watch('lSize')\n @Watch('xlSize')\n @Watch('sCols')\n @Watch('mCols')\n @Watch('lCols')\n @Watch('xlCols')\n @Watch('xxlCols')\n @Watch('showHelper')\n constructSizeArray() {\n this.grids = [];\n\n if (this.sCols)\n this.grids.push({\n cols: this.sCols,\n breakpoint: 0,\n name: 's',\n template: this.sTpl,\n });\n if (this.mCols)\n this.grids.push({\n cols: this.mCols,\n breakpoint: this.sSize,\n name: 'm',\n template: this.mTpl,\n });\n if (this.lSize)\n this.grids.push({\n cols: this.lCols,\n breakpoint: this.mSize,\n name: 'l',\n template: this.lTpl,\n });\n if (this.xlCols)\n this.grids.push({\n cols: this.xlCols,\n breakpoint: this.lSize,\n name: 'xl',\n template: this.xlTpl,\n });\n if (this.xxlCols)\n this.grids.push({\n cols: this.xxlCols,\n breakpoint: this.xlSize,\n name: 'xxl',\n template: this.xxlTpl,\n });\n\n this.cacheKey =\n this.grids\n .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template || ''}`)\n .join('') +\n '-helper-' +\n this.showHelper;\n }\n\n @ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }) protected styles =\n () => {\n const css = /* css */ `\n ${this.grids\n .map(\n (bp) => /* css */ `\n @container (min-width: ${\n typeof bp.breakpoint === 'number'\n ? bp.breakpoint + 1 + 'px'\n : bp.breakpoint\n }) {\n .grid {\n --current-grid-size: \"grid size: ${bp.name}\";\n ${\n bp.template\n ? `grid-template: ${bp.template};`\n : `grid-template-columns: repeat(${bp.cols}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`\n }\n }\n ${[...Array(bp.cols)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n .grid > [grid-states~=\"${bp.name}-col-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-start-${gItm}\"]) {\n grid-column-start: ${gItm} !important;\n }\n .grid > [grid-states~=\"${bp.name}-col-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-span-${gItm}\"]) {\n grid-column-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${[...Array(24)]\n .map((_, i) => {\n const gItm = i + 1;\n return /* css */ `\n .grid > [grid-states~=\"${bp.name}-row-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-start-${gItm}\"]) {\n grid-row-start: ${gItm} !important;\n }\n .grid > [grid-states~=\"${bp.name}-row-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-span-${gItm}\"]) {\n grid-row-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${\n this.showHelper &&\n /* css */ `\n .grid--helper :nth-child(-n+${bp.cols}) {\n display: block !important;\n }\n `\n }\n }\n `\n )\n .join('')}\n `;\n return css;\n };\n\n componentWillLoad() {\n this.constructSizeArray();\n }\n\n render() {\n return (\n <Host>\n <div part=\"grid\" class=\"grid\">\n <slot />\n </div>\n {this.showHelper && (\n <div class=\"grid grid--helper\" part=\"helper\">\n {[...Array(24)].map(() => (\n <div class=\"grid__helper-item\" />\n ))}\n </div>\n )}\n </Host>\n );\n }\n}\n",":host {\n /**\n * @prop --padding: padding around any content. Only relevent on `<nano-img background>`\n */\n --padding: 0;\n\n display: inline-block;\n object-fit: cover;\n object-position: center;\n background-size: cover;\n background-position: center;\n\n * {\n border-radius: inherit;\n }\n}\n\n:host([background]:not([background='false'])) {\n display: block;\n}\n\n.img {\n position: relative;\n object-fit: inherit;\n object-position: inherit;\n background-color: inherit;\n background-position: inherit;\n background-size: inherit;\n background-origin: inherit;\n background-attachment: inherit;\n background-repeat: inherit;\n flex: 1 1 100%;\n display: flex;\n flex-direction: column;\n min-block-size: inherit;\n max-block-size: inherit;\n max-inline-size: inherit;\n min-height: inherit;\n min-width: inherit;\n block-size: inherit;\n inline-size: inherit;\n height: inherit;\n width: inherit;\n max-height: inherit;\n max-width: inherit;\n aspect-ratio: inherit;\n}\n\n.img__loader,\n.img__observer {\n position: absolute;\n inset: 0;\n block-size: 100%;\n inline-size: 100%;\n z-index: -1;\n}\n\n.img__image,\n.img__bg {\n border-radius: inherit;\n display: block;\n opacity: 0;\n transition: 0.5s ease opacity, 0.3s ease filter 0.4s;\n filter: blur(5px);\n flex: 1;\n\n &.loaded {\n opacity: 1;\n filter: blur(0);\n\n @media not all and (min-resolution: 0.001dpcm) {\n @supports (-webkit-appearance: none) {\n filter: blur(0);\n }\n }\n }\n}\n\n.img__image {\n object-fit: inherit;\n object-position: inherit;\n max-inline-size: 100%;\n min-block-size: inherit;\n max-block-size: inherit;\n min-height: inherit;\n min-width: inherit;\n block-size: auto;\n inline-size: inherit;\n height: inherit;\n width: inherit;\n max-height: inherit;\n max-width: inherit;\n aspect-ratio: inherit;\n\n &.hide {\n visibility: hidden;\n\n &.no-height {\n block-size: 1px;\n position: absolute;\n z-index: -1;\n }\n }\n}\n\n.img__bg {\n background-color: inherit;\n background-position: inherit;\n background-size: inherit;\n background-origin: inherit;\n background-attachment: inherit;\n background-repeat: inherit;\n overflow: auto;\n padding: var(--padding);\n\n &.no-height {\n position: absolute;\n inset: 0;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n State,\n Prop,\n Watch,\n h,\n ComponentInterface,\n Build,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\n/**\n * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n */\n@Component({\n tag: 'nano-img',\n styleUrl: 'img.scss',\n shadow: true,\n})\nexport class Img implements ComponentInterface {\n private io?: IntersectionObserver;\n private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n @Element() host!: HTMLNanoImgElement;\n\n @State() loadSrc?: string;\n @State() loadError?: () => void;\n @State() hasLoaded: boolean = false;\n @State() imgStates: string = null;\n @State() _src: string;\n @Watch('_src')\n _srcChanged() {\n this.hasLoaded = false;\n this.addIO();\n }\n\n /** This attribute defines the alternative text describing the image.\n * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. */\n @Prop() alt?: string;\n\n /** The image URL. This attribute is mandatory for the `<img>` element. */\n @Prop() src!: string;\n @Watch('src')\n srcChanged() {\n this._src = this.src;\n }\n\n /** Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n @Prop() srcSet?: string;\n @Watch('srcSet')\n srcSetChanged() {\n if (!this.srcSet) return;\n\n delete this._srcSet;\n this._srcSet = {};\n\n this.imgStates = this.srcSet\n .split(',')\n .map((bpSrc) => {\n const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n this._srcSet[bp] = { src: src, active: false };\n return bp;\n })\n .join(', ');\n }\n\n /** Render image lazily, when it comes into the browser viewport **/\n @Prop() lazy: boolean = true;\n @Watch('lazy')\n lazyChanged() {\n if (!this.lazy) this.load();\n }\n\n /** Render the image as a background image **/\n @Prop() background?: boolean;\n\n /** When the image is rendered as a background, and there is no preset dimensions of the component,\n * you can set how the component height will be set. Via image size or via the content **/\n @Prop() autoHeight: 'content' | 'image' = 'content';\n\n /** Emitted when the img src has been set */\n @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n /** Emitted when the image has finished loading */\n @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n /** Emitted when the img fails to load */\n @Event() nanoImgError!: EventEmitter<void>;\n\n private addIO() {\n if (!this._src || this.hasLoaded) return;\n if (!this.lazy) {\n this.load();\n return;\n }\n if (\n typeof (window as any) !== 'undefined' &&\n 'IntersectionObserver' in window\n ) {\n this.removeIO();\n this.io = new IntersectionObserver((data) => {\n if (data[0].isIntersecting) {\n this.load();\n this.removeIO();\n }\n });\n\n this.io.observe(this.host);\n } else setTimeout(() => this.load(), 200);\n }\n\n private load() {\n this.loadError = this.onError;\n this.loadSrc = this._src;\n this.nanoImgWillLoad.emit();\n }\n\n private onLoad = () => {\n this.nanoImgDidLoad.emit();\n setTimeout(() => (this.hasLoaded = true), 50);\n };\n\n private onError = () => {\n this.nanoImgError.emit();\n };\n\n private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n Object.entries(e.detail).forEach(([bp, active]) => {\n this._srcSet[bp].active = active;\n });\n\n // sort and find the highest sized matching image.\n const srcOpts = [];\n Object.keys(this._srcSet)\n .sort()\n .forEach((bp) => {\n if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n });\n\n if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n // no matching image? Set back to default\n else this._src = this.src;\n };\n\n private removeIO() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n connectedCallback() {\n this.srcChanged();\n this.srcSetChanged();\n this.lazyChanged();\n }\n\n componentDidLoad() {\n this.addIO();\n }\n\n disconnectedCallback() {\n this.removeIO();\n }\n\n render() {\n const bgStyle = !!this.loadSrc\n ? { 'background-image': `url(${this.loadSrc})` }\n : {};\n\n return (\n <div class=\"img\">\n <nano-skeleton class=\"img__loader\"></nano-skeleton>\n {!!this.background && (\n <div\n class={{\n loaded: this.hasLoaded,\n img__bg: true,\n 'no-height': this.autoHeight === 'image',\n }}\n style={bgStyle}\n >\n <slot />\n </div>\n )}\n <img\n class={{\n img__image: true,\n loaded: this.hasLoaded,\n hide: this.background,\n 'no-height': this.autoHeight === 'content',\n }}\n decoding=\"async\"\n src={Build.isServer ? this.src : this.loadSrc}\n loading={Build.isServer && this.lazy ? 'lazy' : undefined}\n alt={this.alt}\n onLoad={this.onLoad}\n onError={this.loadError}\n />\n <nano-resize-observe\n class=\"img__observer\"\n onNanoResizeStateChange={this.onResize}\n states={this.imgStates}\n />\n </div>\n );\n }\n}\n"],"version":3}
package/dist/cjs/nano-input.cjs.entry.js CHANGED
@@ -11,7 +11,7 @@ const theme = require('./theme-9cbe28c5.js');
11
11
  const throttle = require('./throttle-f55496c8.js');
12
12
  const formControl = require('./form-control-443e90bf.js');
13
13
 
14
- const inputCss = ".sc-nano-input-h {\n box-sizing: border-box;\n}\n\n*.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::after {\n box-sizing: border-box;\n}\n[hidden].sc-nano-input {\n display: none !important;\n}\n[disabled].sc-nano-input-h:not([disabled=false]) {\n opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-input {\n container-type: inline-size;\n min-inline-size: 100%;\n display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-input {\n display: flex;\n gap: 1rem;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__wrapper.sc-nano-input {\n flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__helper-end.sc-nano-input {\n display: none;\n}\n@container (min-width: 350px) {\n .form-ctrl.has-helper-end .form-ctrl__helper-end {\n display: block !important;\n }\n .form-ctrl.has-helper-end .form-ctrl__helper {\n display: none !important;\n }\n}\n\n.form-ctrl__wrapper.sc-nano-input {\n display: block;\n}\n\nlabel.sc-nano-input, .form-ctrl__more.sc-nano-input, .form-ctrl__error.sc-nano-input, .form-ctrl__helper.sc-nano-input {\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-input, .form-ctrl__more.visually-hide.sc-nano-input, .form-ctrl__error.visually-hide.sc-nano-input, .form-ctrl__helper.visually-hide.sc-nano-input {\n clip: rect(1px, 1px, 1px, 1px);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n block-size: 1px;\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-input {\n padding-block: 0;\n -webkit-padding-end: 0;\n padding-inline-end: 0;\n -webkit-padding-start: var(--padding-start);\n padding-inline-start: var(--padding-start);\n color: var(--label-color);\n position: absolute;\n font-size: 1.15em;\n transform: translateY(-50%);\n transform-origin: top left;\n inset-block-start: 50%;\n transition: all 0.125s ease-in;\n opacity: 1;\n}\n.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input, .has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input {\n transform: translateY(-110%);\n font-size: 0.8em;\n opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input, .has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n inset-block-start: 50%;\n}\n.has-focus.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n.has-value.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-input {\n color: var(--label-color);\n font-size: var(--label-font-size);\n -webkit-padding-after: var(--padding-bottom);\n padding-block-end: var(--padding-bottom);\n line-height: 1;\n display: flex;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-wrap.sc-nano-input {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n margin-block: unset;\n -webkit-margin-end: 5px;\n margin-inline-end: 5px;\n -webkit-margin-start: 0;\n margin-inline-start: 0;\n opacity: 0;\n -webkit-appearance: none;\n appearance: none;\n transition: 0.3s ease opacity;\n font-size: 0.9em;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n margin-block: unset;\n -webkit-margin-end: 0;\n margin-inline-end: 0;\n -webkit-margin-start: auto;\n margin-inline-start: auto;\n font-size: 0.9em;\n opacity: 0.5;\n}\n.has-value.sc-nano-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n opacity: 0.5;\n}\n.has-focus.sc-nano-input-h .form-ctrl__label.sc-nano-input {\n color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__label.sc-nano-input {\n color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-focus.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-input {\n block-size: 1em;\n position: relative;\n margin-block: 4px var(--padding-bottom);\n margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-input, .form-ctrl__error.sc-nano-input {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-input {\n font-style: italic;\n color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-input-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-input {\n opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-input {\n flex: 1 1 30%;\n min-inline-size: 150px;\n font-size: var(--invalid-msg-font-size);\n color: var(--help-msg-color);\n font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-input {\n opacity: 0;\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__error.sc-nano-input {\n opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-input {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n border-radius: var(--input-border-radius);\n inline-size: 100%;\n padding: 0 !important;\n position: relative;\n flex: 1 0 auto;\n display: flex;\n background: var(--input-bg-color);\n border: var(--input-border-style);\n border-width: var(--input-border-width);\n font-size: var(--input-font-size);\n -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input {\n background: var(--input-bg-color--focus);\n border: var(--input-border-style--focus);\n border-width: var(--input-border-width);\n -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid);\n border-width: var(--input-border-width);\n -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n -webkit-padding-start: 0 !important;\n padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid-focus);\n border-width: var(--input-border-width);\n -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n -webkit-padding-start: 0 !important;\n padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-input {\n display: flex;\n align-items: stretch;\n flex: 1;\n max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-input, .form-ctrl__slot-end.sc-nano-input, .form-ctrl__slot-start.sc-nano-input, .form-ctrl__slot-value-end.sc-nano-input {\n --nano-icon-size: 1.4em;\n margin-block: 0;\n margin-inline: 0;\n font-size: 1em;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n display: flex;\n align-items: stretch;\n inline-size: auto;\n}\n\n.has-float-label.sc-nano-input .form-ctrl__slot-start.sc-nano-input {\n display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start .sc-nano-input-s > *, .form-ctrl__slot-end.sc-nano-input-s > *, .form-ctrl__slot-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n --nano-icon-size: 1.4em;\n padding-inline: unset;\n -webkit-padding-start: var(--padding-start);\n padding-inline-start: var(--padding-start);\n -webkit-padding-end: var(--padding-end);\n padding-inline-end: var(--padding-end);\n font-size: 1em;\n align-items: center;\n display: flex;\n block-size: 100%;\n z-index: 1;\n}\n.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-input-s > *, [disabled].sc-nano-input-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-input {\n color: var(--clear-btn-color);\n padding: 0;\n opacity: 0;\n inline-size: 0;\n -webkit-appearance: none;\n appearance: none;\n align-items: center;\n overflow: hidden;\n}\n.is-invalid.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n padding-block: 0;\n padding-inline: var(--padding-start) var(--padding-end);\n opacity: 1;\n inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-input:hover {\n color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-input-h {\n \n --placeholder-color: var(--nano-input-placeholder-color, initial);\n --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n --color-invalid: var(--nano-color-danger-rgb, 239 65 53);\n --color--focus-rgb:\n var(\n --nano-color-base-rgb,\n var(--nano-color-primary-rgb, 0 116 149)\n );\n --input-font-size: var(--nano-input-font-size, 0.87em);\n --input-text-color: var(--nano-input-text-color, #4a4a4a);\n --input-border-width: var(--nano-input-border-width, 1px);\n --input-border-hint-width: 3px;\n --input-border-color: var(--nano-input-border-color, #e4e6e8);\n --input-border-radius: var(--nano-input-border-radius, 0);\n --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n --input-bg-color: var(--nano-input-background-color, #fff);\n --input-bg-color--focus: var(--input-bg-color);\n --input-bg-color--invalid: var(--nano-input-background-color, white);\n --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n --help-msg-color: var(--nano-input-help-color, #616d6e);\n --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n --label-color: var(--nano-input-label-color, \"currentcolor\");\n --label-color--focus: var(--label-color);\n --label-color--invalid: var(--nano-input-label-color-invalid, \"currentcolor\");\n --label-font-size: var(--nano-input-label-color, 1em);\n --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n position: relative;\n inline-size: 100%;\n padding: 0 !important;\n color: currentcolor;\n display: block;\n}\n\n.nano-color.sc-nano-input-h {\n color: var(--nano-color-base);\n --input-border-style--focus:\n var(--nano-input-border-style, solid) var(\n --nano-color-tint,\n var(--nano-color-primary-tint, #2689a5)\n );\n}\n\n.input__native-ctrl.sc-nano-input {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding-block: 0;\n padding-inline: var(--padding-start) var(--padding-end);\n border-radius: var(--input-border-radius);\n text-overflow: ellipsis;\n color: var(--input-text-color);\n display: inline-block;\n flex: 1;\n inline-size: 100%;\n max-inline-size: 100%;\n max-block-size: 100%;\n border: 0;\n outline: none;\n background: transparent;\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n box-sizing: border-box;\n resize: none;\n overflow: hidden;\n line-height: 2.5em;\n \n}\n.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n line-height: 2.1em;\n min-height: 2.1em;\n -webkit-padding-before: 1.4em;\n padding-block-start: 1.4em;\n}\n.input__native-ctrl.sc-nano-input::placeholder {\n color: var(--placeholder-color);\n font-family: inherit;\n font-style: var(--placeholder-font-style);\n font-weight: var(--placeholder-font-weight);\n opacity: var(--placeholder-opacity);\n line-height: inherit;\n min-height: initial;\n}\n.input__native-ctrl.sc-nano-input::-moz-placeholder {\n line-height: 2.8em;\n text-overflow: ellipsis;\n}\n.input__native-ctrl.sc-nano-input:-webkit-autofill {\n background-color: transparent;\n}\n.input__native-ctrl.sc-nano-input::-webkit-search-decoration, .input__native-ctrl.sc-nano-input::-webkit-search-cancel-button, .input__native-ctrl.sc-nano-input::-webkit-search-results-button, .input__native-ctrl.sc-nano-input::-webkit-search-results-decoration {\n -webkit-appearance: none;\n appearance: none;\n}\n.input__native-ctrl.sc-nano-input:invalid {\n box-shadow: none;\n}\n.input__native-ctrl.sc-nano-input::-ms-clear, .input__native-ctrl.sc-nano-input::-ms-reveal {\n display: none;\n}\n.input__native-ctrl.input__resizable.sc-nano-input {\n resize: vertical;\n overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n line-height: 1.5em;\n padding-block: var(--padding-top) 0.25em;\n white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::placeholder {\n line-height: 1.5em;\n}\n.has-float-label.sc-nano-input .form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n -webkit-padding-before: 1.75em;\n padding-block-start: 1.75em;\n}\n[readonly].sc-nano-input-h:not([readonly=false]) .input__native-ctrl.sc-nano-input {\n -webkit-user-select: none;\n user-select: none;\n}";
14
+ const inputCss = ".sc-nano-input-h {\n box-sizing: border-box;\n}\n\n*.sc-nano-input, *.sc-nano-input::before, *.sc-nano-input::after {\n box-sizing: border-box;\n}\n[hidden].sc-nano-input {\n display: none !important;\n}\n[disabled].sc-nano-input-h:not([disabled=false]) {\n opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-input {\n min-inline-size: 100%;\n display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-input {\n display: flex;\n gap: 1rem;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__wrapper.sc-nano-input {\n flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__helper-end.sc-nano-input {\n display: none;\n}\n@container (min-width: 350px) {\n .form-ctrl.has-helper-end .form-ctrl__helper-end {\n display: block !important;\n }\n .form-ctrl.has-helper-end .form-ctrl__helper {\n display: none !important;\n }\n}\n\n.form-ctrl__wrapper.sc-nano-input {\n display: block;\n container-type: inline-size;\n}\n\nlabel.sc-nano-input, .form-ctrl__more.sc-nano-input, .form-ctrl__error.sc-nano-input, .form-ctrl__helper.sc-nano-input {\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-input, .form-ctrl__more.visually-hide.sc-nano-input, .form-ctrl__error.visually-hide.sc-nano-input, .form-ctrl__helper.visually-hide.sc-nano-input {\n clip: rect(1px, 1px, 1px, 1px);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n block-size: 1px;\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-input {\n padding-block: 0;\n -webkit-padding-end: 0;\n padding-inline-end: 0;\n -webkit-padding-start: var(--padding-start);\n padding-inline-start: var(--padding-start);\n color: var(--label-color);\n position: absolute;\n font-size: 1.15em;\n transform: translateY(-50%);\n transform-origin: top left;\n inset-block-start: 50%;\n transition: all 0.125s ease-in;\n opacity: 1;\n}\n.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input, .has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input {\n transform: translateY(-110%);\n font-size: 0.8em;\n opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input, .has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n inset-block-start: 50%;\n}\n.has-focus.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n.has-value.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input {\n inset-block-start: 0;\n transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-input {\n color: var(--label-color);\n font-size: var(--label-font-size);\n -webkit-padding-after: var(--padding-bottom);\n padding-block-end: var(--padding-bottom);\n line-height: 1;\n display: flex;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-wrap.sc-nano-input {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n margin-block: unset;\n -webkit-margin-end: 5px;\n margin-inline-end: 5px;\n -webkit-margin-start: 0;\n margin-inline-start: 0;\n opacity: 0;\n -webkit-appearance: none;\n appearance: none;\n transition: 0.3s ease opacity;\n font-size: 0.9em;\n}\n.form-ctrl__label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input {\n margin-block: unset;\n -webkit-margin-end: 0;\n margin-inline-end: 0;\n -webkit-margin-start: auto;\n margin-inline-start: auto;\n font-size: 0.9em;\n opacity: 0.5;\n}\n.has-value.sc-nano-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input {\n opacity: 0.5;\n}\n.has-focus.sc-nano-input-h .form-ctrl__label.sc-nano-input {\n color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__label.sc-nano-input {\n color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n opacity: 0;\n transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input, .has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input, .has-focus.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input, .has-value.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-input {\n block-size: 1em;\n position: relative;\n margin-block: 4px var(--padding-bottom);\n margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-input, .form-ctrl__error.sc-nano-input {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-input {\n font-style: italic;\n color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-input-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-input {\n opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-input {\n flex: 1 1 30%;\n min-inline-size: 150px;\n font-size: var(--invalid-msg-font-size);\n color: var(--help-msg-color);\n font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-input {\n opacity: 0;\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__error.sc-nano-input {\n opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-input {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n border-radius: var(--input-border-radius);\n inline-size: 100%;\n padding: 0 !important;\n position: relative;\n flex: 1 0 auto;\n display: flex;\n background: var(--input-bg-color);\n border: var(--input-border-style);\n border-width: var(--input-border-width);\n font-size: var(--input-font-size);\n -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input {\n background: var(--input-bg-color--focus);\n border: var(--input-border-style--focus);\n border-width: var(--input-border-width);\n -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid);\n border-width: var(--input-border-width);\n -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n -webkit-padding-start: 0 !important;\n padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-input-h:not([disabled]) .form-ctrl__input.sc-nano-input {\n background: var(--input-bg-color--invalid);\n border: var(--input-border-style--invalid-focus);\n border-width: var(--input-border-width);\n -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n -webkit-padding-start: 0 !important;\n padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-input {\n display: flex;\n align-items: stretch;\n flex: 1;\n max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-input, .form-ctrl__slot-end.sc-nano-input, .form-ctrl__slot-start.sc-nano-input, .form-ctrl__slot-value-end.sc-nano-input {\n --nano-icon-size: 1.4em;\n margin-block: 0;\n margin-inline: 0;\n font-size: 1em;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n display: flex;\n align-items: stretch;\n inline-size: auto;\n}\n\n.has-float-label.sc-nano-input .form-ctrl__slot-start.sc-nano-input {\n display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-input-s > *, .form-ctrl__slot-start .sc-nano-input-s > *, .form-ctrl__slot-end.sc-nano-input-s > *, .form-ctrl__slot-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n --nano-icon-size: 1.4em;\n padding-inline: unset;\n -webkit-padding-start: var(--padding-start);\n padding-inline-start: var(--padding-start);\n -webkit-padding-end: var(--padding-end);\n padding-inline-end: var(--padding-end);\n font-size: 1em;\n align-items: center;\n display: flex;\n block-size: 100%;\n z-index: 1;\n}\n.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s > *, .sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-input-s > *, [disabled].sc-nano-input-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-input-s > *, .form-ctrl__slot-value-end .sc-nano-input-s > *, .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input {\n pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-input {\n color: var(--clear-btn-color);\n padding: 0;\n opacity: 0;\n inline-size: 0;\n -webkit-appearance: none;\n appearance: none;\n align-items: center;\n overflow: hidden;\n}\n.is-invalid.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input {\n padding-block: 0;\n padding-inline: var(--padding-start) var(--padding-end);\n opacity: 1;\n inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-input:hover {\n color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-input-h {\n \n --placeholder-color: var(--nano-input-placeholder-color, initial);\n --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n --color-invalid: var(--nano-color-danger-rgb, 239 65 53);\n --color--focus-rgb:\n var(\n --nano-color-base-rgb,\n var(--nano-color-primary-rgb, 0 116 149)\n );\n --input-font-size: var(--nano-input-font-size, 0.87em);\n --input-text-color: var(--nano-input-text-color, #4a4a4a);\n --input-border-width: var(--nano-input-border-width, 1px);\n --input-border-hint-width: 3px;\n --input-border-color: var(--nano-input-border-color, #e4e6e8);\n --input-border-radius: var(--nano-input-border-radius, 0);\n --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n --input-bg-color: var(--nano-input-background-color, #fff);\n --input-bg-color--focus: var(--input-bg-color);\n --input-bg-color--invalid: var(--nano-input-background-color, white);\n --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n --help-msg-color: var(--nano-input-help-color, #616d6e);\n --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n --label-color: var(--nano-input-label-color, \"currentcolor\");\n --label-color--focus: var(--label-color);\n --label-color--invalid: var(--nano-input-label-color-invalid, \"currentcolor\");\n --label-font-size: var(--nano-input-label-color, 1em);\n --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n position: relative;\n inline-size: 100%;\n padding: 0 !important;\n color: currentcolor;\n display: block;\n}\n\n.nano-color.sc-nano-input-h {\n color: var(--nano-color-base);\n --input-border-style--focus:\n var(--nano-input-border-style, solid) var(\n --nano-color-tint,\n var(--nano-color-primary-tint, #2689a5)\n );\n}\n\n.input__native-ctrl.sc-nano-input {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n padding-block: 0;\n padding-inline: var(--padding-start) var(--padding-end);\n border-radius: var(--input-border-radius);\n text-overflow: ellipsis;\n color: var(--input-text-color);\n display: inline-block;\n flex: 1;\n inline-size: 100%;\n max-inline-size: 100%;\n max-block-size: 100%;\n border: 0;\n outline: none;\n background: transparent;\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n box-sizing: border-box;\n resize: none;\n overflow: hidden;\n line-height: 2.5em;\n \n}\n.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input {\n line-height: 2.1em;\n min-height: 2.1em;\n -webkit-padding-before: 1.4em;\n padding-block-start: 1.4em;\n}\n.input__native-ctrl.sc-nano-input::placeholder {\n color: var(--placeholder-color);\n font-family: inherit;\n font-style: var(--placeholder-font-style);\n font-weight: var(--placeholder-font-weight);\n opacity: var(--placeholder-opacity);\n line-height: inherit;\n min-height: initial;\n}\n.input__native-ctrl.sc-nano-input::-moz-placeholder {\n line-height: 2.8em;\n text-overflow: ellipsis;\n}\n.input__native-ctrl.sc-nano-input:-webkit-autofill {\n background-color: transparent;\n}\n.input__native-ctrl.sc-nano-input::-webkit-search-decoration, .input__native-ctrl.sc-nano-input::-webkit-search-cancel-button, .input__native-ctrl.sc-nano-input::-webkit-search-results-button, .input__native-ctrl.sc-nano-input::-webkit-search-results-decoration {\n -webkit-appearance: none;\n appearance: none;\n}\n.input__native-ctrl.sc-nano-input:invalid {\n box-shadow: none;\n}\n.input__native-ctrl.sc-nano-input::-ms-clear, .input__native-ctrl.sc-nano-input::-ms-reveal {\n display: none;\n}\n.input__native-ctrl.input__resizable.sc-nano-input {\n resize: vertical;\n overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n line-height: 1.5em;\n padding-block: var(--padding-top) 0.25em;\n white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::placeholder {\n line-height: 1.5em;\n}\n.has-float-label.sc-nano-input .form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input {\n -webkit-padding-before: 1.75em;\n padding-block-start: 1.75em;\n}\n[readonly].sc-nano-input-h:not([readonly=false]) .input__native-ctrl.sc-nano-input {\n -webkit-user-select: none;\n user-select: none;\n}";
15
15
 
16
16
  let inputIds = 0;
17
17
  const Input = class {
@@ -362,7 +362,7 @@ const Input = class {
362
362
  return (index.h(index.Host, { "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: Object.assign(Object.assign({}, theme.createColorClasses(this.color)), { 'has-value': this.hasValue(), 'has-focus': this.hasFocus, 'is-invalid': this._invalid }) }, index.h(formControl.FormControlWrap, Object.assign({}, wrapOptions), index.h(formControl.FormControl, Object.assign({}, controlOptions, { onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }), this.type !== 'textarea' && (index.h("input", { id: this.inputId, class: "input__native-ctrl", ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalise, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onBlur: this.handleBlur, onKeyDown: this.onKeydown, onInvalid: this.validate })), this.type === 'textarea' && (index.h("textarea", { rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
363
363
  'input__native-ctrl': true,
364
364
  input__resizable: this.resize === 'true',
365
- }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur }))), index.h("slot", null))));
365
+ }, ref: (input) => (this.nativeInput = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, autoCapitalize: this.autocapitalise, autoCorrect: this.autocorrect, autoFocus: this.autofocus, inputMode: this.inputmode, form: this.form, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, value: value, onInput: this.onInput, onChange: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown, onInvalid: this.validate, onBlur: this.handleBlur })))), index.h("slot", null)));
366
366
  }
367
367
  get el() { return index.getElement(this); }
368
368
  static get watchers() { return {