@nordhealth/components 1.0.0-beta.2 → 1.0.0-beta.22

package/lib/CommandMenuAction.js

@@ -1,2 +1,2 @@
-import{_ as e,n as o}from"./DraftComponentMixin-30345acf.js";import{r,s as n,$ as t,w as i}from"./lit-element-9646ab7e.js";import{e as a}from"./property-03f59dce.js";import{o as s}from"./class-map-61e9e8c1.js";import c from"./Icon.js";import"./VisuallyHidden.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./if-defined-2a4c6dbc.js";import"./unsafe-html-4da54dd2.js";import"./Component-a19be7c9.js";var l=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="m38.5 7 60.9 58.044a7 7 0 0 1 0 9.912L38.5 133" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"/></svg>',title:"arrow-right",tags:"nordicon arrow right caret pointing triangle chevron"});var d=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(14,0,0,14,0,0)"><path d="M0.5 3L3 3 6.5 7 9.5 7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.5 3L9.5 3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>',title:"keyboard-option",tags:"nordicon keyboard option key shortcut"});const m=r`:host{display:flex}.n-command{display:flex;flex:1;border-inline-start:2px solid transparent;align-items:center;color:var(--n-color-text);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-command.n-selected,.n-command:hover{cursor:pointer;background-color:var(--n-color-active)}.n-command.n-selected{border-inline-start-color:var(--n-color-primary)}nord-icon{color:var(--n-color-icon)}.n-command-icon{margin-inline-start:2px;margin-inline-end:calc(var(--n-space-s) * 1.4);line-height:var(--n-line-height-tight)}.n-selected .n-command-icon nord-icon{color:var(--n-color-icon-hover)}.n-title{flex:1;margin-inline-end:calc(var(--n-space-s)/ 2);font-size:var(--n-font-size-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-shortcuts{display:flex;gap:calc(var(--n-space-s)/ 2)}.n-shortcut{padding:calc(var(--n-space-s)/ 4) calc(var(--n-space-s)/ 3);text-transform:capitalize;font-size:var(--n-font-size-xs);border:1px solid var(--n-color-border-strong);font-weight:var(--n-font-weight);box-shadow:var(--n-box-shadow);border-radius:var(--n-border-radius-s);color:var(--n-color-icon);background:var(--n-color-button);line-height:var(--n-line-height-tight);min-inline-size:var(--n-space-s);display:inline-flex;align-items:center;justify-content:center;user-select:none}`,p=/(?:Key|Digit)([A-Z0-9])/g;c.registerIcon(l),c.registerIcon(d);let v=class extends n{constructor(){super(...arguments),this.selected=!1}ensureInView(){requestAnimationFrame((()=>this.scrollIntoView({block:"nearest"})))}updated(e){e.has("selected")&&this.selected&&this.ensureInView()}render(){var e;return t`<div class="${s({"n-selected":this.selected,"n-command":!0})}"><div aria-hidden="true" class="n-command-icon"><nord-icon size="s" name="${null!==(e=this.command.icon)&&void 0!==e?e:"arrow-right"}"></nord-icon></div><div class="n-title">${this.command.title}</div>${this.renderShortcut()}</div>`}renderShortcut(){if(!this.command.shortcut)return i;const e=this.command.shortcut.replace(p,"$1");return t`<nord-visually-hidden>, ${e}</nord-visually-hidden><div aria-hidden="true" class="n-shortcuts">${e.split("+").map((e=>t`<div class="n-shortcut">${"alt"===e.toLowerCase()&&navigator.platform.indexOf("Mac")>-1?t`<nord-icon name="${"keyboard-option"}" size="s"></nord-icon>`:e}</div>`))}</div>`}};v.styles=m,e([a({type:Object})],v.prototype,"command",void 0),e([a({type:Boolean})],v.prototype,"selected",void 0),v=e([o("nord-command-menu-action")],v);var h=v;export{h as default};
+import{_ as e,n as o}from"./query-assigned-elements-37b095c4.js";import{r as n,s as r,$ as t,w as i}from"./lit-element-74b6bb4b.js";import{e as s}from"./property-03f59dce.js";import{o as a}from"./class-map-87423405.js";import c from"./Icon.js";import"./VisuallyHidden.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./if-defined-fe657a02.js";import"./unsafe-html-989a642b.js";import"./Component-9d373ef3.js";var l=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="m38.5 7 60.9 58.044a7 7 0 0 1 0 9.912L38.5 133" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"/></svg>',title:"arrow-right",tags:"nordicon arrow right caret pointing triangle chevron"});var d=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(14,0,0,14,0,0)"><path d="M0.5 3L3 3 6.5 7 9.5 7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.5 3L9.5 3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>',title:"keyboard-option",tags:"nordicon keyboard option key shortcut"});const m=n`:host{display:flex}.n-command{display:flex;flex:1;border-inline-start:2px solid transparent;align-items:center;color:var(--n-color-text);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-command.n-selected,.n-command:hover{cursor:pointer;background-color:var(--n-color-active)}.n-command.n-selected{border-inline-start-color:var(--n-color-accent)}nord-icon{color:var(--n-color-icon)}.n-command-icon{margin-inline-start:2px;margin-inline-end:calc(var(--n-space-s) * 1.4);line-height:var(--n-line-height-tight)}.n-selected .n-command-icon nord-icon{color:var(--n-color-icon-hover)}.n-title{flex:1;margin-inline-end:calc(var(--n-space-s)/ 2);font-size:var(--n-font-size-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-shortcuts{display:flex;gap:calc(var(--n-space-s)/ 2)}.n-shortcut{padding:calc(var(--n-space-s)/ 4) calc(var(--n-space-s)/ 3);text-transform:capitalize;font-size:var(--n-font-size-xs);border:1px solid var(--n-color-border-strong);font-weight:var(--n-font-weight);box-shadow:var(--n-box-shadow);border-radius:var(--n-border-radius-s);color:var(--n-color-icon);background:var(--n-color-button);line-height:var(--n-line-height-tight);min-inline-size:var(--n-space-s);display:inline-flex;align-items:center;justify-content:center;user-select:none}`,p=/(?:Key|Digit)([A-Z0-9])/g;c.registerIcon(l),c.registerIcon(d);let v=class extends r{constructor(){super(...arguments),this.selected=!1}ensureInView(){requestAnimationFrame((()=>this.scrollIntoView({block:"nearest"})))}updated(e){e.has("selected")&&this.selected&&this.ensureInView()}render(){var e;return t`<div class="${a({"n-selected":this.selected,"n-command":!0})}"><div aria-hidden="true" class="n-command-icon"><nord-icon size="s" name="${null!==(e=this.command.icon)&&void 0!==e?e:"arrow-right"}"></nord-icon></div><div class="n-title">${this.command.title}</div>${this.renderShortcut()}</div>`}renderShortcut(){if(!this.command.shortcut)return i;const e=this.command.shortcut.replace(p,"$1");return t`<nord-visually-hidden>, ${e}</nord-visually-hidden><div aria-hidden="true" class="n-shortcuts">${e.split("+").map((e=>t`<div class="n-shortcut">${"alt"===e.toLowerCase()&&navigator.platform.indexOf("Mac")>-1?t`<nord-icon name="${"keyboard-option"}" size="s"></nord-icon>`:e}</div>`))}</div>`}};v.styles=m,e([s({type:Object})],v.prototype,"command",void 0),e([s({type:Boolean})],v.prototype,"selected",void 0),v=e([o("nord-command-menu-action")],v);var h=v;export{h as default};
 //# sourceMappingURL=CommandMenuAction.js.map

package/lib/CommandMenuAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandMenuAction.js","sources":["../../icons/lib/assets/arrow-right.js","../../icons/lib/assets/keyboard-option.js","../src/command-menu/CommandMenuAction.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m38.5 7 60.9 58.044a7 7 0 0 1 0 9.912L38.5 133\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"14\"/></svg>'\nexport const title = \"arrow-right\"\nexport const tags = \"nordicon arrow right caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><g transform=\"matrix(14,0,0,14,0,0)\"><path d=\"M0.5 3L3 3 6.5 7 9.5 7\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M6.5 3L9.5 3\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></g></svg>'\nexport const title = \"keyboard-option\"\nexport const tags = \"nordicon keyboard option key shortcut\"\n","import { LitElement, html, nothing, PropertyValues } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as chevronIcon from \"@nordhealth/icons/lib/assets/arrow-right.js\"\nimport * as altKeyIcon from \"@nordhealth/icons/lib/assets/keyboard-option.js\"\n\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport style from \"./CommandMenuAction.css\"\n\nconst KEY_REGEX = /(?:Key|Digit)([A-Z0-9])/g\nconst isMacintosh = () => navigator.platform.indexOf(\"Mac\") > -1\n\nIcon.registerIcon(chevronIcon)\nIcon.registerIcon(altKeyIcon)\n\n/**\n * Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.\n *\n * @status internal\n */\n@customElement(\"nord-command-menu-action\")\nexport default class CommandMenuAction extends LitElement {\n  static styles = style\n\n  @property({ type: Object })\n  command!: ICommandMenuAction\n\n  @property({ type: Boolean })\n  selected = false\n\n  /**\n   * Scroll to show element\n   */\n  private ensureInView() {\n    requestAnimationFrame(() => this.scrollIntoView({ block: \"nearest\" }))\n  }\n\n  override updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has(\"selected\") && this.selected) {\n      this.ensureInView()\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          \"n-selected\": this.selected,\n          \"n-command\": true,\n        })}\n      >\n        <div aria-hidden=\"true\" class=\"n-command-icon\">\n          <nord-icon size=\"s\" name=${this.command.icon ?? chevronIcon.title}></nord-icon>\n        </div>\n        <div class=\"n-title\">${this.command.title}</div>\n        ${this.renderShortcut()}\n      </div>\n    `\n  }\n\n  private renderShortcut() {\n    if (!this.command.shortcut) {\n      return nothing\n    }\n\n    const keys = this.command.shortcut.replace(KEY_REGEX, \"$1\")\n\n    return html`\n      <nord-visually-hidden>, ${keys}</nord-visually-hidden>\n\n      <div aria-hidden=\"true\" class=\"n-shortcuts\">\n        ${keys\n          .split(\"+\")\n          .map(\n            key =>\n              html`<div class=\"n-shortcut\">\n                ${key.toLowerCase() === \"alt\" && isMacintosh()\n                  ? html`<nord-icon name=${altKeyIcon.title} size=\"s\"></nord-icon>`\n                  : key}\n              </div>`\n          )}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-command-menu-action\": CommandMenuAction\n  }\n}\n"],"names":["KEY_REGEX","Icon","registerIcon","chevronIcon","altKeyIcon","CommandMenuAction","LitElement","constructor","this","ensureInView","requestAnimationFrame","scrollIntoView","block","updated","changedProperties","has","selected","render","html","classMap","command","icon","title","renderShortcut","shortcut","nothing","keys","replace","split","map","key","toLowerCase","navigator","platform","indexOf","style","__decorate","property","type","Object","Boolean","customElement"],"mappings":"kdAAe,0OACM,mBACD,qGCFL,8VACM,uBACD,u2CCUdA,EAAY,2BAGlBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAQlB,IAAqBC,EAArB,cAA+CC,EAA/CC,kCAOEC,eAAW,EAKHC,eACNC,uBAAsB,IAAMF,KAAKG,eAAe,CAAEC,MAAO,cAGlDC,QAAQC,GACXA,EAAkBC,IAAI,aAAeP,KAAKQ,UAC5CR,KAAKC,eAIAQ,eACP,OAAOC,CAAI,eAECC,EAAS,CACf,aAAcX,KAAKQ,SACnB,aAAa,2FAIcR,KAAKY,QAAQC,oBFtD7B,yDEwDUb,KAAKY,QAAQE,cAClCd,KAAKe,yBAKLA,iBACN,IAAKf,KAAKY,QAAQI,SAChB,OAAOC,EAGT,MAAMC,EAAOlB,KAAKY,QAAQI,SAASG,QAAQ3B,EAAW,MAEtD,OAAOkB,CAAI,2BACiBQ,uEAGtBA,EACCE,MAAM,KACNC,KACCC,GACEZ,CAAI,2BACsB,QAAtBY,EAAIC,eAlEIC,UAAUC,SAASC,QAAQ,QAAU,EAmE3ChB,CAAI,oBD/EH,2CCgFDY,sBAxDXzB,SAAS8B,EAGhBC,GADCC,EAAS,CAAEC,KAAMC,wCAIlBH,GADCC,EAAS,CAAEC,KAAME,0CANCnC,KADpBoC,EAAc,6BACMpC,SAAAA"}
+{"version":3,"file":"CommandMenuAction.js","sources":["../../icons/lib/assets/arrow-right.js","../../icons/lib/assets/keyboard-option.js","../src/command-menu/CommandMenuAction.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m38.5 7 60.9 58.044a7 7 0 0 1 0 9.912L38.5 133\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"14\"/></svg>'\nexport const title = \"arrow-right\"\nexport const tags = \"nordicon arrow right caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><g transform=\"matrix(14,0,0,14,0,0)\"><path d=\"M0.5 3L3 3 6.5 7 9.5 7\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M6.5 3L9.5 3\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></g></svg>'\nexport const title = \"keyboard-option\"\nexport const tags = \"nordicon keyboard option key shortcut\"\n","import { LitElement, html, nothing, PropertyValues } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as chevronIcon from \"@nordhealth/icons/lib/assets/arrow-right.js\"\nimport * as altKeyIcon from \"@nordhealth/icons/lib/assets/keyboard-option.js\"\n\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport style from \"./CommandMenuAction.css\"\n\nconst KEY_REGEX = /(?:Key|Digit)([A-Z0-9])/g\nconst isMacintosh = () => navigator.platform.indexOf(\"Mac\") > -1\n\nIcon.registerIcon(chevronIcon)\nIcon.registerIcon(altKeyIcon)\n\n/**\n * Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.\n *\n * @status internal\n */\n@customElement(\"nord-command-menu-action\")\nexport default class CommandMenuAction extends LitElement {\n  static styles = style\n\n  @property({ type: Object })\n  command!: ICommandMenuAction\n\n  @property({ type: Boolean })\n  selected = false\n\n  /**\n   * Scroll to show element\n   */\n  private ensureInView() {\n    requestAnimationFrame(() => this.scrollIntoView({ block: \"nearest\" }))\n  }\n\n  override updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has(\"selected\") && this.selected) {\n      this.ensureInView()\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          \"n-selected\": this.selected,\n          \"n-command\": true,\n        })}\n      >\n        <div aria-hidden=\"true\" class=\"n-command-icon\">\n          <nord-icon size=\"s\" name=${this.command.icon ?? chevronIcon.title}></nord-icon>\n        </div>\n        <div class=\"n-title\">${this.command.title}</div>\n        ${this.renderShortcut()}\n      </div>\n    `\n  }\n\n  private renderShortcut() {\n    if (!this.command.shortcut) {\n      return nothing\n    }\n\n    const keys = this.command.shortcut.replace(KEY_REGEX, \"$1\")\n\n    return html`\n      <nord-visually-hidden>, ${keys}</nord-visually-hidden>\n\n      <div aria-hidden=\"true\" class=\"n-shortcuts\">\n        ${keys\n          .split(\"+\")\n          .map(\n            key =>\n              html`<div class=\"n-shortcut\">\n                ${key.toLowerCase() === \"alt\" && isMacintosh()\n                  ? html`<nord-icon name=${altKeyIcon.title} size=\"s\"></nord-icon>`\n                  : key}\n              </div>`\n          )}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-command-menu-action\": CommandMenuAction\n  }\n}\n"],"names":["KEY_REGEX","Icon","registerIcon","chevronIcon","altKeyIcon","CommandMenuAction","LitElement","constructor","this","ensureInView","requestAnimationFrame","scrollIntoView","block","updated","changedProperties","has","selected","render","html","classMap","command","icon","title","renderShortcut","shortcut","nothing","keys","replace","split","map","key","toLowerCase","navigator","platform","indexOf","style","__decorate","property","type","Object","Boolean","customElement"],"mappings":"2dAAe,0OACM,mBACD,qGCFL,8VACM,uBACD,s2CCUdA,EAAY,2BAGlBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAQlB,IAAqBC,EAArB,cAA+CC,EAA/CC,kCAOEC,eAAW,EAKHC,eACNC,uBAAsB,IAAMF,KAAKG,eAAe,CAAEC,MAAO,cAGlDC,QAAQC,GACXA,EAAkBC,IAAI,aAAeP,KAAKQ,UAC5CR,KAAKC,eAIAQ,eACP,OAAOC,CAAI,eAECC,EAAS,CACf,aAAcX,KAAKQ,SACnB,aAAa,2FAIcR,KAAKY,QAAQC,oBFtD7B,yDEwDUb,KAAKY,QAAQE,cAClCd,KAAKe,yBAKLA,iBACN,IAAKf,KAAKY,QAAQI,SAChB,OAAOC,EAGT,MAAMC,EAAOlB,KAAKY,QAAQI,SAASG,QAAQ3B,EAAW,MAEtD,OAAOkB,CAAI,2BACiBQ,uEAGtBA,EACCE,MAAM,KACNC,KACCC,GACEZ,CAAI,2BACsB,QAAtBY,EAAIC,eAlEIC,UAAUC,SAASC,QAAQ,QAAU,EAmE3ChB,CAAI,oBD/EH,2CCgFDY,sBAxDXzB,SAAS8B,EAGhBC,GADCC,EAAS,CAAEC,KAAMC,wCAIlBH,GADCC,EAAS,CAAEC,KAAME,0CANCnC,KADpBoC,EAAc,6BACMpC,SAAAA"}

package/lib/Component-9d373ef3.js

@@ -0,0 +1,2 @@
+import{r as t}from"./lit-element-74b6bb4b.js";const e=t`:host{all:unset;display:block;font-family:var(--n-font-family);line-height:var(--n-line-height);font-feature-settings:var(--n-font-features);text-align:start}*,::after,::before{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}`;export{e as s};
+//# sourceMappingURL=Component-9d373ef3.js.map

package/lib/Component-9d373ef3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component-9d373ef3.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/DatePicker.js

@@ -1,2 +1,2 @@
-import{D as e,_ as t,n as i}from"./DraftComponentMixin-30345acf.js";import{r as a,$ as o,w as n,s}from"./lit-element-9646ab7e.js";import{e as r}from"./property-03f59dce.js";import{t as l}from"./state-70f38ceb.js";import{S as d,i as c,a as p}from"./Calendar-55a0b169.js";import{o as h}from"./class-map-61e9e8c1.js";import{n as m}from"./ref-eb5cfa10.js";import{l as u}from"./if-defined-2a4c6dbc.js";import{F as b}from"./FocusableMixin-98e13999.js";import{F as v}from"./FormAssociatedMixin-e146e0ab.js";import{I as g}from"./InputMixin-33bc2df5.js";import{k as f,p as y,a as x}from"./dates-ccf5a897.js";import{N as w}from"./events-731d0007.js";import"./Button.js";import"./Icon.js";import"./VisuallyHidden.js";import{s as k}from"./Component-a19be7c9.js";import{s as j}from"./FormField-b1c18e6e.js";import{s as z}from"./TextField-b4155167.js";import{isoAdapter as $}from"./date-adapter.js";import D from"./date-localization.js";import{L as F}from"./LightDismissController-cc5b4bf2.js";import"./number-e7cd246c.js";import"./directive-de55b00a.js";import"./directive-helpers-e7b6bf4b.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-82794ee9.js";import"./calendar-localization.js";import"./month-view.js";import"./collection-f3631dc8.js";import"./DateSelectEvent.js";import"./SlotController-5bfc47d1.js";import"./LightDomController-f56fa1a4.js";import"./unsafe-html-4da54dd2.js";import"./ShortcutController-93173ff4.js";const A=a`:host{--n-date-picker-color-overlay:rgba(0, 0, 0, 0.8);--n-date-picker-line-height:1.25;--n-date-picker-toggle-height:34px;color:var(--n-color-text);font-size:var(--n-font-size-m);position:relative}.n-input-container{inline-size:fit-content}:host([expand]) .n-input-container{inline-size:100%}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--n-date-picker-toggle-height);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-primary);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input{padding-inline-end:calc(var(--n-space-s) * 1.6 + var(--n-date-picker-toggle-height))}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-dropdown)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-dropdown)}nord-calendar{box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform .4s ease,opacity .4s ease,visibility .4s ease;visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--n-calendar-padding:0}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0;z-index:10}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-primary);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}`,C=/[^0-9./-]+/g,E=()=>!1;let L=class extends(v(g(b(e(s))))){constructor(){super(...arguments),this.dismiss=new F(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new d(this,{target:()=>this.dialog,matchesGesture:c,onSwipeEnd:()=>this.hide(!1)}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.localization=D,this.dateAdapter=$,this.isDateDisabled=E,this.handleDaySelect=e=>{this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new w("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new w("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,a=e.selectionStart,o=i.slice(0,a),n=i.slice(a,i.length),s=o.replace(t,""),r=s+n.replace(t,""),l=s.length;e.value=r,e.selectionStart=l,e.selectionEnd=l}(t,C),this.dispatchEvent(new w("input"));const i=this.dateAdapter.parse(t.value,f);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return y(this.value)}set valueAsDate(e){this.value=e?x(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?x(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new w("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new w("close")),e&&this.toggleButton.focus()}willUpdate(e){e.has("localization")&&this.createDateFormatters()}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localization.locale,{day:"numeric",month:"long",year:"numeric"})}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"";return o`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${this.name}" .value="${t}" placeholder="${u(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${m(this.focusableRef)} aria-invalid="${u(this.error?"true":void 0)}" aria-describedby="${u(this.getDescribedBy())}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled}" type="button"><nord-icon name="interface-calendar" size="s"></nord-icon><nord-visually-hidden>${D.buttonLabel} ${e?o`<span>, ${D.selectedDateMessage} ${this.dateFormatLong.format(e)}</span>`:n}</nord-visually-hidden></button></div>${this.renderError()}<div class="${h({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localization.calendarHeading}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localization.closeLabel}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .localization="${this.localization}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @nord-select="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?x(e):"",this.dispatchEvent(new w("change"))}};L.styles=[k,j,z,A],t([p(".n-date-toggle",!0)],L.prototype,"toggleButton",void 0),t([p(".n-date-close",!0)],L.prototype,"closeButton",void 0),t([p("nord-calendar",!0)],L.prototype,"calendar",void 0),t([p('[role="dialog"]',!0)],L.prototype,"dialog",void 0),t([l()],L.prototype,"open",void 0),t([r()],L.prototype,"value",void 0),t([r()],L.prototype,"min",void 0),t([r()],L.prototype,"max",void 0),t([r()],L.prototype,"direction",void 0),t([r({attribute:"first-day-of-week",type:Number})],L.prototype,"firstDayOfWeek",void 0),t([r({attribute:!1})],L.prototype,"localization",void 0),t([r({attribute:!1})],L.prototype,"dateAdapter",void 0),t([r({attribute:!1})],L.prototype,"isDateDisabled",void 0),L=t([i("nord-date-picker")],L);var B=L;export{B as default};
+import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,$ as a,w as o,s as n}from"./lit-element-74b6bb4b.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{S as l,i as d,a as c}from"./Calendar-72e99fb9.js";import{o as p}from"./class-map-87423405.js";import{n as h}from"./ref-7d028e3a.js";import{l as m}from"./if-defined-fe657a02.js";import{F as u}from"./FocusableMixin-ebb67709.js";import{F as v}from"./FormAssociatedMixin-1f97ed66.js";import{I as b}from"./InputMixin-94d15730.js";import{k as g,p as f,a as y}from"./dates-ccf5a897.js";import{N as w}from"./events-731d0007.js";import"./Button.js";import x from"./Icon.js";import"./VisuallyHidden.js";import{s as k}from"./Component-9d373ef3.js";import{s as z}from"./FormField-50bd73d5.js";import{s as j}from"./TextField-ece1c786.js";import{isoAdapter as $}from"./date-adapter.js";import D from"./date-localization.js";import{L as F}from"./LightDismissController-a35d0f66.js";import"./number-3a8ef88a.js";import"./directive-de55b00a.js";import"./tinykeys.module-84e6cc41.js";import"./EventController-d99ebeef.js";import"./DirectionController-82794ee9.js";import"./calendar-localization.js";import"./month-view.js";import"./collection-f3631dc8.js";import"./DateSelectEvent.js";import"./SlotController-683d0e7c.js";import"./LightDomController-011334da.js";import"./unsafe-html-989a642b.js";import"./ShortcutController-93173ff4.js";var L=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126v112H7zM35 7v28m70-28v28M7 63h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});var C=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z"/></svg>',title:"interface-close-small",tags:"nordicon interface close remove small cross delete erase symbol"});const A=i`:host{--n-date-picker-color-overlay:rgba(0, 0, 0, 0.8);--n-date-picker-line-height:1.25;--n-date-picker-toggle-height:34px;color:var(--n-color-text);font-size:var(--n-font-size-m);position:relative}.n-input-container{inline-size:fit-content}:host([expand]) .n-input-container{inline-size:100%}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--n-date-picker-toggle-height);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-accent);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input{padding-inline-end:calc(var(--n-space-s) * 1.6 + var(--n-date-picker-toggle-height))}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-dropdown)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-dropdown)}nord-calendar{box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform .4s ease,opacity .4s ease,visibility .4s ease;visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--n-calendar-padding:0}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0;z-index:10}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}`;x.registerIcon(L),x.registerIcon(C);const B=/[^0-9./-]+/g,E=()=>!1;let I=class extends(v(b(u(n)))){constructor(){super(...arguments),this.dismiss=new F(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new l(this,{target:()=>this.dialog,matchesGesture:d,onSwipeEnd:()=>this.hide(!1)}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.localization=D,this.dateAdapter=$,this.isDateDisabled=E,this.handleDaySelect=e=>{e.stopPropagation(),this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new w("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new w("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,a=e.selectionStart,o=i.slice(0,a),n=i.slice(a,i.length),r=o.replace(t,""),s=r+n.replace(t,""),l=r.length;e.value=s,e.selectionStart=l,e.selectionEnd=l}(t,B),this.dispatchEvent(new w("input"));const i=this.dateAdapter.parse(t.value,g);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return f(this.value)}set valueAsDate(e){this.value=e?y(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?y(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new w("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new w("close")),e&&this.toggleButton.focus()}willUpdate(e){e.has("localization")&&this.createDateFormatters()}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localization.locale,{day:"numeric",month:"long",year:"numeric"})}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"";return a`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${this.name}" .value="${t}" placeholder="${m(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${h(this.focusableRef)} aria-invalid="${m(this.error?"true":void 0)}" aria-describedby="${m(this.getDescribedBy())}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled}" type="button"><nord-icon name="interface-calendar" size="s"></nord-icon><nord-visually-hidden>${D.buttonLabel} ${e?a`<span>, ${D.selectedDateMessage} ${this.dateFormatLong.format(e)}</span>`:o}</nord-visually-hidden></button></div>${this.renderError()}<div class="${p({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localization.calendarHeading}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localization.closeLabel}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .localization="${this.localization}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?y(e):"",this.dispatchEvent(new w("change"))}};I.styles=[k,z,j,A],e([c(".n-date-toggle",!0)],I.prototype,"toggleButton",void 0),e([c(".n-date-close",!0)],I.prototype,"closeButton",void 0),e([c("nord-calendar",!0)],I.prototype,"calendar",void 0),e([c('[role="dialog"]',!0)],I.prototype,"dialog",void 0),e([s()],I.prototype,"open",void 0),e([r()],I.prototype,"value",void 0),e([r()],I.prototype,"min",void 0),e([r()],I.prototype,"max",void 0),e([r()],I.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],I.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],I.prototype,"localization",void 0),e([r({attribute:!1})],I.prototype,"dateAdapter",void 0),e([r({attribute:!1})],I.prototype,"isDateDisabled",void 0),I=e([t("nord-date-picker")],I);var O=I;export{O as default};
 //# sourceMappingURL=DatePicker.js.map

package/lib/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../src/date-picker/DatePicker.ts","../src/common/input.ts"],"sourcesContent":["import { LitElement, html, nothing, PropertyValues } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\n\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\n\nimport \"../button/Button.js\"\nimport \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport type Button from \"../button/Button.js\"\n\nimport \"../calendar/Calendar.js\"\nimport { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DateDisabledPredicate } from \"../calendar/Calendar.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 \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\nimport localization, { DatePickerLocalizedText } from \"./date-localization.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\n\nconst DISALLOWED_CHARACTERS = /[^0-9./-]+/g\nconst isDateDisabled = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status draft\n * @category form\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends FormAssociatedMixin(\n  InputMixin(FocusableMixin(DraftComponentMixin(LitElement)))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(`.n-date-toggle`, true) private toggleButton!: Button\n  @query(`.n-date-close`, true) private closeButton!: HTMLButtonElement\n  @query(`nord-calendar`, true) private calendar!: Calendar\n  @query(`[role=\"dialog\"]`, true) private dialog!: HTMLElement\n\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this.calendar && node !== this.toggleButton,\n  })\n\n  private swipe = new SwipeController(this, {\n    target: () => this.dialog,\n    matchesGesture: isDownwardsSwipe,\n    onSwipeEnd: () => this.hide(false),\n  })\n\n  /**\n   * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n   * these are used to format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong!: Intl.DateTimeFormat\n\n  @state() private open = false\n\n  /**\n   * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = \"\"\n\n  get valueAsDate(): Date | undefined {\n    return parseISODate(this.value)\n  }\n\n  /**\n   * Get/set the value of the picker as a Date object.\n   */\n  set valueAsDate(date: Date | undefined) {\n    this.value = date ? printISODate(date) : \"\"\n  }\n\n  get valueAsNumber(): number {\n    return this.valueAsDate?.getTime() ?? NaN\n  }\n\n  /**\n   * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n   */\n  set valueAsNumber(date: number) {\n    this.value = date ? printISODate(new Date(date)) : \"\"\n  }\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @property() min: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @property() max: string = \"\"\n\n  /**\n   * Forces the opening direction of the calendar modal to be always left or right.\n   * This setting can be useful when the input is smaller than the opening date picker\n   * would be as by default the picker always opens towards right.\n   */\n  @property() direction: \"left\" | \"right\" = \"right\"\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @property({ attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n  /**\n   * Button labels, day names, month names, etc, used for localization.\n   * Default is English.\n   */\n  @property({ attribute: false }) localization: DatePickerLocalizedText = localization\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   * Default is IS0-8601 parsing and formatting.\n   */\n  @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @property({ attribute: false }) isDateDisabled: DateDisabledPredicate = isDateDisabled\n\n  /**\n   * Show the calendar modal, moving focus to the calendar inside.\n   */\n  show() {\n    this.open = true\n    /**\n     * Dispatched when the calendar is toggled open.\n     */\n    this.dispatchEvent(new NordEvent(\"open\"))\n\n    // we should only focus once the calendar is visible after render is complete\n    this.updateComplete.then(() => this.calendar.focus({ target: \"month\" }))\n  }\n\n  /**\n   * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus\n   * returning to the date picker's button. Default is true.\n   */\n  hide(moveFocusToButton = true) {\n    this.open = false\n    /**\n     * Dispatched when the calendar is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.toggleButton.focus()\n    }\n  }\n\n  willUpdate(_changedProperties: PropertyValues<this>) {\n    if (_changedProperties.has(\"localization\")) {\n      this.createDateFormatters()\n    }\n  }\n\n  private createDateFormatters() {\n    this.dateFormatLong = new Intl.DateTimeFormat(this.localization.locale, {\n      day: \"numeric\",\n      month: \"long\",\n      year: \"numeric\",\n    })\n  }\n\n  render() {\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <input\n          class=\"n-input\"\n          name=${this.name}\n          .value=${formattedDate}\n          placeholder=${ifDefined(this.placeholder)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-autocomplete=\"none\"\n          @input=${this.handleInputChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          autocomplete=\"off\"\n          ${ref(this.focusableRef)}\n          aria-invalid=${ifDefined(this.error ? \"true\" : undefined)}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n        />\n        <button class=\"n-date-toggle\" @click=${this.toggleOpen} ?disabled=${this.disabled} type=\"button\">\n          <nord-icon name=\"interface-calendar\" size=\"s\"></nord-icon>\n          <nord-visually-hidden>\n            ${localization.buttonLabel}\n            ${valueAsDate\n              ? html`<span>, ${localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)} </span>`\n              : nothing}\n          </nord-visually-hidden>\n        </button>\n      </div>\n\n      ${this.renderError()}\n\n      <div\n        class=${classMap({\n          \"is-left\": this.direction === \"left\",\n          \"is-active\": this.open,\n        })}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n        aria-labelledby=\"dialog-header\"\n      >\n        <div class=\"n-date-dialog-content\">\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n          <div class=\"n-date-mobile\">\n            <div class=\"n-date-mobile-heading\" id=\"dialog-header\">${this.localization.calendarHeading}</div>\n            <button class=\"n-date-close\" @click=${this.hide} type=\"button\">\n              <nord-icon color=\"var(--n-color-icon)\" name=\"interface-close-small\" size=\"xs\"></nord-icon>\n              <nord-visually-hidden>${this.localization.closeLabel}</nord-visually-hidden>\n            </button>\n          </div>\n          <nord-calendar\n            value=${this.value}\n            min=${this.min}\n            max=${this.max}\n            .localization=${this.localization}\n            .firstDayOfWeek=${this.firstDayOfWeek}\n            .isDateDisabled=${this.isDateDisabled}\n            @nord-select=${this.handleDaySelect}\n          ></nord-calendar>\n\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n        </div>\n      </div>\n    `\n  }\n\n  private focusFirst() {\n    this.closeButton.focus()\n  }\n\n  private focusLast() {\n    this.calendar.focus({ target: \"day\" })\n  }\n\n  private handleDaySelect = (e: DateSelectEvent) => {\n    this.setValue(e.date)\n    this.hide()\n  }\n\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n\n    if (this.open) {\n      this.hide(false)\n    } else {\n      this.show()\n    }\n  }\n\n  private handleBlur = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"blur\"))\n  }\n\n  private handleFocus = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"focus\"))\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    cleanValue(target, DISALLOWED_CHARACTERS)\n    this.dispatchEvent(new NordEvent(\"input\"))\n\n    const parsed = this.dateAdapter.parse(target.value, createDate)\n    if (parsed || target.value === \"\") {\n      this.setValue(parsed)\n    }\n  }\n\n  private setValue(date?: Date) {\n    this.value = date ? printISODate(date) : \"\"\n    this.dispatchEvent(new NordEvent(\"change\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-date-picker\": DatePicker\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n  const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\n"],"names":["DISALLOWED_CHARACTERS","isDateDisabled","DatePicker","FormAssociatedMixin","InputMixin","FocusableMixin","DraftComponentMixin","LitElement","constructor","this","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","calendar","toggleButton","SwipeController","target","dialog","matchesGesture","isDownwardsSwipe","onSwipeEnd","localization","isoAdapter","setValue","date","preventDefault","show","event","stopPropagation","dispatchEvent","NordEvent","inputEl","regex","value","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","parsed","dateAdapter","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","getTime","NaN","Date","updateComplete","then","focus","moveFocusToButton","willUpdate","_changedProperties","has","createDateFormatters","dateFormatLong","Intl","DateTimeFormat","locale","day","month","year","render","formattedDate","format","html","renderLabel","name","ifDefined","placeholder","inputId","disabled","required","handleInputChange","handleFocus","handleBlur","ref","focusableRef","error","undefined","getDescribedBy","toggleOpen","buttonLabel","selectedDateMessage","nothing","renderError","classMap","direction","focusLast","calendarHeading","closeLabel","min","max","firstDayOfWeek","handleDaySelect","focusFirst","closeButton","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","state","property","attribute","Number","customElement"],"mappings":"ihMAmCMA,EAAwB,cACxBC,EAAiB,KAAM,EAY7B,IAAqBC,EAArB,cAAwCC,EACtCC,EAAWC,EAAeC,EAAoBC,OADhDC,kCAUUC,aAAU,IAAIC,EAAuBD,KAAM,CACjDE,OAAQ,IAAMF,KAAKG,KACnBC,UAAWC,GAAKL,KAAKM,KAAgB,UAAXD,EAAEE,MAC5BC,cAAeC,GAAQA,IAAST,KAAKU,UAAYD,IAAST,KAAKW,eAGzDX,WAAQ,IAAIY,EAAgBZ,KAAM,CACxCa,OAAQ,IAAMb,KAAKc,OACnBC,eAAgBC,EAChBC,WAAY,IAAMjB,KAAKM,MAAK,KAabN,WAAO,EAKZA,WAAgB,GA4BhBA,SAAc,GAMdA,SAAc,GAOdA,eAA8B,QAMkBA,sBAM5BA,kBAAwCkB,EAQxClB,iBAA2BmB,EAM3BnB,oBAAwCR,EAgIhEQ,qBAAmBK,IACzBL,KAAKoB,SAASf,EAAEgB,MAChBrB,KAAKM,QAGCN,gBAAcK,IACpBA,EAAEiB,iBAEEtB,KAAKG,KACPH,KAAKM,MAAK,GAEVN,KAAKuB,QAIDvB,gBAAcwB,IACpBA,EAAMC,kBACNzB,KAAK0B,cAAc,IAAIC,EAAU,UAG3B3B,iBAAewB,IACrBA,EAAMC,kBACNzB,KAAK0B,cAAc,IAAIC,EAAU,WAG3B3B,uBAAqBK,IAC3B,MAAMQ,EAASR,EAAEQ,iBClTMe,EAA2BC,GACpD,MAAMC,MAAEA,GAAUF,EACZG,EAASH,EAAQI,eAEjBC,EAAeH,EAAMI,MAAM,EAAGH,GAC9BI,EAAcL,EAAMI,MAAMH,EAAQD,EAAMM,QAExCC,EAAuBJ,EAAaK,QAAQT,EAAO,IAGnDU,EAAWF,EAFSF,EAAYG,QAAQT,EAAO,IAG/CW,EAAYH,EAAqBD,OAEvCR,EAAQE,MAAQS,EAChBX,EAAQI,eAAiBQ,EACzBZ,EAAQa,aAAeD,EDsSrBE,CAAW7B,EAAQtB,GACnBS,KAAK0B,cAAc,IAAIC,EAAU,UAEjC,MAAMgB,EAAS3C,KAAK4C,YAAYC,MAAMhC,EAAOiB,MAAOgB,IAChDH,GAA2B,KAAjB9B,EAAOiB,QACnB9B,KAAKoB,SAASuB,IAnOdI,kBACF,OAAOC,EAAahD,KAAK8B,OAMvBiB,gBAAY1B,GACdrB,KAAK8B,MAAQT,EAAO4B,EAAa5B,GAAQ,GAGvC6B,4BACF,2BAAOlD,KAAK+C,kCAAaI,yBAAaC,IAMpCF,kBAAc7B,GAChBrB,KAAK8B,MAAQT,EAAO4B,EAAa,IAAII,KAAKhC,IAAS,GAmDrDE,OACEvB,KAAKG,MAAO,EAIZH,KAAK0B,cAAc,IAAIC,EAAU,SAGjC3B,KAAKsD,eAAeC,MAAK,IAAMvD,KAAKU,SAAS8C,MAAM,CAAE3C,OAAQ,YAO/DP,KAAKmD,GAAoB,GACvBzD,KAAKG,MAAO,EAIZH,KAAK0B,cAAc,IAAIC,EAAU,UAE7B8B,GACFzD,KAAKW,aAAa6C,QAItBE,WAAWC,GACLA,EAAmBC,IAAI,iBACzB5D,KAAK6D,uBAIDA,uBACN7D,KAAK8D,eAAiB,IAAIC,KAAKC,eAAehE,KAAKkB,aAAa+C,OAAQ,CACtEC,IAAK,UACLC,MAAO,OACPC,KAAM,YAIVC,SACE,MAAMtB,YAAEA,GAAgB/C,KAClBsE,EAAgBvB,EAAc/C,KAAK4C,YAAY2B,OAAOxB,GAAe,GAE3E,OAAOyB,CAAI,GACPxE,KAAKyE,4EAKIzE,KAAK0E,iBACHJ,mBACKK,EAAU3E,KAAK4E,qBACxB5E,KAAK6E,uBACE7E,KAAK8E,wBACL9E,KAAK+E,8CAER/E,KAAKgF,8BACLhF,KAAKiF,uBACNjF,KAAKkF,kCAEXC,EAAInF,KAAKoF,+BACIT,EAAU3E,KAAKqF,MAAQ,YAASC,yBAC5BX,EAAU3E,KAAKuF,6DAEGvF,KAAKwF,0BAAwBxF,KAAK8E,2GAGnE5D,EAAauE,eACb1C,EACEyB,CAAI,WAAWtD,EAAawE,uBAAuB1F,KAAK8D,eAAeS,OAAOxB,YAC9E4C,0CAKR3F,KAAK4F,4BAGGC,EAAS,CACf,UAA8B,SAAnB7F,KAAK8F,UAChB,YAAa9F,KAAKG,wDAINH,KAAKG,KAAO,QAAU,2HAIYH,KAAK+F,qGAGO/F,KAAKkB,aAAa8E,6DACpChG,KAAKM,uIAEjBN,KAAKkB,aAAa+E,yEAIpCjG,KAAK8B,eACP9B,KAAKkG,aACLlG,KAAKmG,uBACKnG,KAAKkB,kCACHlB,KAAKoG,oCACLpG,KAAKR,iCACRQ,KAAKqG,iFAGwBrG,KAAKsG,iCAMnDA,aACNtG,KAAKuG,YAAY/C,QAGXuC,YACN/F,KAAKU,SAAS8C,MAAM,CAAE3C,OAAQ,QAyCxBO,SAASC,GACfrB,KAAK8B,MAAQT,EAAO4B,EAAa5B,GAAQ,GACzCrB,KAAK0B,cAAc,IAAIC,EAAU,aA7Q5BlC,SAAS,CAAC+G,EAAgBC,EAAgBC,EAAgBC,GAElCC,GAA9BC,EAAM,kBAAkB,uCACKD,GAA7BC,EAAM,iBAAiB,sCACMD,GAA7BC,EAAM,iBAAiB,mCACQD,GAA/BC,EAAM,mBAAmB,iCAwBjBD,GAARE,gCAKWF,GAAXG,iCA4BWH,GAAXG,+BAMWH,GAAXG,+BAOWH,GAAXG,qCAM2DH,GAA3DG,EAAS,CAAEC,UAAW,oBAAqBzG,KAAM0G,+CAMlBL,GAA/BG,EAAS,CAAEC,WAAW,wCAQSJ,GAA/BG,EAAS,CAAEC,WAAW,uCAMSJ,GAA/BG,EAAS,CAAEC,WAAW,0CAxGJvH,KADpByH,EAAc,qBACMzH,SAAAA"}
+{"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../../icons/lib/assets/interface-close-small.js","../src/date-picker/DatePicker.ts","../src/common/input.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 21h126v112H7zM35 7v28m70-28v28M7 63h126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z\"/></svg>'\nexport const title = \"interface-close-small\"\nexport const tags = \"nordicon interface close remove small cross delete erase symbol\"\n","import { LitElement, html, nothing, PropertyValues } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.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 { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport type Button from \"../button/Button.js\"\n\nimport \"../calendar/Calendar.js\"\nimport { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DateDisabledPredicate } from \"../calendar/Calendar.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 \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\nimport localization, { DatePickerLocalizedText } from \"./date-localization.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst DISALLOWED_CHARACTERS = /[^0-9./-]+/g\nconst isDateDisabled = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status ready\n * @category form\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(`.n-date-toggle`, true) private toggleButton!: Button\n  @query(`.n-date-close`, true) private closeButton!: HTMLButtonElement\n  @query(`nord-calendar`, true) private calendar!: Calendar\n  @query(`[role=\"dialog\"]`, true) private dialog!: HTMLElement\n\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this.calendar && node !== this.toggleButton,\n  })\n\n  private swipe = new SwipeController(this, {\n    target: () => this.dialog,\n    matchesGesture: isDownwardsSwipe,\n    onSwipeEnd: () => this.hide(false),\n  })\n\n  /**\n   * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n   * these are used to format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong!: Intl.DateTimeFormat\n\n  @state() private open = false\n\n  /**\n   * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = \"\"\n\n  get valueAsDate(): Date | undefined {\n    return parseISODate(this.value)\n  }\n\n  /**\n   * Get/set the value of the picker as a Date object.\n   */\n  set valueAsDate(date: Date | undefined) {\n    this.value = date ? printISODate(date) : \"\"\n  }\n\n  get valueAsNumber(): number {\n    return this.valueAsDate?.getTime() ?? NaN\n  }\n\n  /**\n   * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n   */\n  set valueAsNumber(date: number) {\n    this.value = date ? printISODate(new Date(date)) : \"\"\n  }\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @property() min: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @property() max: string = \"\"\n\n  /**\n   * Forces the opening direction of the calendar modal to be always left or right.\n   * This setting can be useful when the input is smaller than the opening date picker\n   * would be as by default the picker always opens towards right.\n   */\n  @property() direction: \"left\" | \"right\" = \"right\"\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @property({ attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n  /**\n   * Button labels, day names, month names, etc, used for localization.\n   * Default is English.\n   */\n  @property({ attribute: false }) localization: DatePickerLocalizedText = localization\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   * Default is IS0-8601 parsing and formatting.\n   */\n  @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @property({ attribute: false }) isDateDisabled: DateDisabledPredicate = isDateDisabled\n\n  /**\n   * Show the calendar modal, moving focus to the calendar inside.\n   */\n  show() {\n    this.open = true\n    /**\n     * Dispatched when the calendar is toggled open.\n     */\n    this.dispatchEvent(new NordEvent(\"open\"))\n\n    // we should only focus once the calendar is visible after render is complete\n    this.updateComplete.then(() => this.calendar.focus({ target: \"month\" }))\n  }\n\n  /**\n   * Hide the calendar modal.\n   * @param {boolean} moveFocusToButton controls whether focus should be returned to the date picker's button.\n   */\n  hide(moveFocusToButton = true) {\n    this.open = false\n    /**\n     * Dispatched when the calendar is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.toggleButton.focus()\n    }\n  }\n\n  protected willUpdate(_changedProperties: PropertyValues<this>) {\n    if (_changedProperties.has(\"localization\")) {\n      this.createDateFormatters()\n    }\n  }\n\n  private createDateFormatters() {\n    this.dateFormatLong = new Intl.DateTimeFormat(this.localization.locale, {\n      day: \"numeric\",\n      month: \"long\",\n      year: \"numeric\",\n    })\n  }\n\n  render() {\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <input\n          class=\"n-input\"\n          name=${this.name}\n          .value=${formattedDate}\n          placeholder=${ifDefined(this.placeholder)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-autocomplete=\"none\"\n          @input=${this.handleInputChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          autocomplete=\"off\"\n          ${ref(this.focusableRef)}\n          aria-invalid=${ifDefined(this.error ? \"true\" : undefined)}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n        />\n        <button class=\"n-date-toggle\" @click=${this.toggleOpen} ?disabled=${this.disabled} type=\"button\">\n          <nord-icon name=\"interface-calendar\" size=\"s\"></nord-icon>\n          <nord-visually-hidden>\n            ${localization.buttonLabel}\n            ${valueAsDate\n              ? html`<span>, ${localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)} </span>`\n              : nothing}\n          </nord-visually-hidden>\n        </button>\n      </div>\n\n      ${this.renderError()}\n\n      <div\n        class=${classMap({\n          \"is-left\": this.direction === \"left\",\n          \"is-active\": this.open,\n        })}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n        aria-labelledby=\"dialog-header\"\n      >\n        <div class=\"n-date-dialog-content\">\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n          <div class=\"n-date-mobile\">\n            <div class=\"n-date-mobile-heading\" id=\"dialog-header\">${this.localization.calendarHeading}</div>\n            <button class=\"n-date-close\" @click=${this.hide} type=\"button\">\n              <nord-icon color=\"var(--n-color-icon)\" name=\"interface-close-small\" size=\"xs\"></nord-icon>\n              <nord-visually-hidden>${this.localization.closeLabel}</nord-visually-hidden>\n            </button>\n          </div>\n          <nord-calendar\n            value=${this.value}\n            min=${this.min}\n            max=${this.max}\n            .localization=${this.localization}\n            .firstDayOfWeek=${this.firstDayOfWeek}\n            .isDateDisabled=${this.isDateDisabled}\n            @change=${this.handleDaySelect}\n          ></nord-calendar>\n\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n        </div>\n      </div>\n    `\n  }\n\n  private focusFirst() {\n    this.closeButton.focus()\n  }\n\n  private focusLast() {\n    this.calendar.focus({ target: \"day\" })\n  }\n\n  private handleDaySelect = (e: DateSelectEvent) => {\n    e.stopPropagation()\n    this.setValue(e.date)\n    this.hide()\n  }\n\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n\n    if (this.open) {\n      this.hide(false)\n    } else {\n      this.show()\n    }\n  }\n\n  private handleBlur = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"blur\"))\n  }\n\n  private handleFocus = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"focus\"))\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    cleanValue(target, DISALLOWED_CHARACTERS)\n    this.dispatchEvent(new NordEvent(\"input\"))\n\n    const parsed = this.dateAdapter.parse(target.value, createDate)\n    if (parsed || target.value === \"\") {\n      this.setValue(parsed)\n    }\n  }\n\n  private setValue(date?: Date) {\n    this.value = date ? printISODate(date) : \"\"\n    this.dispatchEvent(new NordEvent(\"change\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-date-picker\": DatePicker\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n  const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","DISALLOWED_CHARACTERS","isDateDisabled","DatePicker","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","calendar","toggleButton","SwipeController","target","dialog","matchesGesture","isDownwardsSwipe","onSwipeEnd","localization","isoAdapter","stopPropagation","setValue","date","preventDefault","show","event","dispatchEvent","NordEvent","inputEl","regex","value","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","parsed","dateAdapter","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","getTime","NaN","Date","updateComplete","then","focus","moveFocusToButton","willUpdate","_changedProperties","has","createDateFormatters","dateFormatLong","Intl","DateTimeFormat","locale","day","month","year","render","formattedDate","format","html","renderLabel","name","ifDefined","placeholder","inputId","disabled","required","handleInputChange","handleFocus","handleBlur","ref","focusableRef","error","undefined","getDescribedBy","toggleOpen","buttonLabel","selectedDateMessage","nothing","renderError","classMap","direction","focusLast","calendarHeading","closeLabel","min","max","firstDayOfWeek","handleDaySelect","focusFirst","closeButton","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","state","property","attribute","Number","customElement"],"mappings":"88CAAe,sOACM,0BACD,0GCFL,+YACM,6BACD,wrJCkCpBA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAElB,MAAMC,EAAwB,cACxBC,EAAiB,KAAM,EAY7B,IAAqBC,EAArB,cAAwCC,EAAoBC,EAAWC,EAAeC,MAAtFC,kCAQUC,aAAU,IAAIC,EAAuBD,KAAM,CACjDE,OAAQ,IAAMF,KAAKG,KACnBC,UAAWC,GAAKL,KAAKM,KAAgB,UAAXD,EAAEE,MAC5BC,cAAeC,GAAQA,IAAST,KAAKU,UAAYD,IAAST,KAAKW,eAGzDX,WAAQ,IAAIY,EAAgBZ,KAAM,CACxCa,OAAQ,IAAMb,KAAKc,OACnBC,eAAgBC,EAChBC,WAAY,IAAMjB,KAAKM,MAAK,KAabN,WAAO,EAKZA,WAAgB,GA4BhBA,SAAc,GAMdA,SAAc,GAOdA,eAA8B,QAMkBA,sBAM5BA,kBAAwCkB,EAQxClB,iBAA2BmB,EAM3BnB,oBAAwCP,EAgIhEO,qBAAmBK,IACzBA,EAAEe,kBACFpB,KAAKqB,SAAShB,EAAEiB,MAChBtB,KAAKM,QAGCN,gBAAcK,IACpBA,EAAEkB,iBAEEvB,KAAKG,KACPH,KAAKM,MAAK,GAEVN,KAAKwB,QAIDxB,gBAAcyB,IACpBA,EAAML,kBACNpB,KAAK0B,cAAc,IAAIC,EAAU,UAG3B3B,iBAAeyB,IACrBA,EAAML,kBACNpB,KAAK0B,cAAc,IAAIC,EAAU,WAG3B3B,uBAAqBK,IAC3B,MAAMQ,EAASR,EAAEQ,iBCrTMe,EAA2BC,GACpD,MAAMC,MAAEA,GAAUF,EACZG,EAASH,EAAQI,eAEjBC,EAAeH,EAAMI,MAAM,EAAGH,GAC9BI,EAAcL,EAAMI,MAAMH,EAAQD,EAAMM,QAExCC,EAAuBJ,EAAaK,QAAQT,EAAO,IAGnDU,EAAWF,EAFSF,EAAYG,QAAQT,EAAO,IAG/CW,EAAYH,EAAqBD,OAEvCR,EAAQE,MAAQS,EAChBX,EAAQI,eAAiBQ,EACzBZ,EAAQa,aAAeD,EDySrBE,CAAW7B,EAAQrB,GACnBQ,KAAK0B,cAAc,IAAIC,EAAU,UAEjC,MAAMgB,EAAS3C,KAAK4C,YAAYC,MAAMhC,EAAOiB,MAAOgB,IAChDH,GAA2B,KAAjB9B,EAAOiB,QACnB9B,KAAKqB,SAASsB,IApOdI,kBACF,OAAOC,EAAahD,KAAK8B,OAMvBiB,gBAAYzB,GACdtB,KAAK8B,MAAQR,EAAO2B,EAAa3B,GAAQ,GAGvC4B,4BACF,2BAAOlD,KAAK+C,kCAAaI,yBAAaC,IAMpCF,kBAAc5B,GAChBtB,KAAK8B,MAAQR,EAAO2B,EAAa,IAAII,KAAK/B,IAAS,GAmDrDE,OACExB,KAAKG,MAAO,EAIZH,KAAK0B,cAAc,IAAIC,EAAU,SAGjC3B,KAAKsD,eAAeC,MAAK,IAAMvD,KAAKU,SAAS8C,MAAM,CAAE3C,OAAQ,YAO/DP,KAAKmD,GAAoB,GACvBzD,KAAKG,MAAO,EAIZH,KAAK0B,cAAc,IAAIC,EAAU,UAE7B8B,GACFzD,KAAKW,aAAa6C,QAIZE,WAAWC,GACfA,EAAmBC,IAAI,iBACzB5D,KAAK6D,uBAIDA,uBACN7D,KAAK8D,eAAiB,IAAIC,KAAKC,eAAehE,KAAKkB,aAAa+C,OAAQ,CACtEC,IAAK,UACLC,MAAO,OACPC,KAAM,YAIVC,SACE,MAAMtB,YAAEA,GAAgB/C,KAClBsE,EAAgBvB,EAAc/C,KAAK4C,YAAY2B,OAAOxB,GAAe,GAE3E,OAAOyB,CAAI,GACPxE,KAAKyE,4EAKIzE,KAAK0E,iBACHJ,mBACKK,EAAU3E,KAAK4E,qBACxB5E,KAAK6E,uBACE7E,KAAK8E,wBACL9E,KAAK+E,8CAER/E,KAAKgF,8BACLhF,KAAKiF,uBACNjF,KAAKkF,kCAEXC,EAAInF,KAAKoF,+BACIT,EAAU3E,KAAKqF,MAAQ,YAASC,yBAC5BX,EAAU3E,KAAKuF,6DAEGvF,KAAKwF,0BAAwBxF,KAAK8E,2GAGnE5D,EAAauE,eACb1C,EACEyB,CAAI,WAAWtD,EAAawE,uBAAuB1F,KAAK8D,eAAeS,OAAOxB,YAC9E4C,0CAKR3F,KAAK4F,4BAGGC,EAAS,CACf,UAA8B,SAAnB7F,KAAK8F,UAChB,YAAa9F,KAAKG,wDAINH,KAAKG,KAAO,QAAU,2HAIYH,KAAK+F,qGAGO/F,KAAKkB,aAAa8E,6DACpChG,KAAKM,uIAEjBN,KAAKkB,aAAa+E,yEAIpCjG,KAAK8B,eACP9B,KAAKkG,aACLlG,KAAKmG,uBACKnG,KAAKkB,kCACHlB,KAAKoG,oCACLpG,KAAKP,4BACbO,KAAKqG,iFAG6BrG,KAAKsG,iCAMnDA,aACNtG,KAAKuG,YAAY/C,QAGXuC,YACN/F,KAAKU,SAAS8C,MAAM,CAAE3C,OAAQ,QA0CxBQ,SAASC,GACftB,KAAK8B,MAAQR,EAAO2B,EAAa3B,GAAQ,GACzCtB,KAAK0B,cAAc,IAAIC,EAAU,aA9Q5BjC,SAAS,CAAC8G,EAAgBC,EAAgBC,EAAgBC,GAElCC,GAA9BC,EAAM,kBAAkB,uCACKD,GAA7BC,EAAM,iBAAiB,sCACMD,GAA7BC,EAAM,iBAAiB,mCACQD,GAA/BC,EAAM,mBAAmB,iCAwBjBD,GAARE,gCAKWF,GAAXG,iCA4BWH,GAAXG,+BAMWH,GAAXG,+BAOWH,GAAXG,qCAM2DH,GAA3DG,EAAS,CAAEC,UAAW,oBAAqBzG,KAAM0G,+CAMlBL,GAA/BG,EAAS,CAAEC,WAAW,wCAQSJ,GAA/BG,EAAS,CAAEC,WAAW,uCAMSJ,GAA/BG,EAAS,CAAEC,WAAW,0CAtGJtH,KADpBwH,EAAc,qBACMxH,SAAAA"}

package/lib/DateSelectEvent.js

@@ -1,2 +1,2 @@
-import{N as e}from"./events-731d0007.js";class t extends e{constructor(e){super(t.eventName),this.date=e}}t.eventName="nord-select";export{t as DateSelectEvent};
+import{N as s}from"./events-731d0007.js";class t extends s{constructor(s,t){super(s),this.date=t}}export{t as DateSelectEvent};
 //# sourceMappingURL=DateSelectEvent.js.map

package/lib/DateSelectEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateSelectEvent.js","sources":["../src/calendar/DateSelectEvent.ts"],"sourcesContent":["import { NordEvent } from \"../common/events.js\"\n\nexport class DateSelectEvent extends NordEvent {\n  static eventName = \"nord-select\"\n  date: Date\n\n  constructor(date: Date) {\n    super(DateSelectEvent.eventName)\n    this.date = date\n  }\n}\n"],"names":["DateSelectEvent","NordEvent","constructor","date","super","eventName","this"],"mappings":"+CAEaA,UAAwBC,EAInCC,YAAYC,GACVC,MAAMJ,EAAgBK,WACtBC,KAAKH,KAAOA,GALPH,YAAY"}
+{"version":3,"file":"DateSelectEvent.js","sources":["../src/calendar/DateSelectEvent.ts"],"sourcesContent":["import { NordEvent } from \"../common/events.js\"\n\nexport class DateSelectEvent extends NordEvent {\n  date: Date\n\n  constructor(name: string, date: Date) {\n    super(name)\n    this.date = date\n  }\n}\n"],"names":["DateSelectEvent","NordEvent","constructor","name","date","super","this"],"mappings":"+CAEaA,UAAwBC,EAGnCC,YAAYC,EAAcC,GACxBC,MAAMF,GACNG,KAAKF,KAAOA"}

package/lib/DraftComponentMixin-9e4b7b34.js

@@ -0,0 +1,2 @@
+function n(n){class e extends n{connectedCallback(){super.connectedCallback(),e._warningLogged||(console.warn(`NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,"font-weight:bold","font-weight:normal"),e._warningLogged=!0)}}return e._warningLogged=!1,e}export{n as D};
+//# sourceMappingURL=DraftComponentMixin-9e4b7b34.js.map

package/lib/DraftComponentMixin-9e4b7b34.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraftComponentMixin-9e4b7b34.js","sources":["../src/common/mixins/DraftComponentMixin.ts"],"sourcesContent":["import { LitElement } from \"lit\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport function DraftComponentMixin<T extends Constructable<LitElement>>(superClass: T) {\n  class DraftComponent extends superClass {\n    private static _warningLogged = false\n\n    connectedCallback() {\n      super.connectedCallback()\n\n      if (process.env.NODE_ENV !== \"development\" && !DraftComponent._warningLogged) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,\n          \"font-weight:bold\",\n          \"font-weight:normal\"\n        )\n        DraftComponent._warningLogged = true\n      }\n    }\n  }\n\n  return DraftComponent as T\n}\n"],"names":["DraftComponentMixin","superClass","DraftComponent","connectedCallback","super","_warningLogged","console","warn","this","localName"],"mappings":"SAIgBA,EAAyDC,GACvE,MAAMC,UAAuBD,EAG3BE,oBACEC,MAAMD,oBAEyCD,EAAeG,iBAE5DC,QAAQC,KACN,WAAWC,KAAKC,0EAChB,mBACA,sBAEFP,EAAeG,gBAAiB,IAKtC,OAjBiBH,kBAAiB,EAiB3BA"}

package/lib/EmptyState.js

@@ -1,2 +1,2 @@
-import{D as t,_ as e,n}from"./DraftComponentMixin-30345acf.js";import{r as a,$ as o,s as r}from"./lit-element-9646ab7e.js";import{s as i}from"./Component-a19be7c9.js";const s=a`:host{--n-empty-state-text-width:400px;background:var(--n-color-surface);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-empty-state{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:var(--n-space-xl)}@media (max-width:500px){.n-empty-state{padding:var(--n-space-l) var(--n-space-m)}}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){color:var(--n-color-text)!important;margin:0 0 var(--n-space-m)!important;font-weight:var(--n-font-weight-heading)!important;font-size:var(--n-font-size-xl)!important;line-height:var(--n-line-height-heading)!important}::slotted(p){margin:0 0 var(--n-space-l)!important;font-size:var(--n-font-size-m)!important;color:var(--n-color-text-weaker)!important;line-height:var(--n-line-height)!important;max-inline-size:var(--n-empty-state-text-width)}`;let l=class extends(t(r)){render(){return o`<div class="n-empty-state"><slot></slot></div>`}};l.styles=[i,s],l=e([n("nord-empty-state")],l);var m=l;export{m as default};
+import{_ as t,n as e}from"./query-assigned-elements-37b095c4.js";import{r as n,s as a,$ as o}from"./lit-element-74b6bb4b.js";import{s as r}from"./Component-9d373ef3.js";const i=n`:host{background:var(--n-color-surface);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-empty-state{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:var(--n-space-xl)}@media (max-width:500px){.n-empty-state{padding:var(--n-space-l) var(--n-space-m)}}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){color:var(--n-color-text)!important;margin:0 0 var(--n-space-m)!important;font-weight:var(--n-font-weight-heading)!important;font-size:var(--n-font-size-xl)!important;line-height:var(--n-line-height-heading)!important}::slotted(p){margin:0 0 var(--n-space-l)!important;font-size:var(--n-font-size-m)!important;color:var(--n-color-text-weaker)!important;line-height:var(--n-line-height)!important;max-inline-size:var(--n-empty-state-text-width,400px)}`;let s=class extends a{render(){return o`<div class="n-empty-state"><slot></slot></div>`}};s.styles=[r,i],s=t([e("nord-empty-state")],s);var l=s;export{l as default};
 //# sourceMappingURL=EmptyState.js.map

package/lib/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../src/empty-state/EmptyState.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 \"./EmptyState.css\"\n\n/**\n * Empty state can be used when there is no data to display to\n * describe what the user can do next. Empty state should provide\n * explanation or guidance to help user progress.\n *\n * @status draft\n * @category feedback\n * @slot - default slot\n */\n@customElement(\"nord-empty-state\")\nexport default class EmptyState extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`<div class=\"n-empty-state\">\n      <slot></slot>\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-empty-state\": EmptyState\n  }\n}\n"],"names":["EmptyState","DraftComponentMixin","LitElement","render","html","componentStyle","style","customElement"],"mappings":"giCAiBA,IAAqBA,EAArB,cAAwCC,EAAoBC,IAG1DC,SACE,OAAOC,CAAI,mDAHNJ,SAAS,CAACK,EAAgBC,GADdN,KADpBO,EAAc,qBACMP,SAAAA"}
+{"version":3,"file":"EmptyState.js","sources":["../src/empty-state/EmptyState.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./EmptyState.css\"\n\n/**\n * Empty state can be used when there is no data to display to\n * describe what the user can do next. Empty state provides\n * explanation and guidance to help user progress.\n *\n * @status new\n * @category feedback\n * @slot - default slot\n */\n@customElement(\"nord-empty-state\")\nexport default class EmptyState extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`<div class=\"n-empty-state\">\n      <slot></slot>\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-empty-state\": EmptyState\n  }\n}\n"],"names":["EmptyState","LitElement","render","html","componentStyle","style","customElement"],"mappings":"ugCAgBA,IAAqBA,EAArB,cAAwCC,EAGtCC,SACE,OAAOC,CAAI,mDAHNH,SAAS,CAACI,EAAgBC,GADdL,KADpBM,EAAc,qBACMN,SAAAA"}

package/lib/EventController-d99ebeef.js

@@ -0,0 +1,2 @@
+class s{constructor(s){this.listeners=[],s.addController(this)}hostDisconnected(){this.listeners.forEach((s=>s())),this.listeners=[]}listen(s,e,t,i){s.addEventListener(e,t,i);this.listeners.push((()=>s.removeEventListener(e,t,i)))}}export{s as E};
+//# sourceMappingURL=EventController-d99ebeef.js.map

package/lib/EventController-d99ebeef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventController-d99ebeef.js","sources":["../src/common/controllers/EventController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ninterface ShadowRootEventMap {\n  slotchange: Event\n}\n\nexport class EventController implements ReactiveController {\n  private listeners: Array<() => void> = []\n\n  constructor(host: ReactiveControllerHost) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.listeners.forEach(stop => stop())\n    this.listeners = []\n  }\n\n  listen<K extends keyof WindowEventMap>(\n    window: Window,\n    type: K,\n    listener: (this: Window, ev: WindowEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void\n\n  listen<K extends keyof DocumentEventMap>(\n    document: Document,\n    type: K,\n    listener: (this: Document, ev: DocumentEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void\n\n  listen<K extends keyof HTMLElementEventMap>(\n    element: HTMLElement,\n    type: K,\n    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void\n\n  listen<K extends keyof ShadowRootEventMap>(\n    element: ShadowRoot,\n    type: K,\n    listener: (this: ShadowRoot, ev: ShadowRootEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void\n\n  listen(\n    element: Window | Document | HTMLElement | ShadowRoot,\n    type: string,\n    listener: (ev: any) => any,\n    options?: boolean | AddEventListenerOptions\n  ) {\n    element.addEventListener(type, listener, options)\n\n    const stop = () => element.removeEventListener(type, listener, options)\n    this.listeners.push(stop)\n  }\n}\n"],"names":["EventController","constructor","host","this","addController","hostDisconnected","listeners","forEach","stop","listen","element","type","listener","options","addEventListener","push","removeEventListener"],"mappings":"MAMaA,EAGXC,YAAYC,GAFJC,eAA+B,GAGrCD,EAAKE,cAAcD,MAGrBE,mBACEF,KAAKG,UAAUC,SAAQC,GAAQA,MAC/BL,KAAKG,UAAY,GA+BnBG,OACEC,EACAC,EACAC,EACAC,GAEAH,EAAQI,iBAAiBH,EAAMC,EAAUC,GAGzCV,KAAKG,UAAUS,MADF,IAAML,EAAQM,oBAAoBL,EAAMC,EAAUC"}

package/lib/Fieldset.js

@@ -1,2 +1,2 @@
-import{D as r,_ as t,n as e}from"./DraftComponentMixin-30345acf.js";import{r as o,$ as s,s as i}from"./lit-element-9646ab7e.js";import{e as n}from"./property-03f59dce.js";import{l}from"./if-defined-2a4c6dbc.js";import{S as a}from"./SlotController-5bfc47d1.js";import{s as d}from"./Component-a19be7c9.js";import{s as h}from"./FormField-b1c18e6e.js";const c=o`fieldset{border:none}.n-label-container{margin-block-end:var(--n-space-s)}`;let m=class extends(r(i)){constructor(){super(...arguments),this.errorSlot=new a(this,"error"),this.hintSlot=new a(this,"hint"),this.label=""}render(){const{hasError:r}=this;return s`<fieldset aria-invalid="${l(r?"true":void 0)}" aria-describedby="${l(r?"error":void 0)}"><legend class="n-label-container"><slot class="n-label" name="label">${this.label}</slot><div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div></legend><slot></slot><div class="n-caption n-error" id="error" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div></fieldset>`}get hasHint(){return null!=this.hint||this.hintSlot.hasContent}get hasError(){return null!=this.error||this.errorSlot.hasContent}};m.styles=[d,h,c],t([n()],m.prototype,"label",void 0),t([n()],m.prototype,"hint",void 0),t([n()],m.prototype,"error",void 0),m=t([e("nord-fieldset")],m);var p=m;export{p as default};
+import{_ as e,n as r}from"./query-assigned-elements-37b095c4.js";import{r as t,s as o,$ as s}from"./lit-element-74b6bb4b.js";import{e as i}from"./property-03f59dce.js";import{l as n}from"./if-defined-fe657a02.js";import{S as l}from"./SlotController-683d0e7c.js";import{s as a}from"./Component-9d373ef3.js";import{s as d}from"./FormField-50bd73d5.js";import"./EventController-d99ebeef.js";const h=t`fieldset{border:none}.n-label-container{margin-block-end:var(--n-space-s)}`;let m=class extends o{constructor(){super(...arguments),this.errorSlot=new l(this,"error"),this.hintSlot=new l(this,"hint"),this.label=""}render(){const{hasError:e}=this;return s`<fieldset aria-invalid="${n(e?"true":void 0)}" aria-describedby="${n(e?"error":void 0)}"><legend class="n-label-container"><slot class="n-label" name="label">${this.label}</slot><div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div></legend><slot></slot><div class="n-caption n-error" id="error" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div></fieldset>`}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}};m.styles=[a,d,h],e([i()],m.prototype,"label",void 0),e([i()],m.prototype,"hint",void 0),e([i()],m.prototype,"error",void 0),m=e([r("nord-fieldset")],m);var p=m;export{p as default};
 //# sourceMappingURL=Fieldset.js.map

package/lib/Fieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.js","sources":["../src/fieldset/Fieldset.ts"],"sourcesContent":["import { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Fieldset.css\"\n\n/**\n * Fieldset is used for grouping sets of input components.\n * It is necessary to use a fieldset with radio and checkbox components.\n * It can also be useful for logically grouping other types of inputs.\n *\n * @status draft\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 fieldset.\n * @slot error - Optional slot that holds error text for the fieldset.\n */\n@customElement(\"nord-fieldset\")\nexport default class Fieldset extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  private errorSlot = new SlotController(this, \"error\")\n  private hintSlot = new SlotController(this, \"hint\")\n\n  /**\n   * Label for the fieldset.\n   */\n  @property() label: string = \"\"\n\n  /**\n   * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n   */\n  @property() hint?: string\n\n  /**\n   * Optional error to be shown with the fieldset. Alternatively use the error slot.\n   */\n  @property() error?: string\n\n  render() {\n    const { hasError } = this\n\n    return html`\n      <fieldset\n        aria-invalid=${ifDefined(hasError ? \"true\" : undefined)}\n        aria-describedby=${ifDefined(hasError ? \"error\" : undefined)}\n      >\n        <legend class=\"n-label-container\">\n          <slot class=\"n-label\" name=\"label\">${this.label}</slot>\n\n          <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n            <slot name=\"hint\">${this.hint}</slot>\n          </div>\n        </legend>\n\n        <slot></slot>\n\n        <div class=\"n-caption n-error\" id=\"error\" role=\"alert\" ?hidden=${!this.hasError}>\n          <slot name=\"error\">${this.error}</slot>\n        </div>\n      </fieldset>\n    `\n  }\n\n  protected get hasHint() {\n    return this.hint != null || this.hintSlot.hasContent\n  }\n\n  protected get hasError() {\n    return this.error != null || this.errorSlot.hasContent\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-fieldset\": Fieldset\n  }\n}\n"],"names":["Fieldset","DraftComponentMixin","LitElement","constructor","this","SlotController","render","hasError","html","ifDefined","undefined","label","hasHint","hint","error","hintSlot","hasContent","errorSlot","componentStyle","formFieldStyle","style","__decorate","property","customElement"],"mappings":"kbAsBA,IAAqBA,EAArB,cAAsCC,EAAoBC,IAA1DC,kCAGUC,eAAY,IAAIC,EAAeD,KAAM,SACrCA,cAAW,IAAIC,EAAeD,KAAM,QAKhCA,WAAgB,GAY5BE,SACE,MAAMC,SAAEA,GAAaH,KAErB,OAAOI,CAAI,2BAEQC,EAAUF,EAAW,YAASG,yBAC1BD,EAAUF,EAAW,aAAUG,4EAGXN,KAAKO,uDAEDP,KAAKQ,8BACxBR,KAAKS,2GAMqCT,KAAKG,gCAChDH,KAAKU,gCAMpBF,cACZ,OAAoB,MAAbR,KAAKS,MAAgBT,KAAKW,SAASC,WAG9BT,eACZ,OAAqB,MAAdH,KAAKU,OAAiBV,KAAKa,UAAUD,aAlDvChB,SAAS,CAACkB,EAAgBC,EAAgBC,GAQrCC,GAAXC,iCAKWD,GAAXC,gCAKWD,GAAXC,iCAnBkBtB,KADpBuB,EAAc,kBACMvB,SAAAA"}
+{"version":3,"file":"Fieldset.js","sources":["../src/fieldset/Fieldset.ts"],"sourcesContent":["import { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Fieldset.css\"\n\n/**\n * Fieldset is used for grouping sets of input components.\n * It is necessary to use a fieldset with radio and checkbox components.\n * It can also be useful for logically grouping other types of inputs.\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 fieldset.\n * @slot error - Optional slot that holds error text for the fieldset.\n */\n@customElement(\"nord-fieldset\")\nexport default class Fieldset extends LitElement {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  private errorSlot = new SlotController(this, \"error\")\n  private hintSlot = new SlotController(this, \"hint\")\n\n  /**\n   * Label for the fieldset.\n   */\n  @property() label: string = \"\"\n\n  /**\n   * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n   */\n  @property() hint?: string\n\n  /**\n   * Optional error to be shown with the fieldset. Alternatively use the error slot.\n   */\n  @property() error?: string\n\n  render() {\n    const { hasError } = this\n\n    return html`\n      <fieldset\n        aria-invalid=${ifDefined(hasError ? \"true\" : undefined)}\n        aria-describedby=${ifDefined(hasError ? \"error\" : undefined)}\n      >\n        <legend class=\"n-label-container\">\n          <slot class=\"n-label\" name=\"label\">${this.label}</slot>\n\n          <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n            <slot name=\"hint\">${this.hint}</slot>\n          </div>\n        </legend>\n\n        <slot></slot>\n\n        <div class=\"n-caption n-error\" id=\"error\" role=\"alert\" ?hidden=${!this.hasError}>\n          <slot name=\"error\">${this.error}</slot>\n        </div>\n      </fieldset>\n    `\n  }\n\n  protected get hasHint() {\n    return Boolean(this.hint) || this.hintSlot.hasContent\n  }\n\n  protected get hasError() {\n    return Boolean(this.error) || this.errorSlot.hasContent\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-fieldset\": Fieldset\n  }\n}\n"],"names":["Fieldset","LitElement","constructor","this","SlotController","render","hasError","html","ifDefined","undefined","label","hasHint","hint","error","Boolean","hintSlot","hasContent","errorSlot","componentStyle","formFieldStyle","style","__decorate","property","customElement"],"mappings":"0dAqBA,IAAqBA,EAArB,cAAsCC,EAAtCC,kCAGUC,eAAY,IAAIC,EAAeD,KAAM,SACrCA,cAAW,IAAIC,EAAeD,KAAM,QAKhCA,WAAgB,GAY5BE,SACE,MAAMC,SAAEA,GAAaH,KAErB,OAAOI,CAAI,2BAEQC,EAAUF,EAAW,YAASG,yBAC1BD,EAAUF,EAAW,aAAUG,4EAGXN,KAAKO,uDAEDP,KAAKQ,8BACxBR,KAAKS,2GAMqCT,KAAKG,gCAChDH,KAAKU,gCAMpBF,cACZ,OAAOG,QAAQX,KAAKS,OAAST,KAAKY,SAASC,WAG/BV,eACZ,OAAOQ,QAAQX,KAAKU,QAAUV,KAAKc,UAAUD,aAlDxChB,SAAS,CAACkB,EAAgBC,EAAgBC,GAQrCC,GAAXC,iCAKWD,GAAXC,gCAKWD,GAAXC,iCAnBkBtB,KADpBuB,EAAc,kBACMvB,SAAAA"}

package/lib/{FocusableMixin-98e13999.js → FocusableMixin-ebb67709.js}

@@ -1,2 +1,2 @@
-import{e}from"./ref-eb5cfa10.js";function l(l){return class extends l{constructor(){super(...arguments),this.focusableRef=e()}focus(e){var l;null===(l=this.focusableRef.value)||void 0===l||l.focus(e)}blur(){var e;null===(e=this.focusableRef.value)||void 0===e||e.blur()}click(){var e;null===(e=this.focusableRef.value)||void 0===e||e.click()}}}export{l as F};
-//# sourceMappingURL=FocusableMixin-98e13999.js.map
+import{e}from"./ref-7d028e3a.js";function l(l){return class extends l{constructor(){super(...arguments),this.focusableRef=e()}focus(e){var l;null===(l=this.focusableRef.value)||void 0===l||l.focus(e)}blur(){var e;null===(e=this.focusableRef.value)||void 0===e||e.blur()}click(){var e;null===(e=this.focusableRef.value)||void 0===e||e.click()}}}export{l as F};
+//# sourceMappingURL=FocusableMixin-ebb67709.js.map

package/lib/{FocusableMixin-98e13999.js.map → FocusableMixin-ebb67709.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FocusableMixin-98e13999.js","sources":["../src/common/mixins/FocusableMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\n\nimport { LitElement } from \"lit\"\nimport { createRef, Ref } from \"lit/directives/ref.js\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FocusableMixinInterface {\n  protected focusableRef: Ref<HTMLElement>\n  focus(options?: FocusOptions): void\n  blur(): void\n  click(): void\n}\n\nexport function FocusableMixin<T extends Constructable<LitElement>>(superClass: T) {\n  class FocusableElement extends superClass {\n    protected focusableRef = createRef<HTMLButtonElement>()\n\n    /**\n     * Programmatically move focus to the component.\n     * @param {FocusOptions} options An object which controls aspects of the focusing process.\n     */\n    focus(options?: FocusOptions) {\n      this.focusableRef.value?.focus(options)\n    }\n\n    /**\n     * Programmatically remove focus from the component.\n     */\n    blur() {\n      this.focusableRef.value?.blur()\n    }\n\n    /**\n     * Programmatically simulates a click on the component.\n     */\n    click() {\n      this.focusableRef.value?.click()\n    }\n  }\n\n  return FocusableElement as unknown as Constructable<FocusableMixinInterface> & T\n}\n"],"names":["FocusableMixin","superClass","constructor","this","createRef","focus","options","focusableRef","value","blur","click"],"mappings":"0CAcgBA,EAAoDC,GA2BlE,OA1BA,cAA+BA,EAA/BC,kCACYC,kBAAeC,IAMzBC,MAAMC,mBACJH,KAAKI,aAAaC,sBAAOH,MAAMC,GAMjCG,uBACEN,KAAKI,aAAaC,sBAAOC,OAM3BC,wBACEP,KAAKI,aAAaC,sBAAOE"}
+{"version":3,"file":"FocusableMixin-ebb67709.js","sources":["../src/common/mixins/FocusableMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\n\nimport { LitElement } from \"lit\"\nimport { createRef, Ref } from \"lit/directives/ref.js\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FocusableMixinInterface {\n  protected focusableRef: Ref<HTMLElement>\n  focus(options?: FocusOptions): void\n  blur(): void\n  click(): void\n}\n\nexport function FocusableMixin<T extends Constructable<LitElement>>(superClass: T) {\n  class FocusableElement extends superClass {\n    protected focusableRef = createRef<HTMLButtonElement>()\n\n    /**\n     * Programmatically move focus to the component.\n     * @param {FocusOptions} options An object which controls aspects of the focusing process.\n     */\n    focus(options?: FocusOptions) {\n      this.focusableRef.value?.focus(options)\n    }\n\n    /**\n     * Programmatically remove focus from the component.\n     */\n    blur() {\n      this.focusableRef.value?.blur()\n    }\n\n    /**\n     * Programmatically simulates a click on the component.\n     */\n    click() {\n      this.focusableRef.value?.click()\n    }\n  }\n\n  return FocusableElement as unknown as Constructable<FocusableMixinInterface> & T\n}\n"],"names":["FocusableMixin","superClass","constructor","this","createRef","focus","options","focusableRef","value","blur","click"],"mappings":"0CAcgBA,EAAoDC,GA2BlE,OA1BA,cAA+BA,EAA/BC,kCACYC,kBAAeC,IAMzBC,MAAMC,mBACJH,KAAKI,aAAaC,sBAAOH,MAAMC,GAMjCG,uBACEN,KAAKI,aAAaC,sBAAOC,OAM3BC,wBACEP,KAAKI,aAAaC,sBAAOE"}

package/lib/FormAssociatedMixin-1f97ed66.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./query-assigned-elements-37b095c4.js";import{$ as e}from"./lit-element-74b6bb4b.js";import{e as r}from"./property-03f59dce.js";import{E as o}from"./EventController-d99ebeef.js";import{S as i}from"./SlotController-683d0e7c.js";import{N as s}from"./events-731d0007.js";import"./VisuallyHidden.js";class n{constructor(t,e){this.host=t,this.options=e,this.handleFormData=t=>{const{disabled:e,name:r}=this.host;if(e)return;const o=this.options.value();r&&null!=o&&t.formData.append(r,o)},this.host=t,t.addController(this),this.options=e,this.events=new o(t)}hostConnected(){this.host.form&&this.events.listen(this.host.form,"formdata",this.handleFormData)}}function h(o){class h extends o{constructor(){super(...arguments),this.labelSlot=new i(this,"label"),this.errorSlot=new i(this,"error"),this.hintSlot=new i(this,"hint"),this.formData=new n(this,{value:()=>this.formValue}),this.inputId="input",this.errorId="error",this.hintId="hint",this.label="",this.hideLabel=!1,this.required=!1,this.expand=!1}get formValue(){return this.value}handleInput(t){t.stopPropagation();const e=t.target;this.value=e.value,this.dispatchEvent(new s("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new s("change"))}renderLabel(){const t=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot></label><div class="n-caption n-hint" id="${this.hintId}" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div>`;return this.hideLabel?e`<nord-visually-hidden>${t}</nord-visually-hidden>`:e`<div class="n-label-container">${t}</div>`}renderError(){return e`<div class="n-caption n-error" id="${this.errorId}" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div>`}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?`${this.hintId} ${this.errorId}`:t?this.hintId:e?this.errorId:void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}}return t([r()],h.prototype,"label",void 0),t([r()],h.prototype,"hint",void 0),t([r({type:Boolean,attribute:"hide-label"})],h.prototype,"hideLabel",void 0),t([r()],h.prototype,"placeholder",void 0),t([r()],h.prototype,"error",void 0),t([r({type:Boolean})],h.prototype,"required",void 0),t([r({reflect:!0,type:Boolean})],h.prototype,"expand",void 0),h}export{h as F};
+//# sourceMappingURL=FormAssociatedMixin-1f97ed66.js.map

package/lib/FormAssociatedMixin-1f97ed66.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormAssociatedMixin-1f97ed66.js","sources":["../src/common/controllers/FormDataController.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\nimport { EventController } from \"./EventController.js\"\n\ntype FormDataOptions = {\n  value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n  private events: EventController\n  constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n    this.host = host\n    host.addController(this)\n    this.options = options\n    this.events = new EventController(host)\n  }\n\n  hostConnected() {\n    if (this.host.form) {\n      this.events.listen(this.host.form, \"formdata\", this.handleFormData)\n    }\n  }\n\n  private handleFormData = (e: FormDataEvent) => {\n    const { disabled, name } = this.host\n\n    if (disabled) {\n      return\n    }\n\n    const value = this.options.value()\n\n    if (name && value != null) {\n      e.formData.append(name, value)\n    }\n  }\n}\n","/* eslint-disable max-classes-per-file */\nimport { html, LitElement, TemplateResult } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { FormDataController } from \"../controllers/FormDataController.js\"\nimport { SlotController } from \"../controllers/SlotController.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\nimport \"../../visually-hidden/VisuallyHidden.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n  label: string\n  required: boolean\n  hint?: string\n  hideLabel: boolean\n  placeholder?: string\n  error?: string\n  expand: boolean\n\n  protected inputId: string\n  protected errorId: string\n  protected hintId: string\n  protected labelSlot: SlotController\n  protected hintSlot: SlotController\n  protected errorSlot: SlotController\n  protected formData: FormDataController\n\n  protected get formValue(): string | undefined\n  protected get hasError(): boolean\n  protected get hasHint(): boolean\n\n  protected handleChange(e: Event): void\n  protected handleInput(e: Event): void\n  protected renderLabel(): TemplateResult\n  protected renderError(): TemplateResult\n  protected getDescribedBy(): string | undefined\n  protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n  // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n  /**\n   * @slot label - Use when a label requires more than plain text.\n   * @slot hint - Use when a hint requires more than plain text.\n   * @slot error - Optional slot that holds error text for the input.\n   */\n  class FormAssociatedElement extends superClass {\n    protected labelSlot = new SlotController(this, \"label\")\n    protected errorSlot = new SlotController(this, \"error\")\n    protected hintSlot = new SlotController(this, \"hint\")\n    protected formData = new FormDataController(this, { value: () => this.formValue })\n\n    protected get formValue() {\n      return this.value\n    }\n\n    protected inputId = \"input\"\n    protected errorId = \"error\"\n    protected hintId = \"hint\"\n\n    /**\n     * Label for the input.\n     */\n    @property() label: string = \"\"\n\n    /**\n     * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n     */\n    @property() hint?: string\n\n    /**\n     * Visually hide the label, but still show it to assistive technologies like screen readers.\n     */\n    @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n    /**\n     * Placeholder text to display within the input.\n     */\n    @property() placeholder?: string\n\n    /**\n     * Optional error to be shown with the input. Alternatively use the error slot.\n     */\n    @property() error?: string\n\n    /**\n     * Determines whether the input is required or not.\n     * An input marked as required will be announced as such to users of assistive technology.\n     * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n     */\n    @property({ type: Boolean }) required = false\n\n    /**\n     * Controls whether the input expands to fill the width of its container.\n     */\n    @property({ reflect: true, type: Boolean }) expand = false\n\n    protected handleInput(e: Event) {\n      e.stopPropagation()\n      const target = e.target as NativeInputElement\n      this.value = target.value\n\n      /**\n       * Fired as the user types into the input.\n       */\n      this.dispatchEvent(new NordEvent(\"input\"))\n    }\n\n    protected handleChange(e: Event) {\n      e.stopPropagation()\n\n      /**\n       * Fired whenever the input's value is changed via user interaction.\n       */\n      this.dispatchEvent(new NordEvent(\"change\"))\n    }\n\n    protected renderLabel() {\n      const label = html`\n        <label for=${this.inputId}>\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n          <slot name=\"hint\">${this.hint}</slot>\n        </div>\n      `\n\n      return this.hideLabel\n        ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n        : html`<div class=\"n-label-container\">${label}</div>`\n    }\n\n    protected renderError() {\n      return html`\n        <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n          <slot name=\"error\">${this.error}</slot>\n        </div>\n      `\n    }\n\n    protected getDescribedBy() {\n      const { hasHint, hasError } = this\n\n      if (hasHint && hasError) {\n        return `${this.hintId} ${this.errorId}`\n      }\n      if (hasHint) {\n        return this.hintId\n      }\n      if (hasError) {\n        return this.errorId\n      }\n\n      return undefined\n    }\n\n    protected getInvalid() {\n      return this.hasError ? \"true\" : undefined\n    }\n\n    protected get hasHint() {\n      return Boolean(this.hint) || this.hintSlot.hasContent\n    }\n\n    protected get hasError() {\n      return Boolean(this.error) || this.errorSlot.hasContent\n    }\n  }\n\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormDataController","constructor","host","options","this","e","disabled","name","value","formData","append","addController","events","EventController","hostConnected","form","listen","handleFormData","FormAssociatedMixin","superClass","FormAssociatedElement","SlotController","formValue","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","label","html","inputId","hintId","hasHint","hint","hideLabel","renderError","errorId","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hintSlot","hasContent","errorSlot","__decorate","property","type","attribute","reflect"],"mappings":"iUAQaA,EAEXC,YAAoBC,EAA4DC,GAA5DC,UAAAF,EAA4DE,aAAAD,EAaxEC,oBAAkBC,IACxB,MAAMC,SAAEA,EAAQC,KAAEA,GAASH,KAAKF,KAEhC,GAAII,EACF,OAGF,MAAME,EAAQJ,KAAKD,QAAQK,QAEvBD,GAAiB,MAATC,GACVH,EAAEI,SAASC,OAAOH,EAAMC,IAtB1BJ,KAAKF,KAAOA,EACZA,EAAKS,cAAcP,MACnBA,KAAKD,QAAUA,EACfC,KAAKQ,OAAS,IAAIC,EAAgBX,GAGpCY,gBACMV,KAAKF,KAAKa,MACZX,KAAKQ,OAAOI,OAAOZ,KAAKF,KAAKa,KAAM,WAAYX,KAAKa,0BCsB1CC,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApClB,kCACYG,eAAY,IAAIiB,EAAejB,KAAM,SACrCA,eAAY,IAAIiB,EAAejB,KAAM,SACrCA,cAAW,IAAIiB,EAAejB,KAAM,QACpCA,cAAW,IAAIJ,EAAmBI,KAAM,CAAEI,MAAO,IAAMJ,KAAKkB,YAM5DlB,aAAU,QACVA,aAAU,QACVA,YAAS,OAKPA,WAAgB,GAU0BA,gBAAY,EAiBrCA,eAAW,EAKIA,aAAS,EA3CvCkB,gBACZ,OAAOlB,KAAKI,MA4CJe,YAAYlB,GACpBA,EAAEmB,kBACF,MAAMC,EAASpB,EAAEoB,OACjBrB,KAAKI,MAAQiB,EAAOjB,MAKpBJ,KAAKsB,cAAc,IAAIC,EAAU,UAGzBC,aAAavB,GACrBA,EAAEmB,kBAKFpB,KAAKsB,cAAc,IAAIC,EAAU,WAGzBE,cACR,MAAMC,EAAQC,CAAI,eACH3B,KAAK4B,+BACK5B,KAAK0B,yDAGO1B,KAAK6B,qBAAmB7B,KAAK8B,8BAC1C9B,KAAK+B,oBAI7B,OAAO/B,KAAKgC,UACRL,CAAI,yBAAyBD,2BAC7BC,CAAI,kCAAkCD,UAGlCO,cACR,OAAON,CAAI,sCAC2B3B,KAAKkC,mCAAiClC,KAAKmC,gCACxDnC,KAAKoC,qBAKtBC,iBACR,MAAMP,QAAEA,EAAOK,SAAEA,GAAanC,KAE9B,OAAI8B,GAAWK,EACN,GAAGnC,KAAK6B,UAAU7B,KAAKkC,UAE5BJ,EACK9B,KAAK6B,OAEVM,EACKnC,KAAKkC,aADd,EAOQI,aACR,OAAOtC,KAAKmC,SAAW,YAASI,EAGpBT,cACZ,OAAOU,QAAQxC,KAAK+B,OAAS/B,KAAKyC,SAASC,WAG/BP,eACZ,OAAOK,QAAQxC,KAAKoC,QAAUpC,KAAK2C,UAAUD,YAIjD,OA3GcE,GAAXC,iCAKWD,GAAXC,gCAKqDD,GAArDC,EAAS,CAAEC,KAAMN,QAASO,UAAW,gDAK1BH,GAAXC,uCAKWD,GAAXC,iCAO4BD,GAA5BC,EAAS,CAAEC,KAAMN,0CAK0BI,GAA3CC,EAAS,CAAEG,SAAS,EAAMF,KAAMN,wCA2E5BxB"}

package/lib/FormField-50bd73d5.js

@@ -0,0 +1,2 @@
+import{r as n}from"./lit-element-74b6bb4b.js";const t=n`.n-caption,::slotted(.n-caption){font-size:var(--n-font-size-s);line-height:var(--n-line-height-caption)}.n-label-container{padding-block-end:var(--n-space-s);display:inline-block}.n-label,::slotted(label),label{display:block!important;color:var(--n-color-text);font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading);margin:0!important}.n-hint{padding-block-start:calc(var(--n-space-s)/ 2);color:var(--n-color-text-weaker)}.n-error{margin-block-start:var(--n-space-s);color:var(--n-color-text-error)}`;export{t as s};
+//# sourceMappingURL=FormField-50bd73d5.js.map

package/lib/FormField-50bd73d5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField-50bd73d5.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/Header.js

@@ -1,2 +1,2 @@
-import{D as o,_ as e,n as a}from"./DraftComponentMixin-30345acf.js";import{r,$ as t,s as n}from"./lit-element-9646ab7e.js";import{S as s}from"./SlotController-5bfc47d1.js";import{s as l}from"./Component-a19be7c9.js";const i=r`:host{font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-actions{display:flex;flex-flow:row wrap;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--n-space-m) var(--n-space-l);background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--n-box-shadow-header);min-block-size:var(--n-space-xxl)}.n-header-actions{margin-inline-start:auto;gap:var(--n-space-s)}`;let c=class extends(o(n)){constructor(){super(...arguments),this.actionSlot=new s(this,"action")}render(){return t`<header class="n-header"><slot></slot><div class="n-header-actions" ?hidden="${this.actionSlot.isEmpty}"><slot name="action"></slot></div></header>`}};c.styles=[l,i],c=e([a("nord-header")],c);var d=c;export{d as default};
+import{_ as e,n as o}from"./query-assigned-elements-37b095c4.js";import{r,$ as n,s as t}from"./lit-element-74b6bb4b.js";import{D as a}from"./DraftComponentMixin-9e4b7b34.js";import{S as s}from"./SlotController-683d0e7c.js";import{s as l}from"./Component-9d373ef3.js";import"./EventController-d99ebeef.js";const i=r`:host{--n-banner-box-shadow:none;font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-actions{display:flex;flex-flow:row wrap;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--n-space-m) var(--n-space-l);background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--n-box-shadow-header);min-block-size:var(--n-space-xxl)}.n-header-actions{margin-inline-start:auto;gap:var(--n-space-s)}`;let d=class extends(a(t)){constructor(){super(...arguments),this.actionSlot=new s(this,"action")}render(){return n`<header class="n-header"><slot></slot><div class="n-header-actions" ?hidden="${this.actionSlot.isEmpty}"><slot name="action"></slot></div></header>`}};d.styles=[l,i],d=e([o("nord-header")],d);var c=d;export{c as default};
 //# sourceMappingURL=Header.js.map

package/lib/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Header.css\"\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status draft\n * @category structure\n * @slot - The header content.\n * @slot action - Optional slot for buttons, toggles, etc.\n */\n@customElement(\"nord-header\")\nexport default class Header extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private actionSlot = new SlotController(this, \"action\")\n\n  render() {\n    return html`\n      <header class=\"n-header\">\n        <slot></slot>\n        <div class=\"n-header-actions\" ?hidden=${this.actionSlot.isEmpty}>\n          <slot name=\"action\"></slot>\n        </div>\n      </header>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-header\": Header\n  }\n}\n"],"names":["Header","DraftComponentMixin","LitElement","constructor","this","SlotController","render","html","actionSlot","isEmpty","componentStyle","style","customElement"],"mappings":"0yBAiBA,IAAqBA,EAArB,cAAoCC,EAAoBC,IAAxDC,kCAGUC,gBAAa,IAAIC,EAAeD,KAAM,UAE9CE,SACE,OAAOC,CAAI,gFAGiCH,KAAKI,WAAWC,wDARvDT,SAAS,CAACU,EAAgBC,GADdX,KADpBY,EAAc,gBACMZ,SAAAA"}
+{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Header.css\"\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status draft\n * @category structure\n * @slot - The header content.\n * @slot action - Optional slot for buttons, toggles, etc.\n */\n@customElement(\"nord-header\")\nexport default class Header extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private actionSlot = new SlotController(this, \"action\")\n\n  render() {\n    return html`\n      <header class=\"n-header\">\n        <slot></slot>\n        <div class=\"n-header-actions\" ?hidden=${this.actionSlot.isEmpty}>\n          <slot name=\"action\"></slot>\n        </div>\n      </header>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-header\": Header\n  }\n}\n"],"names":["Header","DraftComponentMixin","LitElement","constructor","this","SlotController","render","html","actionSlot","isEmpty","componentStyle","style","customElement"],"mappings":"85BAiBA,IAAqBA,EAArB,cAAoCC,EAAoBC,IAAxDC,kCAGUC,gBAAa,IAAIC,EAAeD,KAAM,UAE9CE,SACE,OAAOC,CAAI,gFAGiCH,KAAKI,WAAWC,wDARvDT,SAAS,CAACU,EAAgBC,GADdX,KADpBY,EAAc,gBACMZ,SAAAA"}

package/lib/Icon.js

@@ -1,2 +1,2 @@
-import{D as e,_ as s,n as i}from"./DraftComponentMixin-30345acf.js";import{r as t,$ as o,s as r}from"./lit-element-9646ab7e.js";import{e as n}from"./property-03f59dce.js";import{t as a}from"./state-70f38ceb.js";import{l as c}from"./if-defined-2a4c6dbc.js";import{o as l}from"./unsafe-html-4da54dd2.js";import{s as d}from"./Component-a19be7c9.js";import"./directive-de55b00a.js";const h=t`:host{--n-icon-size:var(--n-size-icon-m);display:inline-block;block-size:var(--n-icon-size);inline-size:var(--n-icon-size)}:host([size=xs]){--n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--n-icon-size:var(--n-size-icon-s)}:host([size="l"]){--n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--n-icon-size:var(--n-size-icon-xxl)}.n-icon{display:block}svg{display:block}`;var v;let p=v=class extends(e(r)){constructor(){super(...arguments),this.name="",this.size="m",this.svg=""}static registerResolver(e){v.resolver=e}static registerIcon(e,s){let i,t;if("string"==typeof e?(i=e,t=s):(i=e.title,t=e.default),!i)throw new Error("name is required when registering an icon");if(!t)throw new Error("icon must not be empty");v.registeredIcons.has(i)||v.registeredIcons.set(i,t)}willUpdate(e){if(!e.has("name"))return;const s=this.resolve();"string"==typeof s?this.svg=s:s.then((e=>{this.svg=e})).catch((()=>{this.svg=""}))}render(){return o`<div role="${c(this.label?"img":void 0)}" aria-label="${c(this.label)}"><slot style="${c(this.color?`color:${this.color}`:void 0)}" aria-hidden="true">${l(this.svg)}</slot></div>`}resolve(){return this.name?v.registeredIcons.has(this.name)?v.registeredIcons.get(this.name):v.resolver(this.name):""}};p.styles=[d,h],p.resolver=e=>fetch(`https://nordcdn.net/ds/icons/1.3.3/assets/${e}.svg`).then((e=>e.text())),p.registeredIcons=new Map,s([n({reflect:!0})],p.prototype,"name",void 0),s([n({reflect:!0})],p.prototype,"size",void 0),s([n({reflect:!0})],p.prototype,"color",void 0),s([n({reflect:!0})],p.prototype,"label",void 0),s([a()],p.prototype,"svg",void 0),p=v=s([i("nord-icon")],p);var m=p;export{m as default};
+import{_ as e,n as s}from"./query-assigned-elements-37b095c4.js";import{r as i,s as t,$ as o}from"./lit-element-74b6bb4b.js";import{e as r}from"./property-03f59dce.js";import{t as n}from"./state-70f38ceb.js";import{l}from"./if-defined-fe657a02.js";import{o as c}from"./unsafe-html-989a642b.js";import{s as a}from"./Component-9d373ef3.js";import"./directive-de55b00a.js";const d=i`:host{--n-icon-size:var(--n-size-icon-m);display:inline-block;block-size:var(--n-icon-size);inline-size:var(--n-icon-size)}:host([size=xs]){--n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--n-icon-size:var(--n-size-icon-s)}:host([size="l"]){--n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--n-icon-size:var(--n-size-icon-xxl)}.n-icon{display:block}svg{display:block}`;var h;let v=h=class extends t{constructor(){super(...arguments),this.name="",this.size="m",this.svg=""}static registerResolver(e){h.resolver=e}static registerIcon(e,s){let i,t;if("string"==typeof e?(i=e,t=s):(i=e.title,t=e.default),!i)throw new Error("name is required when registering an icon");if(!t)throw new Error("icon must not be empty");h.registeredIcons.has(i)||h.registeredIcons.set(i,t)}willUpdate(e){if(!e.has("name"))return;const s=this.resolve();"string"==typeof s?this.svg=s:s.then((e=>{this.svg=e})).catch((()=>{this.svg=""}))}render(){return o`<div role="${l(this.label?"img":void 0)}" aria-label="${l(this.label)}"><slot style="${l(this.color?`color:${this.color}`:void 0)}" aria-hidden="true">${c(this.svg)}</slot></div>`}resolve(){return this.name?h.registeredIcons.has(this.name)?h.registeredIcons.get(this.name):h.resolver(this.name):""}};v.styles=[a,d],v.resolver=e=>fetch(`https://nordcdn.net/ds/icons/1.3.7/assets/${e}.svg`).then((e=>e.text())),v.registeredIcons=new Map,e([r({reflect:!0})],v.prototype,"name",void 0),e([r({reflect:!0})],v.prototype,"size",void 0),e([r({reflect:!0})],v.prototype,"color",void 0),e([r({reflect:!0})],v.prototype,"label",void 0),e([n()],v.prototype,"svg",void 0),v=h=e([s("nord-icon")],v);var m=v;export{m as default};
 //# sourceMappingURL=Icon.js.map

package/lib/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../src/icon/Icon.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Icon.css\"\n\n// in dev we should just load from node_modules\nconst loadIcon = (name: string) => import(`@nordhealth/icons/lib/assets/${name}.js`).then(({ default: svg }) => svg)\n\n// in prod we should load from the CDN, as a sensible default\nconst loadIconCdn = (name: string) =>\n  fetch(`https://nordcdn.net/ds/icons/${process.env.ICON_VERSION}/assets/${name}.svg`).then(response => response.text())\n\nexport type IconResolver = ((iconName: string) => string) | ((iconName: string) => Promise<string>)\n\n/**\n * Icons are used to provide additional meaning or in places where text label doesn’t fit.\n * Icon component allows you to display an icon from the Nordicons library.\n *\n * @status draft\n * @category image\n */\n@customElement(\"nord-icon\")\nexport default class Icon extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private static resolver: IconResolver = process.env.NODE_ENV === \"development\" ? loadIcon : loadIconCdn\n  private static registeredIcons = new Map<string, string>()\n\n  /**\n   * Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\n   * Can return a string synchronously, or a promise of a string.\n   * By default, will load icons from the Nord CDN.\n   * @param resolver The resolver function to register.\n   */\n  static registerResolver(resolver: IconResolver) {\n    Icon.resolver = resolver\n  }\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param icon An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n   * This is intended to be used in cases where you import an icon's entire ES module and register it directly.\n   */\n  static registerIcon(icon: { title: string; default: string }): void\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param name The name of the icon to be registered.\n   * @param icon The SVG string for the icon.\n   */\n  static registerIcon(name: string, icon: string): void\n\n  static registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) {\n    let name: string | undefined\n    let svg: string | undefined\n\n    if (typeof iconOrName === \"string\") {\n      name = iconOrName\n      svg = icon\n    } else {\n      name = iconOrName.title\n      svg = iconOrName.default\n    }\n\n    // handle errors\n    if (!name) {\n      throw new Error(\"name is required when registering an icon\")\n    }\n    if (!svg) {\n      throw new Error(\"icon must not be empty\")\n    }\n\n    if (!Icon.registeredIcons.has(name)) {\n      Icon.registeredIcons.set(name, svg)\n    }\n  }\n\n  /**\n   * The name of the icon to display, as defined by nordicons.\n   */\n  @property({ reflect: true }) name: string = \"\"\n\n  /**\n   * The size of the icon.\n   */\n  @property({ reflect: true }) size: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n  /**\n   * The color of the icon.\n   * Can accept any valid CSS color value, including custom properties.\n   */\n  @property({ reflect: true }) color?: string\n\n  /**\n   * An accessible label for the icon.\n   * If no label is supplied, the icon is hidden from assistive technology.\n   */\n  @property({ reflect: true }) label?: string\n\n  @state() private svg: string = \"\"\n\n  override willUpdate(changedProperties: PropertyValues<this>) {\n    if (!changedProperties.has(\"name\")) {\n      return\n    }\n\n    const resolved = this.resolve()\n\n    if (typeof resolved === \"string\") {\n      this.svg = resolved\n    } else {\n      resolved\n        .then(svg => {\n          this.svg = svg\n        })\n        .catch(() => {\n          this.svg = \"\"\n        })\n    }\n  }\n\n  render() {\n    // if a label is supplied, we give the div a role of img.\n    // without this we could not use aria-label, since it is only valid on elements of certain roles.\n    // we always hide the inner svg, since the svg does not have any text/title/label itself.\n    return html`\n      <div role=${ifDefined(this.label ? \"img\" : undefined)} aria-label=${ifDefined(this.label)}>\n        <slot style=${ifDefined(this.color ? `color:${this.color}` : undefined)} aria-hidden=\"true\">\n          ${unsafeHTML(this.svg)}\n        </slot>\n      </div>\n    `\n  }\n\n  private resolve(): string | Promise<string> {\n    if (!this.name) {\n      return \"\"\n    }\n\n    if (Icon.registeredIcons.has(this.name)) {\n      return Icon.registeredIcons.get(this.name) as string // we know it is there, so cast to string to keep TS happy.\n    }\n\n    return Icon.resolver(this.name)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-icon\": Icon\n  }\n}\n"],"names":["Icon","DraftComponentMixin","LitElement","constructor","this","static","resolver","Icon_1","iconOrName","icon","name","svg","title","default","Error","registeredIcons","has","set","willUpdate","changedProperties","resolved","resolve","then","catch","render","html","ifDefined","label","undefined","color","unsafeHTML","get","componentStyle","style","fetch","response","text","Map","__decorate","property","reflect","state","customElement"],"mappings":"0zBA0BA,IAAqBA,IAArB,cAAkCC,EAAoBC,IAAtDC,kCA0D+BC,UAAe,GAKfA,UAA8C,IAc1DA,SAAc,GAjE/BC,wBAAwBC,GACtBC,EAAKD,SAAWA,EAiBlBD,oBAAoBG,EAAyDC,GAC3E,IAAIC,EACAC,EAWJ,GAT0B,iBAAfH,GACTE,EAAOF,EACPG,EAAMF,IAENC,EAAOF,EAAWI,MAClBD,EAAMH,EAAWK,UAIdH,EACH,MAAM,IAAII,MAAM,6CAElB,IAAKH,EACH,MAAM,IAAIG,MAAM,0BAGbP,EAAKQ,gBAAgBC,IAAIN,IAC5BH,EAAKQ,gBAAgBE,IAAIP,EAAMC,GA4B1BO,WAAWC,GAClB,IAAKA,EAAkBH,IAAI,QACzB,OAGF,MAAMI,EAAWhB,KAAKiB,UAEE,iBAAbD,EACThB,KAAKO,IAAMS,EAEXA,EACGE,MAAKX,IACJP,KAAKO,IAAMA,KAEZY,OAAM,KACLnB,KAAKO,IAAM,MAKnBa,SAIE,OAAOC,CAAI,cACGC,EAAUtB,KAAKuB,MAAQ,WAAQC,mBAAyBF,EAAUtB,KAAKuB,wBACnED,EAAUtB,KAAKyB,MAAQ,SAASzB,KAAKyB,aAAUD,0BACzDE,EAAW1B,KAAKO,oBAMlBU,UACN,OAAKjB,KAAKM,KAINH,EAAKQ,gBAAgBC,IAAIZ,KAAKM,MACzBH,EAAKQ,gBAAgBgB,IAAI3B,KAAKM,MAGhCH,EAAKD,SAASF,KAAKM,MAPjB,KAjHJV,SAAS,CAACgC,EAAgBC,GAElBjC,WAhBIU,GACnBwB,MAAM,6CAAmExB,SAAYY,MAAKa,GAAYA,EAASC,SAgBhGpC,kBAAkB,IAAIqC,IAsDRC,GAA5BC,EAAS,CAAEC,SAAS,gCAKQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAEZF,GAARG,+BA7EkBzC,OADpB0C,EAAc,cACM1C,SAAAA"}
+{"version":3,"file":"Icon.js","sources":["../src/icon/Icon.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Icon.css\"\n\n// in dev we should just load from node_modules\nconst loadIcon = (name: string) => import(`@nordhealth/icons/lib/assets/${name}.js`).then(({ default: svg }) => svg)\n\n// in prod we should load from the CDN, as a sensible default\nconst loadIconCdn = (name: string) =>\n  fetch(`https://nordcdn.net/ds/icons/${process.env.ICON_VERSION}/assets/${name}.svg`).then(response => response.text())\n\nexport type IconResolver = ((iconName: string) => string) | ((iconName: string) => Promise<string>)\n\n/**\n * Icons are used to provide additional meaning or in places where text label doesn’t fit.\n * Icon component allows you to display an icon from the Nordicons library.\n *\n * @status ready\n * @category image\n */\n@customElement(\"nord-icon\")\nexport default class Icon extends LitElement {\n  static styles = [componentStyle, style]\n\n  private static resolver: IconResolver = process.env.NODE_ENV === \"development\" ? loadIcon : loadIconCdn\n  private static registeredIcons = new Map<string, string>()\n\n  /**\n   * Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\n   * Can return a string synchronously, or a promise of a string.\n   * By default, will load icons from the Nord CDN.\n   * @param resolver The resolver function to register.\n   */\n  static registerResolver(resolver: IconResolver) {\n    Icon.resolver = resolver\n  }\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param icon An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n   * This is intended to be used in cases where you import an icon's entire ES module and register it directly.\n   */\n  static registerIcon(icon: { title: string; default: string }): void\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param name The name of the icon to be registered.\n   * @param icon The SVG string for the icon.\n   */\n  static registerIcon(name: string, icon: string): void\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param iconOrName The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n   * @param icon The SVG string for the icon.\n   */\n  static registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) {\n    let name: string | undefined\n    let svg: string | undefined\n\n    if (typeof iconOrName === \"string\") {\n      name = iconOrName\n      svg = icon\n    } else {\n      name = iconOrName.title\n      svg = iconOrName.default\n    }\n\n    // handle errors\n    if (!name) {\n      throw new Error(\"name is required when registering an icon\")\n    }\n    if (!svg) {\n      throw new Error(\"icon must not be empty\")\n    }\n\n    if (!Icon.registeredIcons.has(name)) {\n      Icon.registeredIcons.set(name, svg)\n    }\n  }\n\n  /**\n   * The name of the icon to display, as defined by nordicons.\n   */\n  @property({ reflect: true }) name: string = \"\"\n\n  /**\n   * The size of the icon.\n   */\n  @property({ reflect: true }) size: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n  /**\n   * The color of the icon.\n   * Can accept any valid CSS color value, including custom properties.\n   */\n  @property({ reflect: true }) color?: string\n\n  /**\n   * An accessible label for the icon.\n   * If no label is supplied, the icon is hidden from assistive technology.\n   */\n  @property({ reflect: true }) label?: string\n\n  @state() private svg: string = \"\"\n\n  override willUpdate(changedProperties: PropertyValues<this>) {\n    if (!changedProperties.has(\"name\")) {\n      return\n    }\n\n    const resolved = this.resolve()\n\n    if (typeof resolved === \"string\") {\n      this.svg = resolved\n    } else {\n      resolved\n        .then(svg => {\n          this.svg = svg\n        })\n        .catch(() => {\n          this.svg = \"\"\n        })\n    }\n  }\n\n  render() {\n    // if a label is supplied, we give the div a role of img.\n    // without this we could not use aria-label, since it is only valid on elements of certain roles.\n    // we always hide the inner svg, since the svg does not have any text/title/label itself.\n    return html`\n      <div role=${ifDefined(this.label ? \"img\" : undefined)} aria-label=${ifDefined(this.label)}>\n        <slot style=${ifDefined(this.color ? `color:${this.color}` : undefined)} aria-hidden=\"true\">\n          ${unsafeHTML(this.svg)}\n        </slot>\n      </div>\n    `\n  }\n\n  private resolve(): string | Promise<string> {\n    if (!this.name) {\n      return \"\"\n    }\n\n    if (Icon.registeredIcons.has(this.name)) {\n      return Icon.registeredIcons.get(this.name) as string // we know it is there, so cast to string to keep TS happy.\n    }\n\n    return Icon.resolver(this.name)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-icon\": Icon\n  }\n}\n"],"names":["Icon","LitElement","constructor","this","static","resolver","Icon_1","iconOrName","icon","name","svg","title","default","Error","registeredIcons","has","set","willUpdate","changedProperties","resolved","resolve","then","catch","render","html","ifDefined","label","undefined","color","unsafeHTML","get","componentStyle","style","fetch","response","text","Map","__decorate","property","reflect","state","customElement"],"mappings":"kzBAyBA,IAAqBA,IAArB,cAAkCC,EAAlCC,kCA+D+BC,UAAe,GAKfA,UAA8C,IAc1DA,SAAc,GAtE/BC,wBAAwBC,GACtBC,EAAKD,SAAWA,EAsBlBD,oBAAoBG,EAAyDC,GAC3E,IAAIC,EACAC,EAWJ,GAT0B,iBAAfH,GACTE,EAAOF,EACPG,EAAMF,IAENC,EAAOF,EAAWI,MAClBD,EAAMH,EAAWK,UAIdH,EACH,MAAM,IAAII,MAAM,6CAElB,IAAKH,EACH,MAAM,IAAIG,MAAM,0BAGbP,EAAKQ,gBAAgBC,IAAIN,IAC5BH,EAAKQ,gBAAgBE,IAAIP,EAAMC,GA4B1BO,WAAWC,GAClB,IAAKA,EAAkBH,IAAI,QACzB,OAGF,MAAMI,EAAWhB,KAAKiB,UAEE,iBAAbD,EACThB,KAAKO,IAAMS,EAEXA,EACGE,MAAKX,IACJP,KAAKO,IAAMA,KAEZY,OAAM,KACLnB,KAAKO,IAAM,MAKnBa,SAIE,OAAOC,CAAI,cACGC,EAAUtB,KAAKuB,MAAQ,WAAQC,mBAAyBF,EAAUtB,KAAKuB,wBACnED,EAAUtB,KAAKyB,MAAQ,SAASzB,KAAKyB,aAAUD,0BACzDE,EAAW1B,KAAKO,oBAMlBU,UACN,OAAKjB,KAAKM,KAINH,EAAKQ,gBAAgBC,IAAIZ,KAAKM,MACzBH,EAAKQ,gBAAgBgB,IAAI3B,KAAKM,MAGhCH,EAAKD,SAASF,KAAKM,MAPjB,KAtHJT,SAAS,CAAC+B,EAAgBC,GAElBhC,WAhBIS,GACnBwB,MAAM,6CAAmExB,SAAYY,MAAKa,GAAYA,EAASC,SAgBhGnC,kBAAkB,IAAIoC,IA2DRC,GAA5BC,EAAS,CAAEC,SAAS,gCAKQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAEZF,GAARG,+BAlFkBxC,OADpByC,EAAc,cACMzC,SAAAA"}

package/lib/Input.js

@@ -1,2 +1,2 @@
-import{D as e,_ as t,n as i}from"./DraftComponentMixin-30345acf.js";import{r as s,w as r,$ as o,s as n}from"./lit-element-9646ab7e.js";import{e as a}from"./property-03f59dce.js";import{l}from"./if-defined-2a4c6dbc.js";import{n as d}from"./ref-eb5cfa10.js";import{o as p}from"./unsafe-html-4da54dd2.js";import{F as c}from"./FocusableMixin-98e13999.js";import{F as m}from"./FormAssociatedMixin-e146e0ab.js";import{I as h}from"./InputMixin-33bc2df5.js";import{s as f}from"./Component-a19be7c9.js";import{s as b}from"./FormField-b1c18e6e.js";import{s as u}from"./TextField-b4155167.js";import{S as v}from"./SlotController-5bfc47d1.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const y=s`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}slot[name=before]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;color:var(--n-color-icon)}slot[name=before]:not([hidden])+.n-input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-s);inline-size:var(--n-size-icon-s)}`;let $=class extends(m(h(c(e(n))))){constructor(){super(...arguments),this.beforeSlot=new v(this,"before"),this.type="text"}render(){var e;const t="search"===this.type||this.beforeSlot.hasContent,i="number"===this.type,s="search"===this.type?p('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):r;return o`${this.renderLabel()}<div class="n-input-container"><slot name="before" ?hidden="${!t}">${s}</slot><input ${d(this.focusableRef)} id="${this.inputId}" class="n-input" type="${i?"text":this.type}" inputmode="${l(i?"numeric":void 0)}" pattern="${l(i?"[0-9]*":void 0)}" ?disabled="${this.disabled}" ?required="${this.required}" name="${l(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${l(this.placeholder)}" @input="${this.handleInput}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${l(this.getDescribedBy())}" aria-invalid="${l(this.getInvalid())}" spellcheck="false"></div>${this.renderError()}`}handleKeydown(e){var t;"Enter"===e.key&&this.form&&(null===(t=this.form.querySelector('button[type="submit"]'))||void 0===t||t.click())}};$.styles=[f,b,u,y],t([a()],$.prototype,"type",void 0),$=t([i("nord-input")],$);var j=$;export{j as default};
+import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,w as s,$ as n,s as r}from"./lit-element-74b6bb4b.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe657a02.js";import{n as l}from"./ref-7d028e3a.js";import{o as d}from"./unsafe-html-989a642b.js";import{F as p}from"./FocusableMixin-ebb67709.js";import{F as m}from"./FormAssociatedMixin-1f97ed66.js";import{I as c}from"./InputMixin-94d15730.js";import{s as h}from"./Component-9d373ef3.js";import{s as u}from"./FormField-50bd73d5.js";import{s as f}from"./TextField-ece1c786.js";import{S as v}from"./SlotController-683d0e7c.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const b=i`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.n-input-container{font-size:var(--n-font-size-m)}slot[name=start]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;color:var(--n-color-icon)}slot[name=start]:not([hidden])+.n-input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-s)!important;inline-size:var(--n-size-icon-s)!important}`;let y=class extends(m(c(p(r)))){constructor(){super(...arguments),this.startSlot=new v(this,"start"),this.type="text"}render(){var e;const t="search"===this.type||this.startSlot.hasContent,i="number"===this.type,r="search"===this.type?d('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):s;return n`${this.renderLabel()}<div class="n-input-container"><slot name="${this.startSlot.slotName}" ?hidden="${!t}">${r}</slot><input ${l(this.focusableRef)} id="${this.inputId}" class="n-input" type="${i?"text":this.type}" inputmode="${a(i?"numeric":void 0)}" pattern="${a(i?"[0-9]*":void 0)}" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInput}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false"></div>${this.renderError()}`}handleKeydown(e){var t;"Enter"===e.key&&this.form&&(null===(t=this.form.querySelector('button[type="submit"]'))||void 0===t||t.click())}};y.styles=[h,u,f,b],e([o()],y.prototype,"type",void 0),y=e([t("nord-input")],y);var $=y;export{$ as default};
 //# sourceMappingURL=Input.js.map

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/input/Input.ts","../../icons/lib/assets/navigation-search.js"],"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 { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.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 \"./Input.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n *\n * @status draft\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 * @slot before - Optional slot that holds an icon for the input.\n */\n@customElement(\"nord-input\")\nexport default class Input extends FormAssociatedMixin(InputMixin(FocusableMixin(DraftComponentMixin(LitElement)))) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  private beforeSlot = new SlotController(this, \"before\")\n\n  /**\n   * The type of the input.\n   */\n  @property() type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" = \"text\"\n\n  render() {\n    const hasIcon = this.type === \"search\" || this.beforeSlot.hasContent\n    const isNumber = this.type === \"number\"\n    const defaultIcon = this.type === \"search\" ? unsafeHTML(searchIcon) : nothing\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <slot name=\"before\" ?hidden=${!hasIcon}>${defaultIcon}</slot>\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          type=${isNumber ? \"text\" : this.type}\n          inputmode=${ifDefined(isNumber ? \"numeric\" : undefined)}\n          pattern=${ifDefined(isNumber ? \"[0-9]*\" : undefined)}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @input=${this.handleInput}\n          @change=${this.handleChange}\n          @keydown=${this.handleKeydown}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          spellcheck=\"false\"\n        />\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key === \"Enter\" && this.form) {\n      this.form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)?.click()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-input\": Input\n  }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n"],"names":["Input","FormAssociatedMixin","InputMixin","FocusableMixin","DraftComponentMixin","LitElement","constructor","this","SlotController","render","hasIcon","type","beforeSlot","hasContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","ref","focusableRef","inputId","ifDefined","undefined","disabled","required","name","value","placeholder","handleInput","handleChange","handleKeydown","getDescribedBy","getInvalid","renderError","e","key","form","querySelector","click","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","customElement"],"mappings":"ksCA8BA,IAAqBA,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,EAAoBC,OAArGC,kCAGUC,gBAAa,IAAIC,EAAeD,KAAM,UAKlCA,UAA4E,OAExFE,eACE,MAAMC,EAAwB,WAAdH,KAAKI,MAAqBJ,KAAKK,WAAWC,WACpDC,EAAyB,WAAdP,KAAKI,KAChBI,EAA4B,WAAdR,KAAKI,KAAoBK,EC3ClC,iQD2C2DC,EAEtE,OAAOC,CAAI,GACPX,KAAKY,6EAG0BT,MAAWK,kBAEtCK,EAAIb,KAAKc,qBACNd,KAAKe,kCAEHR,EAAW,OAASP,KAAKI,oBACpBY,EAAUT,EAAW,eAAYU,gBACnCD,EAAUT,EAAW,cAAWU,kBAC9BjB,KAAKkB,wBACLlB,KAAKmB,mBACVH,EAAUhB,KAAKoB,4BACbpB,KAAKqB,qBAAS,oBACTL,EAAUhB,KAAKsB,yBACpBtB,KAAKuB,yBACJvB,KAAKwB,2BACJxB,KAAKyB,oCACGT,EAAUhB,KAAK0B,oCACnBV,EAAUhB,KAAK2B,2CAKhC3B,KAAK4B,gBAIHH,cAAcI,SACN,UAAVA,EAAEC,KAAmB9B,KAAK+B,iBAC5B/B,KAAK+B,KAAKC,cAAiC,yCAA0BC,WA9ClExC,SAAS,CAACyC,EAAgBC,EAAgBC,EAAgBC,GAOrDC,GAAXC,gCARkB9C,KADpB+C,EAAc,eACM/C,SAAAA"}
+{"version":3,"file":"Input.js","sources":["../src/input/Input.ts","../../icons/lib/assets/navigation-search.js"],"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 { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\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 textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Input.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\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 * @slot start - Optional slot used to place an icon at the start of the input.\n */\n@customElement(\"nord-input\")\nexport default class Input extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  private startSlot = new SlotController(this, \"start\")\n\n  /**\n   * The type of the input.\n   */\n  @property() type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" = \"text\"\n\n  render() {\n    const hasIcon = this.type === \"search\" || this.startSlot.hasContent\n    const isNumber = this.type === \"number\"\n    const defaultIcon = this.type === \"search\" ? unsafeHTML(searchIcon) : nothing\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <slot name=${this.startSlot.slotName} ?hidden=${!hasIcon}>${defaultIcon}</slot>\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          type=${isNumber ? \"text\" : this.type}\n          inputmode=${ifDefined(isNumber ? \"numeric\" : undefined)}\n          pattern=${ifDefined(isNumber ? \"[0-9]*\" : undefined)}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @input=${this.handleInput}\n          @change=${this.handleChange}\n          @keydown=${this.handleKeydown}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          spellcheck=\"false\"\n        />\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key === \"Enter\" && this.form) {\n      this.form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)?.click()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-input\": Input\n  }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n"],"names":["Input","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","SlotController","render","hasIcon","type","startSlot","hasContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","slotName","ref","focusableRef","inputId","ifDefined","undefined","disabled","required","name","value","placeholder","handleInput","handleChange","handleKeydown","getDescribedBy","getInvalid","renderError","e","key","form","querySelector","click","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","customElement"],"mappings":"swCA6BA,IAAqBA,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,MAAjFC,kCAGUC,eAAY,IAAIC,EAAeD,KAAM,SAKjCA,UAA4E,OAExFE,eACE,MAAMC,EAAwB,WAAdH,KAAKI,MAAqBJ,KAAKK,UAAUC,WACnDC,EAAyB,WAAdP,KAAKI,KAChBI,EAA4B,WAAdR,KAAKI,KAAoBK,EC1ClC,iQD0C2DC,EAEtE,OAAOC,CAAI,GACPX,KAAKY,2DAGQZ,KAAKK,UAAUQ,uBAAqBV,MAAWK,kBAExDM,EAAId,KAAKe,qBACNf,KAAKgB,kCAEHT,EAAW,OAASP,KAAKI,oBACpBa,EAAUV,EAAW,eAAYW,gBACnCD,EAAUV,EAAW,cAAWW,kBAC9BlB,KAAKmB,wBACLnB,KAAKoB,mBACVH,EAAUjB,KAAKqB,4BACbrB,KAAKsB,qBAAS,oBACTL,EAAUjB,KAAKuB,yBACpBvB,KAAKwB,yBACJxB,KAAKyB,2BACJzB,KAAK0B,oCACGT,EAAUjB,KAAK2B,oCACnBV,EAAUjB,KAAK4B,2CAKhC5B,KAAK6B,gBAIHH,cAAcI,SACN,UAAVA,EAAEC,KAAmB/B,KAAKgC,iBAC5BhC,KAAKgC,KAAKC,cAAiC,yCAA0BC,WA9ClExC,SAAS,CAACyC,EAAgBC,EAAgBC,EAAgBC,GAOrDC,GAAXC,gCARkB9C,KADpB+C,EAAc,eACM/C,SAAAA"}

package/lib/InputMixin-94d15730.js

@@ -0,0 +1,2 @@
+import{_ as e}from"./query-assigned-elements-37b095c4.js";import{e as o}from"./property-03f59dce.js";function t(t){class r extends t{constructor(){super(...arguments),this.disabled=!1,this.value=""}get form(){return this.closest("form")||void 0}}return e([o({type:Boolean,reflect:!0})],r.prototype,"disabled",void 0),e([o()],r.prototype,"name",void 0),e([o()],r.prototype,"value",void 0),r}export{t as I};
+//# sourceMappingURL=InputMixin-94d15730.js.map

package/lib/{InputMixin-33bc2df5.js.map → InputMixin-94d15730.js.map}

@@ -1 +1 @@
-{"version":3,"file":"InputMixin-33bc2df5.js","sources":["../src/common/mixins/InputMixin.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 InputMixinInterface {\n  name: string\n  value: string\n  disabled: boolean\n  form?: HTMLFormElement\n}\n\nexport function InputMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<InputMixinInterface> & T {\n  class InputElement extends superClass {\n    /**\n     * Makes the component disabled. This prevents users from\n     * being able to interact with the component, and conveys\n     * its inactive state to assistive technologies.\n     */\n    @property({ type: Boolean, reflect: true }) disabled = false\n\n    /**\n     * The name of the form component.\n     */\n    @property() name?: string\n\n    /**\n     * The value of the form component.\n     */\n    @property() value: string = \"\"\n\n    /**\n     * Gets the form, if any, associated with the form element.\n     */\n    protected get form() {\n      return this.closest(\"form\") || undefined\n    }\n  }\n\n  return InputElement as unknown as Constructor<InputMixinInterface> & T\n}\n"],"names":["InputMixin","superClass","InputElement","constructor","this","form","closest","undefined","__decorate","property","type","Boolean","reflect"],"mappings":"0GAagBA,EAA8CC,GAC5D,MAAMC,UAAqBD,EAA3BE,kCAM8CC,eAAW,EAU3CA,WAAgB,GAKdC,WACZ,OAAOD,KAAKE,QAAQ,cAAWC,GAInC,OApB8CC,GAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,oCAKxBJ,GAAXC,gCAKWD,GAAXC,iCAUIP"}
+{"version":3,"file":"InputMixin-94d15730.js","sources":["../src/common/mixins/InputMixin.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 InputMixinInterface {\n  name: string\n  value: string\n  disabled: boolean\n  form?: HTMLFormElement\n}\n\nexport function InputMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<InputMixinInterface> & T {\n  class InputElement extends superClass {\n    /**\n     * Makes the component disabled. This prevents users from\n     * being able to interact with the component, and conveys\n     * its inactive state to assistive technologies.\n     */\n    @property({ type: Boolean, reflect: true }) disabled = false\n\n    /**\n     * The name of the form component.\n     */\n    @property() name?: string\n\n    /**\n     * The value of the form component.\n     */\n    @property() value: string = \"\"\n\n    /**\n     * Gets the form, if any, associated with the form element.\n     */\n    protected get form() {\n      return this.closest(\"form\") || undefined\n    }\n  }\n\n  return InputElement as unknown as Constructor<InputMixinInterface> & T\n}\n"],"names":["InputMixin","superClass","InputElement","constructor","this","form","closest","undefined","__decorate","property","type","Boolean","reflect"],"mappings":"8GAagBA,EAA8CC,GAC5D,MAAMC,UAAqBD,EAA3BE,kCAM8CC,eAAW,EAU3CA,WAAgB,GAKdC,WACZ,OAAOD,KAAKE,QAAQ,cAAWC,GAInC,OApB8CC,GAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,oCAKxBJ,GAAXC,gCAKWD,GAAXC,iCAUIP"}

package/lib/Layout.js

@@ -1,2 +1,2 @@
-import{D as n,_ as t,n as a}from"./DraftComponentMixin-30345acf.js";import{r as o,$ as e,s as i}from"./lit-element-9646ab7e.js";import{s}from"./Component-a19be7c9.js";const l=o`:host{--nav-width:250px;background:var(--n-color-background);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{inset-block-start:0;min-block-size:100%;position:absolute}.n-layout-nav{position:fixed;transition:transform .3s ease;user-select:none;inline-size:var(--nav-width);z-index:2;inset-block-start:0;inset-inline-start:0;inset-block-end:0}.n-layout-main{inset-inline-end:0;z-index:1;transition:width .2s ease;inline-size:calc(100% - var(--nav-width))}main{padding:var(--n-space-l)}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let r=class extends(n(i)){render(){return e`<div class="n-layout"><div class="n-layout-nav"><slot name="nav"></slot></div><div class="n-layout-main"><slot name="header"></slot><main><slot></slot></main></div></div>`}};r.styles=[s,l],r=t([a("nord-layout")],r);var d=r;export{d as default};
+import{_ as n,n as t}from"./query-assigned-elements-37b095c4.js";import{r as a,$ as o,s as e}from"./lit-element-74b6bb4b.js";import{D as i}from"./DraftComponentMixin-9e4b7b34.js";import{s}from"./Component-9d373ef3.js";const r=a`:host{--n-nav-width:250px;background:var(--n-color-background);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--n-color-background);inset-block-start:0;min-block-size:100%;position:absolute}.n-layout-nav{position:fixed;transition:transform .3s ease;user-select:none;inline-size:var(--n-nav-width);z-index:2;inset-block-start:0;inset-inline-start:0;inset-block-end:0}@media (max-width:768px){.n-layout-nav{transform:translateX(-100%)}}.n-layout-main{inset-inline-end:0;z-index:1;transition:width .2s ease;inline-size:calc(100% - var(--n-nav-width))}@media (max-width:768px){.n-layout-main{inline-size:100%}}main{padding:var(--n-space-l)}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let l=class extends(i(e)){render(){return o`<div class="n-layout"><div class="n-layout-nav"><slot name="nav"></slot></div><div class="n-layout-main"><slot name="header"></slot><main><slot></slot></main></div></div>`}};l.styles=[s,r],l=n([t("nord-layout")],l);var d=l;export{d as default};
 //# sourceMappingURL=Layout.js.map