@nordhealth/components 2.11.0 → 2.12.0

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\"\nimport { FloatingMixin } from \"../common/mixins/FloatingComponentMixin.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 * @cssprop [--n-dropdown-size=250px] - Controls the inline size, or width, of the dropdown. Will resize up to 1.5 times to account for larger content.\n */\n@customElement(\"nord-dropdown\")\nexport default class Dropdown extends FloatingMixin(LitElement) {\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   * 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  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.open}\n          @open=${this.handleOpen}\n          @close=${this.handleClose}\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.open = true\n    this.querySelector(\"nord-dropdown-item\")?.focus()\n  }\n\n  private handleClose() {\n    this.open = false\n  }\n\n  /**\n   * Hide the dropdown programmatically.\n   * @param moveFocusToButton A boolean option to move the focus to the original button that opens the dropdown.\n   */\n  hide(moveFocusToButton?: boolean) {\n    this.popout.hide(moveFocusToButton)\n  }\n\n  /**\n   * Show the dropdown programmatically.\n   */\n  show() {\n    this.popout.show()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown\": Dropdown\n  }\n}\n"],"names":["Dropdown","FloatingMixin","LitElement","constructor","this","expand","size","connectedCallback","super","toggle","querySelector","setAttribute","render","html","handleBlur","ifDefined","align","position","open","handleOpen","handleClose","e","relatedTarget","contains","popout","hide","_a","focus","moveFocusToButton","show","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","reflect","type","Boolean","customElement"],"mappings":"2kDAwBA,IAAqBA,EAArB,cAAsCC,EAAcC,IAApDC,kCAe8CC,KAAMC,QAAG,EAMxBD,KAAIE,KAAoB,GAgEtD,CA9DCC,oBACEC,MAAMD,oBAEN,MAAME,EAASL,KAAKM,cAAc,mBAClCD,SAAAA,EAAQE,aAAa,gBAAiB,OACvC,CAEDC,SACE,OAAOC,CAAI,sCAC2BT,KAAKU,iGAI7BC,EAAUX,KAAKY,qBACZD,EAAUX,KAAKa,qBAClBb,KAAKc,gBACLd,KAAKe,uBACJf,KAAKgB,sFAQrB,CAEON,WAAWO,GACjB,MAAMC,EAAgBD,EAAEC,cAMpBA,IAAkBlB,KAAKmB,SAASD,IAClClB,KAAKoB,OAAOC,MAAK,EAEpB,CAEON,mBACNf,KAAKc,MAAO,EAC4B,QAAxCQ,EAAAtB,KAAKM,cAAc,6BAAqB,IAAAgB,GAAAA,EAAEC,OAC3C,CAEOP,cACNhB,KAAKc,MAAO,CACb,CAMDO,KAAKG,GACHxB,KAAKoB,OAAOC,KAAKG,EAClB,CAKDC,OACEzB,KAAKoB,OAAOK,MACb,GAnFM7B,EAAA8B,OAAS,CAACC,EAAgBC,GAO1BhC,EAAiBiC,kBAAG,IAAK/B,EAAW+B,kBAAmBC,gBAAgB,GAElDC,EAAA,CAA3BC,EAAM,eAAe,IAA6BpC,EAAAqC,UAAA,cAAA,GAKPF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBzC,EAAAqC,UAAA,cAAA,GAM7BF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAmCvC,EAAAqC,UAAA,YAAA,GArBrCrC,EAAQmC,EAAA,CAD5BO,EAAc,kBACM1C,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\"\nimport { FloatingMixin } from \"../common/mixins/FloatingComponentMixin.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 * @cssprop [--n-dropdown-size=250px] - Controls the inline size, or width, of the dropdown. Will resize up to 1.5 times to account for larger content.\n */\n@customElement(\"nord-dropdown\")\nexport default class Dropdown extends FloatingMixin(LitElement) {\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   * 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  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.open}\n          @open=${this.handleOpen}\n          @close=${this.handleClose}\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.open = true\n    this.querySelector(\"nord-dropdown-item\")?.focus()\n  }\n\n  private handleClose() {\n    this.open = false\n  }\n\n  /**\n   * Hide the dropdown programmatically.\n   * @param moveFocusToButton A boolean option to move the focus to the original button that opens the dropdown.\n   */\n  hide(moveFocusToButton?: boolean) {\n    this.popout.hide(moveFocusToButton)\n  }\n\n  /**\n   * Show the dropdown programmatically.\n   */\n  show() {\n    this.popout.show()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown\": Dropdown\n  }\n}\n"],"names":["Dropdown","FloatingMixin","LitElement","constructor","this","expand","size","connectedCallback","super","toggle","querySelector","setAttribute","render","html","handleBlur","ifDefined","align","position","open","handleOpen","handleClose","e","relatedTarget","contains","popout","hide","_a","focus","moveFocusToButton","show","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","reflect","type","Boolean","customElement"],"mappings":"mjDAwBA,IAAqBA,EAArB,cAAsCC,EAAcC,IAApDC,kCAe8CC,KAAMC,QAAG,EAMxBD,KAAIE,KAAoB,GAgEtD,CA9DCC,oBACEC,MAAMD,oBAEN,MAAME,EAASL,KAAKM,cAAc,mBAClCD,SAAAA,EAAQE,aAAa,gBAAiB,OACvC,CAEDC,SACE,OAAOC,CAAI,sCAC2BT,KAAKU,iGAI7BC,EAAUX,KAAKY,qBACZD,EAAUX,KAAKa,qBAClBb,KAAKc,gBACLd,KAAKe,uBACJf,KAAKgB,sFAQrB,CAEON,WAAWO,GACjB,MAAMC,EAAgBD,EAAEC,cAMpBA,IAAkBlB,KAAKmB,SAASD,IAClClB,KAAKoB,OAAOC,MAAK,EAEpB,CAEON,mBACNf,KAAKc,MAAO,EAC4B,QAAxCQ,EAAAtB,KAAKM,cAAc,6BAAqB,IAAAgB,GAAAA,EAAEC,OAC3C,CAEOP,cACNhB,KAAKc,MAAO,CACb,CAMDO,KAAKG,GACHxB,KAAKoB,OAAOC,KAAKG,EAClB,CAKDC,OACEzB,KAAKoB,OAAOK,MACb,GAnFM7B,EAAA8B,OAAS,CAACC,EAAgBC,GAO1BhC,EAAiBiC,kBAAG,IAAK/B,EAAW+B,kBAAmBC,gBAAgB,GAElDC,EAAA,CAA3BC,EAAM,eAAe,IAA6BpC,EAAAqC,UAAA,cAAA,GAKPF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBzC,EAAAqC,UAAA,cAAA,GAM7BF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAmCvC,EAAAqC,UAAA,YAAA,GArBrCrC,EAAQmC,EAAA,CAD5BO,EAAc,kBACM1C,SAAAA"}

package/lib/DropdownGroup.js

@@ -1,2 +1,2 @@
-import{_ as e,e as o}from"./query-assigned-elements-e6cbac30.js";import{i as n,s as r,y as a,b as d}from"./lit-element-9178eae5.js";import{e as i}from"./property-03f59dce.js";import{s}from"./Component-92eb6234.js";const t=n`.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 a`<div class="n-dropdown-group">${this.heading?a`<p id="heading" aria-hidden="true" class="n-dropdown-group-heading">${this.heading}</p>`:d}<div class="n-dropdown-group-content" role="group" aria-labelledby="${this.heading?"heading":d}"><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{i as e,_ as o,s as n,y as r,b as d,e as a}from"./query-assigned-elements-cf502539.js";import{e as s}from"./property-03f59dce.js";import{s as i}from"./Component-449e40fb.js";const t=e`.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 n{render(){return r`<div class="n-dropdown-group">${this.heading?r`<p id="heading" aria-hidden="true" class="n-dropdown-group-heading">${this.heading}</p>`:d}<div class="n-dropdown-group-content" role="group" aria-labelledby="${this.heading?"heading":d}"><slot></slot></div></div>`}};p.styles=[i,t],o([s()],p.prototype,"heading",void 0),p=o([a("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":"6nBAeA,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"}
+{"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":"2lBAeA,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,e}from"./query-assigned-elements-e6cbac30.js";import{i as n,s as t,y as r}from"./lit-element-9178eae5.js";import{e as a}from"./property-03f59dce.js";import{l as i}from"./if-defined-4598a996.js";import{n as s}from"./ref-0e619221.js";import{F as d}from"./FocusableMixin-34870ed3.js";import{s as c}from"./Component-92eb6234.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);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="${i(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([a({reflect:!0})],p.prototype,"href",void 0),p=o([e("nord-dropdown-item")],p);var m=p;export{m as default};
+import{i as o,_ as e,e as n,y as r,s as t}from"./query-assigned-elements-cf502539.js";import{e as i}from"./property-03f59dce.js";import{l as a}from"./if-defined-720964c0.js";import{n as s}from"./ref-c44e9f3c.js";import{F as d}from"./FocusableMixin-32631bff.js";import{s as c}from"./Component-449e40fb.js";import"./directive-de55b00a.js";const l=o`: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);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],e([i({reflect:!0})],p.prototype,"href",void 0),p=e([n("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":"+1DAqBA,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"}
+{"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":"6zDAqBA,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,e}from"./query-assigned-elements-e6cbac30.js";import{i as n,s as a,y as o}from"./lit-element-9178eae5.js";import{s as r}from"./Component-92eb6234.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{i as t,_ as e,s as n,y as a,e as o}from"./query-assigned-elements-cf502539.js";import{s as r}from"./Component-449e40fb.js";const i=t`: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 n{render(){return a`<div class="n-empty-state"><slot></slot></div>`}};s.styles=[r,i],s=e([o("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":"m+BAgBA,IAAqBA,EAArB,cAAwCC,EAGtCC,SACE,OAAOC,CAAI,gDAGZ,GANMH,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":"i8BAgBA,IAAqBA,EAArB,cAAwCC,EAGtCC,SACE,OAAOC,CAAI,gDAGZ,GANMH,EAAAI,OAAS,CAACC,EAAgBC,GADdN,EAAUO,EAAA,CAD9BC,EAAc,qBACMR,SAAAA"}

package/lib/Fieldset.js

@@ -1,2 +1,2 @@
-import{_ as e,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as t,s as o,y as i}from"./lit-element-9178eae5.js";import{e as s}from"./property-03f59dce.js";import{S as n}from"./SlotController-89834aef.js";import{c as a}from"./cond-338158e9.js";import{s as l}from"./Component-92eb6234.js";import{s as d}from"./FormField-ae3570d2.js";import"./EventController-d99ebeef.js";const h=t`fieldset{border:none}.n-label-container{margin-block-end:calc(var(--n-space-s) * 2)}`;let p=class extends o{constructor(){super(...arguments),this.errorSlot=new n(this,"error"),this.hintSlot=new n(this,"hint"),this.label="",this.required=!1,this.hideRequired=!1}render(){const{hasError:e}=this;return i`<fieldset aria-invalid="${a(e,"true")}" aria-describedby="${a(e,"error")}" ?aria-required="${this.required}"><legend class="n-label-container"><div class="n-label"><slot name="label">${this.label}</slot><span aria-hidden="true" class="n-required" ?hidden="${!this.required||this.hideRequired}">*</span></div><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}};p.styles=[l,d,h],e([s()],p.prototype,"label",void 0),e([s()],p.prototype,"hint",void 0),e([s()],p.prototype,"error",void 0),e([s({type:Boolean})],p.prototype,"required",void 0),e([s({type:Boolean,attribute:"hide-required"})],p.prototype,"hideRequired",void 0),p=e([r("nord-fieldset")],p);var c=p;export{c as default};
+import{i as e,_ as r,s as t,y as o,e as i}from"./query-assigned-elements-cf502539.js";import{e as s}from"./property-03f59dce.js";import{S as n}from"./SlotController-89834aef.js";import{c as a}from"./cond-2da54107.js";import{s as l}from"./Component-449e40fb.js";import{s as d}from"./FormField-413f22f5.js";import"./EventController-d99ebeef.js";const h=e`fieldset{border:none}.n-label-container{margin-block-end:calc(var(--n-space-s) * 2)}`;let p=class extends t{constructor(){super(...arguments),this.errorSlot=new n(this,"error"),this.hintSlot=new n(this,"hint"),this.label="",this.required=!1,this.hideRequired=!1}render(){const{hasError:e}=this;return o`<fieldset aria-invalid="${a(e,"true")}" aria-describedby="${a(e,"error")}" ?aria-required="${this.required}"><legend class="n-label-container"><div class="n-label"><slot name="label">${this.label}</slot><span aria-hidden="true" class="n-required" ?hidden="${!this.required||this.hideRequired}">*</span></div><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}};p.styles=[l,d,h],r([s()],p.prototype,"label",void 0),r([s()],p.prototype,"hint",void 0),r([s()],p.prototype,"error",void 0),r([s({type:Boolean})],p.prototype,"required",void 0),r([s({type:Boolean,attribute:"hide-required"})],p.prototype,"hideRequired",void 0),p=r([i("nord-fieldset")],p);var c=p;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  /**\n   * Determines whether the fieldset is required or not.\n   * A fieldset marked as required will be announced as such to users of assistive technology.\n   * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n   */\n  @property({ type: Boolean }) required = false\n\n  /**\n   * Visually hide the required indicator, but still show\n   * required attribute to assistive technologies like screen readers.\n   */\n  @property({ type: Boolean, attribute: \"hide-required\" }) hideRequired = false\n\n  render() {\n    const { hasError } = this\n\n    return html`\n      <fieldset\n        aria-invalid=${cond(hasError, \"true\")}\n        aria-describedby=${cond(hasError, \"error\")}\n        ?aria-required=${this.required}\n      >\n        <legend class=\"n-label-container\">\n          <div class=\"n-label\">\n            <slot name=\"label\">${this.label}</slot\n            ><span aria-hidden=\"true\" class=\"n-required\" ?hidden=${!this.required || this.hideRequired}>*</span>\n          </div>\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","required","hideRequired","render","hasError","html","cond","hasHint","hint","error","Boolean","hasContent","styles","componentStyle","formFieldStyle","style","__decorate","property","prototype","type","attribute","customElement"],"mappings":"8dAqBA,IAAqBA,EAArB,cAAsCC,EAAtCC,kCAGUC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAQG,SAAG,IAAID,EAAeF,KAAM,QAKhCA,KAAKI,MAAW,GAiBCJ,KAAQK,UAAG,EAMiBL,KAAYM,cAAG,CAsCzE,CApCCC,SACE,MAAMC,SAAEA,GAAaR,KAErB,OAAOS,CAAI,2BAEQC,EAAKF,EAAU,8BACXE,EAAKF,EAAU,6BACjBR,KAAKK,uFAIGL,KAAKI,qEAC8BJ,KAAKK,UAAYL,KAAKM,uEAGvCN,KAAKW,8BACxBX,KAAKY,2GAMqCZ,KAAKQ,gCAChDR,KAAKa,+BAIjC,CAEaF,cACZ,OAAOG,QAAQd,KAAKY,OAASZ,KAAKG,SAASY,UAC5C,CAEaP,eACZ,OAAOM,QAAQd,KAAKa,QAAUb,KAAKC,UAAUc,UAC9C,GApEMlB,EAAMmB,OAAG,CAACC,EAAgBC,EAAgBC,GAQrCC,EAAA,CAAXC,KAA6BxB,EAAAyB,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBxB,EAAAyB,UAAA,YAAA,GAKbF,EAAA,CAAXC,KAAyBxB,EAAAyB,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAMT,WAA2BjB,EAAAyB,UAAA,gBAAA,GAMYF,EAAA,CAAxDC,EAAS,CAAEE,KAAMT,QAASU,UAAW,mBAAuC3B,EAAAyB,UAAA,oBAAA,GAhC1DzB,EAAQuB,EAAA,CAD5BK,EAAc,kBACM5B,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  /**\n   * Determines whether the fieldset is required or not.\n   * A fieldset marked as required will be announced as such to users of assistive technology.\n   * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n   */\n  @property({ type: Boolean }) required = false\n\n  /**\n   * Visually hide the required indicator, but still show\n   * required attribute to assistive technologies like screen readers.\n   */\n  @property({ type: Boolean, attribute: \"hide-required\" }) hideRequired = false\n\n  render() {\n    const { hasError } = this\n\n    return html`\n      <fieldset\n        aria-invalid=${cond(hasError, \"true\")}\n        aria-describedby=${cond(hasError, \"error\")}\n        ?aria-required=${this.required}\n      >\n        <legend class=\"n-label-container\">\n          <div class=\"n-label\">\n            <slot name=\"label\">${this.label}</slot\n            ><span aria-hidden=\"true\" class=\"n-required\" ?hidden=${!this.required || this.hideRequired}>*</span>\n          </div>\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","required","hideRequired","render","hasError","html","cond","hasHint","hint","error","Boolean","hasContent","styles","componentStyle","formFieldStyle","style","__decorate","property","prototype","type","attribute","customElement"],"mappings":"ubAqBA,IAAqBA,EAArB,cAAsCC,EAAtCC,kCAGUC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAQG,SAAG,IAAID,EAAeF,KAAM,QAKhCA,KAAKI,MAAW,GAiBCJ,KAAQK,UAAG,EAMiBL,KAAYM,cAAG,CAsCzE,CApCCC,SACE,MAAMC,SAAEA,GAAaR,KAErB,OAAOS,CAAI,2BAEQC,EAAKF,EAAU,8BACXE,EAAKF,EAAU,6BACjBR,KAAKK,uFAIGL,KAAKI,qEAC8BJ,KAAKK,UAAYL,KAAKM,uEAGvCN,KAAKW,8BACxBX,KAAKY,2GAMqCZ,KAAKQ,gCAChDR,KAAKa,+BAIjC,CAEaF,cACZ,OAAOG,QAAQd,KAAKY,OAASZ,KAAKG,SAASY,UAC5C,CAEaP,eACZ,OAAOM,QAAQd,KAAKa,QAAUb,KAAKC,UAAUc,UAC9C,GApEMlB,EAAMmB,OAAG,CAACC,EAAgBC,EAAgBC,GAQrCC,EAAA,CAAXC,KAA6BxB,EAAAyB,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBxB,EAAAyB,UAAA,YAAA,GAKbF,EAAA,CAAXC,KAAyBxB,EAAAyB,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAMT,WAA2BjB,EAAAyB,UAAA,gBAAA,GAMYF,EAAA,CAAxDC,EAAS,CAAEE,KAAMT,QAASU,UAAW,mBAAuC3B,EAAAyB,UAAA,oBAAA,GAhC1DzB,EAAQuB,EAAA,CAD5BK,EAAc,kBACM5B,SAAAA"}

package/lib/{FocusableMixin-34870ed3.js → FocusableMixin-32631bff.js}

@@ -1,2 +1,2 @@
-import{e}from"./ref-0e619221.js";function l(l){return class extends l{constructor(){super(...arguments),this.focusableRef=e()}focus(e){var l;null===(l=this.focusableRef.value)||void 0===l||l.focus(e)}blur(){var e;null===(e=this.focusableRef.value)||void 0===e||e.blur()}click(){var e;null===(e=this.focusableRef.value)||void 0===e||e.click()}}}export{l as F};
-//# sourceMappingURL=FocusableMixin-34870ed3.js.map
+import{e}from"./ref-c44e9f3c.js";function l(l){return class extends l{constructor(){super(...arguments),this.focusableRef=e()}focus(e){var l;null===(l=this.focusableRef.value)||void 0===l||l.focus(e)}blur(){var e;null===(e=this.focusableRef.value)||void 0===e||e.blur()}click(){var e;null===(e=this.focusableRef.value)||void 0===e||e.click()}}}export{l as F};
+//# sourceMappingURL=FocusableMixin-32631bff.js.map

package/lib/{FocusableMixin-34870ed3.js.map → FocusableMixin-32631bff.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FocusableMixin-34870ed3.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<HTMLElement>()\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":"iCAcM,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"}
+{"version":3,"file":"FocusableMixin-32631bff.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<HTMLElement>()\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":"iCAcM,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-e8bc2869.js

@@ -0,0 +1,2 @@
+import{_ as t,y as e}from"./query-assigned-elements-cf502539.js";import{e as r}from"./property-03f59dce.js";import{E as i}from"./EventController-d99ebeef.js";import{S as o}from"./SlotController-89834aef.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,this.hideRequired=!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(t){const r=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot><span ?hidden="${!this.required||this.hideRequired}" aria-hidden="true" class="n-required">*</span> ${t}</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>${r}</nord-visually-hidden>`:e`<div class="n-label-container">${r}</div>`}renderError(){return e`<div class="n-caption n-error" id="${this.errorId}" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div>`}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?`${this.hintId} ${this.errorId}`:t?this.hintId:e?this.errorId:void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}}return t([r()],h.prototype,"label",void 0),t([r()],h.prototype,"hint",void 0),t([r({type:Boolean,attribute:"hide-label"})],h.prototype,"hideLabel",void 0),t([r()],h.prototype,"placeholder",void 0),t([r()],h.prototype,"error",void 0),t([r({type:Boolean})],h.prototype,"required",void 0),t([r({type:Boolean,attribute:"hide-required"})],h.prototype,"hideRequired",void 0),h}export{h as F};
+//# sourceMappingURL=FormAssociatedMixin-e8bc2869.js.map

package/lib/{FormAssociatedMixin-aa74901e.js.map → FormAssociatedMixin-e8bc2869.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FormAssociatedMixin-aa74901e.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  hideRequired: boolean\n  hint?: string\n  hideLabel: boolean\n  placeholder?: string\n  error?: string\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(additionalContent?: TemplateResult): TemplateResult\n  protected renderError(): TemplateResult\n  protected getDescribedBy(): string | undefined\n  protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n  // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n  /**\n   * @slot label - Use when a label requires more than plain text.\n   * @slot hint - Use when a hint requires more than plain text.\n   * @slot error - Optional slot that holds error text for the input.\n   */\n  class FormAssociatedElement extends superClass {\n    protected labelSlot = new SlotController(this, \"label\")\n    protected errorSlot = new SlotController(this, \"error\")\n    protected hintSlot = new SlotController(this, \"hint\")\n    protected formData = new FormDataController(this, { value: () => this.formValue })\n\n    protected get formValue() {\n      return this.value\n    }\n\n    protected inputId = \"input\"\n    protected errorId = \"error\"\n    protected hintId = \"hint\"\n\n    /**\n     * Label for the input.\n     */\n    @property() label: string = \"\"\n\n    /**\n     * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n     */\n    @property() hint?: string\n\n    /**\n     * Visually hide the label, but still show it to assistive technologies like screen readers.\n     */\n    @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n    /**\n     * Placeholder text to display within the input.\n     */\n    @property() placeholder?: string\n\n    /**\n     * Optional error to be shown with the input. Alternatively use the error slot.\n     */\n    @property() error?: string\n\n    /**\n     * Determines whether the input is required or not.\n     * An input marked as required will be announced as such to users of assistive technology.\n     * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n     */\n    @property({ type: Boolean }) required = false\n\n    /**\n     * Visually hide the required indicator, but still show\n     * required attribute to assistive technologies like screen readers.\n     */\n    @property({ type: Boolean, attribute: \"hide-required\" }) hideRequired = 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(additionalContent?: TemplateResult) {\n      const label = html`\n        <label for=${this.inputId}>\n          <slot name=\"label\">${this.label}</slot\n          ><span ?hidden=${!this.required || this.hideRequired} aria-hidden=\"true\" class=\"n-required\">*</span>\n          ${additionalContent}\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","hideRequired","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","additionalContent","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,EAMiB3B,KAAY4B,cAAG,CA2EzE,CAvHeP,gBACZ,OAAOrB,KAAKK,KACb,CA4CSwB,YAAY3B,GACpBA,EAAE4B,kBACF,MAAMC,EAAS7B,EAAE6B,OACjB/B,KAAKK,MAAQ0B,EAAO1B,MAKpBL,KAAKgC,cAAc,IAAIC,EAAU,SAClC,CAESC,aAAahC,GACrBA,EAAE4B,kBAKF9B,KAAKgC,cAAc,IAAIC,EAAU,UAClC,CAESE,YAAYC,GACpB,MAAMX,EAAQY,CAAI,eACHrC,KAAKsB,+BACKtB,KAAKyB,+BACRzB,KAAK2B,UAAY3B,KAAK4B,gEACtCQ,8CAG+BpC,KAAKwB,qBAAmBxB,KAAKsC,8BAC1CtC,KAAKuC,oBAI7B,OAAOvC,KAAK0B,UACRW,CAAI,yBAAyBZ,2BAC7BY,CAAI,kCAAkCZ,SAC3C,CAESe,cACR,OAAOH,CAAI,sCAC2BrC,KAAKuB,mCAAiCvB,KAAKyC,gCACxDzC,KAAK0C,oBAG/B,CAESC,iBACR,MAAML,QAAEA,EAAOG,SAAEA,GAAazC,KAE9B,OAAIsC,GAAWG,EACN,GAAGzC,KAAKwB,UAAUxB,KAAKuB,UAE5Be,EACKtC,KAAKwB,OAEViB,EACKzC,KAAKuB,aADd,CAKD,CAESqB,aACR,OAAO5C,KAAKyC,SAAW,YAASI,CACjC,CAEaP,cACZ,OAAOQ,QAAQ9C,KAAKuC,OAASvC,KAAKoB,SAAS2B,UAC5C,CAEaN,eACZ,OAAOK,QAAQ9C,KAAK0C,QAAU1C,KAAKmB,UAAU4B,UAC9C,EAGH,OA9GcC,EAAA,CAAXC,KAA6BjC,EAAAkC,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBjC,EAAAkC,UAAA,YAAA,GAK6BF,EAAA,CAArDC,EAAS,CAAEE,KAAML,QAASM,UAAW,gBAAiCpC,EAAAkC,UAAA,iBAAA,GAK3DF,EAAA,CAAXC,KAA+BjC,EAAAkC,UAAA,mBAAA,GAKpBF,EAAA,CAAXC,KAAyBjC,EAAAkC,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAML,WAA2B9B,EAAAkC,UAAA,gBAAA,GAMYF,EAAA,CAAxDC,EAAS,CAAEE,KAAML,QAASM,UAAW,mBAAuCpC,EAAAkC,UAAA,oBAAA,GA6ExElC,CACT"}
+{"version":3,"file":"FormAssociatedMixin-e8bc2869.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  hideRequired: boolean\n  hint?: string\n  hideLabel: boolean\n  placeholder?: string\n  error?: string\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(additionalContent?: TemplateResult): TemplateResult\n  protected renderError(): TemplateResult\n  protected getDescribedBy(): string | undefined\n  protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n  // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n  /**\n   * @slot label - Use when a label requires more than plain text.\n   * @slot hint - Use when a hint requires more than plain text.\n   * @slot error - Optional slot that holds error text for the input.\n   */\n  class FormAssociatedElement extends superClass {\n    protected labelSlot = new SlotController(this, \"label\")\n    protected errorSlot = new SlotController(this, \"error\")\n    protected hintSlot = new SlotController(this, \"hint\")\n    protected formData = new FormDataController(this, { value: () => this.formValue })\n\n    protected get formValue() {\n      return this.value\n    }\n\n    protected inputId = \"input\"\n    protected errorId = \"error\"\n    protected hintId = \"hint\"\n\n    /**\n     * Label for the input.\n     */\n    @property() label: string = \"\"\n\n    /**\n     * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n     */\n    @property() hint?: string\n\n    /**\n     * Visually hide the label, but still show it to assistive technologies like screen readers.\n     */\n    @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n    /**\n     * Placeholder text to display within the input.\n     */\n    @property() placeholder?: string\n\n    /**\n     * Optional error to be shown with the input. Alternatively use the error slot.\n     */\n    @property() error?: string\n\n    /**\n     * Determines whether the input is required or not.\n     * An input marked as required will be announced as such to users of assistive technology.\n     * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n     */\n    @property({ type: Boolean }) required = false\n\n    /**\n     * Visually hide the required indicator, but still show\n     * required attribute to assistive technologies like screen readers.\n     */\n    @property({ type: Boolean, attribute: \"hide-required\" }) hideRequired = 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(additionalContent?: TemplateResult) {\n      const label = html`\n        <label for=${this.inputId}>\n          <slot name=\"label\">${this.label}</slot\n          ><span ?hidden=${!this.required || this.hideRequired} aria-hidden=\"true\" class=\"n-required\">*</span>\n          ${additionalContent}\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","hideRequired","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","additionalContent","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","prototype","type","attribute"],"mappings":"0RAQaA,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,EAMiB3B,KAAY4B,cAAG,CA2EzE,CAvHeP,gBACZ,OAAOrB,KAAKK,KACb,CA4CSwB,YAAY3B,GACpBA,EAAE4B,kBACF,MAAMC,EAAS7B,EAAE6B,OACjB/B,KAAKK,MAAQ0B,EAAO1B,MAKpBL,KAAKgC,cAAc,IAAIC,EAAU,SAClC,CAESC,aAAahC,GACrBA,EAAE4B,kBAKF9B,KAAKgC,cAAc,IAAIC,EAAU,UAClC,CAESE,YAAYC,GACpB,MAAMX,EAAQY,CAAI,eACHrC,KAAKsB,+BACKtB,KAAKyB,+BACRzB,KAAK2B,UAAY3B,KAAK4B,gEACtCQ,8CAG+BpC,KAAKwB,qBAAmBxB,KAAKsC,8BAC1CtC,KAAKuC,oBAI7B,OAAOvC,KAAK0B,UACRW,CAAI,yBAAyBZ,2BAC7BY,CAAI,kCAAkCZ,SAC3C,CAESe,cACR,OAAOH,CAAI,sCAC2BrC,KAAKuB,mCAAiCvB,KAAKyC,gCACxDzC,KAAK0C,oBAG/B,CAESC,iBACR,MAAML,QAAEA,EAAOG,SAAEA,GAAazC,KAE9B,OAAIsC,GAAWG,EACN,GAAGzC,KAAKwB,UAAUxB,KAAKuB,UAE5Be,EACKtC,KAAKwB,OAEViB,EACKzC,KAAKuB,aADd,CAKD,CAESqB,aACR,OAAO5C,KAAKyC,SAAW,YAASI,CACjC,CAEaP,cACZ,OAAOQ,QAAQ9C,KAAKuC,OAASvC,KAAKoB,SAAS2B,UAC5C,CAEaN,eACZ,OAAOK,QAAQ9C,KAAK0C,QAAU1C,KAAKmB,UAAU4B,UAC9C,EAGH,OA9GcC,EAAA,CAAXC,KAA6BjC,EAAAkC,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBjC,EAAAkC,UAAA,YAAA,GAK6BF,EAAA,CAArDC,EAAS,CAAEE,KAAML,QAASM,UAAW,gBAAiCpC,EAAAkC,UAAA,iBAAA,GAK3DF,EAAA,CAAXC,KAA+BjC,EAAAkC,UAAA,mBAAA,GAKpBF,EAAA,CAAXC,KAAyBjC,EAAAkC,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAML,WAA2B9B,EAAAkC,UAAA,gBAAA,GAMYF,EAAA,CAAxDC,EAAS,CAAEE,KAAML,QAASM,UAAW,mBAAuCpC,EAAAkC,UAAA,oBAAA,GA6ExElC,CACT"}

package/lib/FormField-413f22f5.js

@@ -0,0 +1,2 @@
+import{i as n}from"./query-assigned-elements-cf502539.js";const a=n`.n-caption,::slotted(.n-caption){font-size:var(--n-font-size-s);line-height:var(--n-line-height-caption)}.n-label-container{margin-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)}.n-required{color:var(--n-color-status-danger);margin-inline-start:calc(var(--n-space-s)/ 2)}`;export{a as s};
+//# sourceMappingURL=FormField-413f22f5.js.map

package/lib/FormField-413f22f5.js.map

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

package/lib/Header.js

@@ -1,2 +1,2 @@
-import{_ as e,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as a,s as o,y as n}from"./lit-element-9178eae5.js";import{S as t}from"./SlotController-89834aef.js";import{s}from"./Component-92eb6234.js";import"./EventController-d99ebeef.js";const d=a`:host{color:var(--n-color-text);--_n-header-gutter:var(--n-space-l);--_n-header-box-shadow:var(--n-box-shadow-header)}::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);padding-inline-start:var(--_n-header-gutter);background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);min-block-size:var(--n-space-xxl)}.n-header-end{margin-inline-start:auto;gap:var(--n-space-s)}`;let l=class extends o{constructor(){super(...arguments),this.endSlot=new t(this,"end")}render(){return n`<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{i as e,_ as r,s as a,y as o,e as n}from"./query-assigned-elements-cf502539.js";import{S as t}from"./SlotController-89834aef.js";import{s}from"./Component-449e40fb.js";import"./EventController-d99ebeef.js";const d=e`:host{color:var(--n-color-text);--_n-header-gutter:var(--n-space-l);--_n-header-box-shadow:var(--n-box-shadow-header)}::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);padding-inline-start:var(--_n-header-gutter);background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);min-block-size:var(--n-space-xxl)}.n-header-end{margin-inline-start:auto;gap:var(--n-space-s)}`;let l=class extends a{constructor(){super(...arguments),this.endSlot=new t(this,"end")}render(){return o`<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=r([n("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":"06BAgBA,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"}
+{"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":"m4BAgBA,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,7 +1,7 @@
-import{_ as e,e as s}from"./query-assigned-elements-e6cbac30.js";import{b as i,x as t,i as r,s as o,y as n}from"./lit-element-9178eae5.js";import{e as a}from"./property-03f59dce.js";import{t as c}from"./state-70f38ceb.js";import{l}from"./if-defined-4598a996.js";import{i as h,t as d,e as v}from"./directive-de55b00a.js";import{o as m}from"./observe-a9c6dfb6.js";import{c as p}from"./cond-338158e9.js";import{s as f}from"./Component-92eb6234.js";
+import{b as e,x as s,i,_ as t,s as r,y as o,e as n}from"./query-assigned-elements-cf502539.js";import{e as a}from"./property-03f59dce.js";import{t as c}from"./state-70f38ceb.js";import{l}from"./if-defined-720964c0.js";import{i as h,t as d,e as v}from"./directive-de55b00a.js";import{o as p}from"./observe-a9c6dfb6.js";import{c as m}from"./cond-2da54107.js";import{s as f}from"./Component-449e40fb.js";
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */class u extends h{constructor(e){if(super(e),this.it=i,e.type!==d.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===i||null==e)return this._t=void 0,this.it=e;if(e===t)return e;if("string"!=typeof e)throw Error(this.constructor.directiveName+"() called with a non-string value");if(e===this.it)return this._t;this.it=e;const s=[e];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}u.directiveName="unsafeHTML",u.resultType=1;const g=v(u),z=r`: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=xxs]){--_n-icon-size:var(--n-size-icon-xxs)}: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 y;let b=y=class extends o{constructor(){super(...arguments),this.name="",this.size="m",this.svg=""}static registerResolver(e){y.resolver=e}static registerIcon(e,s){let i,t;if("string"==typeof e?(i=e,t=s):(i=e.title,t=e.default),!i)throw new Error("name is required when registering an icon");if(!t)throw new Error("icon must not be empty");y.registeredIcons.has(i)||y.registeredIcons.set(i,t)}render(){return n`<div role="${p(this.label,"img")}" style="${p(this.color,`color:${this.color}`)}" aria-label="${l(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${g(this.svg)}</div></div>`}handleNameChange(){this.name?y.registeredIcons.has(this.name)?this.svg=y.registeredIcons.get(this.name):y.resolver(this.name).then((e=>{this.svg=e})).catch((()=>{this.svg=""})):this.svg=""}};b.styles=[f,z],b.resolver=e=>fetch(`https://nordcdn.net/ds/icons/1.8.0/assets/${e}.svg`).then((s=>{if(!s.ok)throw new TypeError(`NORD: unknown icon '${e}'`);return s.text()})),b.registeredIcons=new Map,e([a({reflect:!0})],b.prototype,"name",void 0),e([a({reflect:!0})],b.prototype,"size",void 0),e([a({reflect:!0})],b.prototype,"color",void 0),e([a({reflect:!0})],b.prototype,"label",void 0),e([c()],b.prototype,"svg",void 0),e([m("name")],b.prototype,"handleNameChange",null),b=y=e([s("nord-icon")],b);var x=b;export{x as default};
+ */class u extends h{constructor(s){if(super(s),this.it=e,s.type!==d.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(i){if(i===e||null==i)return this._t=void 0,this.it=i;if(i===s)return i;if("string"!=typeof i)throw Error(this.constructor.directiveName+"() called with a non-string value");if(i===this.it)return this._t;this.it=i;const t=[i];return t.raw=t,this._t={_$litType$:this.constructor.resultType,strings:t,values:[]}}}u.directiveName="unsafeHTML",u.resultType=1;const g=v(u),z=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=xxs]){--_n-icon-size:var(--n-size-icon-xxs)}: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 y;let b=y=class extends r{constructor(){super(...arguments),this.name="",this.size="m",this.svg=""}static registerResolver(e){y.resolver=e}static registerIcon(e,s){let i,t;if("string"==typeof e?(i=e,t=s):(i=e.title,t=e.default),!i)throw new Error("name is required when registering an icon");if(!t)throw new Error("icon must not be empty");y.registeredIcons.has(i)||y.registeredIcons.set(i,t)}render(){return o`<div role="${m(this.label,"img")}" style="${m(this.color,`color:${this.color}`)}" aria-label="${l(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${g(this.svg)}</div></div>`}handleNameChange(){this.name?y.registeredIcons.has(this.name)?this.svg=y.registeredIcons.get(this.name):y.resolver(this.name).then((e=>{this.svg=e})).catch((()=>{this.svg=""})):this.svg=""}};b.styles=[f,z],b.resolver=e=>fetch(`https://nordcdn.net/ds/icons/1.8.0/assets/${e}.svg`).then((s=>{if(!s.ok)throw new TypeError(`NORD: unknown icon '${e}'`);return s.text()})),b.registeredIcons=new Map,t([a({reflect:!0})],b.prototype,"name",void 0),t([a({reflect:!0})],b.prototype,"size",void 0),t([a({reflect:!0})],b.prototype,"color",void 0),t([a({reflect:!0})],b.prototype,"label",void 0),t([c()],b.prototype,"svg",void 0),t([p("name")],b.prototype,"handleNameChange",null),b=y=t([n("nord-icon")],b);var x=b;export{x as default};
 //# sourceMappingURL=Icon.js.map

package/lib/Input.js

@@ -1,2 +1,2 @@
-import{_ as t,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as e,y as o,b as s,s as r}from"./lit-element-9178eae5.js";import{e as i}from"./property-03f59dce.js";import{l as a}from"./if-defined-4598a996.js";import{o as d}from"./class-map-949b7d3b.js";import{n as l}from"./ref-0e619221.js";import{F as p}from"./FocusableMixin-34870ed3.js";import{F as c}from"./FormAssociatedMixin-aa74901e.js";import{I as u}from"./InputMixin-158f63fb.js";import{R as h,s as m}from"./TextField-db22898b.js";import{A as b}from"./AutocompleteMixin-370de2be.js";import{S as v,i as f}from"./SizeMixin-4559b224.js";import{s as g}from"./Component-92eb6234.js";import{s as w}from"./FormField-ae3570d2.js";import{S as y}from"./SlotController-89834aef.js";import{D as $}from"./DirectionController-8b298382.js";import{c as j}from"./cond-338158e9.js";import x from"./Icon.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";import"./state-70f38ceb.js";import"./observe-a9c6dfb6.js";var z=Object.freeze({__proto__:null,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>',title:"navigation-search",tags:"nordicon navigation menu find search magnifying glass"});const S=e`.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);display:grid;grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4}slot[name=end],slot[name=start]{pointer-events:none;display:flex;align-items:center;color:var(--n-color-icon)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(:not(nord-button,nord-dropdown)),nord-icon{margin-inline-start:var(--n-space-m);margin-inline-end:var(--n-space-m)}:host([size="s"]) :is([name=start],[name=end])::slotted(:not(nord-button,nord-dropdown)),:host([size="s"]) nord-icon{margin-inline-start:var(--n-space-s);margin-inline-end:var(--n-space-s)}:host([size="l"]) :is([name=start],[name=end])::slotted(:not(nord-button,nord-dropdown)),:host([size="l"]) nord-icon{margin-inline-start:var(--n-space-m);margin-inline-end:var(--n-space-m)}.has-start .n-input{padding-inline-start:var(--n-space-xl)}.has-end .n-input{padding-inline-end:var(--n-space-xl)}:host([size="s"]) .has-start .n-input,:host([size="s"][type=search]) .n-input{padding-inline-start:var(--n-space-l)}:host([size="s"]) .has-end .n-input{padding-inline-end:var(--n-space-l)}:host([size="l"]) .has-start .n-input,:host([size="l"][type=search]) .n-input{padding-inline-start:calc(var(--n-space-xl) * 1.1)}:host([size="l"]) .has-end .n-input{padding-inline-end:calc(var(--n-space-xl) * 1.1)}::slotted(nord-button:not([disabled])),::slotted(nord-dropdown){pointer-events:auto;position:relative;--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-background-color:transparent}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button,nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button,nord-dropdown)){--n-button-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color, var(--n-color-status-danger))}.has-start-button .n-input{padding-inline-start:calc(var(--n-space-l) * 2)}.has-end-button .n-input{padding-inline-end:calc(var(--n-space-l) * 2)}:host([size="s"]) .has-start-button .n-input{padding-inline-start:calc(var(--n-space-m) * 2.5)}:host([size="s"]) .has-end-button .n-input{padding-inline-end:calc(var(--n-space-m) * 2.5)}:host([size="l"]) .has-start-button .n-input{padding-inline-start:calc(var(--n-space-l) * 2.5)}:host([size="l"]) .has-end-button .n-input{padding-inline-end:calc(var(--n-space-l) * 2.5)}:host([size="s"]) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s) * 1.4)}`;x.registerIcon(z);const k=t=>null!==t&&("nord-button"===t.localName||"nord-dropdown"===t.localName);let C=class extends(v(c(b(h(u(p(r))))))){constructor(){super(...arguments),this.startSlot=new y(this,"start"),this.endSlot=new y(this,"end"),this.direction=new $(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,o=t.selectionStart,s=e.slice(0,o),r=e.slice(o,e.length),i=s.replace(n,""),a=i+r.replace(n,""),d=i.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const n="search"===this.type||this.startSlot.hasContent,e="number"===this.type,r=f[this.size]||f.m;return o`${this.renderLabel()}<div class="${d({"n-input-container":!0,"has-start":n,"has-end":this.endSlot.hasContent,"has-start-button":k(this.startSlot.content),"has-end-button":k(this.endSlot.content),"is-rtl":"rtl"===this.direction.dir})}"><slot name="${this.startSlot.slotName}" ?hidden="${!n}">${"search"===this.type?o`<nord-icon name="navigation-search" size="${r}"></nord-icon>`:s}</slot><input ${l(this.focusableRef)} id="${this.inputId}" class="n-input" type="${e?"text":this.type}" inputmode="${j(e,"numeric")}" pattern="${j(e,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${a(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInputChange}" @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(t){const{form:n}=this;if("Enter"===t.key&&n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}};C.styles=[g,w,m,S],t([i({reflect:!0})],C.prototype,"type",void 0),t([i({reflect:!0,type:Boolean})],C.prototype,"expand",void 0),t([i({reflect:!0,attribute:"disallow-pattern"})],C.prototype,"disallowPattern",void 0),C=t([n("nord-input")],C);var I=C;export{I as default};
+import{i as t,y as n,b as e,_ as o,e as s,s as r}from"./query-assigned-elements-cf502539.js";import{e as i}from"./property-03f59dce.js";import{l as a}from"./if-defined-720964c0.js";import{o as d}from"./class-map-21152cee.js";import{n as l}from"./ref-c44e9f3c.js";import{F as c}from"./FocusableMixin-32631bff.js";import{F as p}from"./FormAssociatedMixin-e8bc2869.js";import{I as u}from"./InputMixin-7fa755e1.js";import{R as h,s as m}from"./TextField-ca819c35.js";import{A as b}from"./AutocompleteMixin-5163f8db.js";import{S as v,i as f}from"./SizeMixin-d5afdb92.js";import{s as g}from"./Component-449e40fb.js";import{s as w}from"./FormField-413f22f5.js";import{S as y}from"./SlotController-89834aef.js";import{D as $}from"./DirectionController-8b298382.js";import{c as j}from"./cond-2da54107.js";import x from"./Icon.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";import"./state-70f38ceb.js";import"./observe-a9c6dfb6.js";var z=Object.freeze({__proto__:null,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>',title:"navigation-search",tags:"nordicon navigation menu find search magnifying glass"});const S=t`.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);display:grid;grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4}slot[name=end],slot[name=start]{pointer-events:none;display:flex;align-items:center;color:var(--n-color-icon)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(:not(nord-button,nord-dropdown)),nord-icon{margin-inline-start:var(--n-space-m);margin-inline-end:var(--n-space-m)}:host([size="s"]) :is([name=start],[name=end])::slotted(:not(nord-button,nord-dropdown)),:host([size="s"]) nord-icon{margin-inline-start:var(--n-space-s);margin-inline-end:var(--n-space-s)}:host([size="l"]) :is([name=start],[name=end])::slotted(:not(nord-button,nord-dropdown)),:host([size="l"]) nord-icon{margin-inline-start:var(--n-space-m);margin-inline-end:var(--n-space-m)}.has-start .n-input{padding-inline-start:var(--n-space-xl)}.has-end .n-input{padding-inline-end:var(--n-space-xl)}:host([size="s"]) .has-start .n-input,:host([size="s"][type=search]) .n-input{padding-inline-start:var(--n-space-l)}:host([size="s"]) .has-end .n-input{padding-inline-end:var(--n-space-l)}:host([size="l"]) .has-start .n-input,:host([size="l"][type=search]) .n-input{padding-inline-start:calc(var(--n-space-xl) * 1.1)}:host([size="l"]) .has-end .n-input{padding-inline-end:calc(var(--n-space-xl) * 1.1)}::slotted(nord-button:not([disabled])),::slotted(nord-dropdown){pointer-events:auto;position:relative;--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-background-color:transparent}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button,nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button,nord-dropdown)){--n-button-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color, var(--n-color-status-danger))}.has-start-button .n-input{padding-inline-start:calc(var(--n-space-l) * 2)}.has-end-button .n-input{padding-inline-end:calc(var(--n-space-l) * 2)}:host([size="s"]) .has-start-button .n-input{padding-inline-start:calc(var(--n-space-m) * 2.5)}:host([size="s"]) .has-end-button .n-input{padding-inline-end:calc(var(--n-space-m) * 2.5)}:host([size="l"]) .has-start-button .n-input{padding-inline-start:calc(var(--n-space-l) * 2.5)}:host([size="l"]) .has-end-button .n-input{padding-inline-end:calc(var(--n-space-l) * 2.5)}:host([size="s"]) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s) * 1.4)}`;x.registerIcon(z);const k=t=>null!==t&&("nord-button"===t.localName||"nord-dropdown"===t.localName);let C=class extends(v(p(b(h(u(c(r))))))){constructor(){super(...arguments),this.startSlot=new y(this,"start"),this.endSlot=new y(this,"end"),this.direction=new $(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,o=t.selectionStart,s=e.slice(0,o),r=e.slice(o,e.length),i=s.replace(n,""),a=i+r.replace(n,""),d=i.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const o="search"===this.type||this.startSlot.hasContent,s="number"===this.type,r=f[this.size]||f.m;return n`${this.renderLabel()}<div class="${d({"n-input-container":!0,"has-start":o,"has-end":this.endSlot.hasContent,"has-start-button":k(this.startSlot.content),"has-end-button":k(this.endSlot.content),"is-rtl":"rtl"===this.direction.dir})}"><slot name="${this.startSlot.slotName}" ?hidden="${!o}">${"search"===this.type?n`<nord-icon name="navigation-search" size="${r}"></nord-icon>`:e}</slot><input ${l(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!==(t=this.value)&&void 0!==t?t:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInputChange}" @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(t){const{form:n}=this;if("Enter"===t.key&&n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}};C.styles=[g,w,m,S],o([i({reflect:!0})],C.prototype,"type",void 0),o([i({reflect:!0,type:Boolean})],C.prototype,"expand",void 0),o([i({reflect:!0,attribute:"disallow-pattern"})],C.prototype,"disallowPattern",void 0),C=o([s("nord-input")],C);var I=C;export{I as default};
 //# sourceMappingURL=Input.js.map

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../icons/lib/assets/navigation-search.js","../src/input/Input.ts","../src/common/input.ts","../src/common/form.ts"],"sourcesContent":["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","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\"\n\nimport * as 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\"\nimport { SizeMixin, iconSizeMap } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Input.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { getSubmitButton } from \"../common/form.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport type Dropdown from \"../dropdown/Dropdown.js\"\nimport type Button from \"../button/Button.js\"\n\nIcon.registerIcon(searchIcon)\n\nconst isButtonOrDropdown = (el: Element | null): el is Button | Dropdown => {\n  if (el === null) return false\n  return el.localName === \"nord-button\" || el.localName === \"nord-dropdown\"\n}\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 * @cssprop [--n-input-inline-size=240px] - Controls the inline size, or width, of the input.\n * @cssprop [--n-input-background=var(--n-color-active)] - Controls the background of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-color=var(--n-color-text)] - Controls the text color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-color=var(--n-color-border-strong)] - Controls the border color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n */\n@customElement(\"nord-input\")\nexport default class Input extends SizeMixin(\n  FormAssociatedMixin(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  private direction = new DirectionController(this)\n\n  /**\n   * The type of the input.\n   */\n  @property({ reflect: true }) 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  /**\n   * Optionally disallow certain characters from being used inside the input, using a regex pattern.\n   */\n  @property({ reflect: true, attribute: \"disallow-pattern\" }) disallowPattern?: string = undefined\n\n  render() {\n    const startSlotHasContent = this.type === \"search\" || this.startSlot.hasContent\n    const isNumber = this.type === \"number\"\n    const iconSize = iconSizeMap[this.size] || iconSizeMap.m\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          \"has-start-button\": isButtonOrDropdown(this.startSlot.content),\n          \"has-end-button\": isButtonOrDropdown(this.endSlot.content),\n          \"is-rtl\": this.direction.dir === \"rtl\",\n        })}\n      >\n        <slot name=${this.startSlot.slotName} ?hidden=${!startSlotHasContent}>\n          ${this.type === \"search\" ? html`<nord-icon name=\"navigation-search\" size=${iconSize}></nord-icon>` : nothing}\n        </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.handleInputChange}\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  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    if (this.disallowPattern) {\n      cleanValue(target, new RegExp(this.disallowPattern, \"g\"))\n    }\n    this.handleInput(e)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-input\": Input\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n  const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\n","/**\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":["Icon","registerIcon","searchIcon","isButtonOrDropdown","el","localName","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","startSlot","SlotController","endSlot","direction","DirectionController","type","expand","disallowPattern","undefined","handleInputChange","e","target","inputEl","regex","value","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","startSlotHasContent","hasContent","isNumber","iconSize","iconSizeMap","size","m","html","renderLabel","classMap","content","dir","slotName","nothing","ref","focusableRef","inputId","cond","disabled","required","readonly","ifDefined","name","_a","placeholder","handleChange","handleKeydown","getDescribedBy","getInvalid","autocomplete","isEmpty","renderError","form","key","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","reflect","prototype","Boolean","attribute","customElement"],"mappings":"gkCAAe,sQACM,yBACD,wxGC0BpBA,EAAKC,aAAaC,GAElB,MAAMC,EAAsBC,GACf,OAAPA,IACoB,gBAAjBA,EAAGC,WAAgD,kBAAjBD,EAAGC,WAsB9C,IAAqBC,EAArB,cAAmCC,EACjCC,EAAoBC,EAAkBC,EAAcC,EAAWC,EAAeC,SADhFC,kCAKUC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAOG,QAAG,IAAID,EAAeF,KAAM,OACnCA,KAAAI,UAAY,IAAIC,EAAoBL,MAKfA,KAAIM,KAAwE,OAK7DN,KAAMO,QAAG,EAKOP,KAAeQ,qBAAYC,EA4D/ET,KAAAU,kBAAqBC,IAC3B,MAAMC,EAASD,EAAEC,OAGbZ,KAAKQ,iBC5IG,SAAWK,EAA2BC,GACpD,MAAMC,MAAEA,GAAUF,EACZG,EAASH,EAAQI,eAEjBC,EAAeH,EAAMI,MAAM,EAAGH,GAC9BI,EAAcL,EAAMI,MAAMH,EAAQD,EAAMM,QAExCC,EAAuBJ,EAAaK,QAAQT,EAAO,IAGnDU,EAAWF,EAFSF,EAAYG,QAAQT,EAAO,IAG/CW,EAAYH,EAAqBD,OAEvCR,EAAQE,MAAQS,EAChBX,EAAQI,eAAiBQ,EACzBZ,EAAQa,aAAeD,CAGzB,CD2HME,CAAWf,EAAQ,IAAIgB,OAAO5B,KAAKQ,gBAAiB,MAEtDR,KAAK6B,YAAYlB,EAAE,CAEtB,CAnECmB,eACE,MAAMC,EAAoC,WAAd/B,KAAKM,MAAqBN,KAAKC,UAAU+B,WAC/DC,EAAyB,WAAdjC,KAAKM,KAChB4B,EAAWC,EAAYnC,KAAKoC,OAASD,EAAYE,EAEvD,OAAOC,CAAI,GACPtC,KAAKuC,4BAGGC,EAAS,CACf,qBAAqB,EACrB,YAAaT,EACb,UAAW/B,KAAKG,QAAQ6B,WACxB,mBAAoB5C,EAAmBY,KAAKC,UAAUwC,SACtD,iBAAkBrD,EAAmBY,KAAKG,QAAQsC,SAClD,SAAiC,QAAvBzC,KAAKI,UAAUsC,sBAGd1C,KAAKC,UAAU0C,uBAAqBZ,MAC/B,WAAd/B,KAAKM,KAAoBgC,CAAI,6CAA4CJ,kBAA0BU,kBAGnGC,EAAI7C,KAAK8C,qBACN9C,KAAK+C,kCAEHd,EAAW,OAASjC,KAAKM,oBACpB0C,EAAKf,EAAU,wBACjBe,EAAKf,EAAU,yBACbjC,KAAKiD,wBACLjD,KAAKkD,wBACLlD,KAAKmD,mBACVC,EAAUpD,KAAKqD,kBACH,QAAVC,EAAAtD,KAAKe,aAAK,IAAAuC,EAAAA,EAAI,oBACTF,EAAUpD,KAAKuD,yBACpBvD,KAAKU,+BACJV,KAAKwD,2BACJxD,KAAKyD,oCACGL,EAAUpD,KAAK0D,oCACnBN,EAAUpD,KAAK2D,mDAEf3D,KAAK4D,6BAET5D,KAAKG,QAAQwC,sBAAoB3C,KAAKG,QAAQ0D,yBAG3D7D,KAAK8D,eAEV,CAEOL,cAAc9C,GACpB,MAAMoD,KAAEA,GAAS/D,KAEjB,GAAc,UAAVW,EAAEqD,KAAmBD,EAAM,CAC7B,MAAME,EE/HN,SAA0BF,GAG9B,IAAIE,EAASF,EAAKG,cAAiC,0BAE9CD,GAAUF,EAAKI,KAElBF,EADaF,EAAKK,cACJF,cAAiC,eAAeH,EAAKI,QAGrE,OAAOF,CACT,CFoHqBI,CAAgBN,GAC/BO,YAAW,IAAML,aAAA,EAAAA,EAAQM,SAAS,EACnC,CACF,GA7EMhF,EAAMiF,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GASpCC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0FxF,EAAAyF,UAAA,YAAA,GAKnEH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMzE,KAAM2E,WAAyB1F,EAAAyF,UAAA,cAAA,GAKEH,EAAA,CAA3DC,EAAS,CAAEC,SAAS,EAAMG,UAAW,sBAA0D3F,EAAAyF,UAAA,uBAAA,GAtB7EzF,EAAKsF,EAAA,CADzBM,EAAc,eACM5F,SAAAA"}
+{"version":3,"file":"Input.js","sources":["../../icons/lib/assets/navigation-search.js","../src/input/Input.ts","../src/common/input.ts","../src/common/form.ts"],"sourcesContent":["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","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\"\n\nimport * as 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\"\nimport { SizeMixin, iconSizeMap } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Input.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { getSubmitButton } from \"../common/form.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport type Dropdown from \"../dropdown/Dropdown.js\"\nimport type Button from \"../button/Button.js\"\n\nIcon.registerIcon(searchIcon)\n\nconst isButtonOrDropdown = (el: Element | null): el is Button | Dropdown => {\n  if (el === null) return false\n  return el.localName === \"nord-button\" || el.localName === \"nord-dropdown\"\n}\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 * @cssprop [--n-input-inline-size=240px] - Controls the inline size, or width, of the input.\n * @cssprop [--n-input-background=var(--n-color-active)] - Controls the background of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-color=var(--n-color-text)] - Controls the text color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-color=var(--n-color-border-strong)] - Controls the border color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n */\n@customElement(\"nord-input\")\nexport default class Input extends SizeMixin(\n  FormAssociatedMixin(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  private direction = new DirectionController(this)\n\n  /**\n   * The type of the input.\n   */\n  @property({ reflect: true }) 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  /**\n   * Optionally disallow certain characters from being used inside the input, using a regex pattern.\n   */\n  @property({ reflect: true, attribute: \"disallow-pattern\" }) disallowPattern?: string = undefined\n\n  render() {\n    const startSlotHasContent = this.type === \"search\" || this.startSlot.hasContent\n    const isNumber = this.type === \"number\"\n    const iconSize = iconSizeMap[this.size] || iconSizeMap.m\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          \"has-start-button\": isButtonOrDropdown(this.startSlot.content),\n          \"has-end-button\": isButtonOrDropdown(this.endSlot.content),\n          \"is-rtl\": this.direction.dir === \"rtl\",\n        })}\n      >\n        <slot name=${this.startSlot.slotName} ?hidden=${!startSlotHasContent}>\n          ${this.type === \"search\" ? html`<nord-icon name=\"navigation-search\" size=${iconSize}></nord-icon>` : nothing}\n        </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.handleInputChange}\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  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    if (this.disallowPattern) {\n      cleanValue(target, new RegExp(this.disallowPattern, \"g\"))\n    }\n    this.handleInput(e)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-input\": Input\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n  const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\n","/**\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":["Icon","registerIcon","searchIcon","isButtonOrDropdown","el","localName","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","startSlot","SlotController","endSlot","direction","DirectionController","type","expand","disallowPattern","undefined","handleInputChange","e","target","inputEl","regex","value","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","startSlotHasContent","hasContent","isNumber","iconSize","iconSizeMap","size","m","html","renderLabel","classMap","content","dir","slotName","nothing","ref","focusableRef","inputId","cond","disabled","required","readonly","ifDefined","name","_a","placeholder","handleChange","handleKeydown","getDescribedBy","getInvalid","autocomplete","isEmpty","renderError","form","key","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","reflect","prototype","Boolean","attribute","customElement"],"mappings":"yhCAAe,sQACM,yBACD,wxGC0BpBA,EAAKC,aAAaC,GAElB,MAAMC,EAAsBC,GACf,OAAPA,IACoB,gBAAjBA,EAAGC,WAAgD,kBAAjBD,EAAGC,WAsB9C,IAAqBC,EAArB,cAAmCC,EACjCC,EAAoBC,EAAkBC,EAAcC,EAAWC,EAAeC,SADhFC,kCAKUC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAOG,QAAG,IAAID,EAAeF,KAAM,OACnCA,KAAAI,UAAY,IAAIC,EAAoBL,MAKfA,KAAIM,KAAwE,OAK7DN,KAAMO,QAAG,EAKOP,KAAeQ,qBAAYC,EA4D/ET,KAAAU,kBAAqBC,IAC3B,MAAMC,EAASD,EAAEC,OAGbZ,KAAKQ,iBC5IG,SAAWK,EAA2BC,GACpD,MAAMC,MAAEA,GAAUF,EACZG,EAASH,EAAQI,eAEjBC,EAAeH,EAAMI,MAAM,EAAGH,GAC9BI,EAAcL,EAAMI,MAAMH,EAAQD,EAAMM,QAExCC,EAAuBJ,EAAaK,QAAQT,EAAO,IAGnDU,EAAWF,EAFSF,EAAYG,QAAQT,EAAO,IAG/CW,EAAYH,EAAqBD,OAEvCR,EAAQE,MAAQS,EAChBX,EAAQI,eAAiBQ,EACzBZ,EAAQa,aAAeD,CAGzB,CD2HME,CAAWf,EAAQ,IAAIgB,OAAO5B,KAAKQ,gBAAiB,MAEtDR,KAAK6B,YAAYlB,EAAE,CAEtB,CAnECmB,eACE,MAAMC,EAAoC,WAAd/B,KAAKM,MAAqBN,KAAKC,UAAU+B,WAC/DC,EAAyB,WAAdjC,KAAKM,KAChB4B,EAAWC,EAAYnC,KAAKoC,OAASD,EAAYE,EAEvD,OAAOC,CAAI,GACPtC,KAAKuC,4BAGGC,EAAS,CACf,qBAAqB,EACrB,YAAaT,EACb,UAAW/B,KAAKG,QAAQ6B,WACxB,mBAAoB5C,EAAmBY,KAAKC,UAAUwC,SACtD,iBAAkBrD,EAAmBY,KAAKG,QAAQsC,SAClD,SAAiC,QAAvBzC,KAAKI,UAAUsC,sBAGd1C,KAAKC,UAAU0C,uBAAqBZ,MAC/B,WAAd/B,KAAKM,KAAoBgC,CAAI,6CAA4CJ,kBAA0BU,kBAGnGC,EAAI7C,KAAK8C,qBACN9C,KAAK+C,kCAEHd,EAAW,OAASjC,KAAKM,oBACpB0C,EAAKf,EAAU,wBACjBe,EAAKf,EAAU,yBACbjC,KAAKiD,wBACLjD,KAAKkD,wBACLlD,KAAKmD,mBACVC,EAAUpD,KAAKqD,kBACH,QAAVC,EAAAtD,KAAKe,aAAK,IAAAuC,EAAAA,EAAI,oBACTF,EAAUpD,KAAKuD,yBACpBvD,KAAKU,+BACJV,KAAKwD,2BACJxD,KAAKyD,oCACGL,EAAUpD,KAAK0D,oCACnBN,EAAUpD,KAAK2D,mDAEf3D,KAAK4D,6BAET5D,KAAKG,QAAQwC,sBAAoB3C,KAAKG,QAAQ0D,yBAG3D7D,KAAK8D,eAEV,CAEOL,cAAc9C,GACpB,MAAMoD,KAAEA,GAAS/D,KAEjB,GAAc,UAAVW,EAAEqD,KAAmBD,EAAM,CAC7B,MAAME,EE/HN,SAA0BF,GAG9B,IAAIE,EAASF,EAAKG,cAAiC,0BAE9CD,GAAUF,EAAKI,KAElBF,EADaF,EAAKK,cACJF,cAAiC,eAAeH,EAAKI,QAGrE,OAAOF,CACT,CFoHqBI,CAAgBN,GAC/BO,YAAW,IAAML,aAAA,EAAAA,EAAQM,SAAS,EACnC,CACF,GA7EMhF,EAAMiF,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GASpCC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0FxF,EAAAyF,UAAA,YAAA,GAKnEH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMzE,KAAM2E,WAAyB1F,EAAAyF,UAAA,cAAA,GAKEH,EAAA,CAA3DC,EAAS,CAAEC,SAAS,EAAMG,UAAW,sBAA0D3F,EAAAyF,UAAA,uBAAA,GAtB7EzF,EAAKsF,EAAA,CADzBM,EAAc,eACM5F,SAAAA"}

package/lib/{InputMixin-158f63fb.js → InputMixin-7fa755e1.js}

@@ -1,2 +1,2 @@
-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
+import{_ as t}from"./query-assigned-elements-cf502539.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-7fa755e1.js.map

package/lib/{InputMixin-158f63fb.js.map → InputMixin-7fa755e1.js.map}

@@ -1 +1 @@
-{"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\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<HTMLFormElement>(`form#${this.getAttribute(\"form\")}`)\n      }\n\n      return this.closest(\"form\")\n    }\n  }\n\n  return InputElement\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,cAA+B,QAAQN,KAAKO,aAAa,UACtE,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"}
+{"version":3,"file":"InputMixin-7fa755e1.js","sources":["../src/common/mixins/InputMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class InputMixinInterface {\n  name?: string\n  value: string\n  disabled: boolean\n  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<HTMLFormElement>(`form#${this.getAttribute(\"form\")}`)\n      }\n\n      return this.closest(\"form\")\n    }\n  }\n\n  return InputElement\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,cAA+B,QAAQN,KAAKO,aAAa,UACtE,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/Layout.js

@@ -1,2 +1,2 @@
-import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as t,s as i,y as a,b as o}from"./lit-element-9178eae5.js";import{e as s}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{o as l}from"./class-map-949b7d3b.js";import{i as c}from"./style-map-2fe03b77.js";import{D as h}from"./DirectionController-8b298382.js";import{E as p}from"./EventController-d99ebeef.js";import{L as v}from"./LightDismissController-a2645ae6.js";import{S as u}from"./SlotController-89834aef.js";import{o as g}from"./observe-a9c6dfb6.js";import{c as m}from"./cond-338158e9.js";import{f as y}from"./fsm-50373df9.js";import{c as b}from"./number-c3ab3e95.js";import"./NavToggle.js";import{s as k}from"./Component-92eb6234.js";import{s as f}from"./Sticky-991acfdd.js";import"./directive-de55b00a.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ref-0e619221.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./DraftComponentMixin-9e4b7b34.js";import"./FocusableMixin-34870ed3.js";import"./Button.js";import"./LightDomController-3c726b20.js";import"./Spinner.js";import"./if-defined-4598a996.js";import"./InputMixin-158f63fb.js";import"./Icon.js";import"./VisuallyHidden.js";const w=t`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);background:var(--_n-layout-background-color);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-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{position:relative}main{padding:var(--_n-layout-padding)}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}: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{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);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]:not([data-nav=opened]) .n-layout-nav{overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:"";position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek]) .n-layout-main::after{visibility:hidden;opacity:0}.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 var(--n-transition-slowly);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;transition-delay:.15s}@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:var(--n-layout-padding, 0)}.n-nav-toggle-container{position:absolute;padding:var(--n-space-m) var(--n-space-l);min-block-size:calc(var(--n-space-xxl) - var(--n-space-s)/ 2);display:flex;align-items:center}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}:is([data-screen=wide]:not([data-nav=opened]),[data-screen=narrow]) .n-has-own-nav-toggle ::slotted(nord-header){--_n-header-gutter:calc(var(--n-space-l) * 3)}`,z=matchMedia("(min-width: 768px)"),x=function(e,n,t=JSON.stringify,i=JSON.parse){return{get value(){try{const t=localStorage.getItem(e);return t?i(t):n}catch(e){return n}},set value(n){try{localStorage.setItem(e,t(n))}catch(e){}}}}("nord-layout.navWidth",250),S=y({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 i{constructor(){super(...arguments),this.resizeObserver=new ResizeObserver((e=>{this.stickySize=Math.round(e[0].borderBoxSize[0].blockSize)})),this.navSlot=new u(this,"nav"),this.drawerSlot=new u(this,"drawer"),this.direction=new h(this),this.events=new p(this),this.lightDismiss=new v(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl}),this.navWidth=x.value,this.isDragging=!1,this.navState=z.matches?"opened":"closed",this.wideScreen=z.matches,this.stickySize=0,this.navOpen="opened"===this.navState,this.padding="m",this.sticky=!1,this.handleMediaQueryChange=()=>{this.wideScreen=z.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}connectedCallback(){super.connectedCallback(),this.events.listen(z,"change",this.handleMediaQueryChange),this.events.listen(this,"click",(e=>{this.isNavToggle(e.target)&&this.handleToggleClick()})),this.events.listen(this,"mouseover",(e=>{this.isNavToggle(e.target)&&this.handleMouseEnter()})),this.events.listen(this,"mouseout",(e=>{this.isNavToggle(e.target)&&this.handleMouseLeave()}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect()}render(){const{navWidth:e,navState:n,navSlot:t,isDragging:i,direction:s}=this,r="opened"===n&&this.wideScreen?e:250,d=t.hasContent&&!this.navToggle;return a`<div class="${l({"n-layout":!0,"n-rtl":s.isRTL,"n-dragging":i})}" style="${c({"--_n-layout-nav-width":`${r}px`,"--_n-sticky-size":"number"==typeof this.stickySize?`${this.stickySize}px`:null})}" data-nav="${t.hasContent?n:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${t.isEmpty}" @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="${m("opened"===n,this.startDragging)}" @pointermove="${m(i,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}"></div></div><div class="${l({"n-layout-main":!0,"n-has-own-nav-toggle":d})}" @focusin="${this.handleMainFocus}" @click="${this.handleClick}"><div class="${l({"n-has-drawer":this.drawerSlot.hasContent})}"><div class="n-layout-header n-sticky">${d?this.renderNavToggle():o}<slot name="header"></slot></div><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return a`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}handleStickyChange(e){!0===this.sticky?this.resizeObserver.observe(this.stickyElement,{box:"border-box"}):!0===e&&!1===this.sticky&&(this.resizeObserver.unobserve(this.stickyElement),this.stickySize=null)}handleNavWidthChange(){x.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=S.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")}isNavToggle(e){return Boolean(this.navToggle)&&(null!=(n=e)&&n.nodeType===Node.ELEMENT_NODE)&&e.id===this.navToggle;var n}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=b(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=[k,f,w],e([d(".n-sticky",!0)],T.prototype,"stickyElement",void 0),e([d(".n-layout-nav",!0)],T.prototype,"navEl",void 0),e([r()],T.prototype,"navWidth",void 0),e([r()],T.prototype,"isDragging",void 0),e([r()],T.prototype,"navState",void 0),e([r()],T.prototype,"wideScreen",void 0),e([r()],T.prototype,"stickySize",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([s({type:Boolean,reflect:!0})],T.prototype,"sticky",void 0),e([g("sticky","updated")],T.prototype,"handleStickyChange",null),e([g("navWidth","updated")],T.prototype,"handleNavWidthChange",null),e([g("navState")],T.prototype,"handleNavStateChange",null),e([g("navOpen","updated")],T.prototype,"handleOpenChange",null),T=e([n("nord-layout")],T);var j=T;export{j as default};
+import{i as e,_ as n,s as t,y as a,b as i,e as o}from"./query-assigned-elements-cf502539.js";import{e as s}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{o as l}from"./class-map-21152cee.js";import{i as c}from"./style-map-2e8fcab6.js";import{D as h}from"./DirectionController-8b298382.js";import{E as v}from"./EventController-d99ebeef.js";import{L as p}from"./LightDismissController-a2645ae6.js";import{S as u}from"./SlotController-89834aef.js";import{o as g}from"./observe-a9c6dfb6.js";import{c as m}from"./cond-2da54107.js";import{f as y}from"./fsm-50373df9.js";import{c as b}from"./number-c3ab3e95.js";import"./NavToggle.js";import{s as k}from"./Component-449e40fb.js";import{s as f}from"./Sticky-c4cf185e.js";import"./directive-de55b00a.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ref-c44e9f3c.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./FocusableMixin-32631bff.js";import"./Button.js";import"./LightDomController-052f446a.js";import"./Spinner.js";import"./if-defined-720964c0.js";import"./InputMixin-7fa755e1.js";import"./Icon.js";import"./VisuallyHidden.js";const w=e`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);background:var(--_n-layout-background-color);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-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{position:relative}main{padding:var(--_n-layout-padding)}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}: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{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);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]:not([data-nav=opened]) .n-layout-nav{overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:"";position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek]) .n-layout-main::after{visibility:hidden;opacity:0}.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 var(--n-transition-slowly);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;transition-delay:.15s}@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:var(--n-layout-padding, 0)}.n-nav-toggle-container{position:absolute;padding:var(--n-space-m) var(--n-space-l);min-block-size:calc(var(--n-space-xxl) - var(--n-space-s)/ 2);display:flex;align-items:center}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}:is([data-screen=wide]:not([data-nav=opened]),[data-screen=narrow]) .n-has-own-nav-toggle ::slotted(nord-header){--_n-header-gutter:calc(var(--n-space-l) * 3)}`,z=matchMedia("(min-width: 768px)"),x=function(e,n,t=JSON.stringify,a=JSON.parse){return{get value(){try{const t=localStorage.getItem(e);return t?a(t):n}catch(e){return n}},set value(n){try{localStorage.setItem(e,t(n))}catch(e){}}}}("nord-layout.navWidth",250),S=y({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 t{constructor(){super(...arguments),this.resizeObserver=new ResizeObserver((e=>{this.stickySize=Math.round(e[0].borderBoxSize[0].blockSize)})),this.navSlot=new u(this,"nav"),this.drawerSlot=new u(this,"drawer"),this.direction=new h(this),this.events=new v(this),this.lightDismiss=new p(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl}),this.navWidth=x.value,this.isDragging=!1,this.navState=z.matches?"opened":"closed",this.wideScreen=z.matches,this.stickySize=0,this.navOpen="opened"===this.navState,this.padding="m",this.sticky=!1,this.handleMediaQueryChange=()=>{this.wideScreen=z.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}connectedCallback(){super.connectedCallback(),this.events.listen(z,"change",this.handleMediaQueryChange),this.events.listen(this,"click",(e=>{this.isNavToggle(e.target)&&this.handleToggleClick()})),this.events.listen(this,"mouseover",(e=>{this.isNavToggle(e.target)&&this.handleMouseEnter()})),this.events.listen(this,"mouseout",(e=>{this.isNavToggle(e.target)&&this.handleMouseLeave()}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect()}render(){const{navWidth:e,navState:n,navSlot:t,isDragging:o,direction:s}=this,r="opened"===n&&this.wideScreen?e:250,d=t.hasContent&&!this.navToggle;return a`<div class="${l({"n-layout":!0,"n-rtl":s.isRTL,"n-dragging":o})}" style="${c({"--_n-layout-nav-width":`${r}px`,"--_n-sticky-size":"number"==typeof this.stickySize?`${this.stickySize}px`:null})}" data-nav="${t.hasContent?n:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${t.isEmpty}" @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="${m("opened"===n,this.startDragging)}" @pointermove="${m(o,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}"></div></div><div class="${l({"n-layout-main":!0,"n-has-own-nav-toggle":d})}" @focusin="${this.handleMainFocus}" @click="${this.handleClick}"><div class="${l({"n-has-drawer":this.drawerSlot.hasContent})}"><div class="n-layout-header n-sticky">${d?this.renderNavToggle():i}<slot name="header"></slot></div><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return a`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}handleStickyChange(e){!0===this.sticky?this.resizeObserver.observe(this.stickyElement,{box:"border-box"}):!0===e&&!1===this.sticky&&(this.resizeObserver.unobserve(this.stickyElement),this.stickySize=null)}handleNavWidthChange(){x.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=S.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")}isNavToggle(e){return Boolean(this.navToggle)&&(null!=(n=e)&&n.nodeType===Node.ELEMENT_NODE)&&e.id===this.navToggle;var n}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=b(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=[k,f,w],n([d(".n-sticky",!0)],T.prototype,"stickyElement",void 0),n([d(".n-layout-nav",!0)],T.prototype,"navEl",void 0),n([r()],T.prototype,"navWidth",void 0),n([r()],T.prototype,"isDragging",void 0),n([r()],T.prototype,"navState",void 0),n([r()],T.prototype,"wideScreen",void 0),n([r()],T.prototype,"stickySize",void 0),n([s({reflect:!0,type:Boolean,attribute:"nav-open"})],T.prototype,"navOpen",void 0),n([s({attribute:"nav-toggle"})],T.prototype,"navToggle",void 0),n([s({reflect:!0})],T.prototype,"padding",void 0),n([s({type:Boolean,reflect:!0})],T.prototype,"sticky",void 0),n([g("sticky","updated")],T.prototype,"handleStickyChange",null),n([g("navWidth","updated")],T.prototype,"handleNavWidthChange",null),n([g("navState")],T.prototype,"handleNavStateChange",null),n([g("navOpen","updated")],T.prototype,"handleOpenChange",null),T=n([o("nord-layout")],T);var j=T;export{j as default};
 //# sourceMappingURL=Layout.js.map