@nordhealth/components 1.7.0 → 1.8.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\"\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 new\n * @category action\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n */\n@customElement(\"nord-dropdown\")\nexport default class Dropdown extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * we delegate focus, to ensure focus does not move to body if you click\n   * some whitespace or a dropdown-group heading, as this would close the dropdown\n   * @internal\n   */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n  @query(\"nord-popout\", true) private popout!: Popout\n\n  /**\n   * Set the alignment of the dropdown in relation to the toggle depending on the position.\n   * `start` will align the left of the dropdown to the left of the toggle.\n   * `end` will align the right of the dropdown to the right of the toggle.\n   * A dropdown with a set position of `inline-start` or `inline-end` will switch\n   * `start` and `end` to the top and bottom of the dropdown respectively.\n   */\n  @property({ reflect: true }) align?: Popout[\"align\"]\n\n  /**\n   * Set the position of the dropdown in relation to the toggle.\n   * Options follow logical properties.\n   * `block-start` and `block-end` referring to top and bottom respectively,\n   * `inline-start` and `inline-end` referring to left and right respectively.\n   */\n  @property({ reflect: true }) position?: Popout[\"position\"]\n\n  /**\n   * Controls whether the toggle slot expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const toggle = this.querySelector(`[slot=\"toggle\"]`) || undefined\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.handleOpen}\n        >\n          <div class=\"n-dropdown-content\">\n            <slot></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private handleBlur(e: FocusEvent) {\n    const relatedTarget = e.relatedTarget as Node\n\n    // safari will set relatedTarget to null when clicking on the trigger button\n    // because it doesn't focus buttons on click.\n    // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n    // so we only run this logic if relatedTarget is set, which sidesteps this issue\n    if (relatedTarget && !this.contains(relatedTarget)) {\n      this.popout.hide(false)\n    }\n  }\n\n  private handleOpen() {\n    this.querySelector(\"nord-dropdown-item\")?.focus()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown\": Dropdown\n  }\n}\n"],"names":["Dropdown","LitElement","constructor","this","expand","connectedCallback","super","toggle","querySelector","undefined","setAttribute","render","html","handleBlur","ifDefined","align","position","handleOpen","e","relatedTarget","contains","popout","hide","_a","focus","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","reflect","type","Boolean","customElement"],"mappings":"6rCAqBA,IAAqBA,EAArB,cAAsCC,EAAtCC,kCAgC8CC,KAAMC,QAAG,EAErDC,oBACEC,MAAMD,oBAEN,MAAME,EAASJ,KAAKK,cAAc,yBAAsBC,EACxDF,SAAAA,EAAQG,aAAa,gBAAiB,QAGxCC,SACE,OAAOC,CAAI,sCAC2BT,KAAKU,iGAI7BC,EAAUX,KAAKY,qBACZD,EAAUX,KAAKa,qBAClBb,KAAKc,sFAUbJ,WAAWK,GACjB,MAAMC,EAAgBD,EAAEC,cAMpBA,IAAkBhB,KAAKiB,SAASD,IAClChB,KAAKkB,OAAOC,MAAK,GAIbL,mBACkC,QAAxCM,EAAApB,KAAKK,cAAc,6BAAqB,IAAAe,GAAAA,EAAEC,UAvErCxB,EAAAyB,OAAS,CAACC,EAAgBC,GAO1B3B,EAAiB4B,kBAAG,IAAK3B,EAAW2B,kBAAmBC,gBAAgB,GAElDC,EAAA,CAA3BC,EAAM,eAAe,IAA6B/B,EAAAgC,UAAA,cAAA,GAStBF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAA+BlC,EAAAgC,UAAA,aAAA,GAQvBF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAqClC,EAAAgC,UAAA,gBAAA,GAKdF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBpC,EAAAgC,UAAA,cAAA,GAhCvChC,EAAQ8B,EAAA,CAD5BO,EAAc,kBACMrC,SAAAA"}
+{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\n\nimport type Popout from \"../popout/Popout.js\"\nimport \"../popout/Popout.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Dropdown.css\"\n\n/**\n * Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n *\n * @status ready\n * @category action\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n */\n@customElement(\"nord-dropdown\")\nexport default class Dropdown extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * we delegate focus, to ensure focus does not move to body if you click\n   * some whitespace or a dropdown-group heading, as this would close the dropdown\n   * @internal\n   */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n  @query(\"nord-popout\", true) private popout!: Popout\n\n  /**\n   * Set the alignment of the dropdown in relation to the toggle depending on the position.\n   * `start` will align the left of the dropdown to the left of the toggle.\n   * `end` will align the right of the dropdown to the right of the toggle.\n   * A dropdown with a set position of `inline-start` or `inline-end` will switch\n   * `start` and `end` to the top and bottom of the dropdown respectively.\n   */\n  @property({ reflect: true }) align?: Popout[\"align\"]\n\n  /**\n   * Set the position of the dropdown in relation to the toggle.\n   * Options follow logical properties.\n   * `block-start` and `block-end` referring to top and bottom respectively,\n   * `inline-start` and `inline-end` referring to left and right respectively.\n   */\n  @property({ reflect: true }) position?: Popout[\"position\"]\n\n  /**\n   * Controls whether the toggle slot expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const toggle = this.querySelector(`[slot=\"toggle\"]`) || undefined\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.handleOpen}\n        >\n          <div class=\"n-dropdown-content\">\n            <slot></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private handleBlur(e: FocusEvent) {\n    const relatedTarget = e.relatedTarget as Node\n\n    // safari will set relatedTarget to null when clicking on the trigger button\n    // because it doesn't focus buttons on click.\n    // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n    // so we only run this logic if relatedTarget is set, which sidesteps this issue\n    if (relatedTarget && !this.contains(relatedTarget)) {\n      this.popout.hide(false)\n    }\n  }\n\n  private handleOpen() {\n    this.querySelector(\"nord-dropdown-item\")?.focus()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-dropdown\": Dropdown\n  }\n}\n"],"names":["Dropdown","LitElement","constructor","this","expand","connectedCallback","super","toggle","querySelector","undefined","setAttribute","render","html","handleBlur","ifDefined","align","position","handleOpen","e","relatedTarget","contains","popout","hide","_a","focus","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","reflect","type","Boolean","customElement"],"mappings":"6rCAqBA,IAAqBA,EAArB,cAAsCC,EAAtCC,kCAgC8CC,KAAMC,QAAG,EAErDC,oBACEC,MAAMD,oBAEN,MAAME,EAASJ,KAAKK,cAAc,yBAAsBC,EACxDF,SAAAA,EAAQG,aAAa,gBAAiB,QAGxCC,SACE,OAAOC,CAAI,sCAC2BT,KAAKU,iGAI7BC,EAAUX,KAAKY,qBACZD,EAAUX,KAAKa,qBAClBb,KAAKc,sFAUbJ,WAAWK,GACjB,MAAMC,EAAgBD,EAAEC,cAMpBA,IAAkBhB,KAAKiB,SAASD,IAClChB,KAAKkB,OAAOC,MAAK,GAIbL,mBACkC,QAAxCM,EAAApB,KAAKK,cAAc,6BAAqB,IAAAe,GAAAA,EAAEC,UAvErCxB,EAAAyB,OAAS,CAACC,EAAgBC,GAO1B3B,EAAiB4B,kBAAG,IAAK3B,EAAW2B,kBAAmBC,gBAAgB,GAElDC,EAAA,CAA3BC,EAAM,eAAe,IAA6B/B,EAAAgC,UAAA,cAAA,GAStBF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAA+BlC,EAAAgC,UAAA,aAAA,GAQvBF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAqClC,EAAAgC,UAAA,gBAAA,GAKdF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBpC,EAAAgC,UAAA,cAAA,GAhCvChC,EAAQ8B,EAAA,CAD5BO,EAAc,kBACMrC,SAAAA"}

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

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

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 new\n * @category feedback\n * @slot - default slot\n */\n@customElement(\"nord-empty-state\")\nexport default class EmptyState extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`<div class=\"n-empty-state\">\n      <slot></slot>\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-empty-state\": EmptyState\n  }\n}\n"],"names":["EmptyState","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"w+BAgBA,IAAqBA,EAArB,cAAwCC,EAGtCC,SACE,OAAOC,CAAI,mDAHNH,EAAAI,OAAS,CAACC,EAAgBC,GADdN,EAAUO,EAAA,CAD9BC,EAAc,qBACMR,SAAAA"}
+{"version":3,"file":"EmptyState.js","sources":["../src/empty-state/EmptyState.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./EmptyState.css\"\n\n/**\n * Empty state can be used when there is no data to display to\n * describe what the user can do next. Empty state provides\n * explanation and guidance to help user progress.\n *\n * @status ready\n * @category feedback\n * @slot - default slot\n */\n@customElement(\"nord-empty-state\")\nexport default class EmptyState extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`<div class=\"n-empty-state\">\n      <slot></slot>\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-empty-state\": EmptyState\n  }\n}\n"],"names":["EmptyState","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"w+BAgBA,IAAqBA,EAArB,cAAwCC,EAGtCC,SACE,OAAOC,CAAI,mDAHNH,EAAAI,OAAS,CAACC,EAAgBC,GADdN,EAAUO,EAAA,CAD9BC,EAAc,qBACMR,SAAAA"}

package/lib/Layout.js

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

package/lib/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../src/common/controllers/MediaQueryController.ts","../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ntype MediaQueryChange = () => void\n\nexport class MediaQueryController implements ReactiveController {\n  private mq: MediaQueryList\n\n  constructor(host: ReactiveControllerHost, mediaQuery: MediaQueryList, onChange?: MediaQueryChange)\n  constructor(host: ReactiveControllerHost, mediaQuery: string, onChange?: MediaQueryChange)\n\n  constructor(\n    private host: ReactiveControllerHost,\n    mediaQuery: string | MediaQueryList,\n    private onChange?: MediaQueryChange\n  ) {\n    host.addController(this)\n    this.mq = typeof mediaQuery === \"string\" ? matchMedia(mediaQuery) : mediaQuery\n  }\n\n  get matches() {\n    return this.mq.matches\n  }\n\n  hostConnected() {\n    this.mq.addListener(this.handleChange)\n  }\n\n  hostDisconnected() {\n    this.mq.removeListener(this.handleChange)\n  }\n\n  handleChange = () => {\n    this.onChange?.()\n    this.host.requestUpdate()\n  }\n}\n","/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { MediaQueryController } from \"../common/controllers/MediaQueryController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = matchMedia(\"(min-width: 768px)\")\nconst store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\n\nconst navMachine = fsm({\n  opened: {\n    toggle: \"closed\",\n    close: \"closed\",\n  },\n  closed: {\n    toggle: \"opened\",\n    open: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n  },\n  peek: {\n    toggle: \"opened\",\n    focusout: \"unpeek\",\n    pointerleave: \"wait\",\n    dropdownOpen: \"blocked\",\n    click: \"unpeek\",\n    open: \"opened\",\n  },\n  blocked: {\n    dropdownClose: \"peek\",\n    open: \"opened\",\n  },\n  wait: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    timeout: \"unpeek\",\n  },\n  unpeek: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    transitionend: \"closed\",\n  },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot header - Used to place content inside the header section.\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n  private navToggleEl?: Element\n\n  @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n  @state() private navWidth = store.value\n  @state() private isDragging = false\n  @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\n\n  /**\n   * Controls whether the navigation is hidden off-screen or not.\n   * Defaults to `true` for wide viewports, and `false` otherwise.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen: boolean = this.navState === \"opened\"\n\n  /**\n   * ID reference of element used to toggle the navigation.\n   */\n  @property({ attribute: \"nav-toggle\" }) navToggle?: string\n\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.mq.matches,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl && node !== this.navToggleEl,\n  })\n\n  private mq = new MediaQueryController(this, mediaQuery, () => this.handleMediaQueryChange())\n  private direction = new DirectionController(this)\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.cleanup()\n  }\n\n  render() {\n    const { navWidth, navState, mq, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && mq.matches ? navWidth : NAV_DEFAULT_WIDTH\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-layout\": true,\n          \"n-rtl\": direction.isRTL,\n          \"n-dragging\": isDragging,\n        })}\n        style=${`--n-nav-width: ${adjustedNavWidth}px`}\n        data-nav=${navState}\n        data-screen=${mq.matches ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\"></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n          ></div>\n        </div>\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleClick}>\n          <slot name=\"header\"></slot>\n          <main>\n            <slot></slot>\n          </main>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"navToggle\")\n  protected getToggleElement() {\n    // clean up\n    this.cleanup()\n\n    // handle case where id removed\n    if (!this.navToggle) {\n      return\n    }\n\n    const root = this.getRootNode() as Document | ShadowRoot\n    const toggleEl = root.querySelector(`#${this.navToggle}`)\n\n    if (toggleEl) {\n      this.navToggleEl = toggleEl\n      this.navToggleEl.addEventListener(\"click\", this.handleToggleClick)\n      this.navToggleEl.addEventListener(\"mouseenter\", this.handleMouseEnter)\n      this.navToggleEl.addEventListener(\"mouseleave\", this.handleMouseLeave)\n    }\n  }\n\n  private cleanup() {\n    if (this.navToggleEl) {\n      this.navToggleEl.removeEventListener(\"click\", this.handleToggleClick)\n      this.navToggleEl.removeEventListener(\"mouseenter\", this.handleMouseEnter)\n      this.navToggleEl.removeEventListener(\"mouseleave\", this.handleMouseLeave)\n      this.navToggleEl = undefined\n    }\n  }\n\n  @observe(\"navWidth\", \"updated\")\n  protected handleNavWidthChange() {\n    store.value = this.navWidth\n  }\n\n  @observe(\"navState\")\n  protected handleNavStateChange(prev: NavState) {\n    if (prev === \"wait\" && this.peekTimeoutId) {\n      clearTimeout(this.peekTimeoutId)\n    }\n    if (prev === \"unpeek\") {\n      this.navEl.removeEventListener(\"transitionend\", this.handleTransitionEnd)\n    }\n\n    switch (this.navState) {\n      case \"closed\":\n        this.navOpen = false\n        break\n      case \"opened\":\n        this.navOpen = true\n        break\n      case \"wait\":\n        this.peekTimeoutId = setTimeout(() => this.navTransition(\"timeout\"), NAV_PEEK_DELAY)\n        break\n      case \"unpeek\":\n        this.navEl.addEventListener(\"transitionend\", this.handleTransitionEnd, { once: true })\n        break\n      default:\n        break\n    }\n  }\n\n  @observe(\"navOpen\", \"updated\")\n  protected handleOpenChange() {\n    if (!this.isDragging) {\n      // when opening nav, it should restore to default width (or larger).\n      // unless it is being dragged, in which case the drag width wins\n      this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n    }\n\n    this.navTransition(this.navOpen ? \"open\" : \"close\")\n  }\n\n  /* ---------------------------------------------\n  / NAVIGATION OPEN/CLOSE LOGIC\n  / --------------------------------------------- */\n\n  private navTransition(event: NavEvent) {\n    this.navState = navMachine.transition(this.navState, event)\n  }\n\n  private handleClick() {\n    this.navTransition(\"click\")\n  }\n\n  private handleDropdownOpen(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownOpen\")\n    }\n  }\n\n  private handleDropdownClose(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownClose\")\n    }\n  }\n\n  private handleMediaQueryChange = () => {\n    this.navTransition(this.mq.matches ? \"open\" : \"close\")\n  }\n\n  private handleToggleClick = () => {\n    this.navTransition(\"toggle\")\n  }\n\n  private handleNavFocus = () => {\n    this.navTransition(\"focusin\")\n  }\n\n  private handleMainFocus = (e: FocusEvent) => {\n    if (e.target !== this.navToggleEl) {\n      this.navTransition(\"focusout\")\n    }\n  }\n\n  private handleMouseEnter = () => {\n    if (this.mq.matches) {\n      this.navTransition(\"pointerenter\")\n    }\n  }\n\n  private handleMouseLeave = () => {\n    this.navTransition(\"pointerleave\")\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition(\"transitionend\")\n  }\n\n  /* ---------------------------------------------\n  / RESIZE LOGIC\n  / --------------------------------------------- */\n\n  private handleKeyboardResize(e: KeyboardEvent) {\n    const {\n      navWidth,\n      direction: { isLTR },\n    } = this\n\n    switch (e.key) {\n      case \"ArrowLeft\":\n        this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n        break\n      case \"ArrowRight\":\n        this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n        break\n      case \"Enter\":\n        this.navTransition(\"toggle\")\n        break\n      case \"Home\":\n        this.setNavWidth(NAV_MIN_WIDTH)\n        break\n      case \"End\":\n        this.setNavWidth(NAV_MAX_WIDTH)\n        break\n      default:\n        return\n    }\n\n    e.preventDefault()\n  }\n\n  private setNavWidth(width: number) {\n    this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n  }\n\n  private startDragging(e: PointerEvent) {\n    if (e.button === 0) {\n      const target = e.target as Element\n      target.setPointerCapture(e.pointerId)\n      this.isDragging = true\n    }\n  }\n\n  private stopDragging() {\n    this.isDragging = false\n  }\n\n  private handleDrag(e: PointerEvent) {\n    const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n    this.setNavWidth(width)\n    this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-layout\": Layout\n  }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n  key: string,\n  defaultValue: T,\n  serialize: (value: T) => string = JSON.stringify,\n  deserialize: (value: string) => T = JSON.parse\n) {\n  return {\n    get value(): T {\n      const value = localStorage.getItem(key)\n\n      try {\n        return value ? deserialize(value) : defaultValue\n      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      localStorage.setItem(key, serialize(value))\n    },\n  }\n}\n"],"names":["MediaQueryController","constructor","host","mediaQuery","onChange","this","handleChange","_a","call","requestUpdate","addController","mq","matchMedia","matches","hostConnected","addListener","hostDisconnected","removeListener","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navWidth","isDragging","navState","navOpen","lightDismiss","LightDismissController","isOpen","onDismiss","navTransition","isDismissible","node","navEl","navToggleEl","handleMediaQueryChange","direction","DirectionController","handleToggleClick","handleNavFocus","handleMainFocus","e","target","handleMouseEnter","handleMouseLeave","handleTransitionEnd","disconnectedCallback","super","cleanup","render","adjustedNavWidth","html","classMap","isRTL","handleDropdownOpen","handleDropdownClose","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleClick","getToggleElement","navToggle","toggleEl","getRootNode","querySelector","addEventListener","removeEventListener","undefined","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","event","transition","localName","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Layout.js","sources":["../src/common/controllers/MediaQueryController.ts","../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ntype MediaQueryChange = () => void\n\nexport class MediaQueryController implements ReactiveController {\n  private mq: MediaQueryList\n\n  constructor(host: ReactiveControllerHost, mediaQuery: MediaQueryList, onChange?: MediaQueryChange)\n  constructor(host: ReactiveControllerHost, mediaQuery: string, onChange?: MediaQueryChange)\n\n  constructor(\n    private host: ReactiveControllerHost,\n    mediaQuery: string | MediaQueryList,\n    private onChange?: MediaQueryChange\n  ) {\n    host.addController(this)\n    this.mq = typeof mediaQuery === \"string\" ? matchMedia(mediaQuery) : mediaQuery\n  }\n\n  get matches() {\n    return this.mq.matches\n  }\n\n  hostConnected() {\n    this.mq.addListener(this.handleChange)\n  }\n\n  hostDisconnected() {\n    this.mq.removeListener(this.handleChange)\n  }\n\n  handleChange = () => {\n    this.onChange?.()\n    this.host.requestUpdate()\n  }\n}\n","/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { MediaQueryController } from \"../common/controllers/MediaQueryController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = matchMedia(\"(min-width: 768px)\")\nconst store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\n\nconst navMachine = fsm({\n  opened: {\n    toggle: \"closed\",\n    close: \"closed\",\n  },\n  closed: {\n    toggle: \"opened\",\n    open: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n  },\n  peek: {\n    toggle: \"opened\",\n    focusout: \"unpeek\",\n    pointerleave: \"wait\",\n    dropdownOpen: \"blocked\",\n    click: \"unpeek\",\n    open: \"opened\",\n  },\n  blocked: {\n    dropdownClose: \"peek\",\n    open: \"opened\",\n  },\n  wait: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    timeout: \"unpeek\",\n  },\n  unpeek: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    transitionend: \"closed\",\n  },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot header - Used to place content inside the header section.\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n  private navToggleEl?: Element\n\n  @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n  @state() private navWidth = store.value\n  @state() private isDragging = false\n  @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\n\n  /**\n   * Controls whether the navigation is hidden off-screen or not.\n   * Defaults to `true` for wide viewports, and `false` otherwise.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen: boolean = this.navState === \"opened\"\n\n  /**\n   * ID reference of element used to toggle the navigation.\n   */\n  @property({ attribute: \"nav-toggle\" }) navToggle?: string\n\n  /**\n   * Controls the padding of the default main section slot. When set to “none”,\n   * the nav and header slots will still have padding.\n   */\n  @property({ reflect: true }) padding: \"m\" | \"none\" = \"m\"\n\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.mq.matches,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl && node !== this.navToggleEl,\n  })\n\n  private mq = new MediaQueryController(this, mediaQuery, () => this.handleMediaQueryChange())\n  private direction = new DirectionController(this)\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.cleanup()\n  }\n\n  render() {\n    const { navWidth, navState, mq, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && mq.matches ? navWidth : NAV_DEFAULT_WIDTH\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-layout\": true,\n          \"n-rtl\": direction.isRTL,\n          \"n-dragging\": isDragging,\n        })}\n        style=${`--n-nav-width: ${adjustedNavWidth}px`}\n        data-nav=${navState}\n        data-screen=${mq.matches ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\"></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n          ></div>\n        </div>\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleClick}>\n          <slot name=\"header\"></slot>\n          <main>\n            <slot></slot>\n          </main>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"navToggle\")\n  protected getToggleElement() {\n    // clean up\n    this.cleanup()\n\n    // handle case where id removed\n    if (!this.navToggle) {\n      return\n    }\n\n    const root = this.getRootNode() as Document | ShadowRoot\n    const toggleEl = root.querySelector(`#${this.navToggle}`)\n\n    if (toggleEl) {\n      this.navToggleEl = toggleEl\n      this.navToggleEl.addEventListener(\"click\", this.handleToggleClick)\n      this.navToggleEl.addEventListener(\"mouseenter\", this.handleMouseEnter)\n      this.navToggleEl.addEventListener(\"mouseleave\", this.handleMouseLeave)\n    }\n  }\n\n  private cleanup() {\n    if (this.navToggleEl) {\n      this.navToggleEl.removeEventListener(\"click\", this.handleToggleClick)\n      this.navToggleEl.removeEventListener(\"mouseenter\", this.handleMouseEnter)\n      this.navToggleEl.removeEventListener(\"mouseleave\", this.handleMouseLeave)\n      this.navToggleEl = undefined\n    }\n  }\n\n  @observe(\"navWidth\", \"updated\")\n  protected handleNavWidthChange() {\n    store.value = this.navWidth\n  }\n\n  @observe(\"navState\")\n  protected handleNavStateChange(prev: NavState) {\n    if (prev === \"wait\" && this.peekTimeoutId) {\n      clearTimeout(this.peekTimeoutId)\n    }\n    if (prev === \"unpeek\") {\n      this.navEl.removeEventListener(\"transitionend\", this.handleTransitionEnd)\n    }\n\n    switch (this.navState) {\n      case \"closed\":\n        this.navOpen = false\n        break\n      case \"opened\":\n        this.navOpen = true\n        break\n      case \"wait\":\n        this.peekTimeoutId = setTimeout(() => this.navTransition(\"timeout\"), NAV_PEEK_DELAY)\n        break\n      case \"unpeek\":\n        this.navEl.addEventListener(\"transitionend\", this.handleTransitionEnd, { once: true })\n        break\n      default:\n        break\n    }\n  }\n\n  @observe(\"navOpen\", \"updated\")\n  protected handleOpenChange() {\n    if (!this.isDragging) {\n      // when opening nav, it should restore to default width (or larger).\n      // unless it is being dragged, in which case the drag width wins\n      this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n    }\n\n    this.navTransition(this.navOpen ? \"open\" : \"close\")\n  }\n\n  /* ---------------------------------------------\n  / NAVIGATION OPEN/CLOSE LOGIC\n  / --------------------------------------------- */\n\n  private navTransition(event: NavEvent) {\n    this.navState = navMachine.transition(this.navState, event)\n  }\n\n  private handleClick() {\n    this.navTransition(\"click\")\n  }\n\n  private handleDropdownOpen(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownOpen\")\n    }\n  }\n\n  private handleDropdownClose(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownClose\")\n    }\n  }\n\n  private handleMediaQueryChange = () => {\n    this.navTransition(this.mq.matches ? \"open\" : \"close\")\n  }\n\n  private handleToggleClick = () => {\n    this.navTransition(\"toggle\")\n  }\n\n  private handleNavFocus = () => {\n    this.navTransition(\"focusin\")\n  }\n\n  private handleMainFocus = (e: FocusEvent) => {\n    if (e.target !== this.navToggleEl) {\n      this.navTransition(\"focusout\")\n    }\n  }\n\n  private handleMouseEnter = () => {\n    if (this.mq.matches) {\n      this.navTransition(\"pointerenter\")\n    }\n  }\n\n  private handleMouseLeave = () => {\n    this.navTransition(\"pointerleave\")\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition(\"transitionend\")\n  }\n\n  /* ---------------------------------------------\n  / RESIZE LOGIC\n  / --------------------------------------------- */\n\n  private handleKeyboardResize(e: KeyboardEvent) {\n    const {\n      navWidth,\n      direction: { isLTR },\n    } = this\n\n    switch (e.key) {\n      case \"ArrowLeft\":\n        this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n        break\n      case \"ArrowRight\":\n        this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n        break\n      case \"Enter\":\n        this.navTransition(\"toggle\")\n        break\n      case \"Home\":\n        this.setNavWidth(NAV_MIN_WIDTH)\n        break\n      case \"End\":\n        this.setNavWidth(NAV_MAX_WIDTH)\n        break\n      default:\n        return\n    }\n\n    e.preventDefault()\n  }\n\n  private setNavWidth(width: number) {\n    this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n  }\n\n  private startDragging(e: PointerEvent) {\n    if (e.button === 0) {\n      const target = e.target as Element\n      target.setPointerCapture(e.pointerId)\n      this.isDragging = true\n    }\n  }\n\n  private stopDragging() {\n    this.isDragging = false\n  }\n\n  private handleDrag(e: PointerEvent) {\n    const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n    this.setNavWidth(width)\n    this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-layout\": Layout\n  }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n  key: string,\n  defaultValue: T,\n  serialize: (value: T) => string = JSON.stringify,\n  deserialize: (value: string) => T = JSON.parse\n) {\n  return {\n    get value(): T {\n      const value = localStorage.getItem(key)\n\n      try {\n        return value ? deserialize(value) : defaultValue\n      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      localStorage.setItem(key, serialize(value))\n    },\n  }\n}\n"],"names":["MediaQueryController","constructor","host","mediaQuery","onChange","this","handleChange","_a","call","requestUpdate","addController","mq","matchMedia","matches","hostConnected","addListener","hostDisconnected","removeListener","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navWidth","isDragging","navState","navOpen","padding","lightDismiss","LightDismissController","isOpen","onDismiss","navTransition","isDismissible","node","navEl","navToggleEl","handleMediaQueryChange","direction","DirectionController","handleToggleClick","handleNavFocus","handleMainFocus","e","target","handleMouseEnter","handleMouseLeave","handleTransitionEnd","disconnectedCallback","super","cleanup","render","adjustedNavWidth","html","classMap","isRTL","handleDropdownOpen","handleDropdownClose","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleClick","getToggleElement","navToggle","toggleEl","getRootNode","querySelector","addEventListener","removeEventListener","undefined","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","event","transition","localName","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"qvBAIaA,EAMXC,YACUC,EACRC,EACQC,GAFAC,KAAIH,KAAJA,EAEAG,KAAQD,SAARA,EAkBVC,KAAYC,aAAG,WACA,QAAbC,EAAAF,KAAKD,gBAAQ,IAAAG,GAAAA,EAAAC,KAAAH,MACbA,KAAKH,KAAKO,iBAlBVP,EAAKQ,cAAcL,MACnBA,KAAKM,GAA2B,iBAAfR,EAA0BS,WAAWT,GAAcA,EAGlEU,cACF,OAAOR,KAAKM,GAAGE,QAGjBC,gBACET,KAAKM,GAAGI,YAAYV,KAAKC,cAG3BU,mBACEX,KAAKM,GAAGM,eAAeZ,KAAKC,4pECL1BH,EAAaS,WAAW,sBACxBM,ECpBU,SACdC,EACAC,EACAC,EAAkCC,KAAKC,UACvCC,EAAoCF,KAAKG,OAEzC,MAAO,CACDC,YACF,MAAMA,EAAQC,aAAaC,QAAQT,GAEnC,IACE,OAAOO,EAAQF,EAAYE,GAASN,EACpC,MAAMb,GACN,OAAOa,IAIPM,UAAMA,GACRC,aAAaE,QAAQV,EAAKE,EAAUK,MDE5BI,CAAQ,uBARI,KAUpBC,EAAaC,EAAI,CACrBC,OAAQ,CACNC,OAAQ,SACRC,MAAO,UAETC,OAAQ,CACNF,OAAQ,SACRG,KAAM,SACNC,QAAS,OACTC,aAAc,QAEhBC,KAAM,CACJN,OAAQ,SACRO,SAAU,SACVC,aAAc,OACdC,aAAc,UACdC,MAAO,SACPP,KAAM,UAERQ,QAAS,CACPC,cAAe,OACfT,KAAM,UAERU,KAAM,CACJb,OAAQ,SACRI,QAAS,OACTC,aAAc,OACdS,QAAS,UAEXC,OAAQ,CACNf,OAAQ,SACRI,QAAS,OACTC,aAAc,OACdW,cAAe,YAkBnB,IAAqBC,EAArB,cAAoCC,EAApCnD,kCAQmBI,KAAAgD,SAAWnC,EAAMQ,MACjBrB,KAAUiD,YAAG,EACbjD,KAAAkD,SAAqBpD,EAAWU,QAAU,SAAW,SAMHR,KAAAmD,QAAqC,WAAlBnD,KAAKkD,SAW9DlD,KAAOoD,QAAiB,IAE7CpD,KAAAqD,aAAe,IAAIC,EAAuBtD,KAAM,CACtDuD,OAAQ,IAAwB,WAAlBvD,KAAKkD,WAA0BlD,KAAKM,GAAGE,QACrDgD,UAAW,IAAMxD,KAAKyD,cAAc,SACpCC,cAAeC,GAAQA,IAAS3D,KAAK4D,OAASD,IAAS3D,KAAK6D,cAGtD7D,KAAAM,GAAK,IAAIX,EAAqBK,KAAMF,GAAY,IAAME,KAAK8D,2BAC3D9D,KAAA+D,UAAY,IAAIC,EAAoBhE,MA0JpCA,KAAsB8D,uBAAG,KAC/B9D,KAAKyD,cAAczD,KAAKM,GAAGE,QAAU,OAAS,UAGxCR,KAAiBiE,kBAAG,KAC1BjE,KAAKyD,cAAc,WAGbzD,KAAckE,eAAG,KACvBlE,KAAKyD,cAAc,YAGbzD,KAAAmE,gBAAmBC,IACrBA,EAAEC,SAAWrE,KAAK6D,aACpB7D,KAAKyD,cAAc,aAIfzD,KAAgBsE,iBAAG,KACrBtE,KAAKM,GAAGE,SACVR,KAAKyD,cAAc,iBAIfzD,KAAgBuE,iBAAG,KACzBvE,KAAKyD,cAAc,iBAGbzD,KAAmBwE,oBAAG,KAC5BxE,KAAKyD,cAAc,kBArLrBgB,uBACEC,MAAMD,uBACNzE,KAAK2E,UAGPC,SACE,MAAM5B,SAAEA,EAAQE,SAAEA,EAAQ5C,GAAEA,EAAE2C,WAAEA,EAAUc,UAAEA,GAAc/D,KACpD6E,EAAgC,WAAb3B,GAAyB5C,EAAGE,QAAUwC,EA1GzC,IA4GtB,OAAO8B,CAAI,eAECC,EAAS,CACf,YAAY,EACZ,QAAShB,EAAUiB,MACnB,aAAc/B,eAER,kBAAkB4B,oBACf3B,mBACG5C,EAAGE,QAAU,OAAS,iDAIvBR,KAAKkE,gCACFlE,KAAKsE,kCACLtE,KAAKuE,4BACXvE,KAAKiF,+BACJjF,KAAKkF,8IAQGC,EAAkB,WAAbjC,EAAuBlD,KAAKoF,iCACjCD,EAAKlC,EAAYjD,KAAKqF,+BACrBrF,KAAKsF,6BACRtF,KAAKsF,2BACPtF,KAAKuF,0EAGkBvF,KAAKmE,4BAA0BnE,KAAKwF,iFAWtEC,mBAKR,GAHAzF,KAAK2E,WAGA3E,KAAK0F,UACR,OAGF,MACMC,EADO3F,KAAK4F,cACIC,cAAc,IAAI7F,KAAK0F,aAEzCC,IACF3F,KAAK6D,YAAc8B,EACnB3F,KAAK6D,YAAYiC,iBAAiB,QAAS9F,KAAKiE,mBAChDjE,KAAK6D,YAAYiC,iBAAiB,aAAc9F,KAAKsE,kBACrDtE,KAAK6D,YAAYiC,iBAAiB,aAAc9F,KAAKuE,mBAIjDI,UACF3E,KAAK6D,cACP7D,KAAK6D,YAAYkC,oBAAoB,QAAS/F,KAAKiE,mBACnDjE,KAAK6D,YAAYkC,oBAAoB,aAAc/F,KAAKsE,kBACxDtE,KAAK6D,YAAYkC,oBAAoB,aAAc/F,KAAKuE,kBACxDvE,KAAK6D,iBAAcmC,GAKbC,uBACRpF,EAAMQ,MAAQrB,KAAKgD,SAIXkD,qBAAqBC,GAQ7B,OAPa,SAATA,GAAmBnG,KAAKoG,eAC1BC,aAAarG,KAAKoG,eAEP,WAATD,GACFnG,KAAK4D,MAAMmC,oBAAoB,gBAAiB/F,KAAKwE,qBAG/CxE,KAAKkD,UACX,IAAK,SACHlD,KAAKmD,SAAU,EACf,MACF,IAAK,SACHnD,KAAKmD,SAAU,EACf,MACF,IAAK,OACHnD,KAAKoG,cAAgBE,YAAW,IAAMtG,KAAKyD,cAAc,YArM1C,KAsMf,MACF,IAAK,SACHzD,KAAK4D,MAAMkC,iBAAiB,gBAAiB9F,KAAKwE,oBAAqB,CAAE+B,MAAM,KAQ3EC,mBACHxG,KAAKiD,YAGRjD,KAAKyG,YAAYC,KAAKC,IAAI3G,KAAKgD,SAzNX,MA4NtBhD,KAAKyD,cAAczD,KAAKmD,QAAU,OAAS,SAOrCM,cAAcmD,GACpB5G,KAAKkD,SAAWxB,EAAWmF,WAAW7G,KAAKkD,SAAU0D,GAG/CpB,cACNxF,KAAKyD,cAAc,SAGbwB,mBAAmBb,GAGA,kBAFVA,EAAEC,OAENyC,WACT9G,KAAKyD,cAAc,gBAIfyB,oBAAoBd,GAGD,kBAFVA,EAAEC,OAENyC,WACT9G,KAAKyD,cAAc,iBAwCf8B,qBAAqBnB,GAC3B,MAAMpB,SACJA,EACAe,WAAWgD,MAAEA,IACX/G,KAEJ,OAAQoE,EAAEtD,KACR,IAAK,YACHd,KAAKyG,YAAYzD,GAAY+D,GAnSb,QAoShB,MACF,IAAK,aACH/G,KAAKyG,YAAYzD,GAAY+D,EAtSb,SAuShB,MACF,IAAK,QACH/G,KAAKyD,cAAc,UACnB,MACF,IAAK,OACHzD,KAAKyG,YA/SS,KAgTd,MACF,IAAK,MACHzG,KAAKyG,YAjTS,KAkTd,MACF,QACE,OAGJrC,EAAE4C,iBAGIP,YAAYQ,GAClBjH,KAAKgD,SAAWkE,EAAMR,KAAKS,MAAMF,GA5Tf,IACA,KA8TZ7B,cAAchB,GACpB,GAAiB,IAAbA,EAAEgD,OAAc,CACHhD,EAAEC,OACVgD,kBAAkBjD,EAAEkD,WAC3BtH,KAAKiD,YAAa,GAIdqC,eACNtF,KAAKiD,YAAa,EAGZoC,WAAWjB,GACjB,MAAM6C,EAAQjH,KAAK+D,UAAUiB,MAAQhF,KAAKuH,YAAcnD,EAAEoD,QAAUpD,EAAEoD,QAEtExH,KAAKyG,YAAYQ,GACjBjH,KAAKyD,cAAcwD,GA7UI,IA6U0B,OAAS,WAlRrDnE,EAAA2E,OAAS,CAACC,EAAgBC,GAKHC,EAAA,CAA7BC,EAAM,iBAAiB,IAAoC/E,EAAAgF,UAAA,aAAA,GAEnDF,EAAA,CAARG,KAAsCjF,EAAAgF,UAAA,gBAAA,GAC9BF,EAAA,CAARG,KAAkCjF,EAAAgF,UAAA,kBAAA,GAC1BF,EAAA,CAARG,KAA6EjF,EAAAgF,UAAA,gBAAA,GAMXF,EAAA,CAAlEI,EAAS,CAAEC,SAAS,EAAMC,KAAMC,QAASC,UAAW,cAA2DtF,EAAAgF,UAAA,eAAA,GAKzEF,EAAA,CAAtCI,EAAS,CAAEI,UAAW,gBAAkCtF,EAAAgF,UAAA,iBAAA,GAM5BF,EAAA,CAA5BI,EAAS,CAAEC,SAAS,KAAmCnF,EAAAgF,UAAA,eAAA,GA+DxDF,EAAA,CADCS,EAAQ,cAmBRvF,EAAAgF,UAAA,mBAAA,MAYDF,EAAA,CADCS,EAAQ,WAAY,YAGpBvF,EAAAgF,UAAA,uBAAA,MAGDF,EAAA,CADCS,EAAQ,aAyBRvF,EAAAgF,UAAA,uBAAA,MAGDF,EAAA,CADCS,EAAQ,UAAW,YASnBvF,EAAAgF,UAAA,mBAAA,MAhKkBhF,EAAM8E,EAAA,CAD1BU,EAAc,gBACMxF,SAAAA"}

package/lib/Popout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popout.js","sources":["../src/popout/Popout.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, shift, offset, flip, hide, autoUpdate, Placement } from \"@floating-ui/dom\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Popout.css\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n/*\n * The breakpoint width to switch between \"sheet\" design and floating design\n */\nconst mediaQuery = matchMedia(\"(max-width: 35.9375em)\")\n\n/**\n * Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.\n *\n * @status new\n * @category overlay\n * @slot - The popout content.\n */\n@customElement(\"nord-popout\")\nexport default class Popout extends LitElement {\n  static styles = [componentStyle, style]\n\n  private targetElement!: HTMLElement\n  private cleanupAutoUpdate?: ReturnType<typeof autoUpdate>\n\n  /**\n   * Handle dismissal of the popout, clicking outside the target button and popout.\n   */\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this && node !== this.targetElement,\n  })\n\n  private direction = new DirectionController(this)\n\n  @state() private open = false\n\n  @state() private computedPosition?: Placement\n\n  @state() private smallViewport = mediaQuery.matches\n\n  /**\n   * Set the alignment of the popout in relation to the toggle depending on the position.\n   * `start` will align the left of the popout to the left of the toggle.\n   * `end` will align the right of the popout to the right of the toggle.\n   * A popout with a set position of `inline-start` or `inline-end` will switch\n   * `start` and `end` to the top and bottom of the popout respectively.\n   */\n  @property({ reflect: true }) align: \"start\" | \"end\" = \"start\"\n\n  /**\n   * Set the position of the popout in relation to the toggle.\n   * Options follow logical properties.\n   * `block-start` and `block-end` referring to top and bottom respectively,\n   * `inline-start` and `inline-end` referring to left and right respectively.\n   */\n  @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-end\"\n\n  /**\n   * The id for the active element to reference via aria-controls.\n   */\n  @property({ reflect: true }) id: string = \"\"\n\n  /**\n   * Show the popout, moving focus to the calendar inside.\n   */\n  show() {\n    if (this.open) {\n      return\n    }\n\n    this.open = true\n\n    if (!this.smallViewport) {\n      this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n    }\n\n    // we should only focus once the popout is visible after render is complete\n    this.updateComplete.then(() => {\n      /**\n       * Dispatched when the popout is opened.\n       */\n      this.dispatchEvent(new NordEvent(\"open\"))\n    })\n  }\n\n  /**\n   * Hide the popout.\n   * @param {boolean} moveFocusToButton prevent focus returning to the target\n   * button. Default is true.\n   */\n  hide(moveFocusToButton = true) {\n    if (!this.open) {\n      return\n    }\n\n    this.open = false\n\n    this.cleanupAutoUpdate?.()\n\n    /**\n     * Dispatched when the popout is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.targetElement.focus({ preventScroll: true })\n    }\n  }\n\n  /**\n   * Position the popout on load.\n   */\n  firstUpdated() {\n    if (!this.smallViewport) {\n      this.updatePosition()\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.targetElement = this.getToggle()\n    this.targetElement.addEventListener(\"click\", this.toggleOpen)\n\n    mediaQuery.addEventListener(\"change\", this.handleMediaQueryChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.cleanupAutoUpdate?.()\n\n    this.targetElement.removeAttribute(\"aria-expanded\")\n    this.targetElement.removeEventListener(\"click\", this.toggleOpen)\n\n    mediaQuery.removeEventListener(\"change\", this.handleMediaQueryChange)\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"n-popout ${this.computedPosition} is-${this.direction.dir}\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n\n  @observe(\"id\")\n  protected handleIdChange() {\n    if (!this.id) {\n      // eslint-disable-next-line no-console\n      console.warn(\"NORD: popout requires an id attribute and value\")\n    }\n  }\n\n  @observe(\"open\")\n  protected handleOpenChange() {\n    this.targetElement.setAttribute(\"aria-expanded\", `${this.open}`)\n  }\n\n  /**\n   * Get the position of the element toggling the popout\n   * and position the popout underneath it, taking into account the optional placement.\n   */\n  private updatePosition = async () => {\n    const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this, {\n      strategy: \"fixed\",\n      placement: logicalToPhysical(this.position, this.align, this.direction.dir),\n      middleware: [\n        offset(8),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ],\n    })\n\n    this.computedPosition = placement\n\n    // use physical properties here since floating-ui\n    // works exclusively in physical dimensions\n    // we do all the mapping in logicalToPhysical\n    this.style.setProperty(\"--n-popout-position-x\", `${x}px`)\n    this.style.setProperty(\"--n-popout-position-y\", `${y}px`)\n\n    if (middlewareData.hide?.referenceHidden) {\n      this.hide()\n    }\n  }\n\n  /**\n   * Toggle the popout open or closed using state.\n   * Updating the position to underneath the target button before the popout is opened.\n   */\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n    if (this.open) {\n      this.hide(false)\n    } else if (!this.smallViewport) {\n      this.updatePosition().then(() => this.show())\n    } else {\n      this.show()\n    }\n  }\n\n  private getToggle() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const toggle = <HTMLElement>rootNode.querySelector(`[aria-controls='${this.id}']`)\n\n    if (toggle instanceof HTMLSlotElement) {\n      return toggle.assignedElements()[0] as HTMLElement\n    }\n\n    return toggle\n  }\n\n  /**\n   * Update the smallViewport flag to switch between \"sheet\" and \"floating\".\n   * autoUpdate is needed when a viewport gets larger and the popout is open.\n   */\n  private handleMediaQueryChange = () => {\n    this.smallViewport = mediaQuery.matches\n    if (!this.smallViewport) {\n      this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-popout\": Popout\n  }\n}\n"],"names":["mediaQuery","matchMedia","Popout","LitElement","constructor","this","dismiss","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","targetElement","direction","DirectionController","smallViewport","matches","align","position","id","updatePosition","async","x","y","placement","middlewareData","computePosition","strategy","logicalToPhysical","dir","middleware","offset","flip","shift","padding","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","show","then","handleMediaQueryChange","cleanupAutoUpdate","autoUpdate","updateComplete","dispatchEvent","NordEvent","moveFocusToButton","call","focus","preventScroll","firstUpdated","connectedCallback","super","getToggle","addEventListener","disconnectedCallback","removeAttribute","removeEventListener","render","html","handleIdChange","console","warn","handleOpenChange","setAttribute","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","styles","componentStyle","__decorate","state","prototype","property","reflect","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Popout.js","sources":["../src/popout/Popout.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, shift, offset, flip, hide, autoUpdate, Placement } from \"@floating-ui/dom\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Popout.css\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n/*\n * The breakpoint width to switch between \"sheet\" design and floating design\n */\nconst mediaQuery = matchMedia(\"(max-width: 35.9375em)\")\n\n/**\n * Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.\n *\n * @status ready\n * @category overlay\n * @slot - The popout content.\n */\n@customElement(\"nord-popout\")\nexport default class Popout extends LitElement {\n  static styles = [componentStyle, style]\n\n  private targetElement!: HTMLElement\n  private cleanupAutoUpdate?: ReturnType<typeof autoUpdate>\n\n  /**\n   * Handle dismissal of the popout, clicking outside the target button and popout.\n   */\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this && node !== this.targetElement,\n  })\n\n  private direction = new DirectionController(this)\n\n  @state() private open = false\n\n  @state() private computedPosition?: Placement\n\n  @state() private smallViewport = mediaQuery.matches\n\n  /**\n   * Set the alignment of the popout in relation to the toggle depending on the position.\n   * `start` will align the left of the popout to the left of the toggle.\n   * `end` will align the right of the popout to the right of the toggle.\n   * A popout with a set position of `inline-start` or `inline-end` will switch\n   * `start` and `end` to the top and bottom of the popout respectively.\n   */\n  @property({ reflect: true }) align: \"start\" | \"end\" = \"start\"\n\n  /**\n   * Set the position of the popout in relation to the toggle.\n   * Options follow logical properties.\n   * `block-start` and `block-end` referring to top and bottom respectively,\n   * `inline-start` and `inline-end` referring to left and right respectively.\n   */\n  @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-end\"\n\n  /**\n   * The id for the active element to reference via aria-controls.\n   */\n  @property({ reflect: true }) id: string = \"\"\n\n  /**\n   * Show the popout, moving focus to the calendar inside.\n   */\n  show() {\n    if (this.open) {\n      return\n    }\n\n    this.open = true\n\n    if (!this.smallViewport) {\n      this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n    }\n\n    // we should only focus once the popout is visible after render is complete\n    this.updateComplete.then(() => {\n      /**\n       * Dispatched when the popout is opened.\n       */\n      this.dispatchEvent(new NordEvent(\"open\"))\n    })\n  }\n\n  /**\n   * Hide the popout.\n   * @param {boolean} moveFocusToButton prevent focus returning to the target\n   * button. Default is true.\n   */\n  hide(moveFocusToButton = true) {\n    if (!this.open) {\n      return\n    }\n\n    this.open = false\n\n    this.cleanupAutoUpdate?.()\n\n    /**\n     * Dispatched when the popout is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.targetElement.focus({ preventScroll: true })\n    }\n  }\n\n  /**\n   * Position the popout on load.\n   */\n  firstUpdated() {\n    if (!this.smallViewport) {\n      this.updatePosition()\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.targetElement = this.getToggle()\n    this.targetElement.addEventListener(\"click\", this.toggleOpen)\n\n    mediaQuery.addEventListener(\"change\", this.handleMediaQueryChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.cleanupAutoUpdate?.()\n\n    this.targetElement.removeAttribute(\"aria-expanded\")\n    this.targetElement.removeEventListener(\"click\", this.toggleOpen)\n\n    mediaQuery.removeEventListener(\"change\", this.handleMediaQueryChange)\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"n-popout ${this.computedPosition} is-${this.direction.dir}\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n\n  @observe(\"id\")\n  protected handleIdChange() {\n    if (!this.id) {\n      // eslint-disable-next-line no-console\n      console.warn(\"NORD: popout requires an id attribute and value\")\n    }\n  }\n\n  @observe(\"open\")\n  protected handleOpenChange() {\n    this.targetElement.setAttribute(\"aria-expanded\", `${this.open}`)\n  }\n\n  /**\n   * Get the position of the element toggling the popout\n   * and position the popout underneath it, taking into account the optional placement.\n   */\n  private updatePosition = async () => {\n    const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this, {\n      strategy: \"fixed\",\n      placement: logicalToPhysical(this.position, this.align, this.direction.dir),\n      middleware: [\n        offset(8),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ],\n    })\n\n    this.computedPosition = placement\n\n    // use physical properties here since floating-ui\n    // works exclusively in physical dimensions\n    // we do all the mapping in logicalToPhysical\n    this.style.setProperty(\"--n-popout-position-x\", `${x}px`)\n    this.style.setProperty(\"--n-popout-position-y\", `${y}px`)\n\n    if (middlewareData.hide?.referenceHidden) {\n      this.hide()\n    }\n  }\n\n  /**\n   * Toggle the popout open or closed using state.\n   * Updating the position to underneath the target button before the popout is opened.\n   */\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n    if (this.open) {\n      this.hide(false)\n    } else if (!this.smallViewport) {\n      this.updatePosition().then(() => this.show())\n    } else {\n      this.show()\n    }\n  }\n\n  private getToggle() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const toggle = <HTMLElement>rootNode.querySelector(`[aria-controls='${this.id}']`)\n\n    if (toggle instanceof HTMLSlotElement) {\n      return toggle.assignedElements()[0] as HTMLElement\n    }\n\n    return toggle\n  }\n\n  /**\n   * Update the smallViewport flag to switch between \"sheet\" and \"floating\".\n   * autoUpdate is needed when a viewport gets larger and the popout is open.\n   */\n  private handleMediaQueryChange = () => {\n    this.smallViewport = mediaQuery.matches\n    if (!this.smallViewport) {\n      this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-popout\": Popout\n  }\n}\n"],"names":["mediaQuery","matchMedia","Popout","LitElement","constructor","this","dismiss","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","targetElement","direction","DirectionController","smallViewport","matches","align","position","id","updatePosition","async","x","y","placement","middlewareData","computePosition","strategy","logicalToPhysical","dir","middleware","offset","flip","shift","padding","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","show","then","handleMediaQueryChange","cleanupAutoUpdate","autoUpdate","updateComplete","dispatchEvent","NordEvent","moveFocusToButton","call","focus","preventScroll","firstUpdated","connectedCallback","super","getToggle","addEventListener","disconnectedCallback","removeAttribute","removeEventListener","render","html","handleIdChange","console","warn","handleOpenChange","setAttribute","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","styles","componentStyle","__decorate","state","prototype","property","reflect","observe","customElement"],"mappings":"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"}

package/lib/TabGroup.js

@@ -1,2 +1,2 @@
-import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r,$ as a,s}from"./lit-element-67e6cd99.js";import{e as o}from"./property-03f59dce.js";import{t as i}from"./state-70f38ceb.js";import{D as n}from"./DraftComponentMixin-9e4b7b34.js";import{s as l}from"./Component-a61df53a.js";import d from"./Tab.js";import{D as b}from"./DirectionController-8b298382.js";import"./observe-a9c6dfb6.js";import"./SlotController-ea6eff46.js";import"./EventController-d99ebeef.js";const c=r`:host{--n-tab-group-padding:0;--n-tab-list-background:var(--n-color-background);--n-tab-list-border:inset 0 -1px 0 0 var(--n-color-border);--n-tab-list-shadow:var(--n-box-shadow-header);--n-tab-list-scroll-shadow:var(--n-color-border);--n-tab-list-scroll-shadow-size:var(--n-space-m);--n-tab-panel-margin:var(--n-space-m) 0;border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}.n-tab-group-list{list-style:none;display:flex;gap:var(--n-space-s);padding:0 var(--n-tab-group-padding);overflow:auto;box-shadow:var(--n-tab-list-border);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0;background:linear-gradient(to right,var(--n-tab-list-background) 30%,transparent),linear-gradient(to right,transparent,var(--n-tab-list-background) 70%) 0 100%,radial-gradient(farthest-side at 0 50%,var(--n-tab-list-scroll-shadow),transparent),radial-gradient(farthest-side at 100% 50%,var(--n-tab-list-scroll-shadow),transparent) 0 100%;background-repeat:no-repeat;background-color:var(--n-tab-list-background);background-size:var(--n-tab-list-scroll-shadow-size) 100%,var(--n-tab-list-scroll-shadow-size) 100%,calc(var(--n-tab-list-scroll-shadow-size)/ 2) 100%,calc(var(--n-tab-list-scroll-shadow-size)/ 2) 100%;background-position:0 0,100%,0 0,100%;background-attachment:local,local,scroll,scroll;overscroll-behavior:none}::slotted(nord-tab-panel){display:none;padding-inline-start:var(--n-tab-group-padding);padding-inline-end:var(--n-tab-group-padding);margin:var(--n-tab-panel-margin)}::slotted(nord-tab-panel[aria-hidden=false]){display:block}:host([padding="m"]){--n-tab-group-padding:var(--n-space-m)}:host([padding="l"]){--n-tab-group-padding:var(--n-space-l)}:host([sticky]){overflow:auto}:host([sticky]) .n-tab-group-list{box-shadow:var(--n-tab-list-border),var(--n-tab-list-shadow);position:sticky;inset:0 0 auto 0;z-index:var(--n-index-sticky)}`;var p;let u=1,h=p=class extends(n(s)){constructor(){super(...arguments),this.direction=new b(this),this.tabGroupId="nord-tab-group-"+u++,this.label="",this.padding="none",this.sticky=!1,this.selectedTab=this.initialSelectedTab,this.handleMutation=t=>{t.forEach((t=>{var e,r;if("selected"===t.attributeName&&null===t.oldValue){const a=t.target;null===(e=this.observer)||void 0===e||e.disconnect(),this.updateSelectedTab(a),null===(r=this.observer)||void 0===r||r.observe(this,p.observerOptions)}}))}}render(){return a`<div class="n-tab-group"><div class="n-tab-group-list" role="tablist" aria-label="${this.label}" @click="${this.handleTabChange}" @keydown="${this.handleKeydown}"><slot name="tab"></slot></div><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.updateSlots()}updateSlots(){this.setupTabs(),this.setupPanels()}firstUpdated(){var t;this.observer=new MutationObserver(this.handleMutation),null===(t=this.observer)||void 0===t||t.observe(this,p.observerOptions)}get initialSelectedTab(){return this.querySelector("nord-tab[selected]")||this.querySelector("nord-tab")}setupTabs(){this.querySelectorAll("nord-tab").forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-controls",`${this.tabGroupId}-panel-${e+1}`),t.toggleAttribute("selected",t===this.selectedTab)}))}setupPanels(){var t;const e=this.querySelectorAll("nord-tab-panel"),r=null===(t=this.selectedTab)||void 0===t?void 0:t.getAttribute("aria-controls");e.forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-panel-${e+1}`),t.setAttribute("aria-labelledby",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-hidden",`${t.getAttribute("id")!==r}`)}))}handleTabChange(t){this.scrollTo({top:0}),t.target instanceof d&&t.target!==this.selectedTab&&this.updateSelectedTab(t.target)}previousTab(t){const e=[...this.querySelectorAll("nord-tab")],r=e.indexOf(t);return e[r-1]}handleKeydown(t){const e=t.target,r=this.querySelector("nord-tab:first-of-type"),a=this.querySelector("nord-tab:last-of-type"),s=this.querySelector(`#${e.getAttribute("id")} ~ nord-tab`)||r,o=this.previousTab(e)||a,i=(t,e)=>{e.preventDefault(),this.scrollTo({top:0}),this.updateSelectedTab(t)};switch(t.key){case"ArrowLeft":i(this.direction.isLTR?o:s,t);break;case"ArrowRight":i(this.direction.isLTR?s:o,t);break;case"Home":i(r,t);break;case"End":i(a,t)}}updateSelectedTab(t){const e=this.querySelector(`#${t.getAttribute("aria-controls")}`);t!==this.selectedTab&&(this.querySelectorAll("nord-tab").forEach((e=>{e.removeAttribute("selected"),e===t&&(e.setAttribute("selected",""),e.focus(),e.scrollIntoView({block:"nearest",inline:"nearest"}),this.selectedTab=e)})),this.querySelectorAll("nord-tab-panel").forEach((t=>{t.setAttribute("aria-hidden",`${t!==e}`)})))}};h.styles=[l,c],h.observerOptions={attributes:!0,subtree:!0,attributeFilter:["selected"],attributeOldValue:!0},t([o({reflect:!0})],h.prototype,"label",void 0),t([o({reflect:!0})],h.prototype,"padding",void 0),t([o({reflect:!0,type:Boolean})],h.prototype,"sticky",void 0),t([i()],h.prototype,"selectedTab",void 0),h=p=t([e("nord-tab-group")],h);var v=h;export{v as default};
+import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r,$ as a,s}from"./lit-element-67e6cd99.js";import{e as o}from"./property-03f59dce.js";import{t as i}from"./state-70f38ceb.js";import{D as l}from"./DraftComponentMixin-9e4b7b34.js";import{s as n}from"./Component-a61df53a.js";import d from"./Tab.js";import{D as b}from"./DirectionController-8b298382.js";import"./observe-a9c6dfb6.js";import"./SlotController-ea6eff46.js";import"./EventController-d99ebeef.js";const c=r`:host{--n-tab-group-padding:0;--n-tab-list-background:var(--n-color-background);--n-tab-list-border:inset 0 -1px 0 0 var(--n-color-border);--n-tab-list-shadow:var(--n-box-shadow-header);--n-tab-list-scroll-shadow:var(--n-color-border);--n-tab-list-scroll-shadow-size:var(--n-space-m);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}.n-tab-group-list{list-style:none;display:flex;gap:var(--n-space-s);padding:0 var(--n-tab-group-padding);overflow:auto;box-shadow:var(--n-tab-list-border);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0;background:linear-gradient(to right,var(--n-tab-list-background) 30%,transparent),linear-gradient(to right,transparent,var(--n-tab-list-background) 70%) 0 100%,radial-gradient(farthest-side at 0 50%,var(--n-tab-list-scroll-shadow),transparent),radial-gradient(farthest-side at 100% 50%,var(--n-tab-list-scroll-shadow),transparent) 0 100%;background-repeat:no-repeat;background-color:var(--n-tab-list-background);background-size:var(--n-tab-list-scroll-shadow-size) 100%,var(--n-tab-list-scroll-shadow-size) 100%,calc(var(--n-tab-list-scroll-shadow-size)/ 2) 100%,calc(var(--n-tab-list-scroll-shadow-size)/ 2) 100%;background-position:0 0,100%,0 0,100%;background-attachment:local,local,scroll,scroll;overscroll-behavior:none}::slotted(nord-tab-panel){display:none;padding:var(--n-tab-group-padding)}::slotted(nord-tab-panel[aria-hidden=false]){display:block}:host([padding="m"]){--n-tab-group-padding:var(--n-space-m)}:host([padding="l"]){--n-tab-group-padding:var(--n-space-l)}:host([sticky]) .n-tab-group-list{box-shadow:var(--n-tab-list-border),var(--n-tab-list-shadow);position:sticky;inset:0 0 auto 0;z-index:var(--n-index-sticky);inset-block-start:0}`;var p;let u=1,h=p=class extends(l(s)){constructor(){super(...arguments),this.direction=new b(this),this.tabGroupId="nord-tab-group-"+u++,this.label="",this.padding="m",this.sticky=!1,this.selectedTab=this.initialSelectedTab,this.handleMutation=t=>{t.forEach((t=>{var e,r;if("selected"===t.attributeName&&null===t.oldValue){const a=t.target;null===(e=this.observer)||void 0===e||e.disconnect(),this.updateSelectedTab(a),null===(r=this.observer)||void 0===r||r.observe(this,p.observerOptions)}}))}}render(){return a`<div class="n-tab-group"><div class="n-tab-group-list" role="tablist" aria-label="${this.label}" @click="${this.handleTabChange}" @keydown="${this.handleKeydown}"><slot name="tab"></slot></div><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.updateSlots()}updateSlots(){this.setupTabs(),this.setupPanels()}firstUpdated(){var t;this.observer=new MutationObserver(this.handleMutation),null===(t=this.observer)||void 0===t||t.observe(this,p.observerOptions)}get initialSelectedTab(){return this.querySelector("nord-tab[selected]")||this.querySelector("nord-tab")}setupTabs(){this.querySelectorAll("nord-tab").forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-controls",`${this.tabGroupId}-panel-${e+1}`),t.toggleAttribute("selected",t===this.selectedTab)}))}setupPanels(){var t;const e=this.querySelectorAll("nord-tab-panel"),r=null===(t=this.selectedTab)||void 0===t?void 0:t.getAttribute("aria-controls");e.forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-panel-${e+1}`),t.setAttribute("aria-labelledby",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-hidden",`${t.getAttribute("id")!==r}`)}))}handleTabChange(t){this.scrollTo({top:0}),t.target instanceof d&&t.target!==this.selectedTab&&this.updateSelectedTab(t.target)}previousTab(t){const e=[...this.querySelectorAll("nord-tab")],r=e.indexOf(t);return e[r-1]}handleKeydown(t){const e=t.target,r=this.querySelector("nord-tab:first-of-type"),a=this.querySelector("nord-tab:last-of-type"),s=this.querySelector(`#${e.getAttribute("id")} ~ nord-tab`)||r,o=this.previousTab(e)||a,i=(t,e)=>{e.preventDefault(),this.scrollTo({top:0}),this.updateSelectedTab(t)};switch(t.key){case"ArrowLeft":i(this.direction.isLTR?o:s,t);break;case"ArrowRight":i(this.direction.isLTR?s:o,t);break;case"Home":i(r,t);break;case"End":i(a,t)}}updateSelectedTab(t){const e=this.querySelector(`#${t.getAttribute("aria-controls")}`);t!==this.selectedTab&&(this.querySelectorAll("nord-tab").forEach((e=>{e.removeAttribute("selected"),e===t&&(e.setAttribute("selected",""),e.focus(),e.scrollIntoView({block:"nearest",inline:"nearest"}),this.selectedTab=e)})),this.querySelectorAll("nord-tab-panel").forEach((t=>{t.setAttribute("aria-hidden",`${t!==e}`)})))}};h.styles=[n,c],h.observerOptions={attributes:!0,subtree:!0,attributeFilter:["selected"],attributeOldValue:!0},t([o({reflect:!0})],h.prototype,"label",void 0),t([o({reflect:!0})],h.prototype,"padding",void 0),t([o({reflect:!0,type:Boolean})],h.prototype,"sticky",void 0),t([i()],h.prototype,"selectedTab",void 0),h=p=t([e("nord-tab-group")],h);var v=h;export{v as default};
 //# sourceMappingURL=TabGroup.js.map

package/lib/TabGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabGroup.js","sources":["../src/tab-group/TabGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TabGroup.css\"\nimport Tab from \"../tab/Tab.js\"\n\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\n\nlet tabGroupCount = 1\n\n/**\n * Tab Group allows multiple panels to be contained within a single window,\n * using tabs as a navigational element.\n *\n * @status draft\n * @category navigation\n * @slot - The element which contains the content to be revealed.\n * @slot tab - The element which contains all tabs to reveal tabbed content.\n */\n@customElement(\"nord-tab-group\")\nexport default class TabGroup extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private direction = new DirectionController(this)\n\n  private observer?: MutationObserver\n\n  private static observerOptions = {\n    attributes: true,\n    subtree: true,\n    attributeFilter: [\"selected\"],\n    attributeOldValue: true,\n  }\n\n  /**\n   * Unique ID for each tab group component present.\n   */\n  private tabGroupId = `nord-tab-group-${tabGroupCount++}`\n\n  /**\n   * Adds an accessible label to the tab list container.\n   */\n  @property({ reflect: true }) label: string = \"\"\n\n  /**\n   * Controls the padding of the tab group component.\n   */\n  @property({ reflect: true }) padding?: \"m\" | \"l\" | \"none\" = \"none\"\n\n  /**\n   * Whether the tab list sticks to the top of the tab group as you scroll.\n   */\n  @property({ reflect: true, type: Boolean }) sticky: boolean = false\n\n  /**\n   * The current tab node selected in the tab group.\n   */\n  @state() private selectedTab = this.initialSelectedTab\n\n  render() {\n    return html`\n      <div class=\"n-tab-group\">\n        <div\n          class=\"n-tab-group-list\"\n          role=\"tablist\"\n          aria-label=\"${this.label}\"\n          @click=${this.handleTabChange}\n          @keydown=${this.handleKeydown}\n        >\n          <slot name=\"tab\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.updateSlots()\n  }\n\n  private updateSlots() {\n    this.setupTabs()\n    this.setupPanels()\n  }\n\n  firstUpdated() {\n    this.observer = new MutationObserver(this.handleMutation)\n    this.observer?.observe(this, TabGroup.observerOptions)\n  }\n\n  /**\n   * If the selected tab is selected programmatically update all the tabs.\n   */\n  private handleMutation = (mutations: MutationRecord[]) => {\n    mutations.forEach(mutation => {\n      if (mutation.attributeName === \"selected\" && mutation.oldValue === null) {\n        const selectedTab = <Tab>mutation.target\n        this.observer?.disconnect()\n        this.updateSelectedTab(selectedTab)\n        this.observer?.observe(this, TabGroup.observerOptions)\n      }\n    })\n  }\n\n  /**\n   * Get the selected tab button, or the first tab button.\n   */\n  private get initialSelectedTab() {\n    return this.querySelector(\"nord-tab[selected]\") || this.querySelector(\"nord-tab\")\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab buttons.\n   */\n  private setupTabs() {\n    const tabs = this.querySelectorAll(\"nord-tab\")\n\n    tabs.forEach((tab, index) => {\n      tab.setAttribute(\"id\", `${this.tabGroupId}-tab-${index + 1}`)\n      tab.setAttribute(\"aria-controls\", `${this.tabGroupId}-panel-${index + 1}`)\n      tab.toggleAttribute(\"selected\", tab === this.selectedTab)\n    })\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab panels.\n   */\n  private setupPanels() {\n    const panels = this.querySelectorAll(\"nord-tab-panel\")\n    const selectedPanelId = this.selectedTab?.getAttribute(\"aria-controls\")\n\n    panels.forEach((panel, index) => {\n      panel.setAttribute(\"id\", `${this.tabGroupId}-panel-${index + 1}`)\n      panel.setAttribute(\"aria-labelledby\", `${this.tabGroupId}-tab-${index + 1}`)\n      panel.setAttribute(\"aria-hidden\", `${panel.getAttribute(\"id\") !== selectedPanelId}`)\n    })\n  }\n\n  private handleTabChange(event: Event) {\n    // Always reset the scroll when a tab is selected.\n    this.scrollTo({ top: 0 })\n\n    /**\n     * Return handler if it's not a tab or if it's already selected\n     */\n    if (!(event.target instanceof Tab) || event.target === this.selectedTab) return\n\n    this.updateSelectedTab(event.target)\n  }\n\n  /**\n   * Get the previous tab button in the tab group\n   */\n  private previousTab(tab: Tab) {\n    const tabs = [...this.querySelectorAll(\"nord-tab\")]\n    const selectedTabIndex = tabs.indexOf(tab)\n    return tabs[selectedTabIndex - 1]\n  }\n\n  /**\n   * Handle keyboard accessible controls.\n   */\n  private handleKeydown(event: KeyboardEvent) {\n    const tab = <Tab>event.target\n\n    const firstTab = <Tab>this.querySelector(\"nord-tab:first-of-type\")\n    const lastTab = <Tab>this.querySelector(\"nord-tab:last-of-type\")\n    const nextTab = <Tab>this.querySelector(`#${tab.getAttribute(\"id\")} ~ nord-tab`) || firstTab\n    const previousTab = <Tab>this.previousTab(tab) || lastTab\n\n    const updateTab = (selectedTab: Tab, keyEvent: Event) => {\n      keyEvent.preventDefault()\n\n      // Always reset the scroll when a tab is selected.\n      this.scrollTo({ top: 0 })\n      this.updateSelectedTab(selectedTab)\n    }\n\n    switch (event.key) {\n      case \"ArrowLeft\":\n        updateTab(this.direction.isLTR ? previousTab : nextTab, event)\n        break\n\n      case \"ArrowRight\":\n        updateTab(this.direction.isLTR ? nextTab : previousTab, event)\n        break\n\n      case \"Home\":\n        updateTab(firstTab, event)\n        break\n\n      case \"End\":\n        updateTab(lastTab, event)\n        break\n\n      default:\n        break\n    }\n  }\n\n  /**\n   * Update the selected tab button with attributes and values.\n   * Update the tab group state.\n   */\n  private updateSelectedTab(selectedTab: Tab) {\n    const selectedPanel = this.querySelector(`#${selectedTab.getAttribute(\"aria-controls\")}`)\n\n    if (selectedTab === this.selectedTab) return\n\n    /**\n     * Reset all the selected state of the tabs, and select the clicked tab\n     */\n    this.querySelectorAll(\"nord-tab\").forEach(tab => {\n      tab.removeAttribute(\"selected\")\n      if (tab === selectedTab) {\n        tab.setAttribute(\"selected\", \"\")\n        tab.focus()\n        tab.scrollIntoView({ block: \"nearest\", inline: \"nearest\" })\n        this.selectedTab = tab\n      }\n    })\n\n    /**\n     * Reset all the visibility of the panels,\n     * and show the panel related to the selected tab\n     */\n    this.querySelectorAll(\"nord-tab-panel\").forEach(panel => {\n      panel.setAttribute(\"aria-hidden\", `${panel !== selectedPanel}`)\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tab-group\": TabGroup\n  }\n}\n"],"names":["tabGroupCount","TabGroup","DraftComponentMixin","LitElement","constructor","this","direction","DirectionController","tabGroupId","label","padding","sticky","selectedTab","initialSelectedTab","handleMutation","mutations","forEach","mutation","attributeName","oldValue","target","_a","observer","disconnect","updateSelectedTab","_b","observe","TabGroup_1","observerOptions","render","html","handleTabChange","handleKeydown","connectedCallback","super","updateSlots","setupTabs","setupPanels","firstUpdated","MutationObserver","querySelector","querySelectorAll","tab","index","setAttribute","toggleAttribute","panels","selectedPanelId","getAttribute","panel","event","scrollTo","top","Tab","previousTab","tabs","selectedTabIndex","indexOf","firstTab","lastTab","nextTab","updateTab","keyEvent","preventDefault","key","isLTR","selectedPanel","removeAttribute","focus","scrollIntoView","block","inline","styles","componentStyle","style","attributes","subtree","attributeFilter","attributeOldValue","__decorate","property","reflect","prototype","type","Boolean","state","customElement"],"mappings":"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"}
+{"version":3,"file":"TabGroup.js","sources":["../src/tab-group/TabGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TabGroup.css\"\nimport Tab from \"../tab/Tab.js\"\n\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\n\nlet tabGroupCount = 1\n\n/**\n * Tab Group allows multiple panels to be contained within a single window,\n * using tabs as a navigational element.\n *\n * @status draft\n * @category navigation\n * @slot - The element which contains the content to be revealed.\n * @slot tab - The element which contains all tabs to reveal tabbed content.\n */\n@customElement(\"nord-tab-group\")\nexport default class TabGroup extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private direction = new DirectionController(this)\n\n  private observer?: MutationObserver\n\n  private static observerOptions = {\n    attributes: true,\n    subtree: true,\n    attributeFilter: [\"selected\"],\n    attributeOldValue: true,\n  }\n\n  /**\n   * Unique ID for each tab group component present.\n   */\n  private tabGroupId = `nord-tab-group-${tabGroupCount++}`\n\n  /**\n   * Adds an accessible label to the tab list container.\n   */\n  @property({ reflect: true }) label: string = \"\"\n\n  /**\n   * Controls the padding of the tab group component.\n   */\n  @property({ reflect: true }) padding?: \"m\" | \"l\" | \"none\" = \"m\"\n\n  /**\n   * Whether the tab list sticks to the top of the tab group as you scroll.\n   */\n  @property({ reflect: true, type: Boolean }) sticky: boolean = false\n\n  /**\n   * The current tab node selected in the tab group.\n   */\n  @state() private selectedTab = this.initialSelectedTab\n\n  render() {\n    return html`\n      <div class=\"n-tab-group\">\n        <div\n          class=\"n-tab-group-list\"\n          role=\"tablist\"\n          aria-label=\"${this.label}\"\n          @click=${this.handleTabChange}\n          @keydown=${this.handleKeydown}\n        >\n          <slot name=\"tab\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.updateSlots()\n  }\n\n  private updateSlots() {\n    this.setupTabs()\n    this.setupPanels()\n  }\n\n  firstUpdated() {\n    this.observer = new MutationObserver(this.handleMutation)\n    this.observer?.observe(this, TabGroup.observerOptions)\n  }\n\n  /**\n   * If the selected tab is selected programmatically update all the tabs.\n   */\n  private handleMutation = (mutations: MutationRecord[]) => {\n    mutations.forEach(mutation => {\n      if (mutation.attributeName === \"selected\" && mutation.oldValue === null) {\n        const selectedTab = <Tab>mutation.target\n        this.observer?.disconnect()\n        this.updateSelectedTab(selectedTab)\n        this.observer?.observe(this, TabGroup.observerOptions)\n      }\n    })\n  }\n\n  /**\n   * Get the selected tab button, or the first tab button.\n   */\n  private get initialSelectedTab() {\n    return this.querySelector(\"nord-tab[selected]\") || this.querySelector(\"nord-tab\")\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab buttons.\n   */\n  private setupTabs() {\n    const tabs = this.querySelectorAll(\"nord-tab\")\n\n    tabs.forEach((tab, index) => {\n      tab.setAttribute(\"id\", `${this.tabGroupId}-tab-${index + 1}`)\n      tab.setAttribute(\"aria-controls\", `${this.tabGroupId}-panel-${index + 1}`)\n      tab.toggleAttribute(\"selected\", tab === this.selectedTab)\n    })\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab panels.\n   */\n  private setupPanels() {\n    const panels = this.querySelectorAll(\"nord-tab-panel\")\n    const selectedPanelId = this.selectedTab?.getAttribute(\"aria-controls\")\n\n    panels.forEach((panel, index) => {\n      panel.setAttribute(\"id\", `${this.tabGroupId}-panel-${index + 1}`)\n      panel.setAttribute(\"aria-labelledby\", `${this.tabGroupId}-tab-${index + 1}`)\n      panel.setAttribute(\"aria-hidden\", `${panel.getAttribute(\"id\") !== selectedPanelId}`)\n    })\n  }\n\n  private handleTabChange(event: Event) {\n    // Always reset the scroll when a tab is selected.\n    this.scrollTo({ top: 0 })\n\n    /**\n     * Return handler if it's not a tab or if it's already selected\n     */\n    if (!(event.target instanceof Tab) || event.target === this.selectedTab) return\n\n    this.updateSelectedTab(event.target)\n  }\n\n  /**\n   * Get the previous tab button in the tab group\n   */\n  private previousTab(tab: Tab) {\n    const tabs = [...this.querySelectorAll(\"nord-tab\")]\n    const selectedTabIndex = tabs.indexOf(tab)\n    return tabs[selectedTabIndex - 1]\n  }\n\n  /**\n   * Handle keyboard accessible controls.\n   */\n  private handleKeydown(event: KeyboardEvent) {\n    const tab = <Tab>event.target\n\n    const firstTab = <Tab>this.querySelector(\"nord-tab:first-of-type\")\n    const lastTab = <Tab>this.querySelector(\"nord-tab:last-of-type\")\n    const nextTab = <Tab>this.querySelector(`#${tab.getAttribute(\"id\")} ~ nord-tab`) || firstTab\n    const previousTab = <Tab>this.previousTab(tab) || lastTab\n\n    const updateTab = (selectedTab: Tab, keyEvent: Event) => {\n      keyEvent.preventDefault()\n\n      // Always reset the scroll when a tab is selected.\n      this.scrollTo({ top: 0 })\n      this.updateSelectedTab(selectedTab)\n    }\n\n    switch (event.key) {\n      case \"ArrowLeft\":\n        updateTab(this.direction.isLTR ? previousTab : nextTab, event)\n        break\n\n      case \"ArrowRight\":\n        updateTab(this.direction.isLTR ? nextTab : previousTab, event)\n        break\n\n      case \"Home\":\n        updateTab(firstTab, event)\n        break\n\n      case \"End\":\n        updateTab(lastTab, event)\n        break\n\n      default:\n        break\n    }\n  }\n\n  /**\n   * Update the selected tab button with attributes and values.\n   * Update the tab group state.\n   */\n  private updateSelectedTab(selectedTab: Tab) {\n    const selectedPanel = this.querySelector(`#${selectedTab.getAttribute(\"aria-controls\")}`)\n\n    if (selectedTab === this.selectedTab) return\n\n    /**\n     * Reset all the selected state of the tabs, and select the clicked tab\n     */\n    this.querySelectorAll(\"nord-tab\").forEach(tab => {\n      tab.removeAttribute(\"selected\")\n      if (tab === selectedTab) {\n        tab.setAttribute(\"selected\", \"\")\n        tab.focus()\n        tab.scrollIntoView({ block: \"nearest\", inline: \"nearest\" })\n        this.selectedTab = tab\n      }\n    })\n\n    /**\n     * Reset all the visibility of the panels,\n     * and show the panel related to the selected tab\n     */\n    this.querySelectorAll(\"nord-tab-panel\").forEach(panel => {\n      panel.setAttribute(\"aria-hidden\", `${panel !== selectedPanel}`)\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tab-group\": TabGroup\n  }\n}\n"],"names":["tabGroupCount","TabGroup","DraftComponentMixin","LitElement","constructor","this","direction","DirectionController","tabGroupId","label","padding","sticky","selectedTab","initialSelectedTab","handleMutation","mutations","forEach","mutation","attributeName","oldValue","target","_a","observer","disconnect","updateSelectedTab","_b","observe","TabGroup_1","observerOptions","render","html","handleTabChange","handleKeydown","connectedCallback","super","updateSlots","setupTabs","setupPanels","firstUpdated","MutationObserver","querySelector","querySelectorAll","tab","index","setAttribute","toggleAttribute","panels","selectedPanelId","getAttribute","panel","event","scrollTo","top","Tab","previousTab","tabs","selectedTabIndex","indexOf","firstTab","lastTab","nextTab","updateTab","keyEvent","preventDefault","key","isLTR","selectedPanel","removeAttribute","focus","scrollIntoView","block","inline","styles","componentStyle","style","attributes","subtree","attributeFilter","attributeOldValue","__decorate","property","reflect","prototype","type","Boolean","state","customElement"],"mappings":"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"}