@nordhealth/components 3.0.0 → 3.1.0

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 (147) hide show
  1. package/custom-elements.json +2466 -2133
  2. package/lib/{AutocompleteMixin-60503685.js → AutocompleteMixin-3cf61f49.js} +2 -2
  3. package/lib/{AutocompleteMixin-60503685.js.map → AutocompleteMixin-3cf61f49.js.map} +1 -1
  4. package/lib/Avatar.js +1 -1
  5. package/lib/Badge.js +1 -1
  6. package/lib/Banner.js +1 -1
  7. package/lib/Button.js +1 -1
  8. package/lib/Button.js.map +1 -1
  9. package/lib/ButtonGroup.js +1 -1
  10. package/lib/Calendar-62409139.js +2 -0
  11. package/lib/Calendar-62409139.js.map +1 -0
  12. package/lib/Calendar.js +1 -1
  13. package/lib/Card.js +1 -1
  14. package/lib/Checkbox.js +1 -1
  15. package/lib/CommandMenu.js +1 -1
  16. package/lib/CommandMenu.js.map +1 -1
  17. package/lib/CommandMenuAction.js +1 -1
  18. package/lib/{Component-253ecb24.js → Component-420bbc41.js} +2 -2
  19. package/lib/Component-420bbc41.js.map +1 -0
  20. package/lib/DatePicker.js +1 -1
  21. package/lib/DatePicker.js.map +1 -1
  22. package/lib/Divider.js +1 -1
  23. package/lib/Drawer.js +1 -1
  24. package/lib/Dropdown.js +1 -1
  25. package/lib/Dropdown.js.map +1 -1
  26. package/lib/DropdownGroup.js +1 -1
  27. package/lib/DropdownGroup.js.map +1 -1
  28. package/lib/DropdownItem-a9bf32f4.js +2 -0
  29. package/lib/DropdownItem-a9bf32f4.js.map +1 -0
  30. package/lib/DropdownItem.js +1 -1
  31. package/lib/DropdownItem.js.map +1 -1
  32. package/lib/EmptyState.js +1 -1
  33. package/lib/Fieldset.js +1 -1
  34. package/lib/{FocusableMixin-003e1094.js → FocusableMixin-4300e44e.js} +2 -2
  35. package/lib/{FocusableMixin-003e1094.js.map → FocusableMixin-4300e44e.js.map} +1 -1
  36. package/lib/{FormAssociatedMixin-895cf600.js → FormAssociatedMixin-edf83ac6.js} +2 -2
  37. package/lib/{FormAssociatedMixin-895cf600.js.map → FormAssociatedMixin-edf83ac6.js.map} +1 -1
  38. package/lib/{FormField-0783cb5a.js → FormField-cbfebb3f.js} +2 -2
  39. package/lib/FormField-cbfebb3f.js.map +1 -0
  40. package/lib/Header.js +1 -1
  41. package/lib/Icon.js +1 -1
  42. package/lib/IconManager.js +1 -1
  43. package/lib/Input.js +1 -1
  44. package/lib/Input.js.map +1 -1
  45. package/lib/{InputMixin-e15dd8f7.js → InputMixin-4037827f.js} +2 -2
  46. package/lib/{InputMixin-e15dd8f7.js.map → InputMixin-4037827f.js.map} +1 -1
  47. package/lib/Layout.js +1 -1
  48. package/lib/Layout.js.map +1 -1
  49. package/lib/{LightDomController-5c53b3f4.js → LightDomController-f78fb046.js} +2 -2
  50. package/lib/{LightDomController-5c53b3f4.js.map → LightDomController-f78fb046.js.map} +1 -1
  51. package/lib/LocalizeController.js +1 -1
  52. package/lib/LocalizeController.js.map +1 -1
  53. package/lib/Message.js +2 -0
  54. package/lib/Message.js.map +1 -0
  55. package/lib/Modal.js +1 -1
  56. package/lib/Modal.js.map +1 -1
  57. package/lib/NavGroup.js +1 -1
  58. package/lib/NavItem.js +1 -1
  59. package/lib/NavToggle-d34fed72.js +2 -0
  60. package/lib/NavToggle-d34fed72.js.map +1 -0
  61. package/lib/NavToggle.js +1 -1
  62. package/lib/NavToggle.js.map +1 -1
  63. package/lib/Navigation.js +1 -1
  64. package/lib/Notification.js +1 -1
  65. package/lib/Notification.js.map +1 -1
  66. package/lib/NotificationGroup.js +1 -1
  67. package/lib/{NotificationMixin-cea138a7.js → NotificationMixin-c06bb631.js} +2 -2
  68. package/lib/{NotificationMixin-cea138a7.js.map → NotificationMixin-c06bb631.js.map} +1 -1
  69. package/lib/{Popout-9f8752b0.js → Popout-c6ee2d7a.js} +2 -2
  70. package/lib/{Popout-9f8752b0.js.map → Popout-c6ee2d7a.js.map} +1 -1
  71. package/lib/Popout.js +1 -1
  72. package/lib/ProgressBar.js +1 -1
  73. package/lib/Qrcode.js +1 -1
  74. package/lib/Radio.js +1 -1
  75. package/lib/Range.js +1 -1
  76. package/lib/Select.js +1 -1
  77. package/lib/{SizeMixin-bc2098f4.js → SizeMixin-fb379434.js} +2 -2
  78. package/lib/{SizeMixin-bc2098f4.js.map → SizeMixin-fb379434.js.map} +1 -1
  79. package/lib/Skeleton.js +1 -1
  80. package/lib/Spinner.js +1 -1
  81. package/lib/Stack.js +1 -1
  82. package/lib/{Sticky-220280e0.js → Sticky-acc92284.js} +2 -2
  83. package/lib/Sticky-acc92284.js.map +1 -0
  84. package/lib/Tab.js +1 -1
  85. package/lib/Tab.js.map +1 -1
  86. package/lib/TabGroup.js +1 -1
  87. package/lib/TabPanel.js +1 -1
  88. package/lib/Table.js +1 -1
  89. package/lib/TextField-8b226327.js +2 -0
  90. package/lib/{TextField-c2e49b85.js.map → TextField-8b226327.js.map} +1 -1
  91. package/lib/Textarea.js +1 -1
  92. package/lib/Textarea.js.map +1 -1
  93. package/lib/Toast.js +1 -1
  94. package/lib/ToastGroup.js +1 -1
  95. package/lib/Toggle.js +1 -1
  96. package/lib/Toggle.js.map +1 -1
  97. package/lib/Tooltip.js +1 -1
  98. package/lib/TopBar.js +1 -1
  99. package/lib/TopBar.js.map +1 -1
  100. package/lib/VisuallyHidden.js +1 -1
  101. package/lib/bundle.js +12 -12
  102. package/lib/bundle.js.map +1 -1
  103. package/lib/{class-map-4a0dec4a.js → class-map-cb77ead2.js} +2 -2
  104. package/lib/{class-map-4a0dec4a.js.map → class-map-cb77ead2.js.map} +1 -1
  105. package/lib/{collection-bba319d3.js → collection-2f8e38bd.js} +3 -3
  106. package/lib/{collection-bba319d3.js.map → collection-2f8e38bd.js.map} +1 -1
  107. package/lib/cond-44672025.js +2 -0
  108. package/lib/{cond-77258def.js.map → cond-44672025.js.map} +1 -1
  109. package/lib/en-us.js +1 -1
  110. package/lib/en-us.js.map +1 -1
  111. package/lib/fi-fi.js +1 -1
  112. package/lib/fi-fi.js.map +1 -1
  113. package/lib/{if-defined-10508457.js → if-defined-9b177db4.js} +2 -2
  114. package/lib/{if-defined-10508457.js.map → if-defined-9b177db4.js.map} +1 -1
  115. package/lib/index.js +1 -1
  116. package/lib/localization8.js +2 -0
  117. package/lib/localization8.js.map +1 -0
  118. package/lib/{query-assigned-elements-2f8275b7.js → query-assigned-elements-15485e3d.js} +3 -3
  119. package/lib/{query-assigned-elements-2f8275b7.js.map → query-assigned-elements-15485e3d.js.map} +1 -1
  120. package/lib/{ref-f75a30b7.js → ref-5526fb07.js} +4 -4
  121. package/lib/{ref-f75a30b7.js.map → ref-5526fb07.js.map} +1 -1
  122. package/lib/src/common/controllers/ResizeController.d.ts +13 -0
  123. package/lib/src/dropdown/Dropdown.d.ts +6 -0
  124. package/lib/src/index.d.ts +1 -0
  125. package/lib/src/input/Input.d.ts +2 -0
  126. package/lib/src/localization/en-us.d.ts +3 -0
  127. package/lib/src/localization/translation.d.ts +3 -0
  128. package/lib/src/message/Message.d.ts +42 -0
  129. package/lib/src/message/Message.test.d.ts +2 -0
  130. package/lib/src/message/localization.d.ts +4 -0
  131. package/lib/src/top-bar/TopBar.test.d.ts +2 -0
  132. package/lib/style-map-ed7e6cc6.js +7 -0
  133. package/lib/style-map-ed7e6cc6.js.map +1 -0
  134. package/lib/translation.js +1 -1
  135. package/lib/translation.js.map +1 -1
  136. package/package.json +8 -6
  137. package/lib/Calendar-af3b4ea6.js +0 -2
  138. package/lib/Calendar-af3b4ea6.js.map +0 -1
  139. package/lib/Component-253ecb24.js.map +0 -1
  140. package/lib/FormField-0783cb5a.js.map +0 -1
  141. package/lib/Sticky-220280e0.js.map +0 -1
  142. package/lib/TextField-c2e49b85.js +0 -2
  143. package/lib/arrow-left-small-dd181059.js +0 -2
  144. package/lib/arrow-left-small-dd181059.js.map +0 -1
  145. package/lib/cond-77258def.js +0 -2
  146. package/lib/style-map-75ce20b3.js +0 -7
  147. package/lib/style-map-75ce20b3.js.map +0 -1
@@ -1,2 +1,2 @@
1
- import{_ as e}from"./query-assigned-elements-2f8275b7.js";import{e as r}from"./property-03f59dce.js";function s(s){class t extends s{constructor(){super(...arguments),this.size="m"}}return e([r({reflect:!0})],t.prototype,"size",void 0),t}export{s as S};
2
- //# sourceMappingURL=SizeMixin-bc2098f4.js.map
1
+ import{_ as e}from"./query-assigned-elements-15485e3d.js";import{e as r}from"./property-03f59dce.js";function s(s){class t extends s{constructor(){super(...arguments),this.size="m"}}return e([r({reflect:!0})],t.prototype,"size",void 0),t}export{s as S};
2
+ //# sourceMappingURL=SizeMixin-fb379434.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SizeMixin-bc2098f4.js","sources":["../src/common/mixins/SizeMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class SizeMixinInterface {\n size: \"s\" | \"m\" | \"l\"\n}\n\nexport function SizeMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<SizeMixinInterface> & T {\n class SizeElement extends superClass {\n /**\n * The size of the component.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n }\n\n return SizeElement\n}\n"],"names":["SizeMixin","superClass","SizeElement","constructor","this","size","__decorate","property","reflect","prototype"],"mappings":"qGAUM,SAAUA,EAA6CC,GAC3D,MAAMC,UAAoBD,EAA1BE,kCAI+BC,KAAIC,KAAoB,GACtD,EAED,OAH+BC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmCN,EAAAO,UAAA,YAAA,GAGnDP,CACT"}
1
+ {"version":3,"file":"SizeMixin-fb379434.js","sources":["../src/common/mixins/SizeMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class SizeMixinInterface {\n size: \"s\" | \"m\" | \"l\"\n}\n\nexport function SizeMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<SizeMixinInterface> & T {\n class SizeElement extends superClass {\n /**\n * The size of the component.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n }\n\n return SizeElement\n}\n"],"names":["SizeMixin","superClass","SizeElement","constructor","this","size","__decorate","property","reflect","prototype"],"mappings":"qGAUM,SAAUA,EAA6CC,GAC3D,MAAMC,UAAoBD,EAA1BE,kCAI+BC,KAAIC,KAAoB,GACtD,EAED,OAH+BC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmCN,EAAAO,UAAA,YAAA,GAGnDP,CACT"}
package/lib/Skeleton.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as e,_ as n,s as o,x as r,e as s}from"./query-assigned-elements-2f8275b7.js";import{e as t}from"./property-03f59dce.js";import{s as a}from"./Component-253ecb24.js";const i=e`:host{--_n-skeleton-border-radius:var(--n-skeleton-border-radius, var(--n-border-radius));--_n-skeleton-color:var(--n-skeleton-color, var(--n-color-border));--_n-skeleton-sheen-color:var(--n-skeleton-sheen-color, var(--n-color-border-strong));--_n-skeleton-animation:none;position:relative}.n-skeleton{display:flex;inline-size:100%;block-size:100%;min-block-size:var(--n-space-m)}.n-skeleton-indicator{flex:1 1 auto;background:var(--_n-skeleton-color);border-radius:var(--_n-skeleton-border-radius);opacity:.6;animation:var(--_n-skeleton-animation)}:host([effect=sheen]) .n-skeleton-indicator{background:linear-gradient(270deg,var(--_n-skeleton-sheen-color),var(--_n-skeleton-color),var(--_n-skeleton-color),var(--_n-skeleton-sheen-color));background-position:200% 0;background-size:400% 100%}@media (prefers-reduced-motion:no-preference){:host([effect=pulse]){--_n-skeleton-animation:n-pulse 1s ease-in-out 0.5s infinite alternate}:host([effect=sheen]){--_n-skeleton-animation:n-sheen 5s ease-in-out infinite}}@keyframes n-pulse{to{opacity:.2}}@keyframes n-sheen{to{background-position:-200% 0}}`;let l=class extends o{render(){return r`<div class="n-skeleton" aria-hidden="true"><div class="n-skeleton-indicator"></div></div>`}};l.styles=[a,i],n([t({reflect:!0})],l.prototype,"effect",void 0),l=n([s("nord-skeleton")],l);var d=l;export{d as default};
1
+ import{i as e,_ as n,s as o,x as r,e as s}from"./query-assigned-elements-15485e3d.js";import{e as t}from"./property-03f59dce.js";import{s as a}from"./Component-420bbc41.js";const i=e`:host{--_n-skeleton-border-radius:var(--n-skeleton-border-radius, var(--n-border-radius));--_n-skeleton-color:var(--n-skeleton-color, var(--n-color-border));--_n-skeleton-sheen-color:var(--n-skeleton-sheen-color, var(--n-color-border-strong));--_n-skeleton-animation:none;position:relative}.n-skeleton{display:flex;inline-size:100%;block-size:100%;min-block-size:var(--n-space-m)}.n-skeleton-indicator{flex:1 1 auto;background:var(--_n-skeleton-color);border-radius:var(--_n-skeleton-border-radius);opacity:.6;animation:var(--_n-skeleton-animation)}:host([effect=sheen]) .n-skeleton-indicator{background:linear-gradient(270deg,var(--_n-skeleton-sheen-color),var(--_n-skeleton-color),var(--_n-skeleton-color),var(--_n-skeleton-sheen-color));background-position:200% 0;background-size:400% 100%}@media (prefers-reduced-motion:no-preference){:host([effect=pulse]){--_n-skeleton-animation:n-pulse 1s ease-in-out 0.5s infinite alternate}:host([effect=sheen]){--_n-skeleton-animation:n-sheen 5s ease-in-out infinite}}@keyframes n-pulse{to{opacity:.2}}@keyframes n-sheen{to{background-position:-200% 0}}`;let l=class extends o{render(){return r`<div class="n-skeleton" aria-hidden="true"><div class="n-skeleton-indicator"></div></div>`}};l.styles=[a,i],n([t({reflect:!0})],l.prototype,"effect",void 0),l=n([s("nord-skeleton")],l);var d=l;export{d as default};
2
2
  //# sourceMappingURL=Skeleton.js.map
package/lib/Spinner.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as e,_ as n,s as r,x as s,e as i}from"./query-assigned-elements-2f8275b7.js";import{e as o}from"./property-03f59dce.js";import{l as t}from"./if-defined-10508457.js";import{c as a}from"./cond-77258def.js";import{s as l}from"./Component-253ecb24.js";const c=e`:host{--_n-spinner-size:var(--n-size-icon-m);inline-size:var(--_n-spinner-size);block-size:var(--_n-spinner-size);display:inline-flex;position:relative;color:inherit}:host([size=xs]){--_n-spinner-size:var(--n-size-icon-xs)}:host([size="s"]){--_n-spinner-size:var(--n-size-icon-s)}:host([size="l"]){--_n-spinner-size:var(--n-size-icon-l)}:host([size=xl]){--_n-spinner-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-spinner-size:var(--n-size-icon-xxl)}.n-spinner,.n-spinner::after{position:absolute;inset-block-start:50%;inset-inline-start:50%;z-index:var(--n-index-spinner);transform:translateZ(0) translateX(-50%) translateY(-50%);transform-origin:0 0}.n-spinner{block-size:var(--_n-spinner-size);inline-size:var(--_n-spinner-size);font-size:var(--_n-spinner-size);color:var(--n-color-accent);border:.18em solid transparent;border-inline-start:.18em solid currentColor;border-radius:var(--n-border-radius-circle);animation:nRotate .66s linear infinite}.n-spinner::after{box-sizing:content-box;inline-size:100%;block-size:100%;overflow:hidden;content:"";border:.18em solid currentColor;border-radius:var(--n-border-radius-circle);opacity:.3}@keyframes nRotate{0%{transform:translateZ(0) rotate(0) translateX(-50%) translateY(-50%)}100%{transform:translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%)}}`;let p=class extends r{constructor(){super(...arguments),this.size="m"}render(){return s`<div class="n-spinner" role="${a(this.label,"img")}" aria-label="${t(this.label)}" style="${a(this.color,`color:${this.color}`)}"></div>`}};p.styles=[l,c],n([o({reflect:!0})],p.prototype,"size",void 0),n([o({reflect:!0})],p.prototype,"color",void 0),n([o({reflect:!0})],p.prototype,"label",void 0),p=n([i("nord-spinner")],p);var d=p;export{d as default};
1
+ import{i as e,_ as n,s as r,x as s,e as i}from"./query-assigned-elements-15485e3d.js";import{e as o}from"./property-03f59dce.js";import{l as t}from"./if-defined-9b177db4.js";import{c as a}from"./cond-44672025.js";import{s as l}from"./Component-420bbc41.js";const c=e`:host{--_n-spinner-size:var(--n-size-icon-m);inline-size:var(--_n-spinner-size);block-size:var(--_n-spinner-size);display:inline-flex;position:relative;color:inherit}:host([size=xs]){--_n-spinner-size:var(--n-size-icon-xs)}:host([size="s"]){--_n-spinner-size:var(--n-size-icon-s)}:host([size="l"]){--_n-spinner-size:var(--n-size-icon-l)}:host([size=xl]){--_n-spinner-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-spinner-size:var(--n-size-icon-xxl)}.n-spinner,.n-spinner::after{position:absolute;inset-block-start:50%;inset-inline-start:50%;z-index:var(--n-index-spinner);transform:translateZ(0) translateX(-50%) translateY(-50%);transform-origin:0 0}.n-spinner{block-size:var(--_n-spinner-size);inline-size:var(--_n-spinner-size);font-size:var(--_n-spinner-size);color:var(--n-color-accent);border:.18em solid transparent;border-inline-start:.18em solid currentColor;border-radius:var(--n-border-radius-circle);animation:nRotate .66s linear infinite}.n-spinner::after{box-sizing:content-box;inline-size:100%;block-size:100%;overflow:hidden;content:"";border:.18em solid currentColor;border-radius:var(--n-border-radius-circle);opacity:.3}@keyframes nRotate{0%{transform:translateZ(0) rotate(0) translateX(-50%) translateY(-50%)}100%{transform:translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%)}}`;let p=class extends r{constructor(){super(...arguments),this.size="m"}render(){return s`<div class="n-spinner" role="${a(this.label,"img")}" aria-label="${t(this.label)}" style="${a(this.color,`color:${this.color}`)}"></div>`}};p.styles=[l,c],n([o({reflect:!0})],p.prototype,"size",void 0),n([o({reflect:!0})],p.prototype,"color",void 0),n([o({reflect:!0})],p.prototype,"label",void 0),p=n([i("nord-spinner")],p);var d=p;export{d as default};
2
2
  //# sourceMappingURL=Spinner.js.map
package/lib/Stack.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as t,_ as e,s,x as a,e as n}from"./query-assigned-elements-2f8275b7.js";import{e as o}from"./property-03f59dce.js";import{s as i}from"./Component-253ecb24.js";const r=t`:host{--_n-stack-gap:var(--n-stack-gap, var(--n-space-m));display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;color:var(--n-color-text);gap:var(--_n-stack-gap);max-inline-size:100%;inline-size:100%}:host([direction=horizontal]){flex-direction:row}:host([wrap]){flex-wrap:wrap}:host([align-items=center]){align-items:center}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([justify-content=center]){justify-content:center}:host([justify-content=start]){justify-content:flex-start}:host([justify-content=end]){justify-content:flex-end}:host([justify-content=space-between]){justify-content:space-between}:host([justify-content=space-evenly]){justify-content:space-evenly}:host([justify-content=space-around]){justify-content:space-around}::slotted(*){margin:0!important;min-inline-size:0;max-inline-size:100%}:host([gap=none]){--_n-stack-gap:var(--n-stack-gap, 0)}:host([gap="s"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-s))}:host([gap="m"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-m))}:host([gap="l"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-l))}:host([gap=xl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xl))}:host([gap=xxl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xxl))}`;let c=class extends s{constructor(){super(...arguments),this.gap="m",this.direction="vertical",this.alignItems="stretch",this.wrap=!1}render(){return a`<slot></slot>`}};c.styles=[i,r],e([o({reflect:!0})],c.prototype,"gap",void 0),e([o({reflect:!0})],c.prototype,"direction",void 0),e([o({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),e([o({reflect:!0,type:Boolean})],c.prototype,"wrap",void 0),e([o({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=e([n("nord-stack")],c);var p=c;export{p as default};
1
+ import{i as t,_ as e,s,x as a,e as n}from"./query-assigned-elements-15485e3d.js";import{e as o}from"./property-03f59dce.js";import{s as i}from"./Component-420bbc41.js";const r=t`:host{--_n-stack-gap:var(--n-stack-gap, var(--n-space-m));display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;color:var(--n-color-text);gap:var(--_n-stack-gap);max-inline-size:100%;inline-size:100%}:host([direction=horizontal]){flex-direction:row}:host([wrap]){flex-wrap:wrap}:host([align-items=center]){align-items:center}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([justify-content=center]){justify-content:center}:host([justify-content=start]){justify-content:flex-start}:host([justify-content=end]){justify-content:flex-end}:host([justify-content=space-between]){justify-content:space-between}:host([justify-content=space-evenly]){justify-content:space-evenly}:host([justify-content=space-around]){justify-content:space-around}::slotted(*){margin:0!important;min-inline-size:0;max-inline-size:100%}:host([gap=none]){--_n-stack-gap:var(--n-stack-gap, 0)}:host([gap="s"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-s))}:host([gap="m"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-m))}:host([gap="l"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-l))}:host([gap=xl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xl))}:host([gap=xxl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xxl))}`;let c=class extends s{constructor(){super(...arguments),this.gap="m",this.direction="vertical",this.alignItems="stretch",this.wrap=!1}render(){return a`<slot></slot>`}};c.styles=[i,r],e([o({reflect:!0})],c.prototype,"gap",void 0),e([o({reflect:!0})],c.prototype,"direction",void 0),e([o({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),e([o({reflect:!0,type:Boolean})],c.prototype,"wrap",void 0),e([o({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=e([n("nord-stack")],c);var p=c;export{p as default};
2
2
  //# sourceMappingURL=Stack.js.map
@@ -1,2 +1,2 @@
1
- import{i as t}from"./query-assigned-elements-2f8275b7.js";const s=t`:host{--_n-sticky-size:0px;--_n-sticky-top:var(--n-sticky-top, 0px);--_n-sticky-index:var(--n-sticky-index, var(--n-index-sticky))}:host([sticky]) .n-sticky{position:sticky;inset-block-start:var(--_n-sticky-top);z-index:var(--_n-sticky-index)}:host>*{--n-sticky-top:calc(var(--_n-sticky-top) + var(--_n-sticky-size));--n-sticky-index:calc(var(--_n-sticky-index) - 1)}`;export{s};
2
- //# sourceMappingURL=Sticky-220280e0.js.map
1
+ import{i as t}from"./query-assigned-elements-15485e3d.js";const s=t`:host{--_n-sticky-size:0px;--_n-sticky-top:var(--n-sticky-top, 0px);--_n-sticky-index:var(--n-sticky-index, var(--n-index-sticky))}:host([sticky]) .n-sticky{position:sticky;inset-block-start:var(--_n-sticky-top);z-index:var(--_n-sticky-index)}:host>*{--n-sticky-top:calc(var(--_n-sticky-top) + var(--_n-sticky-size));--n-sticky-index:calc(var(--_n-sticky-index) - 1)}`;export{s};
2
+ //# sourceMappingURL=Sticky-acc92284.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sticky-acc92284.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
package/lib/Tab.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as t,_ as e,s as o,x as a,e as n}from"./query-assigned-elements-2f8275b7.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./observe-a9c6dfb6.js";import{S as i}from"./SlotController-d733c575.js";import{s as l}from"./Component-253ecb24.js";import"./EventController-d99ebeef.js";const c=t`:host{--_n-tab-color:var(--n-tab-color, var(--n-color-text-weak));--_n-tab-font-weight:var(--n-tab-font-weight, var(--n-font-weight));--_n-tab-border:1px solid transparent;-webkit-user-select:none;user-select:none;cursor:pointer;padding:calc(var(--n-space-l)/ 2) var(--n-space-xs);border-block-end:var(--_n-tab-border);transition:border var(--n-transition-quickly) ease}.n-tab{color:var(--_n-tab-color);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-font-size-m);font-weight:var(--_n-tab-font-weight);line-height:var(--n-line-height-form);border-radius:var(--n-border-radius-sharp);white-space:nowrap}.n-tab,.n-tab[data-text]:not([data-text=""])::before{font-weight:var(--_n-tab-font-weight)}.n-tab[data-text=""]{display:flex;gap:var(--n-space-s);align-items:center}.n-tab[data-text]:not([data-text=""]){text-align:center}.n-tab[data-text]:not([data-text=""])::before{content:attr(data-text);display:block;block-size:0;visibility:hidden}:host(:hover){--_n-tab-color:var(--n-tab-color, var(--n-color-text))}.n-tab[data-text]:not([data-text=""])::before,:host([aria-selected=true]){--_n-tab-color:var(--n-tab-color, var(--n-color-text-link));--_n-tab-font-weight:var(--n-tab-font-weight, var(--n-font-weight-active));--_n-tab-border:2px solid var(--n-color-text-link)}:host(:active){opacity:.8;transform:translateY(1px)}:host(:focus) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-text-link);outline:0}@supports selector(:focus-visible){:host(:focus) .n-tab{box-shadow:none}:host(:focus-visible) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-text-link)}}`;let b=class extends o{constructor(){super(...arguments),this.defaultSlot=new i(this),this.selected=!1}render(){return a`<div class="n-tab" data-text="${this.defaultSlot.isEmpty?this.textContent:""}"><slot></slot></div>`}handleSelectionChange(){this.setAttribute("aria-selected",`${this.selected}`),this.setAttribute("tabindex",this.selected?"0":"-1")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab")}};b.styles=[l,c],e([r({reflect:!0,type:Boolean})],b.prototype,"selected",void 0),e([s("selected")],b.prototype,"handleSelectionChange",null),b=e([n("nord-tab")],b);var d=b;export{d as default};
1
+ import{i as t,_ as e,s as a,x as o,e as n}from"./query-assigned-elements-15485e3d.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./observe-a9c6dfb6.js";import{S as i}from"./SlotController-d733c575.js";import{s as l}from"./Component-420bbc41.js";import"./EventController-d99ebeef.js";const c=t`:host{--_n-tab-color:var(--n-tab-color, var(--n-color-text-weak));--_n-tab-font-weight:var(--n-tab-font-weight, var(--n-font-weight));--_n-tab-border:1px solid transparent;-webkit-user-select:none;user-select:none;cursor:pointer;padding:calc(var(--n-space-l)/ 2) var(--n-space-xs);border-block-end:var(--_n-tab-border);transition:border var(--n-transition-quickly) ease}.n-tab{color:var(--_n-tab-color);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-font-size-m);font-weight:var(--_n-tab-font-weight);line-height:var(--n-line-height-form);border-radius:var(--n-border-radius-sharp);white-space:nowrap}.n-tab,.n-tab[data-text]:not([data-text=""])::before{font-weight:var(--_n-tab-font-weight)}.n-tab[data-text=""]{display:flex;gap:var(--n-space-s);align-items:center}.n-tab[data-text]:not([data-text=""]){text-align:center}.n-tab[data-text]:not([data-text=""])::before{content:attr(data-text);display:block;block-size:0;visibility:hidden}:host(:hover){--_n-tab-color:var(--n-tab-color, var(--n-color-text))}.n-tab[data-text]:not([data-text=""])::before,:host([aria-selected=true]){--_n-tab-color:var(--n-tab-color, var(--n-color-text-link));--_n-tab-font-weight:var(--n-tab-font-weight, var(--n-font-weight-active));--_n-tab-border:2px solid var(--n-color-text-link)}:host(:active){opacity:.8;transform:translateY(1px)}:host(:focus) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-accent);outline:0}@supports selector(:focus-visible){:host(:focus) .n-tab{box-shadow:none}:host(:focus-visible) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-accent)}}`;let b=class extends a{constructor(){super(...arguments),this.defaultSlot=new i(this),this.selected=!1}render(){return o`<div class="n-tab" data-text="${this.defaultSlot.isEmpty?this.textContent:""}"><slot></slot></div>`}handleSelectionChange(){this.setAttribute("aria-selected",`${this.selected}`),this.setAttribute("tabindex",this.selected?"0":"-1")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab")}};b.styles=[l,c],e([r({reflect:!0,type:Boolean})],b.prototype,"selected",void 0),e([s("selected")],b.prototype,"handleSelectionChange",null),b=e([n("nord-tab")],b);var d=b;export{d as default};
2
2
  //# sourceMappingURL=Tab.js.map
package/lib/Tab.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tab.js","sources":["../src/tab/Tab.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tab.css\"\n\n/**\n * The interactive tab button for use within the tab group component.\n *\n * @status ready\n * @category navigation\n * @slot - The tab button content.\n *\n * @cssprop [--n-tab-color=var(--n-color-text-weak)] - Controls the text color of the tab, using our [color tokens](/tokens/#color).\n * @cssprop [--n-tab-font-weight=var(--n-font-weight)] - Controls the font weight of the tab, using our [font tokens](/tokens/#font).\n */\n@customElement(\"nord-tab\")\nexport default class Tab extends LitElement {\n static styles = [componentStyle, style]\n\n private defaultSlot = new SlotController(this)\n\n /**\n * Whether the tab item is selected\n */\n @property({ reflect: true, type: Boolean }) selected: boolean = false\n\n render() {\n return html`<div class=\"n-tab\" data-text=\"${this.defaultSlot.isEmpty ? this.textContent : \"\"}\">\n <slot></slot>\n </div>`\n }\n\n /**\n * Apply accessible attributes and values to the tab button.\n * Observe the selected property if it changes\n */\n @observe(\"selected\")\n protected handleSelectionChange() {\n this.setAttribute(\"aria-selected\", `${this.selected}`)\n this.setAttribute(\"tabindex\", this.selected ? \"0\" : \"-1\")\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute(\"role\", \"tab\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-tab\": Tab\n }\n}\n"],"names":["Tab","LitElement","constructor","this","defaultSlot","SlotController","selected","render","html","isEmpty","textContent","handleSelectionChange","setAttribute","connectedCallback","super","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","observe","customElement"],"mappings":"07DAmBA,IAAqBA,EAArB,cAAiCC,EAAjCC,kCAGUC,KAAAC,YAAc,IAAIC,EAAeF,MAKGA,KAAQG,UAAY,CAsBjE,CApBCC,SACE,OAAOC,CAAI,iCAAiCL,KAAKC,YAAYK,QAAUN,KAAKO,YAAc,yBAG3F,CAOSC,wBACRR,KAAKS,aAAa,gBAAiB,GAAGT,KAAKG,YAC3CH,KAAKS,aAAa,WAAYT,KAAKG,SAAW,IAAM,KACrD,CAEDO,oBACEC,MAAMD,oBACNV,KAAKS,aAAa,OAAQ,MAC3B,GA5BMZ,EAAAe,OAAS,CAACC,EAAgBC,GAOWC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAoCtB,EAAAuB,UAAA,gBAAA,GAa3DL,EAAA,CADTM,EAAQ,aAIRxB,EAAAuB,UAAA,wBAAA,MAxBkBvB,EAAGkB,EAAA,CADvBO,EAAc,aACMzB,SAAAA"}
1
+ {"version":3,"file":"Tab.js","sources":["../src/tab/Tab.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tab.css\"\n\n/**\n * The interactive tab button for use within the tab group component.\n *\n * @status ready\n * @category navigation\n * @slot - The tab button content.\n *\n * @cssprop [--n-tab-color=var(--n-color-text-weak)] - Controls the text color of the tab, using our [color tokens](/tokens/#color).\n * @cssprop [--n-tab-font-weight=var(--n-font-weight)] - Controls the font weight of the tab, using our [font tokens](/tokens/#font).\n */\n@customElement(\"nord-tab\")\nexport default class Tab extends LitElement {\n static styles = [componentStyle, style]\n\n private defaultSlot = new SlotController(this)\n\n /**\n * Whether the tab item is selected\n */\n @property({ reflect: true, type: Boolean }) selected: boolean = false\n\n render() {\n return html`<div class=\"n-tab\" data-text=\"${this.defaultSlot.isEmpty ? this.textContent : \"\"}\">\n <slot></slot>\n </div>`\n }\n\n /**\n * Apply accessible attributes and values to the tab button.\n * Observe the selected property if it changes\n */\n @observe(\"selected\")\n protected handleSelectionChange() {\n this.setAttribute(\"aria-selected\", `${this.selected}`)\n this.setAttribute(\"tabindex\", this.selected ? \"0\" : \"-1\")\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute(\"role\", \"tab\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-tab\": Tab\n }\n}\n"],"names":["Tab","LitElement","constructor","this","defaultSlot","SlotController","selected","render","html","isEmpty","textContent","handleSelectionChange","setAttribute","connectedCallback","super","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","observe","customElement"],"mappings":"o7DAmBA,IAAqBA,EAArB,cAAiCC,EAAjCC,kCAGUC,KAAAC,YAAc,IAAIC,EAAeF,MAKGA,KAAQG,UAAY,CAsBjE,CApBCC,SACE,OAAOC,CAAI,iCAAiCL,KAAKC,YAAYK,QAAUN,KAAKO,YAAc,yBAG3F,CAOSC,wBACRR,KAAKS,aAAa,gBAAiB,GAAGT,KAAKG,YAC3CH,KAAKS,aAAa,WAAYT,KAAKG,SAAW,IAAM,KACrD,CAEDO,oBACEC,MAAMD,oBACNV,KAAKS,aAAa,OAAQ,MAC3B,GA5BMZ,EAAAe,OAAS,CAACC,EAAgBC,GAOWC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAoCtB,EAAAuB,UAAA,gBAAA,GAa3DL,EAAA,CADTM,EAAQ,aAIRxB,EAAAuB,UAAA,wBAAA,MAxBkBvB,EAAGkB,EAAA,CADvBO,EAAc,aACMzB,SAAAA"}
package/lib/TabGroup.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as t,_ as e,s as r,x as a,e as s}from"./query-assigned-elements-2f8275b7.js";import{e as o}from"./property-03f59dce.js";import{t as i}from"./state-70f38ceb.js";import{s as n}from"./Component-253ecb24.js";import{s as l}from"./Sticky-220280e0.js";import d from"./Tab.js";import{D as b}from"./DirectionController-f35f5476.js";import"./observe-a9c6dfb6.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";const c=t`:host{--_n-tab-group-padding:var(--n-tab-group-padding, 0);--_n-tab-group-list-background:var(--n-color-surface);--_n-tab-group-list-border:inset 0 -1px 0 0 var(--n-color-border);--_n-tab-group-list-shadow:var(--n-box-shadow-header);--_n-sticky-size:46px;border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}.n-tab-group-list{list-style:none;display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior:none;box-shadow:var(--_n-tab-group-list-border);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0;gap:var(--n-space-s);background-color:var(--_n-tab-group-list-background);background-image:radial-gradient(ellipse farthest-side at 0 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background)),radial-gradient(ellipse farthest-side at 100% 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background));background-repeat:no-repeat;background-position:0 var(--n-space-xs),100% var(--n-space-xs);background-size:var(--n-space-s) var(--n-space-xl),var(--n-space-s) var(--n-space-xl)}.n-tab-group-list::after,.n-tab-group-list::before{content:"";box-sizing:content-box;align-self:stretch;min-inline-size:var(--n-space-l);margin-block-end:1px}.n-tab-group-list::before{margin-inline-end:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-start:var(--_n-tab-group-padding)}.n-tab-group-list::after{margin-inline-start:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-end:var(--_n-tab-group-padding);flex:1}.n-tab-group-list::before,.n-tab-group.is-rtl .n-tab-group-list::after{box-shadow:inset var(--n-space-l) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}.n-tab-group-list::after,.n-tab-group.is-rtl .n-tab-group-list::before{box-shadow:inset calc(-1 * var(--n-space-l)) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}::slotted(nord-tab-panel){display:none;padding:var(--_n-tab-group-padding)}::slotted(nord-tab-panel[aria-hidden=false]){display:block}::slotted(nord-tab){z-index:var(--n-index-default)}:host([padding="m"]){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-m))}:host([padding="l"]){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-l))}:host([sticky]) .n-sticky{box-shadow:var(--_n-tab-group-list-border),var(--_n-tab-group-list-shadow);inset-inline:0;inset-block-end:auto}:host([sticky]),:host([sticky]) .n-tab-group-list{border-radius:0}`;var p;let u=1,g=p=class extends r{constructor(){super(...arguments),this.direction=new b(this),this.tabGroupId="nord-tab-group-"+u++,this.label="",this.padding="m",this.sticky=!1,this.selectedTab=this.initialSelectedTab,this.handleMutation=t=>{t.forEach((t=>{var e,r;if("selected"===t.attributeName&&null===t.oldValue){const a=t.target;null===(e=this.observer)||void 0===e||e.disconnect(),this.updateSelectedTab(a),null===(r=this.observer)||void 0===r||r.observe(this,p.observerOptions)}}))}}render(){return a`<div class="n-tab-group is-${this.direction.dir}"><div class="n-tab-group-list n-sticky" role="tablist" aria-label="${this.label}" @click="${this.handleTabChange}" @keydown="${this.handleKeydown}"><slot name="tab"></slot></div><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.updateSlots()}updateSlots(){this.setupTabs(),this.setupPanels()}firstUpdated(){var t;this.observer=new MutationObserver(this.handleMutation),null===(t=this.observer)||void 0===t||t.observe(this,p.observerOptions)}get initialSelectedTab(){return this.querySelector("nord-tab[selected]")||this.querySelector("nord-tab")}setupTabs(){this.querySelectorAll("nord-tab").forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-controls",`${this.tabGroupId}-panel-${e+1}`),t.toggleAttribute("selected",t===this.selectedTab)}))}setupPanels(){var t;const e=this.querySelectorAll("nord-tab-panel"),r=null===(t=this.selectedTab)||void 0===t?void 0:t.getAttribute("aria-controls");e.forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-panel-${e+1}`),t.setAttribute("aria-labelledby",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-hidden",`${t.getAttribute("id")!==r}`)}))}handleTabChange(t){this.scrollTo({top:0}),t.target instanceof d&&t.target!==this.selectedTab&&this.updateSelectedTab(t.target)}previousTab(t){const e=[...this.querySelectorAll("nord-tab")],r=e.indexOf(t);return e[r-1]}handleKeydown(t){const e=t.target,r=this.querySelector("nord-tab:first-of-type"),a=this.querySelector("nord-tab:last-of-type"),s=this.querySelector(`#${e.getAttribute("id")} ~ nord-tab`)||r,o=this.previousTab(e)||a,i=(t,e)=>{e.preventDefault(),this.scrollTo({top:0}),this.updateSelectedTab(t)};switch(t.key){case"ArrowLeft":case"ArrowUp":i(this.direction.isLTR?o:s,t);break;case"ArrowRight":case"ArrowDown":i(this.direction.isLTR?s:o,t);break;case"Home":i(r,t);break;case"End":i(a,t)}}updateSelectedTab(t){const e=this.querySelector(`#${t.getAttribute("aria-controls")}`);t!==this.selectedTab&&(this.querySelectorAll("nord-tab").forEach((e=>{e.removeAttribute("selected"),e===t&&(e.setAttribute("selected",""),e.focus(),e.scrollIntoView({block:"nearest",inline:"nearest"}),this.selectedTab=e)})),this.querySelectorAll("nord-tab-panel").forEach((t=>{t.setAttribute("aria-hidden",`${t!==e}`)})))}};g.styles=[n,l,c],g.observerOptions={attributes:!0,subtree:!0,attributeFilter:["selected"],attributeOldValue:!0},e([o({reflect:!0})],g.prototype,"label",void 0),e([o({reflect:!0})],g.prototype,"padding",void 0),e([o({reflect:!0,type:Boolean})],g.prototype,"sticky",void 0),e([i()],g.prototype,"selectedTab",void 0),g=p=e([s("nord-tab-group")],g);var h=g;export{h as default};
1
+ import{i as t,_ as e,s as r,x as a,e as s}from"./query-assigned-elements-15485e3d.js";import{e as o}from"./property-03f59dce.js";import{t as i}from"./state-70f38ceb.js";import{s as n}from"./Component-420bbc41.js";import{s as l}from"./Sticky-acc92284.js";import d from"./Tab.js";import{D as b}from"./DirectionController-f35f5476.js";import"./observe-a9c6dfb6.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";const c=t`:host{--_n-tab-group-padding:var(--n-tab-group-padding, 0);--_n-tab-group-list-background:var(--n-color-surface);--_n-tab-group-list-border:inset 0 -1px 0 0 var(--n-color-border);--_n-tab-group-list-shadow:var(--n-box-shadow-header);--_n-sticky-size:46px;border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}.n-tab-group-list{list-style:none;display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior:none;box-shadow:var(--_n-tab-group-list-border);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0;gap:var(--n-space-s);background-color:var(--_n-tab-group-list-background);background-image:radial-gradient(ellipse farthest-side at 0 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background)),radial-gradient(ellipse farthest-side at 100% 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background));background-repeat:no-repeat;background-position:0 var(--n-space-xs),100% var(--n-space-xs);background-size:var(--n-space-s) var(--n-space-xl),var(--n-space-s) var(--n-space-xl)}.n-tab-group-list::after,.n-tab-group-list::before{content:"";box-sizing:content-box;align-self:stretch;min-inline-size:var(--n-space-l);margin-block-end:1px}.n-tab-group-list::before{margin-inline-end:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-start:var(--_n-tab-group-padding)}.n-tab-group-list::after{margin-inline-start:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-end:var(--_n-tab-group-padding);flex:1}.n-tab-group-list::before,.n-tab-group.is-rtl .n-tab-group-list::after{box-shadow:inset var(--n-space-l) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}.n-tab-group-list::after,.n-tab-group.is-rtl .n-tab-group-list::before{box-shadow:inset calc(-1 * var(--n-space-l)) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}::slotted(nord-tab-panel){display:none;padding:var(--_n-tab-group-padding)}::slotted(nord-tab-panel[aria-hidden=false]){display:block}::slotted(nord-tab){z-index:var(--n-index-default)}:host([padding="m"]){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-m))}:host([padding="l"]){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-l))}:host([sticky]) .n-sticky{box-shadow:var(--_n-tab-group-list-border),var(--_n-tab-group-list-shadow);inset-inline:0;inset-block-end:auto}:host([sticky]),:host([sticky]) .n-tab-group-list{border-radius:0}`;var p;let u=1,g=p=class extends r{constructor(){super(...arguments),this.direction=new b(this),this.tabGroupId="nord-tab-group-"+u++,this.label="",this.padding="m",this.sticky=!1,this.selectedTab=this.initialSelectedTab,this.handleMutation=t=>{t.forEach((t=>{var e,r;if("selected"===t.attributeName&&null===t.oldValue){const a=t.target;null===(e=this.observer)||void 0===e||e.disconnect(),this.updateSelectedTab(a),null===(r=this.observer)||void 0===r||r.observe(this,p.observerOptions)}}))}}render(){return a`<div class="n-tab-group is-${this.direction.dir}"><div class="n-tab-group-list n-sticky" role="tablist" aria-label="${this.label}" @click="${this.handleTabChange}" @keydown="${this.handleKeydown}"><slot name="tab"></slot></div><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.updateSlots()}updateSlots(){this.setupTabs(),this.setupPanels()}firstUpdated(){var t;this.observer=new MutationObserver(this.handleMutation),null===(t=this.observer)||void 0===t||t.observe(this,p.observerOptions)}get initialSelectedTab(){return this.querySelector("nord-tab[selected]")||this.querySelector("nord-tab")}setupTabs(){this.querySelectorAll("nord-tab").forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-controls",`${this.tabGroupId}-panel-${e+1}`),t.toggleAttribute("selected",t===this.selectedTab)}))}setupPanels(){var t;const e=this.querySelectorAll("nord-tab-panel"),r=null===(t=this.selectedTab)||void 0===t?void 0:t.getAttribute("aria-controls");e.forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-panel-${e+1}`),t.setAttribute("aria-labelledby",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-hidden",`${t.getAttribute("id")!==r}`)}))}handleTabChange(t){this.scrollTo({top:0}),t.target instanceof d&&t.target!==this.selectedTab&&this.updateSelectedTab(t.target)}previousTab(t){const e=[...this.querySelectorAll("nord-tab")],r=e.indexOf(t);return e[r-1]}handleKeydown(t){const e=t.target,r=this.querySelector("nord-tab:first-of-type"),a=this.querySelector("nord-tab:last-of-type"),s=this.querySelector(`#${e.getAttribute("id")} ~ nord-tab`)||r,o=this.previousTab(e)||a,i=(t,e)=>{e.preventDefault(),this.scrollTo({top:0}),this.updateSelectedTab(t)};switch(t.key){case"ArrowLeft":case"ArrowUp":i(this.direction.isLTR?o:s,t);break;case"ArrowRight":case"ArrowDown":i(this.direction.isLTR?s:o,t);break;case"Home":i(r,t);break;case"End":i(a,t)}}updateSelectedTab(t){const e=this.querySelector(`#${t.getAttribute("aria-controls")}`);t!==this.selectedTab&&(this.querySelectorAll("nord-tab").forEach((e=>{e.removeAttribute("selected"),e===t&&(e.setAttribute("selected",""),e.focus(),e.scrollIntoView({block:"nearest",inline:"nearest"}),this.selectedTab=e)})),this.querySelectorAll("nord-tab-panel").forEach((t=>{t.setAttribute("aria-hidden",`${t!==e}`)})))}};g.styles=[n,l,c],g.observerOptions={attributes:!0,subtree:!0,attributeFilter:["selected"],attributeOldValue:!0},e([o({reflect:!0})],g.prototype,"label",void 0),e([o({reflect:!0})],g.prototype,"padding",void 0),e([o({reflect:!0,type:Boolean})],g.prototype,"sticky",void 0),e([i()],g.prototype,"selectedTab",void 0),g=p=e([s("nord-tab-group")],g);var h=g;export{h as default};
2
2
  //# sourceMappingURL=TabGroup.js.map
package/lib/TabPanel.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as t,_ as e,s,x as n,e as a}from"./query-assigned-elements-2f8275b7.js";import{s as o}from"./Component-253ecb24.js";const r=t`.n-tab-panel{font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0}`;let l=class extends s{render(){return n`<div class="n-tab-panel"><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tabpanel"),this.setAttribute("tabindex","0")}};l.styles=[o,r],l=e([a("nord-tab-panel")],l);var i=l;export{i as default};
1
+ import{i as t,_ as e,s,x as n,e as a}from"./query-assigned-elements-15485e3d.js";import{s as o}from"./Component-420bbc41.js";const r=t`.n-tab-panel{font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0}`;let l=class extends s{render(){return n`<div class="n-tab-panel"><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tabpanel"),this.setAttribute("tabindex","0")}};l.styles=[o,r],l=e([a("nord-tab-panel")],l);var i=l;export{i as default};
2
2
  //# sourceMappingURL=TabPanel.js.map
package/lib/Table.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as r,_ as t,s as e,B as a,e as o,x as n}from"./query-assigned-elements-2f8275b7.js";import{e as d}from"./property-03f59dce.js";const l=r`nord-table{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 0.8));--_n-table-border-radius:var(--n-table-border-radius, var(--n-border-radius));all:unset;color:var(--n-color-text);-webkit-user-select:inherit;user-select:inherit;display:block;max-inline-size:100%;overflow-x:auto}nord-table table{inline-size:100%;font-size:var(--n-font-size-m);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-tight);text-align:start;border-spacing:0;border-collapse:separate;color:var(--n-color-text);font-variant-numeric:tabular-nums}nord-table th{border-block-end:1px solid var(--n-color-border);font-weight:var(--n-font-weight-active);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker);text-align:start;background:var(--n-color-surface-raised)}nord-table td{border-block-end:1px solid var(--n-color-border);white-space:nowrap}nord-table :is(td, th){padding:var(--_n-table-td-padding) var(--n-space-s)}nord-table :is(td,th):first-child{padding-inline-start:var(--n-space-m)}nord-table :is(td,th):last-child{padding-inline-end:var(--n-space-m)}nord-table tbody tr:hover{background:var(--n-color-active)}nord-table tbody :is(.n-row-selected, .n-row-selected:hover){background:var(--n-color-active);color:var(--n-color-text);opacity:1;cursor:default}nord-table tbody :is(tr:hover,.n-row-selected) td{color:var(--n-color-text)}nord-table th[aria-sort]{cursor:pointer}nord-table th[aria-sort]:not([aria-sort=none]){color:var(--n-color-text)}nord-table[density=condensed]{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 0.5))}nord-table[density=relaxed]{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 1.1))}nord-card nord-table tbody tr:last-child td{border-block-end-color:transparent}nord-card nord-table th:first-child{border-start-start-radius:var(--_n-table-border-radius)}nord-card nord-table th:last-child{border-start-end-radius:var(--_n-table-border-radius)}nord-card [slot=header]~nord-table th:is(:first-child, :last-child){border-radius:0}nord-card nord-table tbody tr:last-child td:first-child{border-end-start-radius:var(--_n-table-border-radius)}nord-card nord-table tbody tr:last-child td:last-child{border-end-end-radius:var(--_n-table-border-radius)}nord-table[scroll-snap]{scroll-snap-type:inline mandatory;scroll-behavior:smooth}nord-table[scroll-snap] :is(th, td){scroll-snap-align:start}nord-table:where([striped]) tbody tr:where(:nth-child(even)){background:var(--n-color-surface-raised)}nord-table .n-table-ellipsis{max-inline-size:0;inline-size:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nord-table .n-table-align-right{text-align:end}nord-table .n-table-actions{display:flex;justify-content:center}nord-table .n-table-actions nord-button{margin-block:-10px}`;let s=class extends e{constructor(){super(...arguments),this.density="default",this.scrollSnap=!1,this.striped=!1}connectedCallback(){super.connectedCallback(),this.renderStyles()}renderStyles(){const r=this.getRootNode(),t=r.nodeType===Node.DOCUMENT_NODE?r.head:r;const e=this.localName;if(r.querySelector(`style[data-component=${e}]`))return;const o=document.createDocumentFragment();a(n`<style data-component="${e}">${l}</style>`,o),t.appendChild(o)}createRenderRoot(){return this}};t([d({reflect:!0})],s.prototype,"density",void 0),t([d({reflect:!0,type:Boolean,attribute:"scroll-snap"})],s.prototype,"scrollSnap",void 0),t([d({type:Boolean,reflect:!0})],s.prototype,"striped",void 0),s=t([o("nord-table")],s);var i=s;export{i as default};
1
+ import{i as r,_ as t,s as e,B as a,e as o,x as n}from"./query-assigned-elements-15485e3d.js";import{e as d}from"./property-03f59dce.js";const l=r`nord-table{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 0.8));--_n-table-border-radius:var(--n-table-border-radius, var(--n-border-radius));all:unset;color:var(--n-color-text);-webkit-user-select:inherit;user-select:inherit;display:block;max-inline-size:100%;overflow-x:auto}nord-table table{inline-size:100%;font-size:var(--n-font-size-m);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-tight);text-align:start;border-spacing:0;border-collapse:separate;color:var(--n-color-text);font-variant-numeric:tabular-nums}nord-table th{border-block-end:1px solid var(--n-color-border);font-weight:var(--n-font-weight-active);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker);text-align:start;background:var(--n-color-surface-raised)}nord-table td{border-block-end:1px solid var(--n-color-border);white-space:nowrap}nord-table :is(td, th){padding:var(--_n-table-td-padding) var(--n-space-s)}nord-table :is(td,th):first-child{padding-inline-start:var(--n-space-m)}nord-table :is(td,th):last-child{padding-inline-end:var(--n-space-m)}nord-table tbody tr:hover{background:var(--n-color-active)}nord-table tbody :is(.n-row-selected, .n-row-selected:hover){background:var(--n-color-active);color:var(--n-color-text);opacity:1;cursor:default}nord-table tbody :is(tr:hover,.n-row-selected) td{color:var(--n-color-text)}nord-table th[aria-sort]{cursor:pointer}nord-table th[aria-sort]:not([aria-sort=none]){color:var(--n-color-text)}nord-table[density=condensed]{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 0.5))}nord-table[density=relaxed]{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 1.1))}nord-card nord-table tbody tr:last-child td{border-block-end-color:transparent}nord-card nord-table th:first-child{border-start-start-radius:var(--_n-table-border-radius)}nord-card nord-table th:last-child{border-start-end-radius:var(--_n-table-border-radius)}nord-card [slot=header]~nord-table th:is(:first-child, :last-child){border-radius:0}nord-card nord-table tbody tr:last-child td:first-child{border-end-start-radius:var(--_n-table-border-radius)}nord-card nord-table tbody tr:last-child td:last-child{border-end-end-radius:var(--_n-table-border-radius)}nord-table[scroll-snap]{scroll-snap-type:inline mandatory;scroll-behavior:smooth}nord-table[scroll-snap] :is(th, td){scroll-snap-align:start}nord-table:where([striped]) tbody tr:where(:nth-child(even)){background:var(--n-color-surface-raised)}nord-table .n-table-ellipsis{max-inline-size:0;inline-size:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nord-table .n-table-align-right{text-align:end}nord-table .n-table-actions{display:flex;justify-content:center}nord-table .n-table-actions nord-button{margin-block:-10px}`;let s=class extends e{constructor(){super(...arguments),this.density="default",this.scrollSnap=!1,this.striped=!1}connectedCallback(){super.connectedCallback(),this.renderStyles()}renderStyles(){const r=this.getRootNode(),t=r.nodeType===Node.DOCUMENT_NODE?r.head:r;const e=this.localName;if(r.querySelector(`style[data-component=${e}]`))return;const o=document.createDocumentFragment();a(n`<style data-component="${e}">${l}</style>`,o),t.appendChild(o)}createRenderRoot(){return this}};t([d({reflect:!0})],s.prototype,"density",void 0),t([d({reflect:!0,type:Boolean,attribute:"scroll-snap"})],s.prototype,"scrollSnap",void 0),t([d({type:Boolean,reflect:!0})],s.prototype,"striped",void 0),s=t([o("nord-table")],s);var i=s;export{i as default};
2
2
  //# sourceMappingURL=Table.js.map
@@ -0,0 +1,2 @@
1
+ import{_ as n,i as r}from"./query-assigned-elements-15485e3d.js";import{e as o}from"./property-03f59dce.js";function i(r){class i extends r{constructor(){super(...arguments),this.readonly=!1}}return n([o({type:Boolean,reflect:!0})],i.prototype,"readonly",void 0),i}const t=r`:host{--_n-input-inline-size:var(--n-input-inline-size, 240px);--_n-input-background:var(--n-input-background, var(--n-color-active));--_n-input-color:var(--n-input-color, var(--n-color-text));--_n-input-font-size:var(--n-input-font-size, var(--n-font-size-m));--_n-input-border-color:var(--n-input-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-input-border-radius, var(--n-border-radius-s));--_n-input-text-align:var(--n-input-text-align, start);--_n-input-placeholder-color:var(--n-input-placeholder-color, var(--n-color-text-weakest));--_n-input-padding-block:calc(var(--n-space-s) - 1px);--_n-input-padding-inline:calc(var(--n-space-s) * 1.6)}.n-input-container{position:relative;inline-size:var(--_n-input-inline-size)}.n-input{background:var(--_n-input-background);color:var(--_n-input-color);padding:var(--_n-input-padding-block) var(--_n-input-padding-inline);border-radius:var(--_n-input-border-radius);border:1px solid var(--_n-input-border-color);font-family:var(--n-font-family);font-size:var(--_n-input-font-size);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-form);inline-size:100%;transition:border var(--n-transition-quickly),box-shadow var(--n-transition-quickly),background var(--n-transition-quickly);text-align:var(--_n-input-text-align)}@media (max-width:480px){:host{--_n-input-font-size:var(--n-input-font-size, var(--n-font-size-l))}}:host([expand]){--_n-input-inline-size:100%;inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container{--_n-input-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-input-border-color, var(--n-color-accent));--_n-input-background:var(--n-input-background, var(--n-color-surface));outline:0;box-shadow:0 0 0 1px var(--_n-input-border-color)}.n-input::placeholder{color:var(--_n-input-placeholder-color);opacity:1}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-input-border-color, var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-border-color:var(--n-input-border-color, var(--n-color-active));--_n-input-color:var(--n-input-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-input-color, var(--n-color-text-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([size="s"]){--_n-input-font-size:var(--n-font-size-s);--_n-input-padding-block:calc(var(--n-space-xs) - 1px);--_n-input-padding-inline:calc(var(--n-space-xs) * 1.6)}:host([size="l"]){--_n-input-font-size:var(--n-font-size-l);--_n-input-padding-block:calc(var(--n-space-m) / 1.25)}`;export{i as R,t as s};
2
+ //# sourceMappingURL=TextField-8b226327.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TextField-c2e49b85.js","sources":["../src/common/mixins/ReadonlyMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class ReadonlyMixinInterface {\n readonly: boolean\n}\n\nexport function ReadonlyMixin<T extends Constructor<LitElement>>(\n superClass: T\n): Constructor<ReadonlyMixinInterface> & T {\n class ReadonlyElement extends superClass {\n /**\n * Makes the component readonly, so that it is not editable.\n * Readonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.\n */\n @property({ type: Boolean, reflect: true }) readonly = false\n }\n\n return ReadonlyElement\n}\n"],"names":["ReadonlyMixin","superClass","ReadonlyElement","constructor","this","readonly","__decorate","property","type","Boolean","reflect","prototype"],"mappings":"4GAUM,SAAUA,EACdC,GAEA,MAAMC,UAAwBD,EAA9BE,kCAK8CC,KAAQC,UAAG,CACxD,EAED,OAH8CC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBR,EAAAS,UAAA,gBAAA,GAGvDT,CACT"}
1
+ {"version":3,"file":"TextField-8b226327.js","sources":["../src/common/mixins/ReadonlyMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class ReadonlyMixinInterface {\n readonly: boolean\n}\n\nexport function ReadonlyMixin<T extends Constructor<LitElement>>(\n superClass: T\n): Constructor<ReadonlyMixinInterface> & T {\n class ReadonlyElement extends superClass {\n /**\n * Makes the component readonly, so that it is not editable.\n * Readonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.\n */\n @property({ type: Boolean, reflect: true }) readonly = false\n }\n\n return ReadonlyElement\n}\n"],"names":["ReadonlyMixin","superClass","ReadonlyElement","constructor","this","readonly","__decorate","property","type","Boolean","reflect","prototype"],"mappings":"4GAUM,SAAUA,EACdC,GAEA,MAAMC,UAAwBD,EAA9BE,kCAK8CC,KAAQC,UAAG,CACxD,EAED,OAH8CC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBR,EAAAS,UAAA,gBAAA,GAGvDT,CACT"}
package/lib/Textarea.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as e,x as r,A as t,_ as n,e as o,s as a}from"./query-assigned-elements-2f8275b7.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-10508457.js";import{n as l}from"./ref-f75a30b7.js";import{o as c}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-003e1094.js";import{F as p}from"./FormAssociatedMixin-895cf600.js";import{I as u}from"./InputMixin-e15dd8f7.js";import{R as h,s as v}from"./TextField-c2e49b85.js";import{A as m}from"./AutocompleteMixin-60503685.js";import{S as b}from"./SizeMixin-bc2098f4.js";import{s as x}from"./Component-253ecb24.js";import{s as f}from"./FormField-0783cb5a.js";import{LocalizeController as g}from"./LocalizeController.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";const y=e`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size, 240px);--_n-textarea-block-size:var(--n-textarea-block-size, 76px);--_n-input-background:var(--n-textarea-background, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text));--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-textarea-border-radius, var(--n-border-radius-s))}.n-input-container{position:relative;inline-size:var(--_n-textarea-inline-size)}.n-input{min-block-size:var(--_n-textarea-block-size);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}:host([expand]){--_n-textarea-inline-size:100%}.n-character-counter{margin-block-start:var(--n-space-xs);color:var(--n-color-text-weaker)}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent));--_n-input-background:var(--n-textarea-background, var(--n-color-surface))}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-textarea-color, var(--n-color-text-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent))}`;let z=class extends(b(p(m(h(u(d(a))))))){constructor(){super(...arguments),this.inputId="textarea",this.localize=new g(this,{onLangChange:()=>this.handleLangChange()}),this.resize="vertical",this.expand=!1,this.characterCounter=!1}render(){var e;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${l(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${s(this.name)}" maxlength="${s(this.maxLength)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${s(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea> ${this.characterCounter?this.renderCharacterCounter():t}</div>${this.renderError()}`}renderCharacterCounter(){const{value:e,maxLength:t}=this,n="string"==typeof e?this.lengthMeasurer(e):0,o=t?t-n:null,a=t?`${n}/${t}`:n;return r`<nord-visually-hidden aria-live="polite" aria-atomic="true">${null!=o&&o<=10?this.localize.term("remainingCharacters",o):""}</nord-visually-hidden><div class="n-character-counter">${a}</div>`}handleLangChange(){const e=this.localize.resolvedLang;this.lengthMeasurer=function(e){if(Intl.Segmenter){const r=new Intl.Segmenter(e);return e=>[...r.segment(e)].length}return e=>e.length}(e)}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height="")}};z.styles=[x,f,v,y],n([i({reflect:!0})],z.prototype,"resize",void 0),n([i({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),n([i({attribute:"maxlength",type:Number})],z.prototype,"maxLength",void 0),n([i({type:Boolean,attribute:"character-counter"})],z.prototype,"characterCounter",void 0),n([c("resize","updated"),c("value","updated")],z.prototype,"resizeToFitContent",null),z=n([o("nord-textarea")],z);var j=z;export{j as default};
1
+ import{i as e,x as r,A as t,_ as n,e as o,s as a}from"./query-assigned-elements-15485e3d.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-9b177db4.js";import{n as l}from"./ref-5526fb07.js";import{o as c}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-4300e44e.js";import{F as p}from"./FormAssociatedMixin-edf83ac6.js";import{I as u}from"./InputMixin-4037827f.js";import{R as h,s as v}from"./TextField-8b226327.js";import{A as m}from"./AutocompleteMixin-3cf61f49.js";import{S as b}from"./SizeMixin-fb379434.js";import{s as x}from"./Component-420bbc41.js";import{s as f}from"./FormField-cbfebb3f.js";import{LocalizeController as g}from"./LocalizeController.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";const y=e`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size, 240px);--_n-textarea-block-size:var(--n-textarea-block-size, 76px);--_n-input-background:var(--n-textarea-background, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text));--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-textarea-border-radius, var(--n-border-radius-s))}.n-input-container{position:relative;inline-size:var(--_n-textarea-inline-size)}.n-input{min-block-size:var(--_n-textarea-block-size);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}:host([expand]){--_n-textarea-inline-size:100%}.n-character-counter{margin-block-start:var(--n-space-xs);color:var(--n-color-text-weaker)}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent));--_n-input-background:var(--n-textarea-background, var(--n-color-surface))}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-textarea-color, var(--n-color-text-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent))}`;let z=class extends(b(p(m(h(u(d(a))))))){constructor(){super(...arguments),this.inputId="textarea",this.localize=new g(this,{onLangChange:()=>this.handleLangChange()}),this.resize="vertical",this.expand=!1,this.characterCounter=!1}render(){var e;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${l(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${s(this.name)}" maxlength="${s(this.maxLength)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${s(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea> ${this.characterCounter?this.renderCharacterCounter():t}</div>${this.renderError()}`}renderCharacterCounter(){const{value:e,maxLength:t}=this,n="string"==typeof e?this.lengthMeasurer(e):0,o=t?t-n:null,a=t?`${n}/${t}`:n;return r`<nord-visually-hidden aria-live="polite" aria-atomic="true">${null!=o&&o<=10?this.localize.term("remainingCharacters",o):""}</nord-visually-hidden><div class="n-character-counter">${a}</div>`}handleLangChange(){const e=this.localize.resolvedLang;this.lengthMeasurer=function(e){if(Intl.Segmenter){const r=new Intl.Segmenter(e);return e=>[...r.segment(e)].length}return e=>e.length}(e)}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height="")}};z.styles=[x,f,v,y],n([i({reflect:!0})],z.prototype,"resize",void 0),n([i({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),n([i({attribute:"maxlength",type:Number})],z.prototype,"maxLength",void 0),n([i({type:Boolean,attribute:"character-counter"})],z.prototype,"characterCounter",void 0),n([c("resize","updated"),c("value","updated")],z.prototype,"resizeToFitContent",null),z=n([o("nord-textarea")],z);var j=z;export{j as default};
2
2
  //# sourceMappingURL=Textarea.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Textarea.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nfunction createLengthMeasurer(locale: string) {\n if (Intl.Segmenter) {\n const segmenter = new Intl.Segmenter(locale)\n return (value: string) => [...segmenter.segment(value)].length\n }\n\n return (value: string) => value.length\n}\n\n/**\n * Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n *\n * @cssprop [--n-textarea-inline-size=240px] - Controls the inline size, or width, of the textarea.\n * @cssprop [--n-textarea-block-size=76px] - Controls the block size, or height, of the textarea.\n * @cssprop [--n-textarea-background=var(--n-color-active)] - Controls the background of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-color=var(--n-color-text)] - Controls the text color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-color=var(--n-color-border-strong)] - Controls the border color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n *\n * @localization remainingCharacters - A function which receives the number of remaining characters and returns a string to be used as the aria-live message.\n */\n@customElement(\"nord-textarea\")\nexport default class Textarea extends SizeMixin(\n FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement)))))\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n protected inputId = \"textarea\"\n\n private lengthMeasurer!: (value: string) => number\n private localize = new LocalizeController<\"nord-textarea\">(this, {\n onLangChange: () => this.handleLangChange(),\n })\n\n /**\n * Controls whether the textarea is resizable.\n * By default is manually resizable vertically.\n * Set to \"auto\" to enable auto-resizing as content grows.\n */\n @property({ reflect: true }) resize: \"vertical\" | \"auto\" = \"vertical\"\n\n /**\n * Controls whether the textarea expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * Controls the max allowed length for the textarea.\n */\n @property({ attribute: \"maxlength\", type: Number }) maxLength?: number\n\n /**\n * Controls whether to show a count of the number of characters in the textarea.\n * When combined with `maxlength`, both the count and the max length are shown.\n */\n @property({ type: Boolean, attribute: \"character-counter\" }) characterCounter = false\n\n render() {\n return html`\n ${this.renderLabel()}\n\n <div class=\"n-input-container\">\n <textarea\n ${ref(this.focusableRef)}\n id=${this.inputId}\n class=\"n-input\"\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n maxlength=${ifDefined(this.maxLength)}\n .value=${this.value ?? \"\"}\n placeholder=${ifDefined(this.placeholder)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n autocomplete=${this.autocomplete as any}\n ></textarea>\n\n ${this.characterCounter ? this.renderCharacterCounter() : nothing}\n </div>\n\n ${this.renderError()}\n `\n }\n\n private renderCharacterCounter() {\n const { value, maxLength } = this\n const length = typeof value === \"string\" ? this.lengthMeasurer(value) : 0\n\n const remainder = maxLength ? maxLength - length : null\n const counter = maxLength ? `${length}/${maxLength}` : length\n\n return html`\n <nord-visually-hidden aria-live=\"polite\" aria-atomic=\"true\">\n ${remainder != null && remainder <= 10 ? this.localize.term(\"remainingCharacters\", remainder) : \"\"}\n </nord-visually-hidden>\n <div class=\"n-character-counter\">${counter}</div>\n `\n }\n\n private handleLangChange() {\n const lang = this.localize.resolvedLang\n this.lengthMeasurer = createLengthMeasurer(lang)\n }\n\n @observe(\"resize\", \"updated\")\n @observe(\"value\", \"updated\")\n protected resizeToFitContent() {\n const textarea = this.focusableRef.value\n\n if (!textarea) {\n return\n }\n\n if (this.resize === \"auto\") {\n textarea.style.height = \"auto\"\n textarea.style.height = `${textarea.scrollHeight}px`\n } else {\n textarea.style.height = \"\"\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-textarea\": Textarea\n }\n}\n"],"names":["Textarea","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","localize","LocalizeController","onLangChange","handleLangChange","resize","expand","characterCounter","render","html","renderLabel","ref","focusableRef","disabled","readonly","required","ifDefined","name","maxLength","_a","value","placeholder","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","renderCharacterCounter","nothing","renderError","length","lengthMeasurer","remainder","counter","term","lang","resolvedLang","locale","Intl","Segmenter","segmenter","segment","createLengthMeasurer","resizeToFitContent","textarea","style","height","scrollHeight","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","attribute","Number","observe","customElement"],"mappings":"w9FAiDA,IAAqBA,EAArB,cAAsCC,EACpCC,EAAoBC,EAAkBC,EAAcC,EAAWC,EAAeC,SADhFC,kCAKYC,KAAOC,QAAG,WAGZD,KAAAE,SAAW,IAAIC,EAAoCH,KAAM,CAC/DI,aAAc,IAAMJ,KAAKK,qBAQEL,KAAMM,OAAwB,WAKfN,KAAMO,QAAG,EAWQP,KAAgBQ,kBAAG,CAoEjF,CAlECC,eACE,OAAOC,CAAI,GACPV,KAAKW,yDAIDC,EAAIZ,KAAKa,qBACNb,KAAKC,uCAEED,KAAKc,wBACLd,KAAKe,wBACLf,KAAKgB,mBACVC,EAAUjB,KAAKkB,qBACVD,EAAUjB,KAAKmB,uBACR,QAAVC,EAAApB,KAAKqB,aAAK,IAAAD,EAAAA,EAAI,oBACTH,EAAUjB,KAAKsB,0BACnBtB,KAAKuB,yBACNvB,KAAKwB,kCACKP,EAAUjB,KAAKyB,oCACnBR,EAAUjB,KAAK0B,gCACf1B,KAAK2B,6BAGpB3B,KAAKQ,iBAAmBR,KAAK4B,yBAA2BC,UAG1D7B,KAAK8B,eAEV,CAEOF,yBACN,MAAMP,MAAEA,EAAKF,UAAEA,GAAcnB,KACvB+B,EAA0B,iBAAVV,EAAqBrB,KAAKgC,eAAeX,GAAS,EAElEY,EAAYd,EAAYA,EAAYY,EAAS,KAC7CG,EAAUf,EAAY,GAAGY,KAAUZ,IAAcY,EAEvD,OAAOrB,CAAI,+DAEQ,MAAbuB,GAAqBA,GAAa,GAAKjC,KAAKE,SAASiC,KAAK,sBAAuBF,GAAa,6DAE/DC,SAEtC,CAEO7B,mBACN,MAAM+B,EAAOpC,KAAKE,SAASmC,aAC3BrC,KAAKgC,eAhHT,SAA8BM,GAC5B,GAAIC,KAAKC,UAAW,CAClB,MAAMC,EAAY,IAAIF,KAAKC,UAAUF,GACrC,OAAQjB,GAAkB,IAAIoB,EAAUC,QAAQrB,IAAQU,MACzD,CAED,OAAQV,GAAkBA,EAAMU,MAClC,CAyG0BY,CAAqBP,EAC5C,CAISQ,qBACR,MAAMC,EAAW7C,KAAKa,aAAaQ,MAE9BwB,IAIe,SAAhB7C,KAAKM,QACPuC,EAASC,MAAMC,OAAS,OACxBF,EAASC,MAAMC,OAAS,GAAGF,EAASG,kBAEpCH,EAASC,MAAMC,OAAS,GAE3B,GAjGMxD,EAAM0D,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBN,GAcpCO,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgDhE,EAAAiE,UAAA,cAAA,GAKzBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyBnE,EAAAiE,UAAA,cAAA,GAKNH,EAAA,CAAnDC,EAAS,CAAEK,UAAW,YAAaF,KAAMG,UAA4BrE,EAAAiE,UAAA,iBAAA,GAMTH,EAAA,CAA5DC,EAAS,CAAEG,KAAMC,QAASC,UAAW,uBAA+CpE,EAAAiE,UAAA,wBAAA,GAsD3EH,EAAA,CAFTQ,EAAQ,SAAU,WAClBA,EAAQ,QAAS,YAcjBtE,EAAAiE,UAAA,qBAAA,MApGkBjE,EAAQ8D,EAAA,CAD5BS,EAAc,kBACMvE,SAAAA"}
1
+ {"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Textarea.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nfunction createLengthMeasurer(locale: string) {\n if (Intl.Segmenter) {\n const segmenter = new Intl.Segmenter(locale)\n return (value: string) => [...segmenter.segment(value)].length\n }\n\n return (value: string) => value.length\n}\n\n/**\n * Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n *\n * @cssprop [--n-textarea-inline-size=240px] - Controls the inline size, or width, of the textarea.\n * @cssprop [--n-textarea-block-size=76px] - Controls the block size, or height, of the textarea.\n * @cssprop [--n-textarea-background=var(--n-color-active)] - Controls the background of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-color=var(--n-color-text)] - Controls the text color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-color=var(--n-color-border-strong)] - Controls the border color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n *\n * @localization remainingCharacters - A function which receives the number of remaining characters and returns a string to be used as the aria-live message.\n */\n@customElement(\"nord-textarea\")\nexport default class Textarea extends SizeMixin(\n FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement)))))\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n protected inputId = \"textarea\"\n\n private lengthMeasurer!: (value: string) => number\n private localize = new LocalizeController<\"nord-textarea\">(this, {\n onLangChange: () => this.handleLangChange(),\n })\n\n /**\n * Controls whether the textarea is resizable.\n * By default is manually resizable vertically.\n * Set to \"auto\" to enable auto-resizing as content grows.\n */\n @property({ reflect: true }) resize: \"vertical\" | \"auto\" = \"vertical\"\n\n /**\n * Controls whether the textarea expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * Controls the max allowed length for the textarea.\n */\n @property({ attribute: \"maxlength\", type: Number }) maxLength?: number\n\n /**\n * Controls whether to show a count of the number of characters in the textarea.\n * When combined with `maxlength`, both the count and the max length are shown.\n */\n @property({ type: Boolean, attribute: \"character-counter\" }) characterCounter = false\n\n render() {\n return html`\n ${this.renderLabel()}\n\n <div class=\"n-input-container\">\n <textarea\n ${ref(this.focusableRef)}\n id=${this.inputId}\n class=\"n-input\"\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n maxlength=${ifDefined(this.maxLength)}\n .value=${this.value ?? \"\"}\n placeholder=${ifDefined(this.placeholder)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n autocomplete=${this.autocomplete as any}\n ></textarea>\n\n ${this.characterCounter ? this.renderCharacterCounter() : nothing}\n </div>\n\n ${this.renderError()}\n `\n }\n\n private renderCharacterCounter() {\n const { value, maxLength } = this\n const length = typeof value === \"string\" ? this.lengthMeasurer(value) : 0\n\n const remainder = maxLength ? maxLength - length : null\n const counter = maxLength ? `${length}/${maxLength}` : length\n\n return html`\n <nord-visually-hidden aria-live=\"polite\" aria-atomic=\"true\">\n ${remainder != null && remainder <= 10 ? this.localize.term(\"remainingCharacters\", remainder) : \"\"}\n </nord-visually-hidden>\n <div class=\"n-character-counter\">${counter}</div>\n `\n }\n\n private handleLangChange() {\n const lang = this.localize.resolvedLang\n this.lengthMeasurer = createLengthMeasurer(lang)\n }\n\n @observe(\"resize\", \"updated\")\n @observe(\"value\", \"updated\")\n protected resizeToFitContent() {\n const textarea = this.focusableRef.value\n\n if (!textarea) {\n return\n }\n\n if (this.resize === \"auto\") {\n textarea.style.height = \"auto\"\n textarea.style.height = `${textarea.scrollHeight}px`\n } else {\n textarea.style.height = \"\"\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-textarea\": Textarea\n }\n}\n"],"names":["Textarea","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","localize","LocalizeController","onLangChange","handleLangChange","resize","expand","characterCounter","render","html","renderLabel","ref","focusableRef","disabled","readonly","required","ifDefined","name","maxLength","_a","value","placeholder","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","renderCharacterCounter","nothing","renderError","length","lengthMeasurer","remainder","counter","term","lang","resolvedLang","locale","Intl","Segmenter","segmenter","segment","createLengthMeasurer","resizeToFitContent","textarea","style","height","scrollHeight","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","attribute","Number","observe","customElement"],"mappings":"m/FAiDA,IAAqBA,EAArB,cAAsCC,EACpCC,EAAoBC,EAAkBC,EAAcC,EAAWC,EAAeC,SADhFC,kCAKYC,KAAOC,QAAG,WAGZD,KAAAE,SAAW,IAAIC,EAAoCH,KAAM,CAC/DI,aAAc,IAAMJ,KAAKK,qBAQEL,KAAMM,OAAwB,WAKfN,KAAMO,QAAG,EAWQP,KAAgBQ,kBAAG,CAoEjF,CAlECC,eACE,OAAOC,CAAI,GACPV,KAAKW,yDAIDC,EAAIZ,KAAKa,qBACNb,KAAKC,uCAEED,KAAKc,wBACLd,KAAKe,wBACLf,KAAKgB,mBACVC,EAAUjB,KAAKkB,qBACVD,EAAUjB,KAAKmB,uBACR,QAAVC,EAAApB,KAAKqB,aAAK,IAAAD,EAAAA,EAAI,oBACTH,EAAUjB,KAAKsB,0BACnBtB,KAAKuB,yBACNvB,KAAKwB,kCACKP,EAAUjB,KAAKyB,oCACnBR,EAAUjB,KAAK0B,gCACf1B,KAAK2B,6BAGpB3B,KAAKQ,iBAAmBR,KAAK4B,yBAA2BC,UAG1D7B,KAAK8B,eAEV,CAEOF,yBACN,MAAMP,MAAEA,EAAKF,UAAEA,GAAcnB,KACvB+B,EAA0B,iBAAVV,EAAqBrB,KAAKgC,eAAeX,GAAS,EAElEY,EAAYd,EAAYA,EAAYY,EAAS,KAC7CG,EAAUf,EAAY,GAAGY,KAAUZ,IAAcY,EAEvD,OAAOrB,CAAI,+DAEQ,MAAbuB,GAAqBA,GAAa,GAAKjC,KAAKE,SAASiC,KAAK,sBAAuBF,GAAa,6DAE/DC,SAEtC,CAEO7B,mBACN,MAAM+B,EAAOpC,KAAKE,SAASmC,aAC3BrC,KAAKgC,eAhHT,SAA8BM,GAC5B,GAAIC,KAAKC,UAAW,CAClB,MAAMC,EAAY,IAAIF,KAAKC,UAAUF,GACrC,OAAQjB,GAAkB,IAAIoB,EAAUC,QAAQrB,IAAQU,MACzD,CAED,OAAQV,GAAkBA,EAAMU,MAClC,CAyG0BY,CAAqBP,EAC5C,CAISQ,qBACR,MAAMC,EAAW7C,KAAKa,aAAaQ,MAE9BwB,IAIe,SAAhB7C,KAAKM,QACPuC,EAASC,MAAMC,OAAS,OACxBF,EAASC,MAAMC,OAAS,GAAGF,EAASG,kBAEpCH,EAASC,MAAMC,OAAS,GAE3B,GAjGMxD,EAAM0D,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBN,GAcpCO,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgDhE,EAAAiE,UAAA,cAAA,GAKzBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyBnE,EAAAiE,UAAA,cAAA,GAKNH,EAAA,CAAnDC,EAAS,CAAEK,UAAW,YAAaF,KAAMG,UAA4BrE,EAAAiE,UAAA,iBAAA,GAMTH,EAAA,CAA5DC,EAAS,CAAEG,KAAMC,QAASC,UAAW,uBAA+CpE,EAAAiE,UAAA,wBAAA,GAsD3EH,EAAA,CAFTQ,EAAQ,SAAU,WAClBA,EAAQ,QAAS,YAcjBtE,EAAAiE,UAAA,qBAAA,MApGkBjE,EAAQ8D,EAAA,CAD5BS,EAAc,kBACMvE,SAAAA"}
package/lib/Toast.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as s,x as o,_ as t,e as i,s as r}from"./query-assigned-elements-2f8275b7.js";import{o as e}from"./class-map-4a0dec4a.js";import{e as a}from"./property-03f59dce.js";import{n}from"./ref-f75a30b7.js";import{N as c}from"./NotificationMixin-cea138a7.js";import{o as d}from"./observe-a9c6dfb6.js";import l from"./Icon.js";import{s as m}from"./Component-253ecb24.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./events-d9666e88.js";import"./if-defined-10508457.js";import"./cond-77258def.js";import"./IconManager.js";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.41 10 8.29 8.29-1.41 1.41-8.29-8.29-8.28996 8.3-1.410001-1.41 8.290001-8.3-8.300001-8.28996 1.420001-1.420001 8.28996 8.300001 8.29-8.300001 1.41 1.410001z" fill="currentColor"/></svg>',title:"interface-close",tags:"nordicon interface close cross remove delete erase symbol"});const p=s`:host{--_n-toast-color:var(--n-color-surface);--_n-toast-background-color:var(--n-color-text)}.n-toast{display:flex;gap:var(--n-space-l);align-items:flex-start;background-color:var(--_n-toast-background-color);color:var(--_n-toast-color);border-radius:var(--n-border-radius);animation:n-enter var(--n-transition-slowly) forwards 1;z-index:var(--n-index-toast);box-shadow:var(--n-box-shadow-popout)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{from{transform:translateY(50%);opacity:0}}@keyframes n-exit{to{transform:scale(.97);opacity:0}}.n-toast-inner{padding:var(--n-space-m);flex:1}.n-dismiss{--_n-toast-focus-ring:0 0 0 2px var(--n-color-accent);border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);position:relative;inset-inline-end:var(--n-space-s);inset-block-start:var(--n-space-s);background-color:transparent;border-radius:var(--n-border-radius);cursor:pointer}.n-dismiss::after,.n-dismiss::before{content:"";position:absolute;display:block;border-radius:var(--n-border-radius)}.n-dismiss::before{inset:0;background:var(--_n-toast-color);transition:opacity var(--n-transition-quickly);opacity:0}.n-dismiss:is(:hover,:focus)::before{opacity:.06}.n-dismiss::after{inset:calc(var(--n-space-s) * -1)}.n-dismiss:active{transform:translateY(1px)}.n-dismiss:focus{outline:0;box-shadow:var(--_n-toast-focus-ring)}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--_n-toast-focus-ring)}}.n-dismiss nord-icon{opacity:.53;transition:opacity var(--n-transition-quickly);color:var(--_n-toast-color)}.n-dismiss:is(:hover,:focus) nord-icon{opacity:1}:host([variant=danger]){--_n-toast-background-color:var(--n-color-status-danger);--_n-toast-color:var(--n-color-text-on-accent)}`;l.registerIcon(u);let f=class extends(c(r)){constructor(){super(...arguments),this.variant="default",this.autoDismiss=1e4}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.timeoutId)}async dismiss(){return clearTimeout(this.timeoutId),super.dismiss()}render(){return o`<div ${n(this.notificationRef)} class="${e({"n-toast":!0,"n-dismissed":this.dismissed})}"><div class="n-toast-inner"><slot></slot></div><button class="n-dismiss" @click="${this.dismiss}" aria-hidden="true"><nord-icon name="interface-close" size="s"></nord-icon></button></div>`}handleAutoDismissChange(){clearTimeout(this.timeoutId),null!=this.autoDismiss&&this.autoDismiss>=0&&setTimeout((()=>this.dismiss()),this.autoDismiss)}};f.styles=[m,p],t([a({reflect:!0})],f.prototype,"variant",void 0),t([a({type:Number,attribute:"auto-dismiss"})],f.prototype,"autoDismiss",void 0),t([d("autoDismiss")],f.prototype,"handleAutoDismissChange",null),f=t([i("nord-toast")],f);var v=f;export{v as default};
1
+ import{i as s,x as o,_ as t,e as i,s as r}from"./query-assigned-elements-15485e3d.js";import{o as e}from"./class-map-cb77ead2.js";import{e as a}from"./property-03f59dce.js";import{n}from"./ref-5526fb07.js";import{N as c}from"./NotificationMixin-c06bb631.js";import{o as d}from"./observe-a9c6dfb6.js";import l from"./Icon.js";import{s as m}from"./Component-420bbc41.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./events-d9666e88.js";import"./if-defined-9b177db4.js";import"./cond-44672025.js";import"./IconManager.js";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.41 10 8.29 8.29-1.41 1.41-8.29-8.29-8.28996 8.3-1.410001-1.41 8.290001-8.3-8.300001-8.28996 1.420001-1.420001 8.28996 8.300001 8.29-8.300001 1.41 1.410001z" fill="currentColor"/></svg>',title:"interface-close",tags:"nordicon interface close cross remove delete erase symbol"});const p=s`:host{--_n-toast-color:var(--n-color-surface);--_n-toast-background-color:var(--n-color-text)}.n-toast{display:flex;gap:var(--n-space-l);align-items:flex-start;background-color:var(--_n-toast-background-color);color:var(--_n-toast-color);border-radius:var(--n-border-radius);animation:n-enter var(--n-transition-slowly) forwards 1;z-index:var(--n-index-toast);box-shadow:var(--n-box-shadow-popout)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{from{transform:translateY(50%);opacity:0}}@keyframes n-exit{to{transform:scale(.97);opacity:0}}.n-toast-inner{padding:var(--n-space-m);flex:1}.n-dismiss{--_n-toast-focus-ring:0 0 0 2px var(--n-color-accent);border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);position:relative;inset-inline-end:var(--n-space-s);inset-block-start:var(--n-space-s);background-color:transparent;border-radius:var(--n-border-radius);cursor:pointer}.n-dismiss::after,.n-dismiss::before{content:"";position:absolute;display:block;border-radius:var(--n-border-radius)}.n-dismiss::before{inset:0;background:var(--_n-toast-color);transition:opacity var(--n-transition-quickly);opacity:0}.n-dismiss:is(:hover,:focus)::before{opacity:.06}.n-dismiss::after{inset:calc(var(--n-space-s) * -1)}.n-dismiss:active{transform:translateY(1px)}.n-dismiss:focus{outline:0;box-shadow:var(--_n-toast-focus-ring)}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--_n-toast-focus-ring)}}.n-dismiss nord-icon{opacity:.53;transition:opacity var(--n-transition-quickly);color:var(--_n-toast-color)}.n-dismiss:is(:hover,:focus) nord-icon{opacity:1}:host([variant=danger]){--_n-toast-background-color:var(--n-color-status-danger);--_n-toast-color:var(--n-color-text-on-accent)}`;l.registerIcon(u);let f=class extends(c(r)){constructor(){super(...arguments),this.variant="default",this.autoDismiss=1e4}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.timeoutId)}async dismiss(){return clearTimeout(this.timeoutId),super.dismiss()}render(){return o`<div ${n(this.notificationRef)} class="${e({"n-toast":!0,"n-dismissed":this.dismissed})}"><div class="n-toast-inner"><slot></slot></div><button class="n-dismiss" @click="${this.dismiss}" aria-hidden="true"><nord-icon name="interface-close" size="s"></nord-icon></button></div>`}handleAutoDismissChange(){clearTimeout(this.timeoutId),null!=this.autoDismiss&&this.autoDismiss>=0&&setTimeout((()=>this.dismiss()),this.autoDismiss)}};f.styles=[m,p],t([a({reflect:!0})],f.prototype,"variant",void 0),t([a({type:Number,attribute:"auto-dismiss"})],f.prototype,"autoDismiss",void 0),t([d("autoDismiss")],f.prototype,"handleAutoDismissChange",null),f=t([i("nord-toast")],f);var v=f;export{v as default};
2
2
  //# sourceMappingURL=Toast.js.map
package/lib/ToastGroup.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as t,_ as e,s as n,x as s,e as a}from"./query-assigned-elements-2f8275b7.js";import{s as o}from"./Component-253ecb24.js";const i=t`.n-toast-group{display:flex;flex-direction:column;gap:var(--n-space-s);position:fixed;z-index:var(--n-index-toast);inset:0;inset-block-start:auto;inset-inline-end:var(--n-scrollbar-gutter,0);margin:1em;pointer-events:none}::slotted(nord-toast){max-inline-size:calc(var(--n-space-xxl) * 5);inline-size:100%;margin-inline:auto;pointer-events:auto}`;let r=class extends n{render(){return s`<div class="n-toast-group" role="log" aria-relevant="additions"><slot></slot></div>`}addToast(t,e={}){const{variant:n,autoDismiss:s}=e,a=document.createElement("nord-toast");return n&&(a.variant=n),null!=s&&(a.autoDismiss=s),a.textContent=t,this.appendChild(a),a}};r.styles=[o,i],r=e([a("nord-toast-group")],r);var l=r;export{l as default};
1
+ import{i as t,_ as e,s as n,x as s,e as a}from"./query-assigned-elements-15485e3d.js";import{s as o}from"./Component-420bbc41.js";const i=t`.n-toast-group{display:flex;flex-direction:column;gap:var(--n-space-s);position:fixed;z-index:var(--n-index-toast);inset:0;inset-block-start:auto;inset-inline-end:var(--n-scrollbar-gutter,0);margin:1em;pointer-events:none}::slotted(nord-toast){max-inline-size:calc(var(--n-space-xxl) * 5);inline-size:100%;margin-inline:auto;pointer-events:auto}`;let r=class extends n{render(){return s`<div class="n-toast-group" role="log" aria-relevant="additions"><slot></slot></div>`}addToast(t,e={}){const{variant:n,autoDismiss:s}=e,a=document.createElement("nord-toast");return n&&(a.variant=n),null!=s&&(a.autoDismiss=s),a.textContent=t,this.appendChild(a),a}};r.styles=[o,i],r=e([a("nord-toast-group")],r);var l=r;export{l as default};
2
2
  //# sourceMappingURL=ToastGroup.js.map
package/lib/Toggle.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as e,x as n,_ as i,e as r,s as t}from"./query-assigned-elements-2f8275b7.js";import{e as o}from"./property-03f59dce.js";import{l as s}from"./if-defined-10508457.js";import{n as a}from"./ref-f75a30b7.js";import{F as l}from"./FocusableMixin-003e1094.js";import{F as c}from"./FormAssociatedMixin-895cf600.js";import{I as d}from"./InputMixin-e15dd8f7.js";import{s as g}from"./Component-253ecb24.js";import{s as p}from"./FormField-0783cb5a.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";const h=e`:host{--_n-toggle-block-size:calc(var(--_n-toggle-inline-size) / 1.6);--_n-toggle-inline-size:3.2143em;--_n-toggle-thumb-margin:0.35em;display:inline-block;font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-block-size:100%}.n-input-container{position:relative}.n-toggle{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;inline-size:var(--_n-toggle-inline-size);block-size:var(--_n-toggle-block-size);border-radius:var(--n-border-radius-pill);background:var(--_n-toggle-background,var(--n-color-border-strong));cursor:pointer;transition:background var(--n-transition-slowly);font-size:var(--_n-toggle-size,var(--n-font-size-m))}.n-toggle::before{content:"";display:block;aspect-ratio:1/1;block-size:calc(100% - 2 * var(--_n-toggle-thumb-margin));background:var(--n-color-text-on-accent);border-radius:var(--n-border-radius-circle);transition:margin;transition-duration:inherit;margin-inline-start:var(--_n-toggle-thumb-margin);box-shadow:var(--n-box-shadow)}input:checked{--_n-toggle-background:var(--n-color-text-link)}input:checked::before{margin-inline-start:calc(var(--_n-toggle-inline-size) - var(--_n-toggle-block-size) + var(--_n-toggle-thumb-margin))}input:checked[aria-invalid]{--_n-toggle-background:var(--n-color-status-danger)}input:focus{outline:0;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{opacity:.3;cursor:not-allowed}.n-label-container{margin-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}:host([size="s"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xs)}:host([size="l"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xl)}`;let v=class extends(c(d(l(t)))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=n`<div class="n-expand">${this.renderLabel()} ${this.renderError()}</div>`,i=n`<div class="n-input-container"><input ${a(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${s(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" @change="${this.handleChange}"></div>`;return n`<div class="n-flex">${this.reverse?[e,i]:[i,e]}</div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};v.styles=[g,p,h],i([o({type:Boolean})],v.prototype,"checked",void 0),i([o({type:Boolean})],v.prototype,"reverse",void 0),i([o({reflect:!0})],v.prototype,"size",void 0),v=i([r("nord-toggle")],v);var u=v;export{u as default};
1
+ import{i as e,x as n,_ as i,e as r,s as t}from"./query-assigned-elements-15485e3d.js";import{e as o}from"./property-03f59dce.js";import{l as s}from"./if-defined-9b177db4.js";import{n as a}from"./ref-5526fb07.js";import{F as l}from"./FocusableMixin-4300e44e.js";import{F as c}from"./FormAssociatedMixin-edf83ac6.js";import{I as d}from"./InputMixin-4037827f.js";import{s as g}from"./Component-420bbc41.js";import{s as p}from"./FormField-cbfebb3f.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";const h=e`:host{--_n-toggle-block-size:calc(var(--_n-toggle-inline-size) / 1.6);--_n-toggle-inline-size:3.2143em;--_n-toggle-thumb-margin:0.35em;display:inline-block;font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-block-size:100%}.n-input-container{position:relative}.n-toggle{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;inline-size:var(--_n-toggle-inline-size);block-size:var(--_n-toggle-block-size);border-radius:var(--n-border-radius-pill);background:var(--_n-toggle-background,var(--n-color-border-strong));cursor:pointer;transition:background var(--n-transition-slowly);font-size:var(--_n-toggle-size,var(--n-font-size-m))}.n-toggle::before{content:"";display:block;aspect-ratio:1/1;block-size:calc(100% - 2 * var(--_n-toggle-thumb-margin));background:var(--n-color-text-on-accent);border-radius:var(--n-border-radius-circle);transition:margin;transition-duration:inherit;margin-inline-start:var(--_n-toggle-thumb-margin);box-shadow:var(--n-box-shadow)}input:checked{--_n-toggle-background:var(--n-color-accent)}input:checked::before{margin-inline-start:calc(var(--_n-toggle-inline-size) - var(--_n-toggle-block-size) + var(--_n-toggle-thumb-margin))}input:checked[aria-invalid]{--_n-toggle-background:var(--n-color-status-danger)}input:focus{outline:0;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{opacity:.3;cursor:not-allowed}.n-label-container{margin-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}:host([size="s"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xs)}:host([size="l"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xl)}`;let v=class extends(c(d(l(t)))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=n`<div class="n-expand">${this.renderLabel()} ${this.renderError()}</div>`,i=n`<div class="n-input-container"><input ${a(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${s(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" @change="${this.handleChange}"></div>`;return n`<div class="n-flex">${this.reverse?[e,i]:[i,e]}</div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};v.styles=[g,p,h],i([o({type:Boolean})],v.prototype,"checked",void 0),i([o({type:Boolean})],v.prototype,"reverse",void 0),i([o({reflect:!0})],v.prototype,"size",void 0),v=i([r("nord-toggle")],v);var b=v;export{b as default};
2
2
  //# sourceMappingURL=Toggle.js.map
package/lib/Toggle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.js","sources":["../src/toggle/Toggle.ts"],"sourcesContent":["/* eslint-disable lit-a11y/role-has-required-aria-attrs */\nimport { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Toggle.css\"\n\n/**\n * Toggle switch gives control over a feature or option that can be\n * turned on or off. If a physical switch would work for the action, a\n * toggle is probably the best component to use.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-toggle\")\nexport default class Toggle extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.checked ? this.value || \"on\" : undefined\n }\n\n /**\n * Controls whether the toggle is checked or not.\n */\n @property({ type: Boolean }) checked: boolean = false\n\n /**\n * Controls whether the contents are displayed in reverse order,\n * putting the label before the toggle.\n */\n @property({ type: Boolean }) reverse: boolean = false\n\n /**\n * The size of the toggle switch.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n render() {\n const label = html`<div class=\"n-expand\">${this.renderLabel()} ${this.renderError()}</div>`\n const input = html`<div class=\"n-input-container\">\n <input\n ${ref(this.focusableRef)}\n class=\"n-toggle\"\n id=${this.inputId}\n type=\"checkbox\"\n role=\"switch\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .checked=${this.checked}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n @change=${this.handleChange}\n />\n </div>`\n\n return html`<div class=\"n-flex\">${this.reverse ? [label, input] : [input, label]}</div>`\n }\n\n protected handleChange(e: Event): void {\n const target = e.target as HTMLInputElement\n this.checked = target.checked\n super.handleChange(e)\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-toggle\": Toggle\n }\n}\n"],"names":["Toggle","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","checked","reverse","size","formValue","value","undefined","render","label","html","renderLabel","renderError","input","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","prototype","reflect","customElement"],"mappings":"gxFA0BA,IAAqBA,EAArB,cAAoCC,EAAoBC,EAAWC,EAAeC,MAAlFC,kCAU+BC,KAAOC,SAAY,EAMnBD,KAAOE,SAAY,EAKnBF,KAAIG,KAAoB,GA8BtD,CAhDwBC,gBACrB,OAAOJ,KAAKC,QAAUD,KAAKK,OAAS,UAAOC,CAC5C,CAkBDC,SACE,MAAMC,EAAQC,CAAI,yBAAyBT,KAAKU,iBAAiBV,KAAKW,sBAChEC,EAAQH,CAAI,yCAEZI,EAAIb,KAAKc,sCAENd,KAAKe,gDAGHC,EAAUhB,KAAKiB,kBACbjB,KAAKK,oBACHL,KAAKC,uBACJD,KAAKkB,wBACLlB,KAAKmB,+BACEH,EAAUhB,KAAKoB,oCACnBJ,EAAUhB,KAAKqB,2BACpBrB,KAAKsB,uBAInB,OAAOb,CAAI,uBAAuBT,KAAKE,QAAU,CAACM,EAAOI,GAAS,CAACA,EAAOJ,UAC3E,CAESc,aAAaC,GACrB,MAAMC,EAASD,EAAEC,OACjBxB,KAAKC,QAAUuB,EAAOvB,QACtBwB,MAAMH,aAAaC,EACpB,GAjDM7B,EAAMgC,OAAG,CAACC,EAAgBC,EAAgBC,GASpBC,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCvC,EAAAwC,UAAA,eAAA,GAMxBJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCvC,EAAAwC,UAAA,eAAA,GAKxBJ,EAAA,CAA5BC,EAAS,CAAEI,SAAS,KAAmCzC,EAAAwC,UAAA,YAAA,GArBrCxC,EAAMoC,EAAA,CAD1BM,EAAc,gBACM1C,SAAAA"}
1
+ {"version":3,"file":"Toggle.js","sources":["../src/toggle/Toggle.ts"],"sourcesContent":["/* eslint-disable lit-a11y/role-has-required-aria-attrs */\nimport { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Toggle.css\"\n\n/**\n * Toggle switch gives control over a feature or option that can be\n * turned on or off. If a physical switch would work for the action, a\n * toggle is probably the best component to use.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-toggle\")\nexport default class Toggle extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.checked ? this.value || \"on\" : undefined\n }\n\n /**\n * Controls whether the toggle is checked or not.\n */\n @property({ type: Boolean }) checked: boolean = false\n\n /**\n * Controls whether the contents are displayed in reverse order,\n * putting the label before the toggle.\n */\n @property({ type: Boolean }) reverse: boolean = false\n\n /**\n * The size of the toggle switch.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n render() {\n const label = html`<div class=\"n-expand\">${this.renderLabel()} ${this.renderError()}</div>`\n const input = html`<div class=\"n-input-container\">\n <input\n ${ref(this.focusableRef)}\n class=\"n-toggle\"\n id=${this.inputId}\n type=\"checkbox\"\n role=\"switch\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .checked=${this.checked}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n @change=${this.handleChange}\n />\n </div>`\n\n return html`<div class=\"n-flex\">${this.reverse ? [label, input] : [input, label]}</div>`\n }\n\n protected handleChange(e: Event): void {\n const target = e.target as HTMLInputElement\n this.checked = target.checked\n super.handleChange(e)\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-toggle\": Toggle\n }\n}\n"],"names":["Toggle","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","checked","reverse","size","formValue","value","undefined","render","label","html","renderLabel","renderError","input","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","prototype","reflect","customElement"],"mappings":"6wFA0BA,IAAqBA,EAArB,cAAoCC,EAAoBC,EAAWC,EAAeC,MAAlFC,kCAU+BC,KAAOC,SAAY,EAMnBD,KAAOE,SAAY,EAKnBF,KAAIG,KAAoB,GA8BtD,CAhDwBC,gBACrB,OAAOJ,KAAKC,QAAUD,KAAKK,OAAS,UAAOC,CAC5C,CAkBDC,SACE,MAAMC,EAAQC,CAAI,yBAAyBT,KAAKU,iBAAiBV,KAAKW,sBAChEC,EAAQH,CAAI,yCAEZI,EAAIb,KAAKc,sCAENd,KAAKe,gDAGHC,EAAUhB,KAAKiB,kBACbjB,KAAKK,oBACHL,KAAKC,uBACJD,KAAKkB,wBACLlB,KAAKmB,+BACEH,EAAUhB,KAAKoB,oCACnBJ,EAAUhB,KAAKqB,2BACpBrB,KAAKsB,uBAInB,OAAOb,CAAI,uBAAuBT,KAAKE,QAAU,CAACM,EAAOI,GAAS,CAACA,EAAOJ,UAC3E,CAESc,aAAaC,GACrB,MAAMC,EAASD,EAAEC,OACjBxB,KAAKC,QAAUuB,EAAOvB,QACtBwB,MAAMH,aAAaC,EACpB,GAjDM7B,EAAMgC,OAAG,CAACC,EAAgBC,EAAgBC,GASpBC,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCvC,EAAAwC,UAAA,eAAA,GAMxBJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCvC,EAAAwC,UAAA,eAAA,GAKxBJ,EAAA,CAA5BC,EAAS,CAAEI,SAAS,KAAmCzC,EAAAwC,UAAA,YAAA,GArBrCxC,EAAMoC,EAAA,CAD1BM,EAAc,gBACM1C,SAAAA"}
package/lib/Tooltip.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as t,_ as i,s as e,x as s,e as o}from"./query-assigned-elements-2f8275b7.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as d,o as l,f as h,s as c}from"./positioning-a572d126.js";import{S as p}from"./SlotController-d733c575.js";import{s as u}from"./Component-253ecb24.js";import{E as v}from"./EventController-d99ebeef.js";import{f as m}from"./fsm-50373df9.js";import{o as b}from"./observe-a9c6dfb6.js";function y(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function f(t,i,e){t.setAttribute(i,e.join(" "))}const g=t`:host{--_n-tooltip-max-size:var(--n-tooltip-max-size, 50ch);--_n-tooltip-background:rgba(20, 20, 20, 0.95);--_n-tooltip-color:#fff;--_n-tooltip-key-border:rgba(255, 255, 255, 0.03);--_n-tooltip-key-background:rgba(255, 255, 255, 0.1);position:fixed;pointer-events:none;visibility:hidden;opacity:0;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transition-timing-function:ease;z-index:var(--n-index-popout)}.n-tooltip{gap:var(--n-space-s);font-family:var(--n-font-family);font-size:var(--n-font-size-xs);line-height:var(--n-line-height);color:var(--_n-tooltip-color);padding:calc(var(--n-space-s)/ 1.5) var(--n-space-s);background-color:var(--_n-tooltip-background);border-radius:var(--n-border-radius-s);word-break:break-word;max-inline-size:var(--_n-tooltip-max-size)}.n-tooltip,.n-tooltip-shortcut{display:flex;align-items:center}.n-tooltip-shortcut{gap:2px}::slotted([slot=shortcut]){box-sizing:border-box;margin:0;inline-size:var(--n-size-icon-m);block-size:var(--n-size-icon-m);border-radius:var(--n-border-radius-s);border:1px solid var(--_n-tooltip-key-border)!important;padding:1px!important;text-align:center;font-size:var(--n-font-size-xs);line-height:var(--n-line-height-tight);letter-spacing:-.5px;vertical-align:middle!important;background-color:var(--_n-tooltip-key-background)}[slot=shortcut]::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;var x;function w(t,i){return Boolean(i.id)&&t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("aria-describedby")===i.id}function k(t){var i;const e=null===(i=null==t?void 0:t.focusableRef)||void 0===i?void 0:i.value;return e&&"focusableRef"in e?k(e):e}const{transition:E}=m({hidden:{show:"waiting"},visible:{hide:"hidden",reposition:"positioning",show:"positioning"},waiting:{timeout:"positioning",hide:"hidden"},positioning:{positioned:"visible",hide:"hidden"}});let z=x=class extends e{constructor(){super(...arguments),this.shortcutSlot=new p(this,"shortcut"),this.events=new v(this),this.proxy=document.createElement("span"),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.updatePosition=t=>a(t,this,{strategy:"fixed",placement:d(this.position),middleware:[l(8),h(),c({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=E(this.state,"positioned")})),this.hideTooltip=()=>{this.state=E(this.state,"hide")},this.reposition=()=>{this.state=E(this.state,"reposition")},this.handleShow=t=>{const i=t.target;w(i,this)&&(this.currentElement=i,this.state=E(this.state,"show"))},this.handleHide=t=>{t.target===this.currentElement&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{const t=k(this.currentElement);t&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,t.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const s=y(t,i);s.includes(e)||f(t,i,s.concat(e))}(t,"aria-describedby",this.id))},this.removeDescribedBy=()=>{const t=k(this.currentElement);t&&(this.proxy.remove(),function(t,i,e){const s=y(t,i);s.includes(e)&&f(t,i,s.filter((t=>t!==e)))}(t,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback();const t=this.getRootNode();this.events.listen(t,"keydown",this.hideOnEscape),this.events.listen(t,"mouseover",this.handleShow),this.events.listen(t,"focusin",this.handleShow),this.events.listen(t,"mouseout",this.handleHide),this.events.listen(t,"focusout",this.handleHide),this.events.listen(t,"click",this.handleHide,{capture:!0}),this.events.listen(window,"resize",this.reposition,{passive:!0}),this.events.listen(window,"scroll",this.reposition,{passive:!0})}render(){return s`<div class="n-tooltip"><slot></slot><div class="n-tooltip-shortcut" ?hidden="${this.shortcutSlot.isEmpty}"><slot class="n-tooltip-key" name="shortcut"></slot></div></div>`}handleIdChange(){this.id||console.warn("NORD: The tooltip requires an id attribute and value")}handleStateChange(t){var i;switch(this.state){case"hidden":"waiting"===t&&this.timeoutId&&clearTimeout(this.timeoutId),this.removeDescribedBy(),this.currentElement=void 0,this.style.visibility="hidden",this.style.opacity="0";break;case"visible":{this.timeoutId=void 0,x.lastOpened=this,this.addDescribedBy();const[t,i]=this.coords;this.style.left=`${t}px`,this.style.top=`${i}px`,this.style.visibility="visible",this.style.opacity="1";break}case"waiting":this.timeoutId=setTimeout((()=>{this.state=E(this.state,"timeout")}),this.delay);break;case"positioning":x.lastOpened!==this&&(null===(i=x.lastOpened)||void 0===i||i.hideTooltip()),this.currentElement&&this.updatePosition(this.currentElement)}}};z.styles=[u,g],i([r()],z.prototype,"state",void 0),i([n({reflect:!0})],z.prototype,"position",void 0),i([n({reflect:!0})],z.prototype,"role",void 0),i([n({reflect:!0})],z.prototype,"id",void 0),i([n({reflect:!0,type:Number})],z.prototype,"delay",void 0),i([b("id")],z.prototype,"handleIdChange",null),i([b("state")],z.prototype,"handleStateChange",null),z=x=i([o("nord-tooltip")],z);var _=z;export{_ as default};
1
+ import{i as t,_ as i,s as e,x as s,e as o}from"./query-assigned-elements-15485e3d.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as d,o as l,f as h,s as c}from"./positioning-a572d126.js";import{S as p}from"./SlotController-d733c575.js";import{s as u}from"./Component-420bbc41.js";import{E as v}from"./EventController-d99ebeef.js";import{f as m}from"./fsm-50373df9.js";import{o as b}from"./observe-a9c6dfb6.js";function y(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function f(t,i,e){t.setAttribute(i,e.join(" "))}const g=t`:host{--_n-tooltip-max-size:var(--n-tooltip-max-size, 50ch);--_n-tooltip-background:rgba(20, 20, 20, 0.95);--_n-tooltip-color:#fff;--_n-tooltip-key-border:rgba(255, 255, 255, 0.03);--_n-tooltip-key-background:rgba(255, 255, 255, 0.1);position:fixed;pointer-events:none;visibility:hidden;opacity:0;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transition-timing-function:ease;z-index:var(--n-index-popout)}.n-tooltip{gap:var(--n-space-s);font-family:var(--n-font-family);font-size:var(--n-font-size-xs);line-height:var(--n-line-height);color:var(--_n-tooltip-color);padding:calc(var(--n-space-s)/ 1.5) var(--n-space-s);background-color:var(--_n-tooltip-background);border-radius:var(--n-border-radius-s);word-break:break-word;max-inline-size:var(--_n-tooltip-max-size)}.n-tooltip,.n-tooltip-shortcut{display:flex;align-items:center}.n-tooltip-shortcut{gap:2px}::slotted([slot=shortcut]){box-sizing:border-box;margin:0;inline-size:var(--n-size-icon-m);block-size:var(--n-size-icon-m);border-radius:var(--n-border-radius-s);border:1px solid var(--_n-tooltip-key-border)!important;padding:1px!important;text-align:center;font-size:var(--n-font-size-xs);line-height:var(--n-line-height-tight);letter-spacing:-.5px;vertical-align:middle!important;background-color:var(--_n-tooltip-key-background)}[slot=shortcut]::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;var x;function w(t,i){return Boolean(i.id)&&t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("aria-describedby")===i.id}function k(t){var i;const e=null===(i=null==t?void 0:t.focusableRef)||void 0===i?void 0:i.value;return e&&"focusableRef"in e?k(e):e}const{transition:E}=m({hidden:{show:"waiting"},visible:{hide:"hidden",reposition:"positioning",show:"positioning"},waiting:{timeout:"positioning",hide:"hidden"},positioning:{positioned:"visible",hide:"hidden"}});let z=x=class extends e{constructor(){super(...arguments),this.shortcutSlot=new p(this,"shortcut"),this.events=new v(this),this.proxy=document.createElement("span"),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.updatePosition=t=>a(t,this,{strategy:"fixed",placement:d(this.position),middleware:[l(8),h(),c({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=E(this.state,"positioned")})),this.hideTooltip=()=>{this.state=E(this.state,"hide")},this.reposition=()=>{this.state=E(this.state,"reposition")},this.handleShow=t=>{const i=t.target;w(i,this)&&(this.currentElement=i,this.state=E(this.state,"show"))},this.handleHide=t=>{t.target===this.currentElement&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{const t=k(this.currentElement);t&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,t.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const s=y(t,i);s.includes(e)||f(t,i,s.concat(e))}(t,"aria-describedby",this.id))},this.removeDescribedBy=()=>{const t=k(this.currentElement);t&&(this.proxy.remove(),function(t,i,e){const s=y(t,i);s.includes(e)&&f(t,i,s.filter((t=>t!==e)))}(t,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback();const t=this.getRootNode();this.events.listen(t,"keydown",this.hideOnEscape),this.events.listen(t,"mouseover",this.handleShow),this.events.listen(t,"focusin",this.handleShow),this.events.listen(t,"mouseout",this.handleHide),this.events.listen(t,"focusout",this.handleHide),this.events.listen(t,"click",this.handleHide,{capture:!0}),this.events.listen(window,"resize",this.reposition,{passive:!0}),this.events.listen(window,"scroll",this.reposition,{passive:!0})}render(){return s`<div class="n-tooltip"><slot></slot><div class="n-tooltip-shortcut" ?hidden="${this.shortcutSlot.isEmpty}"><slot class="n-tooltip-key" name="shortcut"></slot></div></div>`}handleIdChange(){this.id||console.warn("NORD: The tooltip requires an id attribute and value")}handleStateChange(t){var i;switch(this.state){case"hidden":"waiting"===t&&this.timeoutId&&clearTimeout(this.timeoutId),this.removeDescribedBy(),this.currentElement=void 0,this.style.visibility="hidden",this.style.opacity="0";break;case"visible":{this.timeoutId=void 0,x.lastOpened=this,this.addDescribedBy();const[t,i]=this.coords;this.style.left=`${t}px`,this.style.top=`${i}px`,this.style.visibility="visible",this.style.opacity="1";break}case"waiting":this.timeoutId=setTimeout((()=>{this.state=E(this.state,"timeout")}),this.delay);break;case"positioning":x.lastOpened!==this&&(null===(i=x.lastOpened)||void 0===i||i.hideTooltip()),this.currentElement&&this.updatePosition(this.currentElement)}}};z.styles=[u,g],i([r()],z.prototype,"state",void 0),i([n({reflect:!0})],z.prototype,"position",void 0),i([n({reflect:!0})],z.prototype,"role",void 0),i([n({reflect:!0})],z.prototype,"id",void 0),i([n({reflect:!0,type:Number})],z.prototype,"delay",void 0),i([b("id")],z.prototype,"handleIdChange",null),i([b("state")],z.prototype,"handleStateChange",null),z=x=i([o("nord-tooltip")],z);var _=z;export{_ as default};
2
2
  //# sourceMappingURL=Tooltip.js.map
package/lib/TopBar.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as t,x as a,_ as n,e,s as o}from"./query-assigned-elements-2f8275b7.js";import{D as r}from"./DraftComponentMixin-9e4b7b34.js";import{s}from"./Component-253ecb24.js";const i=t`:host{background:var(--n-color-accent-secondary);block-size:52px;display:flex;align-items:center;color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active);padding-inline-start:calc(var(--n-space-m) + var(--_n-header-gutter,0px));padding-inline-end:var(--n-space-m);gap:var(--n-space-m)}slot{display:block}slot:not([name]){flex:1}slot[name=end]{display:flex;margin-inline-start:auto;align-items:center;gap:var(--n-space-xs)}::slotted(:is(h1, h2, h3, h4, h5, h6, p, em, span)){color:var(--n-color-text-on-accent)!important;font-size:var(--n-font-size-m)!important;line-height:var(--n-line-height)!important;font-weight:var(--n-font-weight-active)!important;font-style:normal!important}::slotted(nord-avatar){--n-avatar-color:rgba(255, 255, 255, 0.1);--n-avatar-box-shadow:0 0 0 1px rgba(255, 255, 255, 0.6)}`;let l=class extends(r(o)){render(){return a`<slot></slot><slot name="end"></slot>`}};l.styles=[s,i],l=n([e("nord-top-bar")],l);var c=l;export{c as default};
1
+ import{i as n,x as o,_ as t,e as r,s as e}from"./query-assigned-elements-15485e3d.js";import{D as a}from"./DraftComponentMixin-9e4b7b34.js";import{s as i}from"./Component-420bbc41.js";const l=n`:host{background:var(--n-color-accent-secondary);block-size:52px;display:flex;align-items:center;color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active);padding-inline-start:calc(var(--n-space-m) + var(--_n-header-gutter,0px));padding-inline-end:var(--n-space-s);gap:var(--n-space-xs)}slot{display:block}slot:not([name]){flex:1}slot[name=end]{display:flex;margin-inline-start:auto;align-items:center;gap:1px}::slotted(:is(h1, h2, h3, h4, h5, h6, p, em, span)){color:var(--n-color-text-on-accent)!important;font-size:var(--n-font-size-m)!important;line-height:var(--n-line-height)!important;font-weight:var(--n-font-weight-active)!important;font-style:normal!important}::slotted(:is(nord-avatar, nord-dropdown)){--n-avatar-color:var(--n-color-accent-secondary);--n-avatar-box-shadow:inset 0 0 0 100px rgba(255, 255, 255, 0.25)}::slotted(nord-input){--n-input-background:rgba(255, 255, 255, 0.15);--n-input-border-color:rgba(255, 255, 255, 0.4);--n-input-placeholder-color:rgba(255, 255, 255, 0.85);--n-input-icon-color:rgba(255, 255, 255, 0.85);--n-input-color:#fff;transition:inline-size var(--n-transition-slowly);inline-size:min(400px,100%)}::slotted(nord-input:hover){--n-input-border-color:rgba(255, 255, 255, 0.4);--n-input-placeholder-color:rgb(255, 255, 255);--n-input-icon-color:rgb(255, 255, 255)}::slotted(nord-input:focus){--n-input-background:rgb(255, 255, 255);--n-input-border-color:rgb(255, 255, 255);--n-input-placeholder-color:var(--n-color-text-weaker);--n-input-icon-color:var(--n-color-icon);--n-input-color:var(--n-color-text);--n-input-font-size:var(--n-font-size-l);inline-size:min(745px,100%)}::slotted(nord-dropdown){--n-button-gap:calc(var(--n-space-xs) / 2);--n-button-background-color:transparent;--n-button-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-button-padding-inline:calc(var(--n-space-s) + 2px);--n-button-overflow:visible}::slotted(nord-dropdown:is(:hover, [open], :focus-within)){--n-button-background-color:rgba(0, 0, 0, 0.25)}`;let s=class extends(a(e)){render(){return o`<slot></slot><slot name="end"></slot>`}};s.styles=[i,l],s=t([r("nord-top-bar")],s);var c=s;export{c as default};
2
2
  //# sourceMappingURL=TopBar.js.map
package/lib/TopBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TopBar.js","sources":["../src/top-bar/TopBar.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TopBar.css\"\n\n/**\n * Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.\n *\n * @status draft\n * @category structure\n * @slot - Used for the main content of the top bar. We recommend placing your application’s global search functionality into this slot.\n * @slot end - Optional slot for menus, buttons, toggles, etc.\n */\n@customElement(\"nord-top-bar\")\nexport default class TopBar extends DraftComponentMixin(LitElement) {\n static styles = [componentStyle, style]\n\n render() {\n return html`\n <slot></slot>\n <slot name=\"end\"></slot>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-top-bar\": TopBar\n }\n}\n"],"names":["TopBar","DraftComponentMixin","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"i/BAgBA,IAAqBA,EAArB,cAAoCC,EAAoBC,IAGtDC,SACE,OAAOC,CAAI,uCAIZ,GAPMJ,EAAAK,OAAS,CAACC,EAAgBC,GADdP,EAAMQ,EAAA,CAD1BC,EAAc,iBACMT,SAAAA"}
1
+ {"version":3,"file":"TopBar.js","sources":["../src/top-bar/TopBar.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TopBar.css\"\n\n/**\n * Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.\n *\n * @status draft\n * @category structure\n * @slot - Used for the main content of the top bar. We recommend placing your application’s global search functionality into this slot.\n * @slot end - Optional slot for menus, buttons, toggles, etc.\n */\n@customElement(\"nord-top-bar\")\nexport default class TopBar extends DraftComponentMixin(LitElement) {\n static styles = [componentStyle, style]\n\n render() {\n return html`\n <slot></slot>\n <slot name=\"end\"></slot>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-top-bar\": TopBar\n }\n}\n"],"names":["TopBar","DraftComponentMixin","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"0oEAgBA,IAAqBA,EAArB,cAAoCC,EAAoBC,IAGtDC,SACE,OAAOC,CAAI,uCAIZ,GAPMJ,EAAAK,OAAS,CAACC,EAAgBC,GADdP,EAAMQ,EAAA,CAD1BC,EAAc,iBACMT,SAAAA"}
@@ -1,2 +1,2 @@
1
- import{i as t,_ as e,s as i,x as o,e as n}from"./query-assigned-elements-2f8275b7.js";const r=t`:host{all:initial;border:0!important;clip:rect(1px,1px,1px,1px)!important;block-size:1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;inset-block-start:0;inline-size:1px!important}`;let s=class extends i{render(){return o`<slot></slot>`}};s.styles=r,s=e([n("nord-visually-hidden")],s);var a=s;export{a as default};
1
+ import{i as t,_ as e,s as i,x as o,e as n}from"./query-assigned-elements-15485e3d.js";const r=t`:host{all:initial;border:0!important;clip:rect(1px,1px,1px,1px)!important;block-size:1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;inset-block-start:0;inline-size:1px!important}`;let s=class extends i{render(){return o`<slot></slot>`}};s.styles=r,s=e([n("nord-visually-hidden")],s);var a=s;export{a as default};
2
2
  //# sourceMappingURL=VisuallyHidden.js.map