@nordhealth/components 1.13.1 → 1.14.2

package/lib/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\n\nimport type Popout from \"../popout/Popout.js\"\nimport \"../popout/Popout.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Dropdown.css\"\n\n/**\n * Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n *\n * @status ready\n * @category action\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n */\n@customElement(\"nord-dropdown\")\nexport default class Dropdown extends LitElement implements Pick<Popout, \"hide\" | \"show\"> {\n  static styles = [componentStyle, style]\n\n  /**\n   * we delegate focus, to ensure focus does not move to body if you click\n   * some whitespace or a dropdown-group heading, as this would close the dropdown\n   * @internal\n   */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n  @query(\"nord-popout\", true) private popout!: Popout\n\n  /**\n   * Set the alignment of the dropdown in relation to the toggle depending on the position.\n   * `start` will align the left of the dropdown to the left of the toggle.\n   * `end` will align the right of the dropdown to the right of the toggle.\n   * A dropdown with a set position of `inline-start` or `inline-end` will switch\n   * `start` and `end` to the top and bottom of the dropdown respectively.\n   */\n  @property({ reflect: true }) align?: Popout[\"align\"]\n\n  /**\n   * Set the position of the dropdown in relation to the toggle.\n   * Options follow logical properties.\n   * `block-start` and `block-end` referring to top and bottom respectively,\n   * `inline-start` and `inline-end` referring to left and right respectively.\n   */\n  @property({ reflect: true }) position?: Popout[\"position\"]\n\n  /**\n   * Controls whether the toggle slot expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const toggle = this.querySelector(`[slot=\"toggle\"]`)\n    toggle?.setAttribute(\"aria-haspopup\", \"true\")\n  }\n\n  hide(moveFocusToButton?: boolean) {\n    this.popout.hide(moveFocusToButton)\n  }\n\n  show() {\n    this.popout.show()\n  }\n\n  render() {\n    return html`\n      <div class=\"n-dropdown\" @focusout=${this.handleBlur}>\n        <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n        <nord-popout\n          id=\"popout\"\n          align=${ifDefined(this.align)}\n          position=${ifDefined(this.position)}\n          @open=${this.handleOpen}\n        >\n          <div class=\"n-dropdown-content\">\n            <slot></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private handleBlur(e: FocusEvent) {\n    const relatedTarget = e.relatedTarget as Node\n\n    // safari will set relatedTarget to null when clicking on the trigger button\n    // because it doesn't focus buttons on click.\n    // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n    // so we only run this logic if relatedTarget is set, which sidesteps this issue\n    if (relatedTarget && !this.contains(relatedTarget)) {\n      this.popout.hide(false)\n    }\n  }\n\n  private handleOpen() {\n    this.querySelector(\"nord-dropdown-item\")?.focus()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown\": Dropdown\n  }\n}\n"],"names":["Dropdown","LitElement","constructor","this","expand","connectedCallback","super","toggle","querySelector","setAttribute","hide","moveFocusToButton","popout","show","render","html","handleBlur","ifDefined","align","position","handleOpen","e","relatedTarget","contains","_a","focus","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","reflect","type","Boolean","customElement"],"mappings":"6rCAqBA,IAAqBA,EAArB,cAAsCC,EAAtCC,kCAgC8CC,KAAMC,QAAG,EAErDC,oBACEC,MAAMD,oBAEN,MAAME,EAASJ,KAAKK,cAAc,mBAClCD,SAAAA,EAAQE,aAAa,gBAAiB,QAGxCC,KAAKC,GACHR,KAAKS,OAAOF,KAAKC,GAGnBE,OACEV,KAAKS,OAAOC,OAGdC,SACE,OAAOC,CAAI,sCAC2BZ,KAAKa,iGAI7BC,EAAUd,KAAKe,qBACZD,EAAUd,KAAKgB,qBAClBhB,KAAKiB,sFAUbJ,WAAWK,GACjB,MAAMC,EAAgBD,EAAEC,cAMpBA,IAAkBnB,KAAKoB,SAASD,IAClCnB,KAAKS,OAAOF,MAAK,GAIbU,mBACkC,QAAxCI,EAAArB,KAAKK,cAAc,6BAAqB,IAAAgB,GAAAA,EAAEC,UA/ErCzB,EAAA0B,OAAS,CAACC,EAAgBC,GAO1B5B,EAAiB6B,kBAAG,IAAK5B,EAAW4B,kBAAmBC,gBAAgB,GAElDC,EAAA,CAA3BC,EAAM,eAAe,IAA6BhC,EAAAiC,UAAA,cAAA,GAStBF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAA+BnC,EAAAiC,UAAA,aAAA,GAQvBF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAqCnC,EAAAiC,UAAA,gBAAA,GAKdF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBrC,EAAAiC,UAAA,cAAA,GAhCvCjC,EAAQ+B,EAAA,CAD5BO,EAAc,kBACMtC,SAAAA"}
+{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\n\nimport type Popout from \"../popout/Popout.js\"\nimport \"../popout/Popout.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Dropdown.css\"\n\n/**\n * Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n *\n * @status ready\n * @category action\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n */\n@customElement(\"nord-dropdown\")\nexport default class Dropdown extends LitElement implements Pick<Popout, \"hide\" | \"show\"> {\n  static styles = [componentStyle, style]\n\n  /**\n   * we delegate focus, to ensure focus does not move to body if you click\n   * some whitespace or a dropdown-group heading, as this would close the dropdown\n   * @internal\n   */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n  @query(\"nord-popout\", true) private popout!: Popout\n\n  /**\n   * Set the alignment of the dropdown in relation to the toggle depending on the position.\n   * `start` will align the left of the dropdown to the left of the toggle.\n   * `end` will align the right of the dropdown to the right of the toggle.\n   * A dropdown with a set position of `inline-start` or `inline-end` will switch\n   * `start` and `end` to the top and bottom of the dropdown respectively.\n   */\n  @property({ reflect: true }) align?: Popout[\"align\"]\n\n  /**\n   * Set the position of the dropdown in relation to the toggle.\n   * Options follow logical properties.\n   * `block-start` and `block-end` referring to top and bottom respectively,\n   * `inline-start` and `inline-end` referring to left and right respectively.\n   */\n  @property({ reflect: true }) position?: Popout[\"position\"]\n\n  /**\n   * Controls whether the toggle slot expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * The size of the dropdown. This affects the minimum and maximum inline-size\n   * of the dropdown.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const toggle = this.querySelector(`[slot=\"toggle\"]`)\n    toggle?.setAttribute(\"aria-haspopup\", \"true\")\n  }\n\n  hide(moveFocusToButton?: boolean) {\n    this.popout.hide(moveFocusToButton)\n  }\n\n  show() {\n    this.popout.show()\n  }\n\n  render() {\n    return html`\n      <div class=\"n-dropdown\" @focusout=${this.handleBlur}>\n        <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n        <nord-popout\n          id=\"popout\"\n          align=${ifDefined(this.align)}\n          position=${ifDefined(this.position)}\n          @open=${this.handleOpen}\n        >\n          <div class=\"n-dropdown-content\">\n            <slot></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private handleBlur(e: FocusEvent) {\n    const relatedTarget = e.relatedTarget as Node\n\n    // safari will set relatedTarget to null when clicking on the trigger button\n    // because it doesn't focus buttons on click.\n    // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n    // so we only run this logic if relatedTarget is set, which sidesteps this issue\n    if (relatedTarget && !this.contains(relatedTarget)) {\n      this.popout.hide(false)\n    }\n  }\n\n  private handleOpen() {\n    this.querySelector(\"nord-dropdown-item\")?.focus()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown\": Dropdown\n  }\n}\n"],"names":["Dropdown","LitElement","constructor","this","expand","size","connectedCallback","super","toggle","querySelector","setAttribute","hide","moveFocusToButton","popout","show","render","html","handleBlur","ifDefined","align","position","handleOpen","e","relatedTarget","contains","_a","focus","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","reflect","type","Boolean","customElement"],"mappings":"84CAqBA,IAAqBA,EAArB,cAAsCC,EAAtCC,kCAgC8CC,KAAMC,QAAG,EAMxBD,KAAIE,KAAoB,GAkDtD,CAhDCC,oBACEC,MAAMD,oBAEN,MAAME,EAASL,KAAKM,cAAc,mBAClCD,SAAAA,EAAQE,aAAa,gBAAiB,OACvC,CAEDC,KAAKC,GACHT,KAAKU,OAAOF,KAAKC,EAClB,CAEDE,OACEX,KAAKU,OAAOC,MACb,CAEDC,SACE,OAAOC,CAAI,sCAC2Bb,KAAKc,iGAI7BC,EAAUf,KAAKgB,qBACZD,EAAUf,KAAKiB,qBAClBjB,KAAKkB,qFAQpB,CAEOJ,WAAWK,GACjB,MAAMC,EAAgBD,EAAEC,cAMpBA,IAAkBpB,KAAKqB,SAASD,IAClCpB,KAAKU,OAAOF,MAAK,EAEpB,CAEOU,mBACkC,QAAxCI,EAAAtB,KAAKM,cAAc,6BAAqB,IAAAgB,GAAAA,EAAEC,OAC3C,GAtFM1B,EAAA2B,OAAS,CAACC,EAAgBC,GAO1B7B,EAAiB8B,kBAAG,IAAK7B,EAAW6B,kBAAmBC,gBAAgB,GAElDC,EAAA,CAA3BC,EAAM,eAAe,IAA6BjC,EAAAkC,UAAA,cAAA,GAStBF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAA+BpC,EAAAkC,UAAA,aAAA,GAQvBF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAqCpC,EAAAkC,UAAA,gBAAA,GAKdF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBtC,EAAAkC,UAAA,cAAA,GAM7BF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAmCpC,EAAAkC,UAAA,YAAA,GAtCrClC,EAAQgC,EAAA,CAD5BO,EAAc,kBACMvC,SAAAA"}

package/lib/DropdownGroup.js

@@ -1,2 +1,2 @@
-import{_ as e,n as o}from"./query-assigned-elements-ef860822.js";import{r as n,s as r,$ as d,w as a}from"./lit-element-67e6cd99.js";import{e as i}from"./property-03f59dce.js";import{s}from"./Component-5a0a26a0.js";const t=n`:host{--n-dropdown-item-margin:0}.n-dropdown-group-heading{font-size:var(--n-font-size-xs);font-weight:var(--n-font-weight-heading);color:var(--n-color-text-weaker);padding:calc(var(--n-space-s)/ 2) var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width:35.9375em){.n-dropdown-group-heading{padding:calc(var(--n-space-s)/ 1.5) var(--n-space-m)}}.n-dropdown-group-content{display:flex;flex-direction:column}`;let p=class extends r{render(){return d`<div class="n-dropdown-group">${this.heading?d`<p id="heading" aria-hidden="true" class="n-dropdown-group-heading">${this.heading}</p>`:a}<div class="n-dropdown-group-content" role="group" aria-labelledby="${this.heading?"heading":a}"><slot></slot></div></div>`}};p.styles=[s,t],e([i()],p.prototype,"heading",void 0),p=e([o("nord-dropdown-group")],p);var l=p;export{l as default};
+import{_ as e,e as o}from"./query-assigned-elements-e6cbac30.js";import{i as n,s as r,y as d,b as a}from"./lit-element-79bc2e0e.js";import{e as i}from"./property-03f59dce.js";import{s}from"./Component-49a41387.js";const t=n`:host{--n-dropdown-item-margin:0}.n-dropdown-group-heading{font-size:var(--n-font-size-xs);font-weight:var(--n-font-weight-heading);color:var(--n-color-text-weaker);padding:calc(var(--n-space-s)/ 2) var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width:35.9375em){.n-dropdown-group-heading{padding:calc(var(--n-space-s)/ 1.5) var(--n-space-m)}}.n-dropdown-group-content{display:flex;flex-direction:column}`;let p=class extends r{render(){return d`<div class="n-dropdown-group">${this.heading?d`<p id="heading" aria-hidden="true" class="n-dropdown-group-heading">${this.heading}</p>`:a}<div class="n-dropdown-group-content" role="group" aria-labelledby="${this.heading?"heading":a}"><slot></slot></div></div>`}};p.styles=[s,t],e([i()],p.prototype,"heading",void 0),p=e([o("nord-dropdown-group")],p);var l=p;export{l as default};
 //# sourceMappingURL=DropdownGroup.js.map

package/lib/DropdownGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownGroup.js","sources":["../src/dropdown-group/DropdownGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./DropdownGroup.css\"\n\n/**\n * Dropdown group includes all the actions or items in a single dropdown\n * group and is used for grouping items into related categories.\n *\n * @status ready\n * @category action\n * @slot - The dropdown group content.\n */\n@customElement(\"nord-dropdown-group\")\nexport default class DropdownGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * Heading and accessible label for the dropdown group.\n   */\n  @property() heading?: string\n\n  render() {\n    return html`\n      <div class=\"n-dropdown-group\">\n        ${this.heading\n          ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-dropdown-group-heading\">${this.heading}</p>`\n          : nothing}\n        <div class=\"n-dropdown-group-content\" role=\"group\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown-group\": DropdownGroup\n  }\n}\n"],"names":["DropdownGroup","LitElement","render","html","this","heading","nothing","styles","componentStyle","style","__decorate","property","prototype","customElement"],"mappings":"8pBAeA,IAAqBA,EAArB,cAA2CC,EAQzCC,SACE,OAAOC,CAAI,iCAELC,KAAKC,QACHF,CAAI,uEAAuEC,KAAKC,cAChFC,wEACiEF,KAAKC,QAAU,UAAYC,iCAb/FN,EAAAO,OAAS,CAACC,EAAgBC,GAKrBC,EAAA,CAAXC,KAA2BX,EAAAY,UAAA,eAAA,GANTZ,EAAaU,EAAA,CADjCG,EAAc,wBACMb,SAAAA"}
+{"version":3,"file":"DropdownGroup.js","sources":["../src/dropdown-group/DropdownGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./DropdownGroup.css\"\n\n/**\n * Dropdown group includes all the actions or items in a single dropdown\n * group and is used for grouping items into related categories.\n *\n * @status ready\n * @category action\n * @slot - The dropdown group content.\n */\n@customElement(\"nord-dropdown-group\")\nexport default class DropdownGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * Heading and accessible label for the dropdown group.\n   */\n  @property() heading?: string\n\n  render() {\n    return html`\n      <div class=\"n-dropdown-group\">\n        ${this.heading\n          ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-dropdown-group-heading\">${this.heading}</p>`\n          : nothing}\n        <div class=\"n-dropdown-group-content\" role=\"group\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown-group\": DropdownGroup\n  }\n}\n"],"names":["DropdownGroup","LitElement","render","html","this","heading","nothing","styles","componentStyle","style","__decorate","property","prototype","customElement"],"mappings":"8pBAeA,IAAqBA,EAArB,cAA2CC,EAQzCC,SACE,OAAOC,CAAI,iCAELC,KAAKC,QACHF,CAAI,uEAAuEC,KAAKC,cAChFC,wEACiEF,KAAKC,QAAU,UAAYC,8BAKrG,GAlBMN,EAAAO,OAAS,CAACC,EAAgBC,GAKrBC,EAAA,CAAXC,KAA2BX,EAAAY,UAAA,eAAA,GANTZ,EAAaU,EAAA,CADjCG,EAAc,wBACMb,SAAAA"}

package/lib/DropdownItem.js

@@ -1,2 +1,2 @@
-import{_ as o,n as e}from"./query-assigned-elements-ef860822.js";import{r as n,s as r,$ as t}from"./lit-element-67e6cd99.js";import{e as a}from"./property-03f59dce.js";import{l as i}from"./if-defined-fe1a64e3.js";import{n as s}from"./ref-57ff8ffc.js";import{F as d}from"./FocusableMixin-175ea4d7.js";import{s as c}from"./Component-5a0a26a0.js";import"./directive-de55b00a.js";const l=n`:host{display:flex;line-height:var(--n-line-height-tight)}.n-dropdown-item{-webkit-appearance:none;appearance:none;cursor:pointer;display:flex;flex:1;gap:var(--n-space-s);align-items:center;font-family:inherit;font-size:inherit;text-decoration:none;border:0;color:var(--n-color-text);padding:var(--n-space-s);margin:var(--n-dropdown-item-margin,0);border-radius:var(--n-border-radius-s);background:0 0;text-align:start;box-shadow:var(--n-dropdown-item-box-shadow,none);min-inline-size:0}.n-dropdown-item:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-dropdown-item:hover ::slotted(*){color:var(--n-color-text-on-accent)!important}.n-dropdown-item ::slotted(nord-icon){color:var(--n-color-icon)}.n-dropdown-item:hover ::slotted(nord-icon){color:currentColor}.n-dropdown-item:active{opacity:.7}.n-dropdown-item:focus{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-dropdown-item:focus{--n-dropdown-item-box-shadow:none}.n-dropdown-item:focus-visible{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent)}}@media (max-width:35.9375em){.n-dropdown-item{gap:var(--n-space-m);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-dropdown-item ::slotted(nord-icon){block-size:var(--n-size-icon-m);inline-size:var(--n-size-icon-m)}}slot[name=end],slot[name=start]{flex:0 0 auto}slot[name=end]{display:flex;margin-inline-start:auto}.n-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let p=class extends(d(r)){render(){return(this.href?o=>t`<a href="${i(this.href)}" ${s(this.focusableRef)} class="n-dropdown-item">${o}</a>`:o=>t`<button ${s(this.focusableRef)} class="n-dropdown-item">${o}</button>`)(t`<slot name="start"></slot><span class="n-truncate"><slot></slot></span><slot name="end"></slot>`)}};p.styles=[c,l],o([a({reflect:!0})],p.prototype,"href",void 0),p=o([e("nord-dropdown-item")],p);var m=p;export{m as default};
+import{_ as o,e}from"./query-assigned-elements-e6cbac30.js";import{i as n,y as r,s as t}from"./lit-element-79bc2e0e.js";import{e as i}from"./property-03f59dce.js";import{l as a}from"./if-defined-f43b1487.js";import{n as s}from"./ref-697b28b5.js";import{F as d}from"./FocusableMixin-99db12c1.js";import{s as c}from"./Component-49a41387.js";import"./directive-de55b00a.js";const l=n`:host{display:flex;line-height:var(--n-line-height-tight)}.n-dropdown-item{-webkit-appearance:none;appearance:none;cursor:pointer;display:flex;flex:1;gap:var(--n-space-s);align-items:center;font-family:inherit;font-size:inherit;text-decoration:none;border:0;color:var(--n-color-text);padding:var(--n-space-s);margin:var(--n-dropdown-item-margin,0);border-radius:var(--n-border-radius-s);background:0 0;text-align:start;box-shadow:var(--n-dropdown-item-box-shadow,none);min-inline-size:0}.n-dropdown-item:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-dropdown-item:hover ::slotted(*){color:var(--n-color-text-on-accent)!important}.n-dropdown-item ::slotted(nord-icon){color:var(--n-color-icon)}.n-dropdown-item:hover ::slotted(nord-icon){color:currentColor}.n-dropdown-item:active{opacity:.7}.n-dropdown-item:focus{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-dropdown-item:focus{--n-dropdown-item-box-shadow:none}.n-dropdown-item:focus-visible{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent)}}@media (max-width:35.9375em){.n-dropdown-item{gap:var(--n-space-m);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-dropdown-item ::slotted(nord-icon){block-size:var(--n-size-icon-m);inline-size:var(--n-size-icon-m)}}slot[name=end],slot[name=start]{flex:0 0 auto}slot[name=end]{display:flex;margin-inline-start:auto}.n-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let p=class extends(d(t)){render(){return(this.href?o=>r`<a href="${a(this.href)}" ${s(this.focusableRef)} class="n-dropdown-item">${o}</a>`:o=>r`<button ${s(this.focusableRef)} class="n-dropdown-item">${o}</button>`)(r`<slot name="start"></slot><span class="n-truncate"><slot></slot></span><slot name="end"></slot>`)}};p.styles=[c,l],o([i({reflect:!0})],p.prototype,"href",void 0),p=o([e("nord-dropdown-item")],p);var m=p;export{m as default};
 //# sourceMappingURL=DropdownItem.js.map

package/lib/DropdownItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownItem.js","sources":["../src/dropdown-item/DropdownItem.ts"],"sourcesContent":["import { LitElement, html, TemplateResult } 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 { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./DropdownItem.css\"\n\n/**\n * Dropdown item populates dropdown with actions. Items can be\n * placed either inside a dropdown group or directly inside a\n * dropdown component.\n *\n * @status ready\n * @category action\n * @slot - The dropdown item content.\n * @slot start - Used to place content before dropdown item text. Typically used for icons.\n * @slot end - Used to place content after dropdown item text. Typically used for icons.\n */\n@customElement(\"nord-dropdown-item\")\nexport default class DropdownItem extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  /**\n   * The url the dropdown item should link to.\n   */\n  @property({ reflect: true }) href?: string\n\n  render() {\n    const link = (content: TemplateResult) =>\n      html`<a href=${ifDefined(this.href)} ${ref(this.focusableRef)} class=\"n-dropdown-item\">${content}</a>`\n    const button = (content: TemplateResult) =>\n      html`<button ${ref(this.focusableRef)} class=\"n-dropdown-item\">${content}</button>`\n\n    const container = this.href ? link : button\n\n    return container(html`\n      <slot name=\"start\"></slot>\n      <span class=\"n-truncate\"><slot></slot></span>\n      <slot name=\"end\"></slot>\n    `)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown-item\": DropdownItem\n  }\n}\n"],"names":["DropdownItem","FocusableMixin","LitElement","render","this","href","content","html","ifDefined","ref","focusableRef","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"24DAqBA,IAAqBA,EAArB,cAA0CC,EAAeC,IAQvDC,SAQE,OAFkBC,KAAKC,KALTC,GACZC,CAAI,YAAWC,EAAUJ,KAAKC,UAASI,EAAIL,KAAKM,yCAAyCJ,QAC3EA,GACdC,CAAI,WAAWE,EAAIL,KAAKM,yCAAyCJ,cAIlDC,CAAI,qGAfhBP,EAAAW,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBhB,EAAAiB,UAAA,YAAA,GANvBjB,EAAYc,EAAA,CADhCI,EAAc,uBACMlB,SAAAA"}
+{"version":3,"file":"DropdownItem.js","sources":["../src/dropdown-item/DropdownItem.ts"],"sourcesContent":["import { LitElement, html, TemplateResult } 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 { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./DropdownItem.css\"\n\n/**\n * Dropdown item populates dropdown with actions. Items can be\n * placed either inside a dropdown group or directly inside a\n * dropdown component.\n *\n * @status ready\n * @category action\n * @slot - The dropdown item content.\n * @slot start - Used to place content before dropdown item text. Typically used for icons.\n * @slot end - Used to place content after dropdown item text. Typically used for icons.\n */\n@customElement(\"nord-dropdown-item\")\nexport default class DropdownItem extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  /**\n   * The url the dropdown item should link to.\n   */\n  @property({ reflect: true }) href?: string\n\n  render() {\n    const link = (content: TemplateResult) =>\n      html`<a href=${ifDefined(this.href)} ${ref(this.focusableRef)} class=\"n-dropdown-item\">${content}</a>`\n    const button = (content: TemplateResult) =>\n      html`<button ${ref(this.focusableRef)} class=\"n-dropdown-item\">${content}</button>`\n\n    const container = this.href ? link : button\n\n    return container(html`\n      <slot name=\"start\"></slot>\n      <span class=\"n-truncate\"><slot></slot></span>\n      <slot name=\"end\"></slot>\n    `)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown-item\": DropdownItem\n  }\n}\n"],"names":["DropdownItem","FocusableMixin","LitElement","render","this","href","content","html","ifDefined","ref","focusableRef","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"s4DAqBA,IAAqBA,EAArB,cAA0CC,EAAeC,IAQvDC,SAQE,OAFkBC,KAAKC,KALTC,GACZC,CAAI,YAAWC,EAAUJ,KAAKC,UAASI,EAAIL,KAAKM,yCAAyCJ,QAC3EA,GACdC,CAAI,WAAWE,EAAIL,KAAKM,yCAAyCJ,cAIlDC,CAAI,kGAKtB,GApBMP,EAAAW,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBhB,EAAAiB,UAAA,YAAA,GANvBjB,EAAYc,EAAA,CADhCI,EAAc,uBACMlB,SAAAA"}

package/lib/EmptyState.js

@@ -1,2 +1,2 @@
-import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as n,s as a,$ as o}from"./lit-element-67e6cd99.js";import{s as r}from"./Component-5a0a26a0.js";const i=n`:host{background:var(--n-color-surface);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};
+import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i as n,s as a,y as o}from"./lit-element-79bc2e0e.js";import{s as r}from"./Component-49a41387.js";const i=n`:host{background:var(--n-color-surface);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\"\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 ready\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","styles","componentStyle","style","__decorate","customElement"],"mappings":"w+BAgBA,IAAqBA,EAArB,cAAwCC,EAGtCC,SACE,OAAOC,CAAI,mDAHNH,EAAAI,OAAS,CAACC,EAAgBC,GADdN,EAAUO,EAAA,CAD9BC,EAAc,qBACMR,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 ready\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","styles","componentStyle","style","__decorate","customElement"],"mappings":"m+BAgBA,IAAqBA,EAArB,cAAwCC,EAGtCC,SACE,OAAOC,CAAI,gDAGZ,GANMH,EAAAI,OAAS,CAACC,EAAgBC,GADdN,EAAUO,EAAA,CAD9BC,EAAc,qBACMR,SAAAA"}

package/lib/EventController-d99ebeef.js.map

@@ -1 +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","listeners","addController","hostDisconnected","forEach","stop","listen","element","type","listener","options","addEventListener","push","removeEventListener"],"mappings":"MAMaA,EAGXC,YAAYC,GAFJC,KAASC,UAAsB,GAGrCF,EAAKG,cAAcF,MAGrBG,mBACEH,KAAKC,UAAUG,SAAQC,GAAQA,MAC/BL,KAAKC,UAAY,GA+BnBK,OACEC,EACAC,EACAC,EACAC,GAEAH,EAAQI,iBAAiBH,EAAMC,EAAUC,GAGzCV,KAAKC,UAAUW,MADF,IAAML,EAAQM,oBAAoBL,EAAMC,EAAUC"}
+{"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","listeners","addController","hostDisconnected","forEach","stop","listen","element","type","listener","options","addEventListener","push","removeEventListener"],"mappings":"MAMaA,EAGXC,YAAYC,GAFJC,KAASC,UAAsB,GAGrCF,EAAKG,cAAcF,KACpB,CAEDG,mBACEH,KAAKC,UAAUG,SAAQC,GAAQA,MAC/BL,KAAKC,UAAY,EAClB,CA8BDK,OACEC,EACAC,EACAC,EACAC,GAEAH,EAAQI,iBAAiBH,EAAMC,EAAUC,GAGzCV,KAAKC,UAAUW,MADF,IAAML,EAAQM,oBAAoBL,EAAMC,EAAUC,IAEhE"}

package/lib/Fieldset.js

@@ -1,2 +1,2 @@
-import{_ as e,n as r}from"./query-assigned-elements-ef860822.js";import{r as t,s as o,$ as s}from"./lit-element-67e6cd99.js";import{e as n}from"./property-03f59dce.js";import{S as i}from"./SlotController-ea6eff46.js";import{c as l}from"./cond-97c45476.js";import{s as a}from"./Component-5a0a26a0.js";import{s as d}from"./FormField-d3767c2e.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 i(this,"error"),this.hintSlot=new i(this,"hint"),this.label=""}render(){const{hasError:e}=this;return s`<fieldset aria-invalid="${l(e,"true")}" aria-describedby="${l(e,"error")}"><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([n()],m.prototype,"label",void 0),e([n()],m.prototype,"hint",void 0),e([n()],m.prototype,"error",void 0),m=e([r("nord-fieldset")],m);var c=m;export{c as default};
+import{_ as e,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as t,s as o,y as s}from"./lit-element-79bc2e0e.js";import{e as n}from"./property-03f59dce.js";import{S as i}from"./SlotController-ea6eff46.js";import{c as l}from"./cond-0a8d4554.js";import{s as a}from"./Component-49a41387.js";import{s as d}from"./FormField-72062bf1.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 i(this,"error"),this.hintSlot=new i(this,"hint"),this.label=""}render(){const{hasError:e}=this;return s`<fieldset aria-invalid="${l(e,"true")}" aria-describedby="${l(e,"error")}"><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([n()],m.prototype,"label",void 0),e([n()],m.prototype,"hint",void 0),e([n()],m.prototype,"error",void 0),m=e([r("nord-fieldset")],m);var c=m;export{c 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 { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.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 aria-invalid=${cond(hasError, \"true\")} aria-describedby=${cond(hasError, \"error\")}>\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","errorSlot","SlotController","hintSlot","label","render","hasError","html","cond","hasHint","hint","error","Boolean","hasContent","styles","componentStyle","formFieldStyle","style","__decorate","property","prototype","customElement"],"mappings":"odAqBA,IAAqBA,EAArB,cAAsCC,EAAtCC,kCAGUC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAQG,SAAG,IAAID,EAAeF,KAAM,QAKhCA,KAAKI,MAAW,GAY5BC,SACE,MAAMC,SAAEA,GAAaN,KAErB,OAAOO,CAAI,2BACgBC,EAAKF,EAAU,8BAA4BE,EAAKF,EAAU,kFAE1CN,KAAKI,uDAEDJ,KAAKS,8BACxBT,KAAKU,2GAMqCV,KAAKM,gCAChDN,KAAKW,gCAMpBF,cACZ,OAAOG,QAAQZ,KAAKU,OAASV,KAAKG,SAASU,WAG/BP,eACZ,OAAOM,QAAQZ,KAAKW,QAAUX,KAAKC,UAAUY,aA/CxChB,EAAMiB,OAAG,CAACC,EAAgBC,EAAgBC,GAQrCC,EAAA,CAAXC,KAA6BtB,EAAAuB,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBtB,EAAAuB,UAAA,YAAA,GAKbF,EAAA,CAAXC,KAAyBtB,EAAAuB,UAAA,aAAA,GAnBPvB,EAAQqB,EAAA,CAD5BG,EAAc,kBACMxB,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 { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.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 aria-invalid=${cond(hasError, \"true\")} aria-describedby=${cond(hasError, \"error\")}>\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","errorSlot","SlotController","hintSlot","label","render","hasError","html","cond","hasHint","hint","error","Boolean","hasContent","styles","componentStyle","formFieldStyle","style","__decorate","property","prototype","customElement"],"mappings":"odAqBA,IAAqBA,EAArB,cAAsCC,EAAtCC,kCAGUC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAQG,SAAG,IAAID,EAAeF,KAAM,QAKhCA,KAAKI,MAAW,EAyC7B,CA7BCC,SACE,MAAMC,SAAEA,GAAaN,KAErB,OAAOO,CAAI,2BACgBC,EAAKF,EAAU,8BAA4BE,EAAKF,EAAU,kFAE1CN,KAAKI,uDAEDJ,KAAKS,8BACxBT,KAAKU,2GAMqCV,KAAKM,gCAChDN,KAAKW,+BAIjC,CAEaF,cACZ,OAAOG,QAAQZ,KAAKU,OAASV,KAAKG,SAASU,UAC5C,CAEaP,eACZ,OAAOM,QAAQZ,KAAKW,QAAUX,KAAKC,UAAUY,UAC9C,GAhDMhB,EAAMiB,OAAG,CAACC,EAAgBC,EAAgBC,GAQrCC,EAAA,CAAXC,KAA6BtB,EAAAuB,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBtB,EAAAuB,UAAA,YAAA,GAKbF,EAAA,CAAXC,KAAyBtB,EAAAuB,UAAA,aAAA,GAnBPvB,EAAQqB,EAAA,CAD5BG,EAAc,kBACMxB,SAAAA"}

package/lib/{FocusableMixin-175ea4d7.js → FocusableMixin-99db12c1.js}

@@ -1,2 +1,2 @@
-import{e as l}from"./ref-57ff8ffc.js";function u(u){return class extends u{constructor(){super(...arguments),this.focusableRef=l()}focus(l){var u;null===(u=this.focusableRef.value)||void 0===u||u.focus(l)}blur(){var l;null===(l=this.focusableRef.value)||void 0===l||l.blur()}click(){var l;null===(l=this.focusableRef.value)||void 0===l||l.click()}}}export{u as F};
-//# sourceMappingURL=FocusableMixin-175ea4d7.js.map
+import{e as l}from"./ref-697b28b5.js";function u(u){return class extends u{constructor(){super(...arguments),this.focusableRef=l()}focus(l){var u;null===(u=this.focusableRef.value)||void 0===u||u.focus(l)}blur(){var l;null===(l=this.focusableRef.value)||void 0===l||l.blur()}click(){var l;null===(l=this.focusableRef.value)||void 0===l||l.click()}}}export{u as F};
+//# sourceMappingURL=FocusableMixin-99db12c1.js.map

package/lib/{FocusableMixin-175ea4d7.js.map → FocusableMixin-99db12c1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FocusableMixin-175ea4d7.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","focusableRef","createRef","focus","options","_a","value","blur","click"],"mappings":"sCAcM,SAAUA,EAAoDC,GA2BlE,OA1BA,cAA+BA,EAA/BC,kCACYC,KAAYC,aAAGC,IAMzBC,MAAMC,iBACJC,EAAAL,KAAKC,aAAaK,sBAAOH,MAAMC,GAMjCG,aAC2B,QAAzBF,EAAAL,KAAKC,aAAaK,aAAO,IAAAD,GAAAA,EAAAE,OAM3BC,cAC2B,QAAzBH,EAAAL,KAAKC,aAAaK,aAAO,IAAAD,GAAAA,EAAAG"}
+{"version":3,"file":"FocusableMixin-99db12c1.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","focusableRef","createRef","focus","options","_a","value","blur","click"],"mappings":"sCAcM,SAAUA,EAAoDC,GA2BlE,OA1BA,cAA+BA,EAA/BC,kCACYC,KAAYC,aAAGC,GAuB1B,CAjBCC,MAAMC,iBACJC,EAAAL,KAAKC,aAAaK,sBAAOH,MAAMC,EAChC,CAKDG,aAC2B,QAAzBF,EAAAL,KAAKC,aAAaK,aAAO,IAAAD,GAAAA,EAAAE,MAC1B,CAKDC,cAC2B,QAAzBH,EAAAL,KAAKC,aAAaK,aAAO,IAAAD,GAAAA,EAAAG,OAC1B,EAIL"}

package/lib/{FormAssociatedMixin-d0d98a92.js → FormAssociatedMixin-f6e5b3cd.js}

@@ -1,2 +1,2 @@
-import{_ as t}from"./query-assigned-elements-ef860822.js";import{$ as e}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{E as i}from"./EventController-d99ebeef.js";import{S as o}from"./SlotController-ea6eff46.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 i=this.options.value();r&&null!=i&&t.formData.append(r,i)},t.addController(this),this.events=new i(t)}hostConnected(){this.host.form&&this.events.listen(this.host.form,"formdata",this.handleFormData)}}function h(i){class h extends i{constructor(){super(...arguments),this.labelSlot=new o(this,"label"),this.errorSlot=new o(this,"error"),this.hintSlot=new o(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}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),h}export{h as F};
-//# sourceMappingURL=FormAssociatedMixin-d0d98a92.js.map
+import{_ as t}from"./query-assigned-elements-e6cbac30.js";import{y as e}from"./lit-element-79bc2e0e.js";import{e as r}from"./property-03f59dce.js";import{E as i}from"./EventController-d99ebeef.js";import{S as o}from"./SlotController-ea6eff46.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 i=this.options.value();r&&null!=i&&t.formData.append(r,i)},t.addController(this),this.events=new i(t)}hostConnected(){this.host.form&&this.events.listen(this.host.form,"formdata",this.handleFormData)}}function h(i){class h extends i{constructor(){super(...arguments),this.labelSlot=new o(this,"label"),this.errorSlot=new o(this,"error"),this.hintSlot=new o(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}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),h}export{h as F};
+//# sourceMappingURL=FormAssociatedMixin-f6e5b3cd.js.map

package/lib/{FormAssociatedMixin-d0d98a92.js.map → FormAssociatedMixin-f6e5b3cd.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FormAssociatedMixin-d0d98a92.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    host.addController(this)\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    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","handleFormData","e","disabled","name","value","formData","append","addController","events","EventController","hostConnected","form","listen","FormAssociatedMixin","superClass","FormAssociatedElement","labelSlot","SlotController","errorSlot","hintSlot","formValue","inputId","errorId","hintId","label","hideLabel","required","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","prototype","type","attribute"],"mappings":"iUAQaA,EAEXC,YAAoBC,EAA4DC,GAA5DC,KAAIF,KAAJA,EAA4DE,KAAOD,QAAPA,EAWxEC,KAAAC,eAAkBC,IACxB,MAAMC,SAAEA,EAAQC,KAAEA,GAASJ,KAAKF,KAEhC,GAAIK,EACF,OAGF,MAAME,EAAQL,KAAKD,QAAQM,QAEvBD,GAAiB,MAATC,GACVH,EAAEI,SAASC,OAAOH,EAAMC,IApB1BP,EAAKU,cAAcR,MACnBA,KAAKS,OAAS,IAAIC,EAAgBZ,GAGpCa,gBACMX,KAAKF,KAAKc,MACZZ,KAAKS,OAAOI,OAAOb,KAAKF,KAAKc,KAAM,WAAYZ,KAAKC,iBCwBpD,SAAUa,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApClB,kCACYG,KAASiB,UAAG,IAAIC,EAAelB,KAAM,SACrCA,KAASmB,UAAG,IAAID,EAAelB,KAAM,SACrCA,KAAQoB,SAAG,IAAIF,EAAelB,KAAM,QACpCA,KAAAM,SAAW,IAAIV,EAAmBI,KAAM,CAAEK,MAAO,IAAML,KAAKqB,YAM5DrB,KAAOsB,QAAG,QACVtB,KAAOuB,QAAG,QACVvB,KAAMwB,OAAG,OAKPxB,KAAKyB,MAAW,GAU0BzB,KAAS0B,WAAG,EAiBrC1B,KAAQ2B,UAAG,EAtC1BN,gBACZ,OAAOrB,KAAKK,MAuCJuB,YAAY1B,GACpBA,EAAE2B,kBACF,MAAMC,EAAS5B,EAAE4B,OACjB9B,KAAKK,MAAQyB,EAAOzB,MAKpBL,KAAK+B,cAAc,IAAIC,EAAU,UAGzBC,aAAa/B,GACrBA,EAAE2B,kBAKF7B,KAAK+B,cAAc,IAAIC,EAAU,WAGzBE,cACR,MAAMT,EAAQU,CAAI,eACHnC,KAAKsB,+BACKtB,KAAKyB,yDAGOzB,KAAKwB,qBAAmBxB,KAAKoC,8BAC1CpC,KAAKqC,oBAI7B,OAAOrC,KAAK0B,UACRS,CAAI,yBAAyBV,2BAC7BU,CAAI,kCAAkCV,UAGlCa,cACR,OAAOH,CAAI,sCAC2BnC,KAAKuB,mCAAiCvB,KAAKuC,gCACxDvC,KAAKwC,qBAKtBC,iBACR,MAAML,QAAEA,EAAOG,SAAEA,GAAavC,KAE9B,OAAIoC,GAAWG,EACN,GAAGvC,KAAKwB,UAAUxB,KAAKuB,UAE5Ba,EACKpC,KAAKwB,OAEVe,EACKvC,KAAKuB,aADd,EAOQmB,aACR,OAAO1C,KAAKuC,SAAW,YAASI,EAGpBP,cACZ,OAAOQ,QAAQ5C,KAAKqC,OAASrC,KAAKoB,SAASyB,WAG/BN,eACZ,OAAOK,QAAQ5C,KAAKwC,QAAUxC,KAAKmB,UAAU0B,YAIjD,OAtGcC,EAAA,CAAXC,KAA6B/B,EAAAgC,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwB/B,EAAAgC,UAAA,YAAA,GAK6BF,EAAA,CAArDC,EAAS,CAAEE,KAAML,QAASM,UAAW,gBAAiClC,EAAAgC,UAAA,iBAAA,GAK3DF,EAAA,CAAXC,KAA+B/B,EAAAgC,UAAA,mBAAA,GAKpBF,EAAA,CAAXC,KAAyB/B,EAAAgC,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAML,WAA2B5B,EAAAgC,UAAA,gBAAA,GA2ExChC"}
+{"version":3,"file":"FormAssociatedMixin-f6e5b3cd.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    host.addController(this)\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    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","handleFormData","e","disabled","name","value","formData","append","addController","events","EventController","hostConnected","form","listen","FormAssociatedMixin","superClass","FormAssociatedElement","labelSlot","SlotController","errorSlot","hintSlot","formValue","inputId","errorId","hintId","label","hideLabel","required","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","prototype","type","attribute"],"mappings":"iUAQaA,EAEXC,YAAoBC,EAA4DC,GAA5DC,KAAIF,KAAJA,EAA4DE,KAAOD,QAAPA,EAWxEC,KAAAC,eAAkBC,IACxB,MAAMC,SAAEA,EAAQC,KAAEA,GAASJ,KAAKF,KAEhC,GAAIK,EACF,OAGF,MAAME,EAAQL,KAAKD,QAAQM,QAEvBD,GAAiB,MAATC,GACVH,EAAEI,SAASC,OAAOH,EAAMC,EACzB,EArBDP,EAAKU,cAAcR,MACnBA,KAAKS,OAAS,IAAIC,EAAgBZ,EACnC,CAEDa,gBACMX,KAAKF,KAAKc,MACZZ,KAAKS,OAAOI,OAAOb,KAAKF,KAAKc,KAAM,WAAYZ,KAAKC,eAEvD,ECsBG,SAAUa,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApClB,kCACYG,KAASiB,UAAG,IAAIC,EAAelB,KAAM,SACrCA,KAASmB,UAAG,IAAID,EAAelB,KAAM,SACrCA,KAAQoB,SAAG,IAAIF,EAAelB,KAAM,QACpCA,KAAAM,SAAW,IAAIV,EAAmBI,KAAM,CAAEK,MAAO,IAAML,KAAKqB,YAM5DrB,KAAOsB,QAAG,QACVtB,KAAOuB,QAAG,QACVvB,KAAMwB,OAAG,OAKPxB,KAAKyB,MAAW,GAU0BzB,KAAS0B,WAAG,EAiBrC1B,KAAQ2B,UAAG,CAyEzC,CA/GeN,gBACZ,OAAOrB,KAAKK,KACb,CAsCSuB,YAAY1B,GACpBA,EAAE2B,kBACF,MAAMC,EAAS5B,EAAE4B,OACjB9B,KAAKK,MAAQyB,EAAOzB,MAKpBL,KAAK+B,cAAc,IAAIC,EAAU,SAClC,CAESC,aAAa/B,GACrBA,EAAE2B,kBAKF7B,KAAK+B,cAAc,IAAIC,EAAU,UAClC,CAESE,cACR,MAAMT,EAAQU,CAAI,eACHnC,KAAKsB,+BACKtB,KAAKyB,yDAGOzB,KAAKwB,qBAAmBxB,KAAKoC,8BAC1CpC,KAAKqC,oBAI7B,OAAOrC,KAAK0B,UACRS,CAAI,yBAAyBV,2BAC7BU,CAAI,kCAAkCV,SAC3C,CAESa,cACR,OAAOH,CAAI,sCAC2BnC,KAAKuB,mCAAiCvB,KAAKuC,gCACxDvC,KAAKwC,oBAG/B,CAESC,iBACR,MAAML,QAAEA,EAAOG,SAAEA,GAAavC,KAE9B,OAAIoC,GAAWG,EACN,GAAGvC,KAAKwB,UAAUxB,KAAKuB,UAE5Ba,EACKpC,KAAKwB,OAEVe,EACKvC,KAAKuB,aADd,CAKD,CAESmB,aACR,OAAO1C,KAAKuC,SAAW,YAASI,CACjC,CAEaP,cACZ,OAAOQ,QAAQ5C,KAAKqC,OAASrC,KAAKoB,SAASyB,UAC5C,CAEaN,eACZ,OAAOK,QAAQ5C,KAAKwC,QAAUxC,KAAKmB,UAAU0B,UAC9C,EAGH,OAtGcC,EAAA,CAAXC,KAA6B/B,EAAAgC,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwB/B,EAAAgC,UAAA,YAAA,GAK6BF,EAAA,CAArDC,EAAS,CAAEE,KAAML,QAASM,UAAW,gBAAiClC,EAAAgC,UAAA,iBAAA,GAK3DF,EAAA,CAAXC,KAA+B/B,EAAAgC,UAAA,mBAAA,GAKpBF,EAAA,CAAXC,KAAyB/B,EAAAgC,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAML,WAA2B5B,EAAAgC,UAAA,gBAAA,GA2ExChC,CACT"}

package/lib/{FormField-d3767c2e.js → FormField-72062bf1.js}

@@ -1,2 +1,2 @@
-import{r as n}from"./lit-element-67e6cd99.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-d3767c2e.js.map
+import{i as n}from"./lit-element-79bc2e0e.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-72062bf1.js.map

package/lib/FormField-72062bf1.js.map

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

package/lib/Header.js

@@ -1,2 +1,2 @@
-import{_ as e,n as r}from"./query-assigned-elements-ef860822.js";import{r as o,s as n,$ as a}from"./lit-element-67e6cd99.js";import{S as t}from"./SlotController-ea6eff46.js";import{s}from"./Component-5a0a26a0.js";import"./EventController-d99ebeef.js";const d=o`:host{--n-banner-box-shadow:none;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-end{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-end{margin-inline-start:auto;gap:var(--n-space-s)}`;let l=class extends n{constructor(){super(...arguments),this.endSlot=new t(this,"end")}render(){return a`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};l.styles=[s,d],l=e([r("nord-header")],l);var i=l;export{i as default};
+import{_ as e,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as o,s as n,y as a}from"./lit-element-79bc2e0e.js";import{S as t}from"./SlotController-ea6eff46.js";import{s}from"./Component-49a41387.js";import"./EventController-d99ebeef.js";const d=o`:host{--n-banner-box-shadow:none;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-end{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-end{margin-inline-start:auto;gap:var(--n-space-s)}`;let l=class extends n{constructor(){super(...arguments),this.endSlot=new t(this,"end")}render(){return a`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};l.styles=[s,d],l=e([r("nord-header")],l);var i=l;export{i 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 { 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 ready\n * @category structure\n * @slot - The header content.\n * @slot end - Optional slot for buttons, toggles, etc.\n */\n@customElement(\"nord-header\")\nexport default class Header extends LitElement {\n  static styles = [componentStyle, style]\n\n  private endSlot = new SlotController(this, \"end\")\n\n  render() {\n    return html`\n      <header class=\"n-header\">\n        <slot></slot>\n        <div class=\"n-header-end\" ?hidden=${this.endSlot.isEmpty}>\n          <slot name=\"end\"></slot>\n        </div>\n      </header>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-header\": Header\n  }\n}\n"],"names":["Header","LitElement","constructor","this","endSlot","SlotController","render","html","isEmpty","styles","componentStyle","style","__decorate","customElement"],"mappings":"i0BAgBA,IAAqBA,EAArB,cAAoCC,EAApCC,kCAGUC,KAAOC,QAAG,IAAIC,EAAeF,KAAM,OAE3CG,SACE,OAAOC,CAAI,4EAG6BJ,KAAKC,QAAQI,qDARhDR,EAAAS,OAAS,CAACC,EAAgBC,GADdX,EAAMY,EAAA,CAD1BC,EAAc,gBACMb,SAAAA"}
+{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.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 ready\n * @category structure\n * @slot - The header content.\n * @slot end - Optional slot for buttons, toggles, etc.\n */\n@customElement(\"nord-header\")\nexport default class Header extends LitElement {\n  static styles = [componentStyle, style]\n\n  private endSlot = new SlotController(this, \"end\")\n\n  render() {\n    return html`\n      <header class=\"n-header\">\n        <slot></slot>\n        <div class=\"n-header-end\" ?hidden=${this.endSlot.isEmpty}>\n          <slot name=\"end\"></slot>\n        </div>\n      </header>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-header\": Header\n  }\n}\n"],"names":["Header","LitElement","constructor","this","endSlot","SlotController","render","html","isEmpty","styles","componentStyle","style","__decorate","customElement"],"mappings":"i0BAgBA,IAAqBA,EAArB,cAAoCC,EAApCC,kCAGUC,KAAOC,QAAG,IAAIC,EAAeF,KAAM,MAY5C,CAVCG,SACE,OAAOC,CAAI,4EAG6BJ,KAAKC,QAAQI,kDAKtD,GAbMR,EAAAS,OAAS,CAACC,EAAgBC,GADdX,EAAMY,EAAA,CAD1BC,EAAc,gBACMb,SAAAA"}

package/lib/Icon.js

@@ -1,2 +1,2 @@
-import{_ as e,n as s}from"./query-assigned-elements-ef860822.js";import{r as i,s as o,$ as t}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{t as n}from"./state-70f38ceb.js";import{l as a}from"./if-defined-fe1a64e3.js";import{o as c}from"./unsafe-html-61a04601.js";import{o as l}from"./observe-a9c6dfb6.js";import{c as d}from"./cond-97c45476.js";import{s as h}from"./Component-5a0a26a0.js";import"./directive-de55b00a.js";const m=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);min-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 p;let v=p=class extends o{constructor(){super(...arguments),this.name="",this.size="m",this.svg=""}static registerResolver(e){p.resolver=e}static registerIcon(e,s){let i,o;if("string"==typeof e?(i=e,o=s):(i=e.title,o=e.default),!i)throw new Error("name is required when registering an icon");if(!o)throw new Error("icon must not be empty");p.registeredIcons.has(i)||p.registeredIcons.set(i,o)}render(){return t`<div role="${d(this.label,"img")}" style="${d(this.color,`color:${this.color}`)}" aria-label="${a(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${c(this.svg)}</div></div>`}handleNameChange(){this.name?p.registeredIcons.has(this.name)?this.svg=p.registeredIcons.get(this.name):p.resolver(this.name).then((e=>{this.svg=e})).catch((()=>{this.svg=""})):this.svg=""}};v.styles=[h,m],v.resolver=e=>fetch(`https://nordcdn.net/ds/icons/1.4.0/assets/${e}.svg`).then((s=>{if(!s.ok)throw new TypeError(`NORD: unknown icon '${e}'`);return s.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),e([l("name")],v.prototype,"handleNameChange",null),v=p=e([s("nord-icon")],v);var f=v;export{f as default};
+import{_ as e,e as s}from"./query-assigned-elements-e6cbac30.js";import{i,s as o,y as t}from"./lit-element-79bc2e0e.js";import{e as r}from"./property-03f59dce.js";import{t as n}from"./state-70f38ceb.js";import{l as a}from"./if-defined-f43b1487.js";import{o as c}from"./unsafe-html-be8023cd.js";import{o as l}from"./observe-a9c6dfb6.js";import{c as d}from"./cond-0a8d4554.js";import{s as h}from"./Component-49a41387.js";import"./directive-de55b00a.js";const m=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);min-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 p;let v=p=class extends o{constructor(){super(...arguments),this.name="",this.size="m",this.svg=""}static registerResolver(e){p.resolver=e}static registerIcon(e,s){let i,o;if("string"==typeof e?(i=e,o=s):(i=e.title,o=e.default),!i)throw new Error("name is required when registering an icon");if(!o)throw new Error("icon must not be empty");p.registeredIcons.has(i)||p.registeredIcons.set(i,o)}render(){return t`<div role="${d(this.label,"img")}" style="${d(this.color,`color:${this.color}`)}" aria-label="${a(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${c(this.svg)}</div></div>`}handleNameChange(){this.name?p.registeredIcons.has(this.name)?this.svg=p.registeredIcons.get(this.name):p.resolver(this.name).then((e=>{this.svg=e})).catch((()=>{this.svg=""})):this.svg=""}};v.styles=[h,m],v.resolver=e=>fetch(`https://nordcdn.net/ds/icons/1.4.0/assets/${e}.svg`).then((s=>{if(!s.ok)throw new TypeError(`NORD: unknown icon '${e}'`);return s.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),e([l("name")],v.prototype,"handleNameChange",null),v=p=e([s("nord-icon")],v);var f=v;export{f 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 } 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\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Icon.css\"\n\nexport type IconResolver = (iconName: string) => Promise<string>\n\n// in dev we should just load from node_modules\nconst loadIcon: IconResolver = (name: string) =>\n  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: IconResolver = (name: string) =>\n  fetch(`https://nordcdn.net/ds/icons/${process.env.ICON_VERSION}/assets/${name}.svg`).then(response => {\n    if (!response.ok) {\n      throw new TypeError(`NORD: unknown icon '${name}'`)\n    }\n\n    return response.text()\n  })\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 * @slot - The default slot used for placing a custom SVG icon.\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](/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  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\n        role=${cond(this.label, \"img\")}\n        style=${cond(this.color, `color:${this.color}`)}\n        aria-label=${ifDefined(this.label)}\n      >\n        <slot aria-hidden=\"true\"></slot>\n        <div aria-hidden=\"true\">${unsafeHTML(this.svg)}</div>\n      </div>\n    `\n  }\n\n  @observe(\"name\")\n  protected handleNameChange() {\n    if (!this.name) {\n      this.svg = \"\"\n      return\n    }\n\n    if (Icon.registeredIcons.has(this.name)) {\n      this.svg = Icon.registeredIcons.get(this.name) as string\n      return\n    }\n\n    Icon.resolver(this.name)\n      .then(svg => {\n        this.svg = svg\n      })\n      .catch(() => {\n        this.svg = \"\"\n      })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-icon\": Icon\n  }\n}\n"],"names":["Icon","Icon_1","LitElement","constructor","this","name","size","svg","static","resolver","iconOrName","icon","title","default","Error","registeredIcons","has","set","render","html","cond","label","color","ifDefined","unsafeHTML","handleNameChange","get","then","catch","styles","componentStyle","style","fetch","response","ok","TypeError","text","Map","__decorate","property","reflect","prototype","state","observe","customElement"],"mappings":"26BAmCA,IAAqBA,EAAIC,EAAzB,cAAkCC,EAAlCC,kCA+D+BC,KAAIC,KAAW,GAKfD,KAAIE,KAA0C,IAc1DF,KAAGG,IAAW,GAtE/BC,wBAAwBC,GACtBR,EAAKQ,SAAWA,EAsBlBD,oBAAoBE,EAAyDC,GAC3E,IAAIN,EACAE,EAWJ,GAT0B,iBAAfG,GACTL,EAAOK,EACPH,EAAMI,IAENN,EAAOK,EAAWE,MAClBL,EAAMG,EAAWG,UAIdR,EACH,MAAM,IAAIS,MAAM,6CAElB,IAAKP,EACH,MAAM,IAAIO,MAAM,0BAGbb,EAAKc,gBAAgBC,IAAIX,IAC5BJ,EAAKc,gBAAgBE,IAAIZ,EAAME,GA4BnCW,SAIE,OAAOC,CAAI,cAEAC,EAAKhB,KAAKiB,MAAO,kBAChBD,EAAKhB,KAAKkB,MAAO,SAASlB,KAAKkB,yBAC1BC,EAAUnB,KAAKiB,mEAGFG,EAAWpB,KAAKG,mBAMtCkB,mBACHrB,KAAKC,KAKNJ,EAAKc,gBAAgBC,IAAIZ,KAAKC,MAChCD,KAAKG,IAAMN,EAAKc,gBAAgBW,IAAItB,KAAKC,MAI3CJ,EAAKQ,SAASL,KAAKC,MAChBsB,MAAKpB,IACJH,KAAKG,IAAMA,KAEZqB,OAAM,KACLxB,KAAKG,IAAM,MAdbH,KAAKG,IAAM,KAtGRP,EAAA6B,OAAS,CAACC,EAAgBC,GAElB/B,EAAAS,SArBkBJ,GACjC2B,MAAM,6CAAmE3B,SAAYsB,MAAKM,IACxF,IAAKA,EAASC,GACZ,MAAM,IAAIC,UAAU,uBAAuB9B,MAG7C,OAAO4B,EAASG,UAgBHpC,EAAAe,gBAAkB,IAAIsB,IA2DRC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyBxC,EAAAyC,UAAA,YAAA,GAKjBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDxC,EAAAyC,UAAA,YAAA,GAMjDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBxC,EAAAyC,UAAA,aAAA,GAMdH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBxC,EAAAyC,UAAA,aAAA,GAElCH,EAAA,CAARI,KAAgC1C,EAAAyC,UAAA,WAAA,GAmBjCH,EAAA,CADCK,EAAQ,SAmBR3C,EAAAyC,UAAA,mBAAA,MAvHkBzC,EAAIC,EAAAqC,EAAA,CADxBM,EAAc,cACM5C,SAAAA"}
+{"version":3,"file":"Icon.js","sources":["../src/icon/Icon.ts"],"sourcesContent":["import { html, LitElement } 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\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Icon.css\"\n\nexport type IconResolver = (iconName: string) => Promise<string>\n\n// in dev we should just load from node_modules\nconst loadIcon: IconResolver = (name: string) =>\n  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: IconResolver = (name: string) =>\n  fetch(`https://nordcdn.net/ds/icons/${process.env.ICON_VERSION}/assets/${name}.svg`).then(response => {\n    if (!response.ok) {\n      throw new TypeError(`NORD: unknown icon '${name}'`)\n    }\n\n    return response.text()\n  })\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 * @slot - The default slot used for placing a custom SVG icon.\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](/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  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\n        role=${cond(this.label, \"img\")}\n        style=${cond(this.color, `color:${this.color}`)}\n        aria-label=${ifDefined(this.label)}\n      >\n        <slot aria-hidden=\"true\"></slot>\n        <div aria-hidden=\"true\">${unsafeHTML(this.svg)}</div>\n      </div>\n    `\n  }\n\n  @observe(\"name\")\n  protected handleNameChange() {\n    if (!this.name) {\n      this.svg = \"\"\n      return\n    }\n\n    if (Icon.registeredIcons.has(this.name)) {\n      this.svg = Icon.registeredIcons.get(this.name) as string\n      return\n    }\n\n    Icon.resolver(this.name)\n      .then(svg => {\n        this.svg = svg\n      })\n      .catch(() => {\n        this.svg = \"\"\n      })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-icon\": Icon\n  }\n}\n"],"names":["Icon","Icon_1","LitElement","constructor","this","name","size","svg","static","resolver","iconOrName","icon","title","default","Error","registeredIcons","has","set","render","html","cond","label","color","ifDefined","unsafeHTML","handleNameChange","get","then","catch","styles","componentStyle","style","fetch","response","ok","TypeError","text","Map","__decorate","property","reflect","prototype","state","observe","customElement"],"mappings":"s6BAmCA,IAAqBA,EAAIC,EAAzB,cAAkCC,EAAlCC,kCA+D+BC,KAAIC,KAAW,GAKfD,KAAIE,KAA0C,IAc1DF,KAAGG,IAAW,EAsChC,CA5GCC,wBAAwBC,GACtBR,EAAKQ,SAAWA,CACjB,CAqBDD,oBAAoBE,EAAyDC,GAC3E,IAAIN,EACAE,EAWJ,GAT0B,iBAAfG,GACTL,EAAOK,EACPH,EAAMI,IAENN,EAAOK,EAAWE,MAClBL,EAAMG,EAAWG,UAIdR,EACH,MAAM,IAAIS,MAAM,6CAElB,IAAKP,EACH,MAAM,IAAIO,MAAM,0BAGbb,EAAKc,gBAAgBC,IAAIX,IAC5BJ,EAAKc,gBAAgBE,IAAIZ,EAAME,EAElC,CA0BDW,SAIE,OAAOC,CAAI,cAEAC,EAAKhB,KAAKiB,MAAO,kBAChBD,EAAKhB,KAAKkB,MAAO,SAASlB,KAAKkB,yBAC1BC,EAAUnB,KAAKiB,mEAGFG,EAAWpB,KAAKG,kBAG/C,CAGSkB,mBACHrB,KAAKC,KAKNJ,EAAKc,gBAAgBC,IAAIZ,KAAKC,MAChCD,KAAKG,IAAMN,EAAKc,gBAAgBW,IAAItB,KAAKC,MAI3CJ,EAAKQ,SAASL,KAAKC,MAChBsB,MAAKpB,IACJH,KAAKG,IAAMA,CAAG,IAEfqB,OAAM,KACLxB,KAAKG,IAAM,EAAE,IAdfH,KAAKG,IAAM,EAgBd,GAtHMP,EAAA6B,OAAS,CAACC,EAAgBC,GAElB/B,EAAAS,SArBkBJ,GACjC2B,MAAM,6CAAmE3B,SAAYsB,MAAKM,IACxF,IAAKA,EAASC,GACZ,MAAM,IAAIC,UAAU,uBAAuB9B,MAG7C,OAAO4B,EAASG,MAAM,IAgBTpC,EAAAe,gBAAkB,IAAIsB,IA2DRC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyBxC,EAAAyC,UAAA,YAAA,GAKjBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDxC,EAAAyC,UAAA,YAAA,GAMjDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBxC,EAAAyC,UAAA,aAAA,GAMdH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBxC,EAAAyC,UAAA,aAAA,GAElCH,EAAA,CAARI,KAAgC1C,EAAAyC,UAAA,WAAA,GAmBjCH,EAAA,CADCK,EAAQ,SAmBR3C,EAAAyC,UAAA,mBAAA,MAvHkBzC,EAAIC,EAAAqC,EAAA,CADxBM,EAAc,cACM5C,SAAAA"}

package/lib/Input.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as s,w as n,$ as i,s as o}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe1a64e3.js";import{o as l}from"./class-map-f1b6f1fa.js";import{n as d}from"./ref-57ff8ffc.js";import{o as p}from"./unsafe-html-61a04601.js";import{F as m}from"./FocusableMixin-175ea4d7.js";import{F as c}from"./FormAssociatedMixin-d0d98a92.js";import{I as h}from"./InputMixin-9334d385.js";import{R as f,s as u}from"./TextField-f48e2e5c.js";import{A as v}from"./AutocompleteMixin-ca948bdb.js";import{s as y}from"./Component-5a0a26a0.js";import{s as $}from"./FormField-d3767c2e.js";import{S as b}from"./SlotController-ea6eff46.js";import{c as j}from"./cond-97c45476.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const g=s`.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=end],slot[name=start]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;inset-block-start:0;color:var(--n-color-icon)}slot[name=end]{inset-inline-end:var(--n-space-m)}.has-start .n-input{padding-inline-start:var(--n-space-xl)}.has-end .n-input{padding-inline-end:calc(var(--n-space-xl) + var(--n-space-s))}::slotted(svg),svg{block-size:var(--n-size-icon-s)!important;inline-size:var(--n-size-icon-s)!important}`;let x=class extends(c(v(f(h(m(o)))))){constructor(){super(...arguments),this.startSlot=new b(this,"start"),this.endSlot=new b(this,"end"),this.type="text",this.expand=!1}render(){var e;const t="search"===this.type||this.startSlot.hasContent,s="number"===this.type,o="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>'):n;return i`${this.renderLabel()}<div class="${l({"n-input-container":!0,"has-start":t,"has-end":this.endSlot.hasContent})}"><slot name="${this.startSlot.slotName}" ?hidden="${!t}">${o}</slot><input ${d(this.focusableRef)} id="${this.inputId}" class="n-input" type="${s?"text":this.type}" inputmode="${j(s,"numeric")}" pattern="${j(s,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" 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" autocomplete="${this.autocomplete}"><slot name="${this.endSlot.slotName}" ?hidden="${this.endSlot.isEmpty}"></slot></div>${this.renderError()}`}handleKeydown(e){const{form:t}=this;if("Enter"===e.key&&t){const e=function(e){let t=e.querySelector('button[type="submit"]');!t&&e.id&&(t=e.getRootNode().querySelector(`button[form=${e.id}]`));return t}(t);setTimeout((()=>null==e?void 0:e.click()),0)}}};x.styles=[y,$,u,g],e([r()],x.prototype,"type",void 0),e([r({reflect:!0,type:Boolean})],x.prototype,"expand",void 0),x=e([t("nord-input")],x);var k=x;export{k as default};
+import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i as s,b as n,y as i,s as o}from"./lit-element-79bc2e0e.js";import{e as r}from"./property-03f59dce.js";import{l as a}from"./if-defined-f43b1487.js";import{o as l}from"./class-map-cd6c8cbd.js";import{n as d}from"./ref-697b28b5.js";import{o as p}from"./unsafe-html-be8023cd.js";import{F as c}from"./FocusableMixin-99db12c1.js";import{F as m}from"./FormAssociatedMixin-f6e5b3cd.js";import{I as h}from"./InputMixin-158f63fb.js";import{R as u,s as f}from"./TextField-c34519d4.js";import{A as b}from"./AutocompleteMixin-370de2be.js";import{s as v}from"./Component-49a41387.js";import{s as y}from"./FormField-72062bf1.js";import{S as $}from"./SlotController-ea6eff46.js";import{c as j}from"./cond-0a8d4554.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const g=s`.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=end],slot[name=start]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;inset-block-start:0;color:var(--n-color-icon)}slot[name=end]{inset-inline-end:var(--n-space-m)}.has-start .n-input{padding-inline-start:var(--n-space-xl)}.has-end .n-input{padding-inline-end:calc(var(--n-space-xl) + var(--n-space-s))}::slotted(svg),svg{block-size:var(--n-size-icon-s)!important;inline-size:var(--n-size-icon-s)!important}`;let x=class extends(m(b(u(h(c(o)))))){constructor(){super(...arguments),this.startSlot=new $(this,"start"),this.endSlot=new $(this,"end"),this.type="text",this.expand=!1}render(){var e;const t="search"===this.type||this.startSlot.hasContent,s="number"===this.type,o="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>'):n;return i`${this.renderLabel()}<div class="${l({"n-input-container":!0,"has-start":t,"has-end":this.endSlot.hasContent})}"><slot name="${this.startSlot.slotName}" ?hidden="${!t}">${o}</slot><input ${d(this.focusableRef)} id="${this.inputId}" class="n-input" type="${s?"text":this.type}" inputmode="${j(s,"numeric")}" pattern="${j(s,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" 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" autocomplete="${this.autocomplete}"><slot name="${this.endSlot.slotName}" ?hidden="${this.endSlot.isEmpty}"></slot></div>${this.renderError()}`}handleKeydown(e){const{form:t}=this;if("Enter"===e.key&&t){const e=function(e){let t=e.querySelector('button[type="submit"]');!t&&e.id&&(t=e.getRootNode().querySelector(`button[form=${e.id}]`));return t}(t);setTimeout((()=>null==e?void 0:e.click()),0)}}};x.styles=[v,y,f,g],e([r()],x.prototype,"type",void 0),e([r({reflect:!0,type:Boolean})],x.prototype,"expand",void 0),x=e([t("nord-input")],x);var k=x;export{k 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","../src/common/form.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { classMap } from \"lit/directives/class-map.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 { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.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\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { getSubmitButton } from \"../common/form.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 or prefix at the start of the input.\n * @slot end - Optional slot used to place an icon or suffix at the end of the input.\n */\n@customElement(\"nord-input\")\nexport default class Input extends FormAssociatedMixin(\n  AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  private startSlot = new SlotController(this, \"start\")\n  private endSlot = new SlotController(this, \"end\")\n\n  /**\n   * The type of the input.\n   */\n  @property() type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" = \"text\"\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  render() {\n    const startSlotHasContent = 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\n        class=${classMap({\n          \"n-input-container\": true,\n          \"has-start\": startSlotHasContent,\n          \"has-end\": this.endSlot.hasContent,\n        })}\n      >\n        <slot name=${this.startSlot.slotName} ?hidden=${!startSlotHasContent}>${defaultIcon}</slot>\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          type=${isNumber ? \"text\" : this.type}\n          inputmode=${cond(isNumber, \"numeric\")}\n          pattern=${cond(isNumber, \"[0-9]*\")}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          ?readonly=${this.readonly}\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          autocomplete=${this.autocomplete as any}\n        />\n        <slot name=${this.endSlot.slotName} ?hidden=${this.endSlot.isEmpty}></slot>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    const { form } = this\n\n    if (e.key === \"Enter\" && form) {\n      const button = getSubmitButton(form)\n      setTimeout(() => button?.click(), 0)\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","/**\n * Finds a form's submit button. First looking for a button inside form,\n * and then looking for a button whose form attribute is equal to the ID of the form.\n */\nexport function getSubmitButton(form: HTMLFormElement): HTMLButtonElement | null {\n  // we can get away with just looking for native <button> elements,\n  // rather than our component, since our button component renders one to light dom.\n  let button = form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)\n\n  if (!button && form.id) {\n    const root = form.getRootNode() as ShadowRoot | Document\n    button = root.querySelector<HTMLButtonElement>(`button[form=${form.id}]`)\n  }\n\n  return button\n}\n"],"names":["Input","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","startSlot","SlotController","endSlot","type","expand","render","startSlotHasContent","hasContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","classMap","slotName","ref","focusableRef","inputId","cond","disabled","required","readonly","ifDefined","name","_a","value","placeholder","handleInput","handleChange","handleKeydown","getDescribedBy","getInvalid","autocomplete","isEmpty","renderError","e","form","key","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","prototype","reflect","Boolean","customElement"],"mappings":"oiDAmCA,IAAqBA,EAArB,cAAmCC,EACjCC,EAAkBC,EAAcC,EAAWC,EAAeC,QAD5DC,kCAKUC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAOG,QAAG,IAAID,EAAeF,KAAM,OAK/BA,KAAII,KAAwE,OAK5CJ,KAAMK,QAAG,EAErDC,eACE,MAAMC,EAAoC,WAAdP,KAAKI,MAAqBJ,KAAKC,UAAUO,WAC/DC,EAAyB,WAAdT,KAAKI,KAChBM,EAA4B,WAAdV,KAAKI,KAAoBO,ECxDlC,iQDwD2DC,EAEtE,OAAOC,CAAI,GACPb,KAAKc,4BAGGC,EAAS,CACf,qBAAqB,EACrB,YAAaR,EACb,UAAWP,KAAKG,QAAQK,6BAGbR,KAAKC,UAAUe,uBAAqBT,MAAuBG,kBAEpEO,EAAIjB,KAAKkB,qBACNlB,KAAKmB,kCAEHV,EAAW,OAAST,KAAKI,oBACpBgB,EAAKX,EAAU,wBACjBW,EAAKX,EAAU,yBACbT,KAAKqB,wBACLrB,KAAKsB,wBACLtB,KAAKuB,mBACVC,EAAUxB,KAAKyB,kBACH,QAAVC,EAAA1B,KAAK2B,aAAK,IAAAD,EAAAA,EAAI,oBACTF,EAAUxB,KAAK4B,yBACpB5B,KAAK6B,yBACJ7B,KAAK8B,2BACJ9B,KAAK+B,oCACGP,EAAUxB,KAAKgC,oCACnBR,EAAUxB,KAAKiC,mDAEfjC,KAAKkC,6BAETlC,KAAKG,QAAQa,sBAAoBhB,KAAKG,QAAQgC,yBAG3DnC,KAAKoC,gBAIHL,cAAcM,GACpB,MAAMC,KAAEA,GAAStC,KAEjB,GAAc,UAAVqC,EAAEE,KAAmBD,EAAM,CAC7B,MAAME,EEjGN,SAA0BF,GAG9B,IAAIE,EAASF,EAAKG,cAAiC,0BAE9CD,GAAUF,EAAKI,KAElBF,EADaF,EAAKK,cACJF,cAAiC,eAAeH,EAAKI,QAGrE,OAAOF,EFuFYI,CAAgBN,GAC/BO,YAAW,IAAML,aAAA,EAAAA,EAAQM,SAAS,MAhE/BtD,EAAMuD,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAQrDC,EAAA,CAAXC,KAA6F7D,EAAA8D,UAAA,YAAA,GAKlDF,EAAA,CAA3CC,EAAS,CAAEE,SAAS,EAAMnD,KAAMoD,WAAyBhE,EAAA8D,UAAA,cAAA,GAhBvC9D,EAAK4D,EAAA,CADzBK,EAAc,eACMjE,SAAAA"}
+{"version":3,"file":"Input.js","sources":["../src/input/Input.ts","../../icons/lib/assets/navigation-search.js","../src/common/form.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { classMap } from \"lit/directives/class-map.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 { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.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\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { getSubmitButton } from \"../common/form.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 or prefix at the start of the input.\n * @slot end - Optional slot used to place an icon or suffix at the end of the input.\n */\n@customElement(\"nord-input\")\nexport default class Input extends FormAssociatedMixin(\n  AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  private startSlot = new SlotController(this, \"start\")\n  private endSlot = new SlotController(this, \"end\")\n\n  /**\n   * The type of the input.\n   */\n  @property() type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" = \"text\"\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  render() {\n    const startSlotHasContent = 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\n        class=${classMap({\n          \"n-input-container\": true,\n          \"has-start\": startSlotHasContent,\n          \"has-end\": this.endSlot.hasContent,\n        })}\n      >\n        <slot name=${this.startSlot.slotName} ?hidden=${!startSlotHasContent}>${defaultIcon}</slot>\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          type=${isNumber ? \"text\" : this.type}\n          inputmode=${cond(isNumber, \"numeric\")}\n          pattern=${cond(isNumber, \"[0-9]*\")}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          ?readonly=${this.readonly}\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          autocomplete=${this.autocomplete as any}\n        />\n        <slot name=${this.endSlot.slotName} ?hidden=${this.endSlot.isEmpty}></slot>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    const { form } = this\n\n    if (e.key === \"Enter\" && form) {\n      const button = getSubmitButton(form)\n      setTimeout(() => button?.click(), 0)\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","/**\n * Finds a form's submit button. First looking for a button inside form,\n * and then looking for a button whose form attribute is equal to the ID of the form.\n */\nexport function getSubmitButton(form: HTMLFormElement): HTMLButtonElement | null {\n  // we can get away with just looking for native <button> elements,\n  // rather than our component, since our button component renders one to light dom.\n  let button = form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)\n\n  if (!button && form.id) {\n    const root = form.getRootNode() as ShadowRoot | Document\n    button = root.querySelector<HTMLButtonElement>(`button[form=${form.id}]`)\n  }\n\n  return button\n}\n"],"names":["Input","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","startSlot","SlotController","endSlot","type","expand","render","startSlotHasContent","hasContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","classMap","slotName","ref","focusableRef","inputId","cond","disabled","required","readonly","ifDefined","name","_a","value","placeholder","handleInput","handleChange","handleKeydown","getDescribedBy","getInvalid","autocomplete","isEmpty","renderError","e","form","key","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","prototype","reflect","Boolean","customElement"],"mappings":"oiDAmCA,IAAqBA,EAArB,cAAmCC,EACjCC,EAAkBC,EAAcC,EAAWC,EAAeC,QAD5DC,kCAKUC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAOG,QAAG,IAAID,EAAeF,KAAM,OAK/BA,KAAII,KAAwE,OAK5CJ,KAAMK,QAAG,CAsDtD,CApDCC,eACE,MAAMC,EAAoC,WAAdP,KAAKI,MAAqBJ,KAAKC,UAAUO,WAC/DC,EAAyB,WAAdT,KAAKI,KAChBM,EAA4B,WAAdV,KAAKI,KAAoBO,ECxDlC,iQDwD2DC,EAEtE,OAAOC,CAAI,GACPb,KAAKc,4BAGGC,EAAS,CACf,qBAAqB,EACrB,YAAaR,EACb,UAAWP,KAAKG,QAAQK,6BAGbR,KAAKC,UAAUe,uBAAqBT,MAAuBG,kBAEpEO,EAAIjB,KAAKkB,qBACNlB,KAAKmB,kCAEHV,EAAW,OAAST,KAAKI,oBACpBgB,EAAKX,EAAU,wBACjBW,EAAKX,EAAU,yBACbT,KAAKqB,wBACLrB,KAAKsB,wBACLtB,KAAKuB,mBACVC,EAAUxB,KAAKyB,kBACH,QAAVC,EAAA1B,KAAK2B,aAAK,IAAAD,EAAAA,EAAI,oBACTF,EAAUxB,KAAK4B,yBACpB5B,KAAK6B,yBACJ7B,KAAK8B,2BACJ9B,KAAK+B,oCACGP,EAAUxB,KAAKgC,oCACnBR,EAAUxB,KAAKiC,mDAEfjC,KAAKkC,6BAETlC,KAAKG,QAAQa,sBAAoBhB,KAAKG,QAAQgC,yBAG3DnC,KAAKoC,eAEV,CAEOL,cAAcM,GACpB,MAAMC,KAAEA,GAAStC,KAEjB,GAAc,UAAVqC,EAAEE,KAAmBD,EAAM,CAC7B,MAAME,EEjGN,SAA0BF,GAG9B,IAAIE,EAASF,EAAKG,cAAiC,0BAE9CD,GAAUF,EAAKI,KAElBF,EADaF,EAAKK,cACJF,cAAiC,eAAeH,EAAKI,QAGrE,OAAOF,CACT,CFsFqBI,CAAgBN,GAC/BO,YAAW,IAAML,aAAA,EAAAA,EAAQM,SAAS,EACnC,CACF,GAlEMtD,EAAMuD,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAQrDC,EAAA,CAAXC,KAA6F7D,EAAA8D,UAAA,YAAA,GAKlDF,EAAA,CAA3CC,EAAS,CAAEE,SAAS,EAAMnD,KAAMoD,WAAyBhE,EAAA8D,UAAA,cAAA,GAhBvC9D,EAAK4D,EAAA,CADzBK,EAAc,eACMjE,SAAAA"}

package/lib/{InputMixin-9334d385.js → InputMixin-158f63fb.js}

@@ -1,2 +1,2 @@
-import{_ as t}from"./query-assigned-elements-ef860822.js";import{e}from"./property-03f59dce.js";function o(o){class r extends o{constructor(){super(...arguments),this.disabled=!1,this.value=""}get form(){if(this.hasAttribute("form")){return this.getRootNode().querySelector(`form#${this.getAttribute("form")}`)}return this.closest("form")}}return t([e({type:Boolean,reflect:!0})],r.prototype,"disabled",void 0),t([e()],r.prototype,"name",void 0),t([e()],r.prototype,"value",void 0),r}export{o as I};
-//# sourceMappingURL=InputMixin-9334d385.js.map
+import{_ as t}from"./query-assigned-elements-e6cbac30.js";import{e}from"./property-03f59dce.js";function o(o){class r extends o{constructor(){super(...arguments),this.disabled=!1,this.value=""}get form(){if(this.hasAttribute("form")){return this.getRootNode().querySelector(`form#${this.getAttribute("form")}`)}return this.closest("form")}}return t([e({type:Boolean,reflect:!0})],r.prototype,"disabled",void 0),t([e()],r.prototype,"name",void 0),t([e()],r.prototype,"value",void 0),r}export{o as I};
+//# sourceMappingURL=InputMixin-158f63fb.js.map

package/lib/{InputMixin-9334d385.js.map → InputMixin-158f63fb.js.map}

@@ -1 +1 @@
-{"version":3,"file":"InputMixin-9334d385.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 | undefined\n  value: string\n  disabled: boolean\n  get form(): HTMLFormElement | null\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    get form() {\n      if (this.hasAttribute(\"form\")) {\n        const root = this.getRootNode() as ShadowRoot | Document\n        return root.querySelector(`form#${this.getAttribute(\"form\")}`)\n      }\n\n      return this.closest(\"form\")\n    }\n  }\n\n  return InputElement as Constructor<InputMixinInterface> & T\n}\n"],"names":["InputMixin","superClass","InputElement","constructor","this","disabled","value","form","hasAttribute","getRootNode","querySelector","getAttribute","closest","__decorate","property","type","Boolean","reflect","prototype"],"mappings":"gGAaM,SAAUA,EAA8CC,GAC5D,MAAMC,UAAqBD,EAA3BE,kCAM8CC,KAAQC,UAAG,EAU3CD,KAAKE,MAAW,GAKxBC,WACF,GAAIH,KAAKI,aAAa,QAAS,CAE7B,OADaJ,KAAKK,cACNC,cAAc,QAAQN,KAAKO,aAAa,WAGtD,OAAOP,KAAKQ,QAAQ,SAIxB,OAzB8CC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBf,EAAAgB,UAAA,gBAAA,GAKhDL,EAAA,CAAXC,KAAwBZ,EAAAgB,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAA6BZ,EAAAgB,UAAA,aAAA,GAezBhB"}
+{"version":3,"file":"InputMixin-158f63fb.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 | undefined\n  value: string\n  disabled: boolean\n  get form(): HTMLFormElement | null\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    get form() {\n      if (this.hasAttribute(\"form\")) {\n        const root = this.getRootNode() as ShadowRoot | Document\n        return root.querySelector(`form#${this.getAttribute(\"form\")}`)\n      }\n\n      return this.closest(\"form\")\n    }\n  }\n\n  return InputElement as Constructor<InputMixinInterface> & T\n}\n"],"names":["InputMixin","superClass","InputElement","constructor","this","disabled","value","form","hasAttribute","getRootNode","querySelector","getAttribute","closest","__decorate","property","type","Boolean","reflect","prototype"],"mappings":"gGAaM,SAAUA,EAA8CC,GAC5D,MAAMC,UAAqBD,EAA3BE,kCAM8CC,KAAQC,UAAG,EAU3CD,KAAKE,MAAW,EAa7B,CARKC,WACF,GAAIH,KAAKI,aAAa,QAAS,CAE7B,OADaJ,KAAKK,cACNC,cAAc,QAAQN,KAAKO,aAAa,UACrD,CAED,OAAOP,KAAKQ,QAAQ,OACrB,EAGH,OAzB8CC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBf,EAAAgB,UAAA,gBAAA,GAKhDL,EAAA,CAAXC,KAAwBZ,EAAAgB,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAA6BZ,EAAAgB,UAAA,aAAA,GAezBhB,CACT"}

package/lib/KeyboardController.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardController.js","sources":["../src/command-menu/KeyboardController.ts"],"sourcesContent":["import { ReactiveController } from \"lit\"\nimport CommandMenu from \"./CommandMenu.js\"\nimport { ShortcutController, ShortcutMap } from \"../common/controllers/ShortcutController.js\"\n\ntype KeyboardActions = {\n  trigger: () => void\n  goBack: () => void\n  start: () => void\n  end: () => void\n  next: () => void\n  previous: () => void\n  toggleOpen: () => void\n}\n\nconst preventDefault = (fn: (e: Event) => void) => (e: Event) => {\n  e.preventDefault()\n  fn(e)\n}\n\nexport class KeyboardController {\n  private globalShortcuts: ShortcutController\n  private navigationShortcuts: ShortcutController\n  private commandShortcuts: ShortcutController\n\n  constructor(private host: CommandMenu, actions: KeyboardActions) {\n    host.addController(this as ReactiveController)\n\n    this.commandShortcuts = new ShortcutController(host)\n    this.globalShortcuts = new ShortcutController(host, { \"$mod+k\": preventDefault(actions.toggleOpen) })\n    this.navigationShortcuts = new ShortcutController(\n      host,\n      {\n        Enter: preventDefault(actions.trigger),\n        Backspace: actions.goBack, // we don't want to prevent default, since that would stop backspace deleting chars\n        End: preventDefault(actions.end),\n        Home: preventDefault(actions.start),\n        ArrowDown: preventDefault(actions.next),\n        ArrowUp: preventDefault(actions.previous),\n      },\n      host\n    )\n  }\n\n  registerCommandShortcuts() {\n    const shortcuts: ShortcutMap = {}\n\n    for (const command of this.host.commands) {\n      if (command.shortcut) {\n        shortcuts[command.shortcut] = () => command.handler?.(this.host)\n      }\n    }\n\n    this.commandShortcuts.bind(shortcuts)\n  }\n}\n"],"names":["preventDefault","fn","e","KeyboardController","constructor","host","actions","this","addController","commandShortcuts","ShortcutController","globalShortcuts","toggleOpen","navigationShortcuts","Enter","trigger","Backspace","goBack","End","end","Home","start","ArrowDown","next","ArrowUp","previous","registerCommandShortcuts","shortcuts","command","commands","shortcut","_a","handler","call","bind"],"mappings":"2FAcA,MAAMA,EAAkBC,GAA4BC,IAClDA,EAAEF,iBACFC,EAAGC,UAGQC,EAKXC,YAAoBC,EAAmBC,GAAnBC,KAAIF,KAAJA,EAClBA,EAAKG,cAAcD,MAEnBA,KAAKE,iBAAmB,IAAIC,EAAmBL,GAC/CE,KAAKI,gBAAkB,IAAID,EAAmBL,EAAM,CAAE,SAAUL,EAAeM,EAAQM,cACvFL,KAAKM,oBAAsB,IAAIH,EAC7BL,EACA,CACES,MAAOd,EAAeM,EAAQS,SAC9BC,UAAWV,EAAQW,OACnBC,IAAKlB,EAAeM,EAAQa,KAC5BC,KAAMpB,EAAeM,EAAQe,OAC7BC,UAAWtB,EAAeM,EAAQiB,MAClCC,QAASxB,EAAeM,EAAQmB,WAElCpB,GAIJqB,2BACE,MAAMC,EAAyB,GAE/B,IAAK,MAAMC,KAAWrB,KAAKF,KAAKwB,SAC1BD,EAAQE,WACVH,EAAUC,EAAQE,UAAY,KAAM,IAAAC,EAAA,OAAkB,UAAlBH,EAAQI,eAAU,IAAAD,OAAA,EAAAA,EAAAE,KAAAL,EAAArB,KAAKF,QAI/DE,KAAKE,iBAAiByB,KAAKP"}
+{"version":3,"file":"KeyboardController.js","sources":["../src/command-menu/KeyboardController.ts"],"sourcesContent":["import { ReactiveController } from \"lit\"\nimport CommandMenu from \"./CommandMenu.js\"\nimport { ShortcutController, ShortcutMap } from \"../common/controllers/ShortcutController.js\"\n\ntype KeyboardActions = {\n  trigger: () => void\n  goBack: () => void\n  start: () => void\n  end: () => void\n  next: () => void\n  previous: () => void\n  toggleOpen: () => void\n}\n\nconst preventDefault = (fn: (e: Event) => void) => (e: Event) => {\n  e.preventDefault()\n  fn(e)\n}\n\nexport class KeyboardController {\n  private globalShortcuts: ShortcutController\n  private navigationShortcuts: ShortcutController\n  private commandShortcuts: ShortcutController\n\n  constructor(private host: CommandMenu, actions: KeyboardActions) {\n    host.addController(this as ReactiveController)\n\n    this.commandShortcuts = new ShortcutController(host)\n    this.globalShortcuts = new ShortcutController(host, { \"$mod+k\": preventDefault(actions.toggleOpen) })\n    this.navigationShortcuts = new ShortcutController(\n      host,\n      {\n        Enter: preventDefault(actions.trigger),\n        Backspace: actions.goBack, // we don't want to prevent default, since that would stop backspace deleting chars\n        End: preventDefault(actions.end),\n        Home: preventDefault(actions.start),\n        ArrowDown: preventDefault(actions.next),\n        ArrowUp: preventDefault(actions.previous),\n      },\n      host\n    )\n  }\n\n  registerCommandShortcuts() {\n    const shortcuts: ShortcutMap = {}\n\n    for (const command of this.host.commands) {\n      if (command.shortcut) {\n        shortcuts[command.shortcut] = () => command.handler?.(this.host)\n      }\n    }\n\n    this.commandShortcuts.bind(shortcuts)\n  }\n}\n"],"names":["preventDefault","fn","e","KeyboardController","constructor","host","actions","this","addController","commandShortcuts","ShortcutController","globalShortcuts","toggleOpen","navigationShortcuts","Enter","trigger","Backspace","goBack","End","end","Home","start","ArrowDown","next","ArrowUp","previous","registerCommandShortcuts","shortcuts","command","commands","shortcut","_a","handler","call","bind"],"mappings":"2FAcA,MAAMA,EAAkBC,GAA4BC,IAClDA,EAAEF,iBACFC,EAAGC,EAAE,QAGMC,EAKXC,YAAoBC,EAAmBC,GAAnBC,KAAIF,KAAJA,EAClBA,EAAKG,cAAcD,MAEnBA,KAAKE,iBAAmB,IAAIC,EAAmBL,GAC/CE,KAAKI,gBAAkB,IAAID,EAAmBL,EAAM,CAAE,SAAUL,EAAeM,EAAQM,cACvFL,KAAKM,oBAAsB,IAAIH,EAC7BL,EACA,CACES,MAAOd,EAAeM,EAAQS,SAC9BC,UAAWV,EAAQW,OACnBC,IAAKlB,EAAeM,EAAQa,KAC5BC,KAAMpB,EAAeM,EAAQe,OAC7BC,UAAWtB,EAAeM,EAAQiB,MAClCC,QAASxB,EAAeM,EAAQmB,WAElCpB,EAEH,CAEDqB,2BACE,MAAMC,EAAyB,CAAA,EAE/B,IAAK,MAAMC,KAAWrB,KAAKF,KAAKwB,SAC1BD,EAAQE,WACVH,EAAUC,EAAQE,UAAY,KAAM,IAAAC,EAAA,OAAkB,UAAlBH,EAAQI,eAAU,IAAAD,OAAA,EAAAA,EAAAE,KAAAL,EAAArB,KAAKF,KAAK,GAIpEE,KAAKE,iBAAiByB,KAAKP,EAC5B"}

package/lib/Layout.js

@@ -1,2 +1,2 @@
-import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as t,s as a,$ as i}from"./lit-element-67e6cd99.js";import{e as s}from"./property-03f59dce.js";import{t as o}from"./state-70f38ceb.js";import{i as r}from"./query-2d22378e.js";import{o as d}from"./class-map-f1b6f1fa.js";import{D as l}from"./DirectionController-8b298382.js";import{L as h}from"./LightDismissController-a2645ae6.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as v}from"./cond-97c45476.js";import{f as p}from"./fsm-50373df9.js";import{c as g}from"./number-c3ab3e95.js";import{s as u}from"./Component-5a0a26a0.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";class m{constructor(e,n,t){this.host=e,this.onChange=t,this.handleChange=()=>{var e;null===(e=this.onChange)||void 0===e||e.call(this),this.host.requestUpdate()},e.addController(this),this.mq="string"==typeof n?matchMedia(n):n}get matches(){return this.mq.matches}hostConnected(){this.mq.addListener(this.handleChange)}hostDisconnected(){this.mq.removeListener(this.handleChange)}}const k=t`:host{--n-layout-padding:var(--n-space-l);--n-nav-transition-duration:0.3s;background:var(--n-color-background);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--n-color-background);inset-block-start:0;min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--n-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{inset-inline-end:0;inline-size:100%}main{padding:var(--n-layout-padding)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{transition:transform var(--n-nav-transition-duration) ease}[data-screen=wide]:is([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .n-layout-nav{transition:transform var(--n-nav-transition-duration) ease;border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened] .n-layout-main{inline-size:calc(100% - var(--n-nav-width));margin-inline-start:var(--n-nav-width)}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity .2s .15s ease;opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--n-layout-padding:0}`,f=matchMedia("(min-width: 768px)"),b=function(e,n,t=JSON.stringify,a=JSON.parse){return{get value(){const t=localStorage.getItem(e);try{return t?a(t):n}catch(e){return n}},set value(n){localStorage.setItem(e,t(n))}}}("nord-layout.navWidth",250),y=p({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let T=class extends a{constructor(){super(...arguments),this.navWidth=b.value,this.isDragging=!1,this.navState=f.matches?"opened":"closed",this.navOpen="opened"===this.navState,this.padding="m",this.lightDismiss=new h(this,{isOpen:()=>"opened"===this.navState&&!this.mq.matches,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl&&e!==this.navToggleEl}),this.mq=new m(this,f,(()=>this.handleMediaQueryChange())),this.direction=new l(this),this.handleMediaQueryChange=()=>{this.navTransition(this.mq.matches?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=e=>{e.target!==this.navToggleEl&&this.navTransition("focusout")},this.handleMouseEnter=()=>{this.mq.matches&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}render(){const{navWidth:e,navState:n,mq:t,isDragging:a,direction:s}=this,o="opened"===n&&t.matches?e:250;return i`<div class="${d({"n-layout":!0,"n-rtl":s.isRTL,"n-dragging":a})}" style="${`--n-nav-width: ${o}px`}" data-nav="${n}" data-screen="${t.matches?"wide":"narrow"}"><div class="n-layout-nav" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${v("opened"===n,this.startDragging)}" @pointermove="${v(a,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}"></div></div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleClick}"><slot name="header"></slot><main><slot></slot></main></div></div>`}getToggleElement(){if(this.cleanup(),!this.navToggle)return;const e=this.getRootNode().querySelector(`#${this.navToggle}`);e&&(this.navToggleEl=e,this.navToggleEl.addEventListener("click",this.handleToggleClick),this.navToggleEl.addEventListener("mouseenter",this.handleMouseEnter),this.navToggleEl.addEventListener("mouseleave",this.handleMouseLeave))}cleanup(){this.navToggleEl&&(this.navToggleEl.removeEventListener("click",this.handleToggleClick),this.navToggleEl.removeEventListener("mouseenter",this.handleMouseEnter),this.navToggleEl.removeEventListener("mouseleave",this.handleMouseLeave),this.navToggleEl=void 0)}handleNavWidthChange(){b.value=this.navWidth}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(e){this.navState=y.transition(this.navState,e)}handleClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(e){const{navWidth:n,direction:{isLTR:t}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(n+(t?-30:30));break;case"ArrowRight":this.setNavWidth(n+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}e.preventDefault()}setNavWidth(e){this.navWidth=g(Math.round(e),220,400)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(e){const n=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(n),this.navTransition(n>=100?"open":"close")}};T.styles=[u,k],e([r(".n-layout-nav",!0)],T.prototype,"navEl",void 0),e([o()],T.prototype,"navWidth",void 0),e([o()],T.prototype,"isDragging",void 0),e([o()],T.prototype,"navState",void 0),e([s({reflect:!0,type:Boolean,attribute:"nav-open"})],T.prototype,"navOpen",void 0),e([s({attribute:"nav-toggle"})],T.prototype,"navToggle",void 0),e([s({reflect:!0})],T.prototype,"padding",void 0),e([c("navToggle")],T.prototype,"getToggleElement",null),e([c("navWidth","updated")],T.prototype,"handleNavWidthChange",null),e([c("navState")],T.prototype,"handleNavStateChange",null),e([c("navOpen","updated")],T.prototype,"handleOpenChange",null),T=e([n("nord-layout")],T);var w=T;export{w as default};
+import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as t,s as a,y as i}from"./lit-element-79bc2e0e.js";import{e as s}from"./property-03f59dce.js";import{t as o}from"./state-70f38ceb.js";import{i as r}from"./query-2d22378e.js";import{o as d}from"./class-map-cd6c8cbd.js";import{D as l}from"./DirectionController-8b298382.js";import{L as h}from"./LightDismissController-a2645ae6.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as v}from"./cond-0a8d4554.js";import{f as p}from"./fsm-50373df9.js";import{c as g}from"./number-c3ab3e95.js";import{s as u}from"./Component-49a41387.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";class m{constructor(e,n,t){this.host=e,this.onChange=t,this.handleChange=()=>{var e;null===(e=this.onChange)||void 0===e||e.call(this),this.host.requestUpdate()},e.addController(this),this.mq="string"==typeof n?matchMedia(n):n}get matches(){return this.mq.matches}hostConnected(){this.mq.addListener(this.handleChange)}hostDisconnected(){this.mq.removeListener(this.handleChange)}}const k=t`:host{--n-layout-padding:var(--n-space-l);--n-nav-transition-duration:0.3s;background:var(--n-color-background);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--n-color-background);inset-block-start:0;min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--n-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{inset-inline-end:0;inline-size:100%}main{padding:var(--n-layout-padding)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{transition:transform var(--n-nav-transition-duration) ease}[data-screen=wide]:is([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .n-layout-nav{transition:transform var(--n-nav-transition-duration) ease;border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened] .n-layout-main{inline-size:calc(100% - var(--n-nav-width));margin-inline-start:var(--n-nav-width)}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity .2s .15s ease;opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--n-layout-padding:0}`,b=matchMedia("(min-width: 768px)"),f=function(e,n,t=JSON.stringify,a=JSON.parse){return{get value(){const t=localStorage.getItem(e);try{return t?a(t):n}catch(e){return n}},set value(n){localStorage.setItem(e,t(n))}}}("nord-layout.navWidth",250),y=p({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let T=class extends a{constructor(){super(...arguments),this.navWidth=f.value,this.isDragging=!1,this.navState=b.matches?"opened":"closed",this.navOpen="opened"===this.navState,this.padding="m",this.lightDismiss=new h(this,{isOpen:()=>"opened"===this.navState&&!this.mq.matches,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl&&e!==this.navToggleEl}),this.mq=new m(this,b,(()=>this.handleMediaQueryChange())),this.direction=new l(this),this.handleMediaQueryChange=()=>{this.navTransition(this.mq.matches?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=e=>{e.target!==this.navToggleEl&&this.navTransition("focusout")},this.handleMouseEnter=()=>{this.mq.matches&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}render(){const{navWidth:e,navState:n,mq:t,isDragging:a,direction:s}=this,o="opened"===n&&t.matches?e:250;return i`<div class="${d({"n-layout":!0,"n-rtl":s.isRTL,"n-dragging":a})}" style="${`--n-nav-width: ${o}px`}" data-nav="${n}" data-screen="${t.matches?"wide":"narrow"}"><div class="n-layout-nav" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${v("opened"===n,this.startDragging)}" @pointermove="${v(a,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}"></div></div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleClick}"><slot name="header"></slot><main><slot></slot></main></div></div>`}getToggleElement(){if(this.cleanup(),!this.navToggle)return;const e=this.getRootNode().querySelector(`#${this.navToggle}`);e&&(this.navToggleEl=e,this.navToggleEl.addEventListener("click",this.handleToggleClick),this.navToggleEl.addEventListener("mouseenter",this.handleMouseEnter),this.navToggleEl.addEventListener("mouseleave",this.handleMouseLeave))}cleanup(){this.navToggleEl&&(this.navToggleEl.removeEventListener("click",this.handleToggleClick),this.navToggleEl.removeEventListener("mouseenter",this.handleMouseEnter),this.navToggleEl.removeEventListener("mouseleave",this.handleMouseLeave),this.navToggleEl=void 0)}handleNavWidthChange(){f.value=this.navWidth}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(e){this.navState=y.transition(this.navState,e)}handleClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(e){const{navWidth:n,direction:{isLTR:t}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(n+(t?-30:30));break;case"ArrowRight":this.setNavWidth(n+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}e.preventDefault()}setNavWidth(e){this.navWidth=g(Math.round(e),220,400)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(e){const n=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(n),this.navTransition(n>=100?"open":"close")}};T.styles=[u,k],e([r(".n-layout-nav",!0)],T.prototype,"navEl",void 0),e([o()],T.prototype,"navWidth",void 0),e([o()],T.prototype,"isDragging",void 0),e([o()],T.prototype,"navState",void 0),e([s({reflect:!0,type:Boolean,attribute:"nav-open"})],T.prototype,"navOpen",void 0),e([s({attribute:"nav-toggle"})],T.prototype,"navToggle",void 0),e([s({reflect:!0})],T.prototype,"padding",void 0),e([c("navToggle")],T.prototype,"getToggleElement",null),e([c("navWidth","updated")],T.prototype,"handleNavWidthChange",null),e([c("navState")],T.prototype,"handleNavStateChange",null),e([c("navOpen","updated")],T.prototype,"handleOpenChange",null),T=e([n("nord-layout")],T);var w=T;export{w as default};
 //# sourceMappingURL=Layout.js.map