@nordhealth/components 2.4.0 → 2.6.0

package/lib/Layout.js

@@ -1,2 +1,2 @@
-import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as t,s as a,y as i}from"./lit-element-79bc2e0e.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-cd6c8cbd.js";import{D as l}from"./DirectionController-8b298382.js";import{E as h}from"./EventController-d99ebeef.js";import{L as c}from"./LightDismissController-a2645ae6.js";import{o as v}from"./observe-a9c6dfb6.js";import{c as p}from"./cond-0a8d4554.js";import{f as u}from"./fsm-50373df9.js";import{c as g}from"./number-c3ab3e95.js";import{s as m}from"./Component-49a41387.js";import"./directive-de55b00a.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";const k=t`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-nav-transition-duration:var(--n-transition-mobile);background:var(--n-color-background);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--n-color-background);inset-block-start:0;min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--n-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{inset-inline-end:0;inline-size:100%}main{padding:var(--_n-layout-padding)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened] .n-layout-main{inline-size:calc(100% - var(--n-nav-width));margin-inline-start:var(--n-nav-width)}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}`,b=matchMedia("(min-width: 768px)"),y=function(e,n,t=JSON.stringify,a=JSON.parse){return{get value(){try{const t=localStorage.getItem(e);return t?a(t):n}catch(e){return n}},set value(n){try{localStorage.setItem(e,t(n))}catch(e){}}}}("nord-layout.navWidth",250),f=u({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 w=class extends a{constructor(){super(...arguments),this.direction=new l(this),this.events=new h(this),this.lightDismiss=new c(this,{isOpen:()=>"opened"===this.navState&&!b.matches,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl&&!this.isNavToggle(e)}),this.navWidth=y.value,this.isDragging=!1,this.navState=b.matches?"opened":"closed",this.navOpen="opened"===this.navState,this.padding="m",this.handleMediaQueryChange=()=>{this.navTransition(b.matches?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=e=>{this.isNavToggle(e.target)||this.navTransition("focusout")},this.handleMouseEnter=()=>{b.matches&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}connectedCallback(){super.connectedCallback(),this.events.listen(b,"change",this.handleMediaQueryChange),this.events.listen(this,"click",(e=>{this.isNavToggle(e.target)&&this.handleToggleClick()})),this.events.listen(this,"mouseover",(e=>{this.isNavToggle(e.target)&&this.handleMouseEnter()})),this.events.listen(this,"mouseout",(e=>{this.isNavToggle(e.target)&&this.handleMouseLeave()}))}render(){const{navWidth:e,navState:n,isDragging:t,direction:a}=this,o="opened"===n&&b.matches?e:250;return i`<div class="${d({"n-layout":!0,"n-rtl":a.isRTL,"n-dragging":t})}" style="${`--n-nav-width: ${o}px`}" data-nav="${n}" data-screen="${b.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="${p("opened"===n,this.startDragging)}" @pointermove="${p(t,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>`}handleNavWidthChange(){y.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=f.transition(this.navState,e)}handleClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}isNavToggle(e){return Boolean(this.navToggle)&&(null!=(n=e)&&n.nodeType===Node.ELEMENT_NODE)&&e.id===this.navToggle;var n}handleKeyboardResize(e){const{navWidth:n,direction:{isLTR:t}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(n+(t?-30:30));break;case"ArrowRight":this.setNavWidth(n+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}e.preventDefault()}setNavWidth(e){this.navWidth=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")}};w.styles=[m,k],e([r(".n-layout-nav",!0)],w.prototype,"navEl",void 0),e([s()],w.prototype,"navWidth",void 0),e([s()],w.prototype,"isDragging",void 0),e([s()],w.prototype,"navState",void 0),e([o({reflect:!0,type:Boolean,attribute:"nav-open"})],w.prototype,"navOpen",void 0),e([o({attribute:"nav-toggle"})],w.prototype,"navToggle",void 0),e([o({reflect:!0})],w.prototype,"padding",void 0),e([v("navWidth","updated")],w.prototype,"handleNavWidthChange",null),e([v("navState")],w.prototype,"handleNavStateChange",null),e([v("navOpen","updated")],w.prototype,"handleOpenChange",null),w=e([n("nord-layout")],w);var T=w;export{T as default};
+import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as t,s as a,y as i}from"./lit-element-79bc2e0e.js";import{e as 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-cd6c8cbd.js";import{D as l}from"./DirectionController-8b298382.js";import{E as h}from"./EventController-d99ebeef.js";import{L as v}from"./LightDismissController-a2645ae6.js";import{S as c}from"./SlotController-ea6eff46.js";import{o as p}from"./observe-a9c6dfb6.js";import{c as u}from"./cond-0a8d4554.js";import{f as g}from"./fsm-50373df9.js";import{c as m}from"./number-c3ab3e95.js";import{s as b}from"./Component-49a41387.js";import"./directive-de55b00a.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";const y=t`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-nav-transition-duration:var(--n-transition-mobile);background:var(--n-color-background);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--n-color-background);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}main{padding:var(--_n-layout-padding)}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}`,k=matchMedia("(min-width: 768px)"),f=function(e,n,t=JSON.stringify,a=JSON.parse){return{get value(){try{const t=localStorage.getItem(e);return t?a(t):n}catch(e){return n}},set value(n){try{localStorage.setItem(e,t(n))}catch(e){}}}}("nord-layout.navWidth",250),w=g({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.navSlot=new c(this,"nav"),this.drawerSlot=new c(this,"drawer"),this.direction=new l(this),this.events=new h(this),this.lightDismiss=new v(this,{isOpen:()=>"opened"===this.navState&&!k.matches,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl&&!this.isNavToggle(e)}),this.navWidth=f.value,this.isDragging=!1,this.navState=k.matches?"opened":"closed",this.navOpen="opened"===this.navState,this.padding="m",this.handleMediaQueryChange=()=>{this.navTransition(k.matches?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=e=>{this.isNavToggle(e.target)||this.navTransition("focusout")},this.handleMouseEnter=()=>{k.matches&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}connectedCallback(){super.connectedCallback(),this.events.listen(k,"change",this.handleMediaQueryChange),this.events.listen(this,"click",(e=>{this.isNavToggle(e.target)&&this.handleToggleClick()})),this.events.listen(this,"mouseover",(e=>{this.isNavToggle(e.target)&&this.handleMouseEnter()})),this.events.listen(this,"mouseout",(e=>{this.isNavToggle(e.target)&&this.handleMouseLeave()}))}render(){const{navWidth:e,navState:n,navSlot:t,isDragging:a,direction:o}=this,s="opened"===n&&k.matches?e:250;return i`<div class="${d({"n-layout":!0,"n-rtl":o.isRTL,"n-dragging":a})}" style="${`--_n-layout-nav-width: ${s}px`}" data-nav="${t.hasContent?n:"closed"}" data-screen="${k.matches?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${t.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${u("opened"===n,this.startDragging)}" @pointermove="${u(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}"><div class="${d({"n-has-drawer":this.drawerSlot.hasContent})}"><slot name="header"></slot><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}handleNavWidthChange(){f.value=this.navWidth}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(e){this.navState=w.transition(this.navState,e)}handleClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}isNavToggle(e){return Boolean(this.navToggle)&&(null!=(n=e)&&n.nodeType===Node.ELEMENT_NODE)&&e.id===this.navToggle;var n}handleKeyboardResize(e){const{navWidth:n,direction:{isLTR:t}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(n+(t?-30:30));break;case"ArrowRight":this.setNavWidth(n+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}e.preventDefault()}setNavWidth(e){this.navWidth=m(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=[b,y],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([p("navWidth","updated")],T.prototype,"handleNavWidthChange",null),e([p("navState")],T.prototype,"handleNavStateChange",null),e([p("navOpen","updated")],T.prototype,"handleOpenChange",null),T=e([n("nord-layout")],T);var x=T;export{x as default};
 //# sourceMappingURL=Layout.js.map

package/lib/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["/* 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 { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.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\nfunction isElement(el: any): el is Element {\n  return el != null && el.nodeType === Node.ELEMENT_NODE\n}\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 * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n  private direction = new DirectionController(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !mediaQuery.matches,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl && !this.isNavToggle(node),\n  })\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  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n\n    this.events.listen(this, \"click\", e => {\n      if (this.isNavToggle(e.target)) {\n        this.handleToggleClick()\n      }\n    })\n    this.events.listen(this, \"mouseover\", e => {\n      if (this.isNavToggle(e.target)) {\n        this.handleMouseEnter()\n      }\n    })\n    this.events.listen(this, \"mouseout\", e => {\n      if (this.isNavToggle(e.target)) {\n        this.handleMouseLeave()\n      }\n    })\n  }\n\n  render() {\n    const { navWidth, navState, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && mediaQuery.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=${mediaQuery.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(\"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(mediaQuery.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 (!this.isNavToggle(e.target)) {\n      this.navTransition(\"focusout\")\n    }\n  }\n\n  private handleMouseEnter = () => {\n    if (mediaQuery.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  private isNavToggle(node: EventTarget | null) {\n    return Boolean(this.navToggle) && isElement(node) && node.id === this.navToggle\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      try {\n        const value = localStorage.getItem(key)\n        return value ? deserialize(value) : defaultValue\n      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      try {\n        localStorage.setItem(key, serialize(value))\n      } catch {\n        //  nothing we can do here\n      }\n    },\n  }\n}\n"],"names":["mediaQuery","matchMedia","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","_a","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","constructor","this","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","matches","onDismiss","navTransition","isDismissible","node","navEl","isNavToggle","navWidth","isDragging","navOpen","padding","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","e","target","handleMouseEnter","handleMouseLeave","handleTransitionEnd","connectedCallback","super","listen","render","adjustedNavWidth","html","classMap","isRTL","handleDropdownOpen","handleDropdownClose","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleClick","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","Math","max","event","transition","localName","Boolean","navToggle","el","nodeType","Node","ELEMENT_NODE","id","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["/* 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 { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.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\nfunction isElement(el: any): el is Element {\n  return el != null && el.nodeType === Node.ELEMENT_NODE\n}\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 * @slot drawer - Used to place additional content/details relating to a selected item.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n  private navSlot = new SlotController(this, \"nav\")\n  private drawerSlot = new SlotController(this, \"drawer\")\n  private direction = new DirectionController(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !mediaQuery.matches,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl && !this.isNavToggle(node),\n  })\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  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n\n    this.events.listen(this, \"click\", e => {\n      if (this.isNavToggle(e.target)) {\n        this.handleToggleClick()\n      }\n    })\n    this.events.listen(this, \"mouseover\", e => {\n      if (this.isNavToggle(e.target)) {\n        this.handleMouseEnter()\n      }\n    })\n    this.events.listen(this, \"mouseout\", e => {\n      if (this.isNavToggle(e.target)) {\n        this.handleMouseLeave()\n      }\n    })\n  }\n\n  render() {\n    const { navWidth, navState, navSlot, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && mediaQuery.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-layout-nav-width: ${adjustedNavWidth}px`}\n        data-nav=${navSlot.hasContent ? navState : \"closed\"}\n        data-screen=${mediaQuery.matches ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\n          ?hidden=${navSlot.isEmpty}\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\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleClick}>\n          <div class=${classMap({ \"n-has-drawer\": this.drawerSlot.hasContent })}>\n            <slot name=\"header\"></slot>\n            <main>\n              <slot></slot>\n            </main>\n          </div>\n          <aside ?hidden=${this.drawerSlot.isEmpty}>\n            <slot name=\"drawer\"></slot>\n          </aside>\n        </div>\n      </div>\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(mediaQuery.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 (!this.isNavToggle(e.target)) {\n      this.navTransition(\"focusout\")\n    }\n  }\n\n  private handleMouseEnter = () => {\n    if (mediaQuery.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  private isNavToggle(node: EventTarget | null) {\n    return Boolean(this.navToggle) && isElement(node) && node.id === this.navToggle\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      try {\n        const value = localStorage.getItem(key)\n        return value ? deserialize(value) : defaultValue\n      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      try {\n        localStorage.setItem(key, serialize(value))\n      } catch {\n        //  nothing we can do here\n      }\n    },\n  }\n}\n"],"names":["mediaQuery","matchMedia","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","_a","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","constructor","this","navSlot","SlotController","drawerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","matches","onDismiss","navTransition","isDismissible","node","navEl","isNavToggle","navWidth","isDragging","navOpen","padding","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","e","target","handleMouseEnter","handleMouseLeave","handleTransitionEnd","connectedCallback","super","listen","render","adjustedNavWidth","html","classMap","isRTL","hasContent","isEmpty","handleDropdownOpen","handleDropdownClose","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleClick","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","Math","max","event","transition","localName","Boolean","navToggle","el","nodeType","Node","ELEMENT_NODE","id","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","attribute","observe","customElement"],"mappings":"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"}

package/lib/Modal.js

@@ -1,2 +1,2 @@
-import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i as o,s,y as i}from"./lit-element-79bc2e0e.js";import{e as n}from"./property-03f59dce.js";import{i as a}from"./query-2d22378e.js";import{c as r}from"./interface-close-small-44ababc3.js";import l from"./Icon.js";import{E as d}from"./EventController-d99ebeef.js";import{L as c}from"./LightDismissController-a2645ae6.js";import{S as h}from"./SlotController-ea6eff46.js";import{o as p}from"./observe-a9c6dfb6.js";import{N as m}from"./events-731d0007.js";import{s as u}from"./Component-49a41387.js";import{LocalizeController as v}from"./LocalizeController.js";import"./state-70f38ceb.js";import"./if-defined-f43b1487.js";import"./unsafe-html-be8023cd.js";import"./directive-de55b00a.js";import"./cond-0a8d4554.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";class b{constructor(t,e=(()=>t)){this.boundary=e,this.lastScrollY=0,this.handleFocusOut=t=>{this.lastFocused=t.target,t.relatedTarget===this.boundary()&&this.recaptureFocus()},this.handleFocusIn=t=>{!t.composedPath().includes(this.boundary())&&this.recaptureFocus()},this.restoreScroll=()=>{window.scrollTo(window.scrollX,this.lastScrollY)},t.addController(this)}hostDisconnected(){this.release()}trap(){this.lastScrollY=window.scrollY,this.boundary().addEventListener("focusout",this.handleFocusOut),window.addEventListener("scroll",this.restoreScroll),window.addEventListener("focusin",this.handleFocusIn)}release(){this.lastScrollY=0,this.lastFocused=void 0,this.boundary().removeEventListener("focusout",this.handleFocusOut),window.removeEventListener("scroll",this.restoreScroll),window.removeEventListener("focusin",this.handleFocusIn)}recaptureFocus(){var t;null===(t=this.lastFocused)||void 0===t||t.focus({preventScroll:!0})}}class f{constructor(t,e=document.body){this.scroller=e,this.resets=new Set,t.addController(this)}hostDisconnected(){this.restore()}get width(){const t=document.documentElement.clientWidth;return Math.abs(window.innerWidth-t)}hide(){this.restore();const{width:t}=this,e=getComputedStyle(this.scroller),o=parseInt(e.paddingRight,10)||0;this.setStyle("--n-scrollbar-gutter",`${t+o}px`),this.setStyle("overflow","hidden"),this.setStyle("padding-right","var(--n-scrollbar-gutter)")}restore(){this.resets.forEach((t=>t())),this.resets.clear()}setStyle(t,e){const{style:o}=this.scroller,s=this.scroller.style.getPropertyValue(t);o.setProperty(t,e),this.resets.add((()=>o.setProperty(t,s)))}}const y=o`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-overlay)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding:var(--n-space-l) var(--_n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-nav-surface);border-block-end:1px solid var(--n-color-border)}.n-modal-footer{border-block-start:1px solid var(--n-color-border)}.n-padded{padding:var(--_n-modal-padding-block) var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:"";position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 1320px)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:calc(var(--n-space-s)/ 2);flex-direction:column}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;l.registerIcon(r);let g=class extends s{constructor(){super(...arguments),this.headerSlot=new h(this,"header"),this.featureSlot=new h(this,"feature"),this.footerSlot=new h(this,"footer"),this.scrollBar=new f(this),this.focusTrap=new b(this,(()=>this.modal)),this.localize=new v(this),this.events=new d(this),this.lightDismiss=new c(this,{isOpen:()=>this.open,isDismissible:t=>t!==this.modal,onDismiss:()=>this.handleDismiss()}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1,this.enableScroll=t=>{this.open||t.target!==this.backdrop||this.scrollBar.restore()},this.trackLastButton=t=>{const e=t.target;"button"===e.localName&&(this.lastButton=e)},this.polyfillSubmitter=t=>{t.submitter=this.lastButton},this.handleSubmit=t=>{this.lastButton=void 0;const e=t.target,o=t.submitter,s="dialog"===e.method,i="dialog"===e.getAttribute("method");i&&!s&&t.preventDefault(),(i||s)&&this.close(null==o?void 0:o.value)}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),window.SubmitEvent||(this.events.listen(this,"click",this.trackLastButton,!0),this.events.listen(this,"submit",this.polyfillSubmitter,!0))}showModal(){this.open=!0}close(t){this.open=!1,null!=t&&(this.returnValue=t),this.dispatchEvent(new m("close"))}focus(t){this.modal.focus({preventScroll:!0,...t})}render(){return i`<div class="n-modal-backdrop" @transitionend="${this.enableScroll}"><div class="n-modal" tabindex="0" @submit="${this.handleSubmit}"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${this.handleDismiss}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="n-body-padded"></slot></div><div class="n-modal-footer n-padded" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div></div>`}handleOpenUpdated(){var t;if(this.open){this.scrollBar.hide(),this.trigger=document.activeElement;(this.querySelector("[autofocus]")||this).focus(),this.focusTrap.trap()}else this.backdrop.scrollTop=0,this.focusTrap.release(),null===(t=this.trigger)||void 0===t||t.focus(),this.trigger=void 0}handleDismiss(){this.dispatchEvent(new m("cancel",{cancelable:!0}))&&this.close()}};g.styles=[u,y],t([a(".n-modal",!0)],g.prototype,"modal",void 0),t([a(".n-modal-backdrop",!0)],g.prototype,"backdrop",void 0),t([n({type:Boolean,reflect:!0})],g.prototype,"open",void 0),t([n({reflect:!0})],g.prototype,"size",void 0),t([n({attribute:!1})],g.prototype,"returnValue",void 0),t([n({type:Boolean,reflect:!0})],g.prototype,"scrollable",void 0),t([p("open","updated")],g.prototype,"handleOpenUpdated",null),g=t([e("nord-modal")],g);var w=g;export{w as default};
+import{_ as o,e}from"./query-assigned-elements-e6cbac30.js";import{i as t,s,y as i}from"./lit-element-79bc2e0e.js";import{e as n}from"./property-03f59dce.js";import{i as a}from"./query-2d22378e.js";import{c as r}from"./interface-close-small-44ababc3.js";import l from"./Icon.js";import{E as d}from"./EventController-d99ebeef.js";import{L as c}from"./LightDismissController-a2645ae6.js";import{S as p}from"./ScrollbarController-680392c9.js";import{S as m}from"./SlotController-ea6eff46.js";import{o as h}from"./observe-a9c6dfb6.js";import{N as u}from"./events-731d0007.js";import{s as v}from"./Component-49a41387.js";import{LocalizeController as b}from"./LocalizeController.js";import"./state-70f38ceb.js";import"./if-defined-f43b1487.js";import"./unsafe-html-be8023cd.js";import"./directive-de55b00a.js";import"./cond-0a8d4554.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";class f{constructor(o,e=(()=>o)){this.boundary=e,this.lastScrollY=0,this.handleFocusOut=o=>{this.lastFocused=o.target,o.relatedTarget===this.boundary()&&this.recaptureFocus()},this.handleFocusIn=o=>{!o.composedPath().includes(this.boundary())&&this.recaptureFocus()},this.restoreScroll=()=>{window.scrollTo(window.scrollX,this.lastScrollY)},o.addController(this)}hostDisconnected(){this.release()}trap(){this.lastScrollY=window.scrollY,this.boundary().addEventListener("focusout",this.handleFocusOut),window.addEventListener("scroll",this.restoreScroll),window.addEventListener("focusin",this.handleFocusIn)}release(){this.lastScrollY=0,this.lastFocused=void 0,this.boundary().removeEventListener("focusout",this.handleFocusOut),window.removeEventListener("scroll",this.restoreScroll),window.removeEventListener("focusin",this.handleFocusIn)}recaptureFocus(){var o;null===(o=this.lastFocused)||void 0===o||o.focus({preventScroll:!0})}}const g=t`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-overlay)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding:var(--n-space-l) var(--_n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-nav-surface);border-block-end:1px solid var(--n-color-border)}.n-modal-footer{border-block-start:1px solid var(--n-color-border)}.n-padded{padding:var(--_n-modal-padding-block) var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:"";position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 1320px)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:calc(var(--n-space-s)/ 2);flex-direction:column}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;l.registerIcon(r);let y=class extends s{constructor(){super(...arguments),this.headerSlot=new m(this,"header"),this.featureSlot=new m(this,"feature"),this.footerSlot=new m(this,"footer"),this.scrollBar=new p(this),this.focusTrap=new f(this,(()=>this.modal)),this.localize=new b(this),this.events=new d(this),this.lightDismiss=new c(this,{isOpen:()=>this.open,isDismissible:o=>o!==this.modal,onDismiss:()=>this.handleDismiss()}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1,this.enableScroll=o=>{this.open||o.target!==this.backdrop||this.scrollBar.restore()},this.trackLastButton=o=>{const e=o.target;"button"===e.localName&&(this.lastButton=e)},this.polyfillSubmitter=o=>{o.submitter=this.lastButton},this.handleSubmit=o=>{this.lastButton=void 0;const e=o.target,t=o.submitter,s="dialog"===e.method,i="dialog"===e.getAttribute("method");i&&!s&&o.preventDefault(),(i||s)&&this.close(null==t?void 0:t.value)}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),window.SubmitEvent||(this.events.listen(this,"click",this.trackLastButton,!0),this.events.listen(this,"submit",this.polyfillSubmitter,!0))}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new u("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return i`<div class="n-modal-backdrop" @transitionend="${this.enableScroll}"><div class="n-modal" tabindex="0" @submit="${this.handleSubmit}"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${this.handleDismiss}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="n-body-padded"></slot></div><div class="n-modal-footer n-padded" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div></div>`}handleOpenUpdated(){var o;if(this.open){this.scrollBar.hide(),this.trigger=document.activeElement;(this.querySelector("[autofocus]")||this).focus(),this.focusTrap.trap()}else this.backdrop.scrollTop=0,this.focusTrap.release(),null===(o=this.trigger)||void 0===o||o.focus(),this.trigger=void 0}handleDismiss(){this.dispatchEvent(new u("cancel",{cancelable:!0}))&&this.close()}};y.styles=[v,g],o([a(".n-modal",!0)],y.prototype,"modal",void 0),o([a(".n-modal-backdrop",!0)],y.prototype,"backdrop",void 0),o([n({type:Boolean,reflect:!0})],y.prototype,"open",void 0),o([n({reflect:!0})],y.prototype,"size",void 0),o([n({attribute:!1})],y.prototype,"returnValue",void 0),o([n({type:Boolean,reflect:!0})],y.prototype,"scrollable",void 0),o([h("open","updated")],y.prototype,"handleOpenUpdated",null),y=o([e("nord-modal")],y);var x=y;export{x as default};
 //# sourceMappingURL=Modal.js.map

package/lib/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../src/common/controllers/FocusTrapController.ts","../src/common/controllers/ScrollbarController.ts","../src/modal/Modal.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nexport class FocusTrapController implements ReactiveController {\n  private lastScrollY = 0\n  private lastFocused?: HTMLElement\n\n  constructor(host: ReactiveControllerHost & HTMLElement, private boundary: () => HTMLElement = () => host) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.release()\n  }\n\n  trap() {\n    this.lastScrollY = window.scrollY\n    this.boundary().addEventListener(\"focusout\", this.handleFocusOut)\n    window.addEventListener(\"scroll\", this.restoreScroll)\n    window.addEventListener(\"focusin\", this.handleFocusIn)\n  }\n\n  release() {\n    this.lastScrollY = 0\n    this.lastFocused = undefined\n\n    this.boundary().removeEventListener(\"focusout\", this.handleFocusOut)\n    window.removeEventListener(\"scroll\", this.restoreScroll)\n    window.removeEventListener(\"focusin\", this.handleFocusIn)\n  }\n\n  private handleFocusOut = (e: FocusEvent) => {\n    this.lastFocused = e.target as HTMLElement\n\n    if (e.relatedTarget === this.boundary()) {\n      this.recaptureFocus()\n    }\n  }\n\n  private handleFocusIn = (e: FocusEvent) => {\n    const isOutside = !e.composedPath().includes(this.boundary())\n\n    if (isOutside) {\n      this.recaptureFocus()\n    }\n  }\n\n  private recaptureFocus() {\n    this.lastFocused?.focus({ preventScroll: true })\n  }\n\n  private restoreScroll = () => {\n    window.scrollTo(window.scrollX, this.lastScrollY)\n  }\n}\n","import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nexport class ScrollbarController implements ReactiveController {\n  private resets = new Set<() => void>()\n\n  constructor(host: ReactiveControllerHost)\n  constructor(host: ReactiveControllerHost, scroller: HTMLElement)\n\n  constructor(host: ReactiveControllerHost, private scroller = document.body) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.restore()\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  get width() {\n    const documentWidth = document.documentElement.clientWidth\n    return Math.abs(window.innerWidth - documentWidth)\n  }\n\n  hide() {\n    // in case hide() is called twice in succession\n    this.restore()\n\n    const { width } = this\n    const computedStyle = getComputedStyle(this.scroller)\n    const paddingRight = parseInt(computedStyle.paddingRight, 10) || 0\n\n    // hiding the scrollbar slightly increases the width of the inner viewport.\n    // this is fine for the modal, since it is accounted for there. but it causes layout shift for any other fixed position components/elements.\n    // so we define a custom property here for the gutter value, since it can be inherited/used by any other component that has a fixed position e.g. toast-group.\n    this.setStyle(\"--n-scrollbar-gutter\", `${width + paddingRight}px`)\n    this.setStyle(\"overflow\", \"hidden\")\n    this.setStyle(\"padding-right\", `var(--n-scrollbar-gutter)`)\n  }\n\n  restore() {\n    this.resets.forEach(reset => reset())\n    this.resets.clear()\n  }\n\n  private setStyle(property: string, value: string) {\n    const { style } = this.scroller\n    const previous = this.scroller.style.getPropertyValue(property)\n\n    style.setProperty(property, value)\n    this.resets.add(() => style.setProperty(property, previous))\n  }\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { FocusTrapController } from \"../common/controllers/FocusTrapController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { ScrollbarController } from \"../common/controllers/ScrollbarController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport style from \"./Modal.css\"\n\nIcon.registerIcon(closeIcon)\n\nconst isButton = (element: Element): element is HTMLButtonElement => element.localName === \"button\"\n\n/**\n * Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n *\n * @status new\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\n *\n * @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n */\n@customElement(\"nord-modal\")\nexport default class Modal extends LitElement {\n  static styles = [componentStyle, style]\n\n  @query(\".n-modal\", true) private modal!: HTMLDivElement\n  @query(\".n-modal-backdrop\", true) private backdrop!: HTMLDivElement\n\n  private trigger?: HTMLElement\n  private lastButton?: HTMLButtonElement\n\n  private headerSlot = new SlotController(this, \"header\")\n  private featureSlot = new SlotController(this, \"feature\")\n  private footerSlot = new SlotController(this, \"footer\")\n\n  private scrollBar = new ScrollbarController(this)\n  private focusTrap = new FocusTrapController(this, () => this.modal)\n  private localize = new LocalizeController<\"nord-modal\">(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    isDismissible: node => node !== this.modal,\n    onDismiss: () => this.handleDismiss(),\n  })\n\n  /**\n   * Controls whether the modal is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /**\n   * Controls the max-width of the modal when open.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n  /**\n   * The reason why the modal was closed. This typically indicates\n   * which button the user pressed to close the modal, though any value\n   * can be supplied if the modal is programmatically closed.\n   */\n  @property({ attribute: false }) returnValue: string = \"\"\n\n  /**\n   * By default if a modal is too big for the browser window,\n   * the entire modal will scroll. This setting changes that behavior\n   * so that the body of the modal scrolls instead, with the modal\n   * itself remaining fixed.\n   */\n  @property({ type: Boolean, reflect: true }) scrollable = false\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.setAttribute(\"role\", \"dialog\")\n    this.setAttribute(\"aria-modal\", \"true\")\n\n    // if submit event is not supported, let's do a basic polyfill\n    if (!window.SubmitEvent) {\n      this.events.listen(this, \"click\", this.trackLastButton, true)\n      this.events.listen(this, \"submit\", this.polyfillSubmitter, true)\n    }\n  }\n\n  /**\n   * Show the modal, automatically moving focus to the modal or a child\n   * element with an `autofocus` attribute.\n   */\n  showModal() {\n    this.open = true\n  }\n\n  /**\n   * Programmatically close the modal.\n   * @param returnValue An optional value to indicate why the modal was closed.\n   */\n  close(returnValue?: string) {\n    this.open = false\n\n    if (returnValue != null) {\n      this.returnValue = returnValue\n    }\n\n    this.dispatchEvent(new NordEvent(\"close\"))\n  }\n\n  /**\n   * Programmatically focus the modal.\n   * @param options An object which controls aspects of the focusing process.\n   */\n  focus(options?: FocusOptions) {\n    this.modal.focus({ preventScroll: true, ...options })\n  }\n\n  render() {\n    return html`\n      <div class=\"n-modal-backdrop\" @transitionend=${this.enableScroll}>\n        <div class=\"n-modal\" tabindex=\"0\" @submit=${this.handleSubmit}>\n          <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n            <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n            <button class=\"n-close\" @click=${this.handleDismiss}>\n              <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term(\"closeLabel\")}></nord-icon>\n            </button>\n          </div>\n\n          <div class=\"n-modal-body\">\n            <slot\n              name=${this.featureSlot.slotName}\n              class=${this.headerSlot.isEmpty ? \"n-rounded-top\" : \"\"}\n              ?hidden=${this.featureSlot.isEmpty}\n            ></slot>\n            <slot class=\"n-body-padded\"></slot>\n          </div>\n\n          <div class=\"n-modal-footer n-padded\" ?hidden=${this.footerSlot.isEmpty}>\n            <slot name=${this.footerSlot.slotName}></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"open\", \"updated\")\n  protected handleOpenUpdated() {\n    // the order which things happen here is important!\n\n    if (this.open) {\n      // hide scrollbar and prevent scroll on body\n      this.scrollBar.hide()\n\n      // store the element that was focused prior to modal opening\n      this.trigger = document.activeElement as HTMLElement\n\n      // handle initial (auto)focus\n      const focusTarget = this.querySelector<HTMLElement>(\"[autofocus]\") || this\n      focusTarget.focus()\n\n      // finally, we should enable the focus trap\n      this.focusTrap.trap()\n    } else {\n      // ensure modal is scrolled to top ready for re-open\n      this.backdrop.scrollTop = 0\n\n      // we need to release the focus trap...\n      this.focusTrap.release()\n\n      // ...before we can return focus to the trigger button\n      this.trigger?.focus()\n      this.trigger = undefined\n    }\n  }\n\n  private enableScroll = (e: TransitionEvent) => {\n    // scrollbar should only be restored when the backdrop has transitioned\n    // that way we avoid awkward double scrollbars.\n    if (!this.open && e.target === this.backdrop) {\n      this.scrollBar.restore()\n    }\n  }\n\n  private handleDismiss() {\n    // allow cancelling of close\n    const allowed = this.dispatchEvent(new NordEvent(\"cancel\", { cancelable: true }))\n\n    if (allowed) {\n      this.close()\n    }\n  }\n\n  /**\n   * capture the last button clicked, so that we can polyfill `submitter` property in submit event\n   */\n  private trackLastButton = (e: Event) => {\n    const target = e.target as HTMLElement\n\n    if (isButton(target)) {\n      this.lastButton = target\n    }\n  }\n\n  private polyfillSubmitter = (e: Event) => {\n    // @ts-expect-error submitter is readonly, but this is only called if SubmitEvent is not supported\n    e.submitter = this.lastButton\n  }\n\n  private handleSubmit = (e: SubmitEvent) => {\n    this.lastButton = undefined\n\n    const target = e.target as HTMLFormElement\n    const submitter = e.submitter as HTMLButtonElement\n\n    const isDialogProperty = target.method === \"dialog\"\n    const isDialogAttr = target.getAttribute(\"method\") === \"dialog\"\n\n    // if they mismatch, it means \"dialog\" method is not supported,\n    // so we should polyfill the fact it does not do a full submit\n    if (isDialogAttr && !isDialogProperty) {\n      e.preventDefault()\n    }\n\n    if (isDialogAttr || isDialogProperty) {\n      this.close(submitter?.value)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-modal\": Modal\n  }\n}\n"],"names":["FocusTrapController","constructor","host","boundary","this","lastScrollY","handleFocusOut","e","lastFocused","target","relatedTarget","recaptureFocus","handleFocusIn","composedPath","includes","restoreScroll","window","scrollTo","scrollX","addController","hostDisconnected","release","trap","scrollY","addEventListener","undefined","removeEventListener","_a","focus","preventScroll","ScrollbarController","scroller","document","body","resets","Set","restore","width","documentWidth","documentElement","clientWidth","Math","abs","innerWidth","hide","computedStyle","getComputedStyle","paddingRight","parseInt","setStyle","forEach","reset","clear","property","value","style","previous","getPropertyValue","setProperty","add","Icon","registerIcon","closeIcon","Modal","LitElement","headerSlot","SlotController","featureSlot","footerSlot","scrollBar","focusTrap","modal","localize","LocalizeController","events","EventController","lightDismiss","LightDismissController","isOpen","open","isDismissible","node","onDismiss","handleDismiss","size","returnValue","scrollable","enableScroll","backdrop","trackLastButton","localName","lastButton","polyfillSubmitter","submitter","handleSubmit","isDialogProperty","method","isDialogAttr","getAttribute","preventDefault","close","connectedCallback","super","setAttribute","SubmitEvent","listen","showModal","dispatchEvent","NordEvent","options","render","html","isEmpty","slotName","term","handleOpenUpdated","trigger","activeElement","querySelector","scrollTop","cancelable","styles","componentStyle","__decorate","query","prototype","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../src/common/controllers/FocusTrapController.ts","../src/modal/Modal.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nexport class FocusTrapController implements ReactiveController {\n  private lastScrollY = 0\n  private lastFocused?: HTMLElement\n\n  constructor(host: ReactiveControllerHost & HTMLElement, private boundary: () => HTMLElement = () => host) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.release()\n  }\n\n  trap() {\n    this.lastScrollY = window.scrollY\n    this.boundary().addEventListener(\"focusout\", this.handleFocusOut)\n    window.addEventListener(\"scroll\", this.restoreScroll)\n    window.addEventListener(\"focusin\", this.handleFocusIn)\n  }\n\n  release() {\n    this.lastScrollY = 0\n    this.lastFocused = undefined\n\n    this.boundary().removeEventListener(\"focusout\", this.handleFocusOut)\n    window.removeEventListener(\"scroll\", this.restoreScroll)\n    window.removeEventListener(\"focusin\", this.handleFocusIn)\n  }\n\n  private handleFocusOut = (e: FocusEvent) => {\n    this.lastFocused = e.target as HTMLElement\n\n    if (e.relatedTarget === this.boundary()) {\n      this.recaptureFocus()\n    }\n  }\n\n  private handleFocusIn = (e: FocusEvent) => {\n    const isOutside = !e.composedPath().includes(this.boundary())\n\n    if (isOutside) {\n      this.recaptureFocus()\n    }\n  }\n\n  private recaptureFocus() {\n    this.lastFocused?.focus({ preventScroll: true })\n  }\n\n  private restoreScroll = () => {\n    window.scrollTo(window.scrollX, this.lastScrollY)\n  }\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { FocusTrapController } from \"../common/controllers/FocusTrapController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { ScrollbarController } from \"../common/controllers/ScrollbarController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport style from \"./Modal.css\"\n\nIcon.registerIcon(closeIcon)\n\nconst isButton = (element: Element): element is HTMLButtonElement => element.localName === \"button\"\n\n/**\n * Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n *\n * @status new\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\n *\n * @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n */\n@customElement(\"nord-modal\")\nexport default class Modal extends LitElement {\n  static styles = [componentStyle, style]\n\n  @query(\".n-modal\", true) private modal!: HTMLDivElement\n  @query(\".n-modal-backdrop\", true) private backdrop!: HTMLDivElement\n\n  private trigger?: HTMLElement\n  private lastButton?: HTMLButtonElement\n\n  private headerSlot = new SlotController(this, \"header\")\n  private featureSlot = new SlotController(this, \"feature\")\n  private footerSlot = new SlotController(this, \"footer\")\n\n  private scrollBar = new ScrollbarController(this)\n  private focusTrap = new FocusTrapController(this, () => this.modal)\n  private localize = new LocalizeController<\"nord-modal\">(this)\n  private events = new EventController(this)\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    isDismissible: node => node !== this.modal,\n    onDismiss: () => this.handleDismiss(),\n  })\n\n  /**\n   * Controls whether the modal is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /**\n   * Controls the max-width of the modal when open.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n  /**\n   * The reason why the modal was closed. This typically indicates\n   * which button the user pressed to close the modal, though any value\n   * can be supplied if the modal is programmatically closed.\n   */\n  @property({ attribute: false }) returnValue: string = \"\"\n\n  /**\n   * By default if a modal is too big for the browser window,\n   * the entire modal will scroll. This setting changes that behavior\n   * so that the body of the modal scrolls instead, with the modal\n   * itself remaining fixed.\n   */\n  @property({ type: Boolean, reflect: true }) scrollable = false\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.setAttribute(\"role\", \"dialog\")\n    this.setAttribute(\"aria-modal\", \"true\")\n\n    // if submit event is not supported, let's do a basic polyfill\n    if (!window.SubmitEvent) {\n      this.events.listen(this, \"click\", this.trackLastButton, true)\n      this.events.listen(this, \"submit\", this.polyfillSubmitter, true)\n    }\n  }\n\n  /**\n   * Show the modal, automatically moving focus to the modal or a child\n   * element with an `autofocus` attribute.\n   */\n  showModal() {\n    this.open = true\n  }\n\n  /**\n   * Programmatically close the modal.\n   * @param returnValue An optional value to indicate why the modal was closed.\n   */\n  close(returnValue?: string) {\n    this.open = false\n\n    if (returnValue != null) {\n      this.returnValue = returnValue\n    }\n\n    this.dispatchEvent(new NordEvent(\"close\"))\n  }\n\n  /**\n   * Programmatically focus the modal.\n   * @param options An object which controls aspects of the focusing process.\n   */\n  focus(options?: FocusOptions) {\n    this.modal.focus({ preventScroll: true, ...options })\n  }\n\n  render() {\n    return html`\n      <div class=\"n-modal-backdrop\" @transitionend=${this.enableScroll}>\n        <div class=\"n-modal\" tabindex=\"0\" @submit=${this.handleSubmit}>\n          <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n            <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n            <button class=\"n-close\" @click=${this.handleDismiss}>\n              <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term(\"closeLabel\")}></nord-icon>\n            </button>\n          </div>\n\n          <div class=\"n-modal-body\">\n            <slot\n              name=${this.featureSlot.slotName}\n              class=${this.headerSlot.isEmpty ? \"n-rounded-top\" : \"\"}\n              ?hidden=${this.featureSlot.isEmpty}\n            ></slot>\n            <slot class=\"n-body-padded\"></slot>\n          </div>\n\n          <div class=\"n-modal-footer n-padded\" ?hidden=${this.footerSlot.isEmpty}>\n            <slot name=${this.footerSlot.slotName}></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"open\", \"updated\")\n  protected handleOpenUpdated() {\n    // the order which things happen here is important!\n\n    if (this.open) {\n      // hide scrollbar and prevent scroll on body\n      this.scrollBar.hide()\n\n      // store the element that was focused prior to modal opening\n      this.trigger = document.activeElement as HTMLElement\n\n      // handle initial (auto)focus\n      const focusTarget = this.querySelector<HTMLElement>(\"[autofocus]\") || this\n      focusTarget.focus()\n\n      // finally, we should enable the focus trap\n      this.focusTrap.trap()\n    } else {\n      // ensure modal is scrolled to top ready for re-open\n      this.backdrop.scrollTop = 0\n\n      // we need to release the focus trap...\n      this.focusTrap.release()\n\n      // ...before we can return focus to the trigger button\n      this.trigger?.focus()\n      this.trigger = undefined\n    }\n  }\n\n  private enableScroll = (e: TransitionEvent) => {\n    // scrollbar should only be restored when the backdrop has transitioned\n    // that way we avoid awkward double scrollbars.\n    if (!this.open && e.target === this.backdrop) {\n      this.scrollBar.restore()\n    }\n  }\n\n  private handleDismiss() {\n    // allow cancelling of close\n    const allowed = this.dispatchEvent(new NordEvent(\"cancel\", { cancelable: true }))\n\n    if (allowed) {\n      this.close()\n    }\n  }\n\n  /**\n   * capture the last button clicked, so that we can polyfill `submitter` property in submit event\n   */\n  private trackLastButton = (e: Event) => {\n    const target = e.target as HTMLElement\n\n    if (isButton(target)) {\n      this.lastButton = target\n    }\n  }\n\n  private polyfillSubmitter = (e: Event) => {\n    // @ts-expect-error submitter is readonly, but this is only called if SubmitEvent is not supported\n    e.submitter = this.lastButton\n  }\n\n  private handleSubmit = (e: SubmitEvent) => {\n    this.lastButton = undefined\n\n    const target = e.target as HTMLFormElement\n    const submitter = e.submitter as HTMLButtonElement\n\n    const isDialogProperty = target.method === \"dialog\"\n    const isDialogAttr = target.getAttribute(\"method\") === \"dialog\"\n\n    // if they mismatch, it means \"dialog\" method is not supported,\n    // so we should polyfill the fact it does not do a full submit\n    if (isDialogAttr && !isDialogProperty) {\n      e.preventDefault()\n    }\n\n    if (isDialogAttr || isDialogProperty) {\n      this.close(submitter?.value)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-modal\": Modal\n  }\n}\n"],"names":["FocusTrapController","constructor","host","boundary","this","lastScrollY","handleFocusOut","e","lastFocused","target","relatedTarget","recaptureFocus","handleFocusIn","composedPath","includes","restoreScroll","window","scrollTo","scrollX","addController","hostDisconnected","release","trap","scrollY","addEventListener","undefined","removeEventListener","_a","focus","preventScroll","Icon","registerIcon","closeIcon","Modal","LitElement","headerSlot","SlotController","featureSlot","footerSlot","scrollBar","ScrollbarController","focusTrap","modal","localize","LocalizeController","events","EventController","lightDismiss","LightDismissController","isOpen","open","isDismissible","node","onDismiss","handleDismiss","size","returnValue","scrollable","enableScroll","backdrop","restore","trackLastButton","localName","lastButton","polyfillSubmitter","submitter","handleSubmit","isDialogProperty","method","isDialogAttr","getAttribute","preventDefault","close","value","connectedCallback","super","setAttribute","SubmitEvent","listen","showModal","dispatchEvent","NordEvent","options","render","html","isEmpty","slotName","term","handleOpenUpdated","hide","trigger","document","activeElement","querySelector","scrollTop","cancelable","styles","componentStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"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"}

package/lib/Popout.js

@@ -1,2 +1,2 @@
-import{_ as t,e as o}from"./query-assigned-elements-e6cbac30.js";import{i as e,s as i,y as s}from"./lit-element-79bc2e0e.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as p,o as l,f as h,s as d,h as m,a as c}from"./positioning-3bbd3548.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{N as f}from"./events-731d0007.js";import{s as g}from"./Component-49a41387.js";import{D as v}from"./DirectionController-8b298382.js";import{o as b}from"./observe-a9c6dfb6.js";import{E as y}from"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";const w=e`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);left:var(--_n-popout-position-x);top:var(--_n-popout-position-y);color:var(--n-color-text)}.n-popout{visibility:hidden;opacity:0;pointer-events:none;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transform:translateY(-10px) scale(.97);transform-origin:top left;will-change:transform,opacity,visibility;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-popout);border-radius:var(--n-border-radius-s)}@media (max-width:35.9375em){:host{inline-size:100%;inset:0;inset-block-start:auto}.n-popout{transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);transform:translateY(100%);transform-origin:bottom center;border-radius:0}}.n-popout.top-end,.n-popout.top-start{transform:translateY(10px) scale(.97)}.n-popout.left-start{transform:translateX(10px) scale(.97)}.n-popout.left-end,.n-popout.top-end{transform-origin:bottom right}.n-popout.bottom-end,.n-popout.left-start{transform-origin:top right}.n-popout.left-end{transform:translateX(10px) scale(.97);transform-origin:bottom right}.n-popout.right-end,.n-popout.right-start{transform:translateX(-10px) scale(.97);transform-origin:bottom left}.n-popout.right-start{transform-origin:top left}.n-popout.top-start.is-rtl{transform-origin:top right}.n-popout.top-end.is-rtl{transform-origin:top left}.n-popout.bottom-start.is-rtl{transform-origin:bottom right}.n-popout.bottom-end.is-rtl{transform-origin:bottom left}.n-popout[aria-hidden=false]{transition-property:transform,opacity;visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0) translateX(0) scale(1)}`,x=matchMedia("(max-width: 35.9375em)");let C=class extends i{constructor(){super(...arguments),this.dismiss=new u(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this&&t!==this.targetElement}),this.events=new y(this),this.direction=new v(this),this.open=!1,this.smallViewport=x.matches,this.align="start",this.position="block-end",this.id="",this.updatePosition=async()=>{var t;const{x:o,y:e,placement:i,middlewareData:s}=await a(this.targetElement,this,{strategy:"fixed",placement:p(this.position,this.align,this.direction.dir),middleware:[l(8),h(),d({padding:8}),m()]});this.computedPosition=i,this.style.setProperty("--_n-popout-position-x",`${o}px`),this.style.setProperty("--_n-popout-position-y",`${e}px`),(null===(t=s.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):this.smallViewport?this.show():this.updatePosition().then((()=>this.show()))},this.handleMediaQueryChange=()=>{this.smallViewport=x.matches,this.smallViewport||(this.cleanupAutoUpdate=c(this.targetElement,this,this.updatePosition))}}show(){this.open||(this.open=!0,this.smallViewport||(this.cleanupAutoUpdate=c(this.targetElement,this,this.updatePosition)),this.updateComplete.then((()=>{this.dispatchEvent(new f("open"))})))}hide(t=!0){var o;this.open&&(this.open=!1,null===(o=this.cleanupAutoUpdate)||void 0===o||o.call(this),this.dispatchEvent(new f("close")),t&&this.targetElement.focus({preventScroll:!0}))}firstUpdated(){this.smallViewport||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.targetElement=this.getToggle(),this.events.listen(this.targetElement,"click",this.toggleOpen),this.events.listen(x,"change",this.handleMediaQueryChange)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.targetElement.removeAttribute("aria-expanded")}render(){return s`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}"><slot></slot></div>`}handleIdChange(){this.id||console.warn("NORD: popout requires an id attribute and value")}handleOpenChange(){this.targetElement.setAttribute("aria-expanded",`${this.open}`)}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};C.styles=[g,w],t([r()],C.prototype,"open",void 0),t([r()],C.prototype,"computedPosition",void 0),t([r()],C.prototype,"smallViewport",void 0),t([n({reflect:!0})],C.prototype,"align",void 0),t([n({reflect:!0})],C.prototype,"position",void 0),t([n({reflect:!0})],C.prototype,"id",void 0),t([b("id")],C.prototype,"handleIdChange",null),t([b("open")],C.prototype,"handleOpenChange",null),C=t([o("nord-popout")],C);var E=C;export{E as default};
+import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i as o,s as i,y as s}from"./lit-element-79bc2e0e.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{i as a}from"./query-2d22378e.js";import{c as l,l as p,o as h,f as d,s as c,h as m,a as u}from"./positioning-3bbd3548.js";import{L as f}from"./LightDismissController-a2645ae6.js";import{S as v}from"./ScrollbarController-680392c9.js";import{N as g}from"./events-731d0007.js";import{s as b}from"./Component-49a41387.js";import{D as y}from"./DirectionController-8b298382.js";import{o as w}from"./observe-a9c6dfb6.js";import{E as x}from"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";const C=o`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);left:var(--_n-popout-position-x);top:var(--_n-popout-position-y);color:var(--n-color-text);opacity:0;transition:opacity var(--n-transition-slowly)}.n-popout{pointer-events:none;transform:translateY(-10px) scale(.97);visibility:hidden;transition:transform var(--n-transition-slowly),visibility var(--n-transition-slowly);transform-origin:top left;will-change:transform,opacity,visibility;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-popout);border-radius:var(--n-border-radius-s)}:host([open]){opacity:1}:host([open]) .n-popout{transition-property:transform;visibility:visible;pointer-events:auto;transform:translateY(0) translateX(0) scale(1)}@media (max-width:35.9375em){:host{position:fixed;inset:0;overflow-y:auto;opacity:1;background:0 0;transition:background var(--n-transition-mobile)}:host([open]){pointer-events:auto;background:var(--n-color-overlay)}:host .n-popout{position:fixed;inset:0;inset-block-start:auto;transform:translateY(100%);transition:transform var(--n-transition-mobile),visibility var(--n-transition-mobile);transform-origin:bottom center;border-radius:0}}.top-end,.top-start{transform:translateY(10px) scale(.97)}.left-end,.left-start{transform:translateX(10px) scale(.97)}.right-end,.right-start{transform:translateX(-10px) scale(.97)}.bottom-start.is-rtl,.left-end,.top-end{transform-origin:bottom right}.bottom-end,.left-start,.top-start.is-rtl{transform-origin:top right}.bottom-end.is-rtl,.right-end,.right-start{transform-origin:bottom left}.right-start,.top-end.is-rtl{transform-origin:top left}`,j=matchMedia("(max-width: 35.9375em)");let E=class extends i{constructor(){super(...arguments),this.scrollBar=new v(this),this.dismiss=new f(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this.popout&&t!==this.targetElement}),this.events=new x(this),this.direction=new y(this),this.smallViewport=j.matches,this.open=!1,this.align="start",this.position="block-end",this.id="",this.enableScroll=()=>{this.open||this.scrollBar.restore()},this.updatePosition=async()=>{var t;const{x:e,y:o,placement:i,middlewareData:s}=await l(this.targetElement,this,{strategy:"fixed",placement:p(this.position,this.align,this.direction.dir),middleware:[h(8),d(),c({padding:8}),m()]});this.computedPosition=i,this.style.setProperty("--_n-popout-position-x",`${e}px`),this.style.setProperty("--_n-popout-position-y",`${o}px`),(null===(t=s.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):this.smallViewport?this.show():this.updatePosition().then((()=>this.show()))},this.handleMediaQueryChange=()=>{var t;this.smallViewport=j.matches,null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),!this.smallViewport&&this.open?(this.cleanupAutoUpdate=u(this.targetElement,this,this.updatePosition),this.scrollBar.restore()):this.open&&this.scrollBar.hide()}}show(){this.open||(this.open=!0,this.updateComplete.then((()=>{this.dispatchEvent(new g("open"))})))}hide(t=!0){var e;this.open&&(this.open=!1,null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.dispatchEvent(new g("close")),t&&this.targetElement.focus({preventScroll:!0}))}firstUpdated(){this.smallViewport||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.targetElement=this.getToggle(),this.events.listen(this.targetElement,"click",this.toggleOpen),this.events.listen(j,"change",this.handleMediaQueryChange)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.targetElement.removeAttribute("aria-expanded")}render(){return s`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}" @transitionend="${this.enableScroll}"><slot></slot></div>`}handleIdChange(){this.id||console.warn("NORD: popout requires an id attribute and value")}handleOpenChange(){var t;this.targetElement.setAttribute("aria-expanded",`${this.open}`),this.open?this.smallViewport?this.scrollBar.hide():this.cleanupAutoUpdate=u(this.targetElement,this,this.updatePosition):null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this)}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};E.styles=[b,C],t([a(".n-popout",!0)],E.prototype,"popout",void 0),t([r()],E.prototype,"computedPosition",void 0),t([r()],E.prototype,"smallViewport",void 0),t([n({type:Boolean,reflect:!0})],E.prototype,"open",void 0),t([n({reflect:!0})],E.prototype,"align",void 0),t([n({reflect:!0})],E.prototype,"position",void 0),t([n({reflect:!0})],E.prototype,"id",void 0),t([w("id")],E.prototype,"handleIdChange",null),t([w("open")],E.prototype,"handleOpenChange",null),E=t([e("nord-popout")],E);var k=E;export{k as default};
 //# sourceMappingURL=Popout.js.map

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\"\nimport { EventController } from \"../common/controllers/EventController.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 events = new EventController(this)\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.events.listen(this.targetElement, \"click\", this.toggleOpen)\n    this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.cleanupAutoUpdate?.()\n    this.targetElement.removeAttribute(\"aria-expanded\")\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","events","EventController","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","listen","disconnectedCallback","removeAttribute","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, query, 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 { ScrollbarController } from \"../common/controllers/ScrollbarController.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\"\nimport { EventController } from \"../common/controllers/EventController.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  @query(\".n-popout\", true) private popout!: HTMLDivElement\n\n  private scrollBar = new ScrollbarController(this)\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.popout && node !== this.targetElement,\n  })\n\n  private events = new EventController(this)\n  private direction = new DirectionController(this)\n\n  @state() private computedPosition?: Placement\n\n  @state() private smallViewport = mediaQuery.matches\n\n  /**\n   * Controls whether the popout is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\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    // 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.events.listen(this.targetElement, \"click\", this.toggleOpen)\n    this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.cleanupAutoUpdate?.()\n    this.targetElement.removeAttribute(\"aria-expanded\")\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        @transitionend=${this.enableScroll}\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    if (this.open) {\n      if (this.smallViewport) {\n        // hide scrollbar and prevent scroll on body\n        this.scrollBar.hide()\n      } else {\n        this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n      }\n    } else {\n      this.cleanupAutoUpdate?.()\n    }\n  }\n\n  private enableScroll = () => {\n    // scrollbar should only be restored when the backdrop has transitioned\n    // that way we avoid awkward double scrollbars.\n    if (!this.open) {\n      this.scrollBar.restore()\n    }\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\n    this.cleanupAutoUpdate?.()\n\n    if (!this.smallViewport && this.open) {\n      this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n      this.scrollBar.restore()\n    } else if (this.open) {\n      this.scrollBar.hide()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-popout\": Popout\n  }\n}\n"],"names":["mediaQuery","matchMedia","Popout","LitElement","constructor","this","scrollBar","ScrollbarController","dismiss","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","popout","targetElement","events","EventController","direction","DirectionController","smallViewport","matches","align","position","id","enableScroll","restore","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","call","autoUpdate","updateComplete","dispatchEvent","NordEvent","moveFocusToButton","focus","preventScroll","firstUpdated","connectedCallback","super","getToggle","listen","disconnectedCallback","removeAttribute","render","html","handleIdChange","console","warn","handleOpenChange","setAttribute","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","styles","componentStyle","__decorate","query","prototype","state","property","Boolean","reflect","observe","customElement"],"mappings":"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"}

package/lib/ScrollbarController-680392c9.js

@@ -0,0 +1,2 @@
+class t{constructor(t,e=document.body){this.scroller=e,this.resets=new Set,t.addController(this)}hostDisconnected(){this.restore()}get width(){const t=document.documentElement.clientWidth;return Math.abs(window.innerWidth-t)}hide(){this.restore();const{width:t}=this,e=getComputedStyle(this.scroller),s=parseInt(e.paddingRight,10)||0;this.setStyle("--n-scrollbar-gutter",`${t+s}px`),this.setStyle("overflow","hidden"),this.setStyle("padding-right","var(--n-scrollbar-gutter)")}restore(){this.resets.forEach((t=>t())),this.resets.clear()}setStyle(t,e){const{style:s}=this.scroller,r=this.scroller.style.getPropertyValue(t);s.setProperty(t,e),this.resets.add((()=>s.setProperty(t,r)))}}export{t as S};
+//# sourceMappingURL=ScrollbarController-680392c9.js.map

package/lib/ScrollbarController-680392c9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollbarController-680392c9.js","sources":["../src/common/controllers/ScrollbarController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nexport class ScrollbarController implements ReactiveController {\n  private resets = new Set<() => void>()\n\n  constructor(host: ReactiveControllerHost)\n  constructor(host: ReactiveControllerHost, scroller: HTMLElement)\n\n  constructor(host: ReactiveControllerHost, private scroller = document.body) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.restore()\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  get width() {\n    const documentWidth = document.documentElement.clientWidth\n    return Math.abs(window.innerWidth - documentWidth)\n  }\n\n  hide() {\n    // in case hide() is called twice in succession\n    this.restore()\n\n    const { width } = this\n    const computedStyle = getComputedStyle(this.scroller)\n    const paddingRight = parseInt(computedStyle.paddingRight, 10) || 0\n\n    // hiding the scrollbar slightly increases the width of the inner viewport.\n    // this is fine for the modal, since it is accounted for there. but it causes layout shift for any other fixed position components/elements.\n    // so we define a custom property here for the gutter value, since it can be inherited/used by any other component that has a fixed position e.g. toast-group.\n    this.setStyle(\"--n-scrollbar-gutter\", `${width + paddingRight}px`)\n    this.setStyle(\"overflow\", \"hidden\")\n    this.setStyle(\"padding-right\", `var(--n-scrollbar-gutter)`)\n  }\n\n  restore() {\n    this.resets.forEach(reset => reset())\n    this.resets.clear()\n  }\n\n  private setStyle(property: string, value: string) {\n    const { style } = this.scroller\n    const previous = this.scroller.style.getPropertyValue(property)\n\n    style.setProperty(property, value)\n    this.resets.add(() => style.setProperty(property, previous))\n  }\n}\n"],"names":["ScrollbarController","constructor","host","scroller","document","body","this","resets","Set","addController","hostDisconnected","restore","width","documentWidth","documentElement","clientWidth","Math","abs","window","innerWidth","hide","computedStyle","getComputedStyle","paddingRight","parseInt","setStyle","forEach","reset","clear","property","value","style","previous","getPropertyValue","setProperty","add"],"mappings":"MAEaA,EAMXC,YAAYC,EAAsCC,EAAWC,SAASC,MAApBC,KAAQH,SAARA,EAL1CG,KAAAC,OAAS,IAAIC,IAMnBN,EAAKO,cAAcH,KACpB,CAEDI,mBACEJ,KAAKK,SACN,CAGGC,YACF,MAAMC,EAAgBT,SAASU,gBAAgBC,YAC/C,OAAOC,KAAKC,IAAIC,OAAOC,WAAaN,EACrC,CAEDO,OAEEd,KAAKK,UAEL,MAAMC,MAAEA,GAAUN,KACZe,EAAgBC,iBAAiBhB,KAAKH,UACtCoB,EAAeC,SAASH,EAAcE,aAAc,KAAO,EAKjEjB,KAAKmB,SAAS,uBAAwB,GAAGb,EAAQW,OACjDjB,KAAKmB,SAAS,WAAY,UAC1BnB,KAAKmB,SAAS,gBAAiB,4BAChC,CAEDd,UACEL,KAAKC,OAAOmB,SAAQC,GAASA,MAC7BrB,KAAKC,OAAOqB,OACb,CAEOH,SAASI,EAAkBC,GACjC,MAAMC,MAAEA,GAAUzB,KAAKH,SACjB6B,EAAW1B,KAAKH,SAAS4B,MAAME,iBAAiBJ,GAEtDE,EAAMG,YAAYL,EAAUC,GAC5BxB,KAAKC,OAAO4B,KAAI,IAAMJ,EAAMG,YAAYL,EAAUG,IACnD"}

package/lib/TextField-94b0839b.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField-94b0839b.js","sources":["../src/common/mixins/ReadonlyMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class ReadonlyMixinInterface {\n  readonly: boolean\n}\n\nexport function ReadonlyMixin<T extends Constructor<LitElement>>(\n  superClass: T\n): Constructor<ReadonlyMixinInterface> & T {\n  class ReadonlyElement extends superClass {\n    /**\n     * Makes the component readonly, so that it is not editable.\n     * Readonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.\n     */\n    @property({ type: Boolean, reflect: true }) readonly = false\n  }\n\n  return ReadonlyElement as Constructor<ReadonlyMixinInterface> & T\n}\n"],"names":["ReadonlyMixin","superClass","ReadonlyElement","constructor","this","readonly","__decorate","property","type","Boolean","reflect","prototype"],"mappings":"mJAUM,SAAUA,EACdC,GAEA,MAAMC,UAAwBD,EAA9BE,kCAK8CC,KAAQC,UAAG,CACxD,EAED,OAH8CC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBR,EAAAS,UAAA,gBAAA,GAGvDT,CACT"}
+{"version":3,"file":"TextField-94b0839b.js","sources":["../src/common/mixins/ReadonlyMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class ReadonlyMixinInterface {\n  readonly: boolean\n}\n\nexport function ReadonlyMixin<T extends Constructor<LitElement>>(\n  superClass: T\n): Constructor<ReadonlyMixinInterface> & T {\n  class ReadonlyElement extends superClass {\n    /**\n     * Makes the component readonly, so that it is not editable.\n     * Readonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.\n     */\n    @property({ type: Boolean, reflect: true }) readonly = false\n  }\n\n  return ReadonlyElement\n}\n"],"names":["ReadonlyMixin","superClass","ReadonlyElement","constructor","this","readonly","__decorate","property","type","Boolean","reflect","prototype"],"mappings":"mJAUM,SAAUA,EACdC,GAEA,MAAMC,UAAwBD,EAA9BE,kCAK8CC,KAAQC,UAAG,CACxD,EAED,OAH8CC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBR,EAAAS,UAAA,gBAAA,GAGvDT,CACT"}

package/lib/Tooltip.js

@@ -1,2 +1,2 @@
-import{_ as t,e as i}from"./query-assigned-elements-e6cbac30.js";import{i as e,s,y as o}from"./lit-element-79bc2e0e.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as d,o as l,f as h,s as p}from"./positioning-3bbd3548.js";import{S as c}from"./SlotController-ea6eff46.js";import{s as u}from"./Component-49a41387.js";import{E as v}from"./EventController-d99ebeef.js";import{f as m}from"./fsm-50373df9.js";import{o as b}from"./observe-a9c6dfb6.js";function y(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function f(t,i,e){t.setAttribute(i,e.join(" "))}const g=e`:host{--_n-tooltip-background:rgba(20, 20, 20, 0.95);--_n-tooltip-color:#fff;--_n-tooltip-key-border:rgba(255, 255, 255, 0.03);--_n-tooltip-key-background:rgba(255, 255, 255, 0.1);position:fixed;pointer-events:none;visibility:hidden;opacity:0;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transition-timing-function:ease;z-index:var(--n-index-popout)}.n-tooltip{gap:var(--n-space-s);font-family:var(--n-font-family);font-size:var(--n-font-size-xs);line-height:var(--n-line-height);color:var(--_n-tooltip-color);padding:calc(var(--n-space-s)/ 1.5) var(--n-space-s);background-color:var(--_n-tooltip-background);border-radius:var(--n-border-radius-s)}.n-tooltip,.n-tooltip-shortcut{display:flex;align-items:center}.n-tooltip-shortcut{gap:2px}::slotted([slot=shortcut]){box-sizing:border-box;margin:0;inline-size:var(--n-size-icon-m);block-size:var(--n-size-icon-m);border-radius:var(--n-border-radius-s);border:1px solid var(--_n-tooltip-key-border)!important;padding:1px!important;text-align:center;font-size:var(--n-font-size-xs);line-height:var(--n-line-height-tight);letter-spacing:-.5px;vertical-align:middle!important;background-color:var(--_n-tooltip-key-background)}`;var x;function w(t,i){return Boolean(i.id)&&t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("aria-describedby")===i.id}const{transition:k}=m({hidden:{show:"waiting"},visible:{hide:"hidden",reposition:"positioning",show:"positioning"},waiting:{timeout:"positioning",hide:"hidden"},positioning:{positioned:"visible",hide:"hidden"}});let E=x=class extends s{constructor(){super(...arguments),this.shortcutSlot=new c(this,"shortcut"),this.events=new v(this),this.proxy=document.createElement("span"),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.updatePosition=t=>a(t,this,{strategy:"fixed",placement:d(this.position),middleware:[l(8),h(),p({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=k(this.state,"positioned")})),this.hideTooltip=()=>{this.state=k(this.state,"hide")},this.reposition=()=>{this.state=k(this.state,"reposition")},this.handleShow=t=>{const i=t.target;w(i,this)&&(this.currentElement=i,this.state=k(this.state,"show"))},this.handleHide=t=>{t.target===this.currentElement&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{var t,i;const e=null===(i=null===(t=this.currentElement)||void 0===t?void 0:t.focusableRef)||void 0===i?void 0:i.value;e&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,e.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const s=y(t,i);s.includes(e)||f(t,i,s.concat(e))}(e,"aria-describedby",this.id))},this.removeDescribedBy=()=>{var t,i;const e=null===(i=null===(t=this.currentElement)||void 0===t?void 0:t.focusableRef)||void 0===i?void 0:i.value;e&&(this.proxy.remove(),function(t,i,e){const s=y(t,i);s.includes(e)&&f(t,i,s.filter((t=>t!==e)))}(e,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback();const t=this.getRootNode();this.events.listen(t,"keydown",this.hideOnEscape),this.events.listen(t,"mouseover",this.handleShow),this.events.listen(t,"focusin",this.handleShow),this.events.listen(t,"mouseout",this.handleHide),this.events.listen(t,"focusout",this.handleHide),this.events.listen(t,"click",this.handleHide),this.events.listen(window,"resize",this.reposition,{passive:!0}),this.events.listen(window,"scroll",this.reposition,{passive:!0})}render(){return o`<div class="n-tooltip"><slot></slot><div class="n-tooltip-shortcut" ?hidden="${this.shortcutSlot.isEmpty}"><slot class="n-tooltip-key" name="shortcut"></slot></div></div>`}handleIdChange(){this.id||console.warn("NORD: The tooltip requires an id attribute and value")}handleStateChange(t){var i;switch(this.state){case"hidden":"waiting"===t&&this.timeoutId&&clearTimeout(this.timeoutId),this.removeDescribedBy(),this.currentElement=void 0,this.style.visibility="hidden",this.style.opacity="0";break;case"visible":{this.timeoutId=void 0,x.lastOpened=this,this.addDescribedBy();const[t,i]=this.coords;this.style.left=`${t}px`,this.style.top=`${i}px`,this.style.visibility="visible",this.style.opacity="1";break}case"waiting":this.timeoutId=setTimeout((()=>{this.state=k(this.state,"timeout")}),this.delay);break;case"positioning":x.lastOpened!==this&&(null===(i=x.lastOpened)||void 0===i||i.hideTooltip()),this.currentElement&&this.updatePosition(this.currentElement)}}};E.styles=[u,g],t([r()],E.prototype,"state",void 0),t([n({reflect:!0})],E.prototype,"position",void 0),t([n({reflect:!0})],E.prototype,"role",void 0),t([n({reflect:!0})],E.prototype,"id",void 0),t([n({reflect:!0,type:Number})],E.prototype,"delay",void 0),t([b("id")],E.prototype,"handleIdChange",null),t([b("state")],E.prototype,"handleStateChange",null),E=x=t([i("nord-tooltip")],E);var j=E;export{j as default};
+import{_ as t,e as i}from"./query-assigned-elements-e6cbac30.js";import{i as e,s,y as o}from"./lit-element-79bc2e0e.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as d,o as l,f as h,s as p}from"./positioning-3bbd3548.js";import{S as c}from"./SlotController-ea6eff46.js";import{s as u}from"./Component-49a41387.js";import{E as v}from"./EventController-d99ebeef.js";import{f as m}from"./fsm-50373df9.js";import{o as b}from"./observe-a9c6dfb6.js";function y(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function f(t,i,e){t.setAttribute(i,e.join(" "))}const g=e`:host{--_n-tooltip-background:rgba(20, 20, 20, 0.95);--_n-tooltip-color:#fff;--_n-tooltip-key-border:rgba(255, 255, 255, 0.03);--_n-tooltip-key-background:rgba(255, 255, 255, 0.1);position:fixed;pointer-events:none;visibility:hidden;opacity:0;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transition-timing-function:ease;z-index:var(--n-index-popout)}.n-tooltip{gap:var(--n-space-s);font-family:var(--n-font-family);font-size:var(--n-font-size-xs);line-height:var(--n-line-height);color:var(--_n-tooltip-color);padding:calc(var(--n-space-s)/ 1.5) var(--n-space-s);background-color:var(--_n-tooltip-background);border-radius:var(--n-border-radius-s)}.n-tooltip,.n-tooltip-shortcut{display:flex;align-items:center}.n-tooltip-shortcut{gap:2px}::slotted([slot=shortcut]){box-sizing:border-box;margin:0;inline-size:var(--n-size-icon-m);block-size:var(--n-size-icon-m);border-radius:var(--n-border-radius-s);border:1px solid var(--_n-tooltip-key-border)!important;padding:1px!important;text-align:center;font-size:var(--n-font-size-xs);line-height:var(--n-line-height-tight);letter-spacing:-.5px;vertical-align:middle!important;background-color:var(--_n-tooltip-key-background)}`;var x;function w(t,i){return Boolean(i.id)&&t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("aria-describedby")===i.id}const{transition:k}=m({hidden:{show:"waiting"},visible:{hide:"hidden",reposition:"positioning",show:"positioning"},waiting:{timeout:"positioning",hide:"hidden"},positioning:{positioned:"visible",hide:"hidden"}});let E=x=class extends s{constructor(){super(...arguments),this.shortcutSlot=new c(this,"shortcut"),this.events=new v(this),this.proxy=document.createElement("span"),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.updatePosition=t=>a(t,this,{strategy:"fixed",placement:d(this.position),middleware:[l(8),h(),p({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=k(this.state,"positioned")})),this.hideTooltip=()=>{this.state=k(this.state,"hide")},this.reposition=()=>{this.state=k(this.state,"reposition")},this.handleShow=t=>{const i=t.target;w(i,this)&&(this.currentElement=i,this.state=k(this.state,"show"))},this.handleHide=t=>{t.target===this.currentElement&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{var t,i;const e=null===(i=null===(t=this.currentElement)||void 0===t?void 0:t.focusableRef)||void 0===i?void 0:i.value;e&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,e.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const s=y(t,i);s.includes(e)||f(t,i,s.concat(e))}(e,"aria-describedby",this.id))},this.removeDescribedBy=()=>{var t,i;const e=null===(i=null===(t=this.currentElement)||void 0===t?void 0:t.focusableRef)||void 0===i?void 0:i.value;e&&(this.proxy.remove(),function(t,i,e){const s=y(t,i);s.includes(e)&&f(t,i,s.filter((t=>t!==e)))}(e,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback();const t=this.getRootNode();this.events.listen(t,"keydown",this.hideOnEscape),this.events.listen(t,"mouseover",this.handleShow),this.events.listen(t,"focusin",this.handleShow),this.events.listen(t,"mouseout",this.handleHide),this.events.listen(t,"focusout",this.handleHide),this.events.listen(t,"click",this.handleHide,{capture:!0}),this.events.listen(window,"resize",this.reposition,{passive:!0}),this.events.listen(window,"scroll",this.reposition,{passive:!0})}render(){return o`<div class="n-tooltip"><slot></slot><div class="n-tooltip-shortcut" ?hidden="${this.shortcutSlot.isEmpty}"><slot class="n-tooltip-key" name="shortcut"></slot></div></div>`}handleIdChange(){this.id||console.warn("NORD: The tooltip requires an id attribute and value")}handleStateChange(t){var i;switch(this.state){case"hidden":"waiting"===t&&this.timeoutId&&clearTimeout(this.timeoutId),this.removeDescribedBy(),this.currentElement=void 0,this.style.visibility="hidden",this.style.opacity="0";break;case"visible":{this.timeoutId=void 0,x.lastOpened=this,this.addDescribedBy();const[t,i]=this.coords;this.style.left=`${t}px`,this.style.top=`${i}px`,this.style.visibility="visible",this.style.opacity="1";break}case"waiting":this.timeoutId=setTimeout((()=>{this.state=k(this.state,"timeout")}),this.delay);break;case"positioning":x.lastOpened!==this&&(null===(i=x.lastOpened)||void 0===i||i.hideTooltip()),this.currentElement&&this.updatePosition(this.currentElement)}}};E.styles=[u,g],t([r()],E.prototype,"state",void 0),t([n({reflect:!0})],E.prototype,"position",void 0),t([n({reflect:!0})],E.prototype,"role",void 0),t([n({reflect:!0})],E.prototype,"id",void 0),t([n({reflect:!0,type:Number})],E.prototype,"delay",void 0),t([b("id")],E.prototype,"handleIdChange",null),t([b("state")],E.prototype,"handleStateChange",null),E=x=t([i("nord-tooltip")],E);var j=E;export{j as default};
 //# sourceMappingURL=Tooltip.js.map

package/lib/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../src/common/attribute.ts","../src/tooltip/Tooltip.ts"],"sourcesContent":["function getTokens(element: Element, attr: string) {\n  const value = element.getAttribute(attr)\n  return value ? value.split(/\\s+/) : []\n}\n\nfunction setTokens(element: Element, attr: string, tokens: string[]) {\n  element.setAttribute(attr, tokens.join(\" \"))\n}\n\n/**\n * Carefully adds a token to a space-separated attribute\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add\n */\nexport function add(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (!tokens.includes(token)) {\n    setTokens(element, attr, tokens.concat(token))\n  }\n}\n\n/**\n * Carefully removes a token from a space-separated attribute.\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove\n */\nexport function remove(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (tokens.includes(token)) {\n    setTokens(\n      element,\n      attr,\n      tokens.filter(t => t !== token)\n    )\n  }\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, flip, shift, offset } from \"@floating-ui/dom\"\n\nimport * as attr from \"../common/attribute.js\"\nimport type { FocusableMixinInterface } from \"../common/mixins/FocusableMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tooltip.css\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { States, fsm } from \"../common/fsm.js\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n// @ts-expect-error we're being naughty and accessing a protected field!\n// however this means we always get the correct types,\n// and it will ensure this file is not forgotten about if focusable mixin ever changes\ntype FocusableElement = HTMLElement & Pick<FocusableMixinInterface, \"focusableRef\">\n\nfunction isElement(el: Node): el is Element {\n  return el.nodeType === Node.ELEMENT_NODE\n}\n\nfunction referencesTooltip(node: Node, tooltip: Tooltip) {\n  return Boolean(tooltip.id) && isElement(node) && node.getAttribute(\"aria-describedby\") === tooltip.id\n}\n\nconst { transition } = fsm({\n  hidden: {\n    show: \"waiting\",\n  },\n  visible: {\n    hide: \"hidden\",\n    reposition: \"positioning\",\n    show: \"positioning\",\n  },\n  waiting: {\n    timeout: \"positioning\",\n    hide: \"hidden\",\n  },\n  positioning: {\n    positioned: \"visible\",\n    hide: \"hidden\",\n  },\n})\n\ntype TooltipStates = States<typeof transition>\n\n/**\n * Tooltips are floating containers for displaying additional information\n * for the currently focused element. A tooltip can be useful when you want\n * to e.g. give a hint about an existing Command Menu shortcut.\n *\n * @status ready\n * @category overlay\n * @slot - The tooltip content\n * @slot shortcut - Optional slot that holds shortcut keys to access the subject\n */\n@customElement(\"nord-tooltip\")\nexport default class Tooltip extends LitElement {\n  static styles = [componentStyle, style]\n\n  // tracks the last tooltip opened, so we can enforce only one is ever open at a time\n  private static lastOpened?: Tooltip\n\n  private shortcutSlot = new SlotController(this, \"shortcut\")\n  private events = new EventController(this)\n\n  // The current element which revealed the tooltip shown\n  private currentElement?: FocusableElement\n  private timeoutId?: ReturnType<typeof setTimeout>\n\n  /**\n   * the proxy element is for cases where the targetElement is a web component,\n   * and the WC has a focusable child in its shadow root e.g. a button component.\n   * in this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\n   * and wire up aria-describedby from the focusable element to the proxy.\n   * when the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship.\n   */\n  private proxy = document.createElement(\"span\")\n\n  /**\n   * The current state of the tooltip, dependent on the state machine\n   */\n  @state() private state: TooltipStates = \"hidden\"\n\n  // The current coordinates for the tooltip\n  private coords: [number, number] = [0, 0]\n\n  /**\n   * Control the position of the tooltip component.\n   * When set to \"none\", the tooltip will be shown above\n   * but accommodate for browser boundaries.\n   */\n  @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-start\"\n\n  /**\n   * The tooltip role, set on the component by default.\n   */\n  @property({ reflect: true }) role = \"tooltip\"\n\n  /**\n   * The id for the active element to reference via aria-describedby.\n   */\n  @property({ reflect: true }) id: string = \"\"\n\n  /**\n   * The delay in milliseconds before the tooltip is opened.\n   */\n  @property({ reflect: true, type: Number }) delay: number = 500\n\n  /**\n   * Apply all event listeners\n   */\n  connectedCallback() {\n    super.connectedCallback()\n\n    const rootNode = this.getRootNode() as Document\n\n    this.events.listen(rootNode, \"keydown\", this.hideOnEscape)\n\n    // we treat mouseover and focusin the same, since they both show tooltip\n    this.events.listen(rootNode, \"mouseover\", this.handleShow)\n    this.events.listen(rootNode, \"focusin\", this.handleShow)\n\n    // we treat focusout, mouseout, click the same, since they all hide tooltip\n    this.events.listen(rootNode, \"mouseout\", this.handleHide)\n    this.events.listen(rootNode, \"focusout\", this.handleHide)\n    this.events.listen(rootNode, \"click\", this.handleHide)\n\n    this.events.listen(window, \"resize\", this.reposition, { passive: true })\n    this.events.listen(window, \"scroll\", this.reposition, { passive: true })\n  }\n\n  render() {\n    return html`\n      <div class=\"n-tooltip\">\n        <slot></slot>\n        <div class=\"n-tooltip-shortcut\" ?hidden=${this.shortcutSlot.isEmpty}>\n          <slot class=\"n-tooltip-key\" name=\"shortcut\"></slot>\n        </div>\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: The tooltip requires an id attribute and value\")\n    }\n  }\n\n  @observe(\"state\")\n  private handleStateChange(prevState: TooltipStates) {\n    switch (this.state) {\n      case \"hidden\": {\n        if (prevState === \"waiting\" && this.timeoutId) {\n          clearTimeout(this.timeoutId)\n        }\n\n        this.removeDescribedBy()\n        this.currentElement = undefined\n        this.style.visibility = \"hidden\"\n        this.style.opacity = \"0\"\n        break\n      }\n\n      case \"visible\": {\n        this.timeoutId = undefined\n        Tooltip.lastOpened = this\n        this.addDescribedBy()\n\n        const [x, y] = this.coords\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.left = `${x}px`\n        this.style.top = `${y}px`\n        this.style.visibility = \"visible\"\n        this.style.opacity = \"1\"\n        break\n      }\n\n      case \"waiting\": {\n        this.timeoutId = setTimeout(() => {\n          this.state = transition(this.state, \"timeout\")\n        }, this.delay)\n        break\n      }\n\n      case \"positioning\": {\n        if (Tooltip.lastOpened !== this) {\n          Tooltip.lastOpened?.hideTooltip()\n        }\n\n        if (this.currentElement) {\n          this.updatePosition(this.currentElement)\n        }\n        break\n      }\n    }\n  }\n\n  /**\n   * Setting and updating the position of the tooltip\n   */\n  private updatePosition = (currentElement: HTMLElement) =>\n    computePosition(currentElement, this, {\n      strategy: \"fixed\",\n      placement: logicalToPhysical(this.position),\n      middleware: [\n        offset(8),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n      ],\n    }).then(({ x, y }) => {\n      this.coords = [x, y]\n      this.state = transition(this.state, \"positioned\")\n    })\n\n  private hideTooltip = () => {\n    this.state = transition(this.state, \"hide\")\n  }\n\n  private reposition = () => {\n    this.state = transition(this.state, \"reposition\")\n  }\n\n  private handleShow = (e: Event) => {\n    const target = e.target as FocusableElement\n\n    if (referencesTooltip(target, this)) {\n      this.currentElement = target\n      this.state = transition(this.state, \"show\")\n    }\n  }\n\n  private handleHide = (e: Event) => {\n    if (e.target === this.currentElement) {\n      this.hideTooltip()\n    }\n  }\n\n  private hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === \"Escape\") {\n      this.hideTooltip()\n    }\n  }\n\n  private addDescribedBy = () => {\n    const focusable = this.currentElement?.focusableRef?.value\n\n    if (focusable) {\n      this.proxy.hidden = true\n      this.proxy.id = this.id\n      this.proxy.textContent = this.textContent\n\n      focusable.insertAdjacentElement(\"afterend\", this.proxy)\n      attr.add(focusable, \"aria-describedby\", this.id)\n    }\n  }\n\n  private removeDescribedBy = () => {\n    const focusable = this.currentElement?.focusableRef?.value\n\n    if (focusable) {\n      this.proxy.remove()\n      attr.remove(focusable, \"aria-describedby\", this.id)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tooltip\": Tooltip\n  }\n}\n"],"names":["getTokens","element","attr","value","getAttribute","split","setTokens","tokens","setAttribute","join","referencesTooltip","node","tooltip","Boolean","id","nodeType","Node","ELEMENT_NODE","transition","fsm","hidden","show","visible","hide","reposition","waiting","timeout","positioning","positioned","Tooltip","Tooltip_1","LitElement","constructor","this","shortcutSlot","SlotController","events","EventController","proxy","document","createElement","state","coords","position","role","delay","updatePosition","currentElement","computePosition","strategy","placement","logicalToPhysical","middleware","offset","flip","shift","padding","then","x","y","hideTooltip","handleShow","e","target","handleHide","hideOnEscape","key","addDescribedBy","focusable","_b","_a","focusableRef","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","rootNode","getRootNode","listen","window","passive","render","html","isEmpty","handleIdChange","console","warn","handleStateChange","prevState","timeoutId","clearTimeout","undefined","style","visibility","opacity","lastOpened","left","top","setTimeout","styles","componentStyle","__decorate","prototype","property","reflect","type","Number","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../src/common/attribute.ts","../src/tooltip/Tooltip.ts"],"sourcesContent":["function getTokens(element: Element, attr: string) {\n  const value = element.getAttribute(attr)\n  return value ? value.split(/\\s+/) : []\n}\n\nfunction setTokens(element: Element, attr: string, tokens: string[]) {\n  element.setAttribute(attr, tokens.join(\" \"))\n}\n\n/**\n * Carefully adds a token to a space-separated attribute\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add\n */\nexport function add(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (!tokens.includes(token)) {\n    setTokens(element, attr, tokens.concat(token))\n  }\n}\n\n/**\n * Carefully removes a token from a space-separated attribute.\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove\n */\nexport function remove(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (tokens.includes(token)) {\n    setTokens(\n      element,\n      attr,\n      tokens.filter(t => t !== token)\n    )\n  }\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, flip, shift, offset } from \"@floating-ui/dom\"\n\nimport * as attr from \"../common/attribute.js\"\nimport type { FocusableMixinInterface } from \"../common/mixins/FocusableMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tooltip.css\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { States, fsm } from \"../common/fsm.js\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n// @ts-expect-error we're being naughty and accessing a protected field!\n// however this means we always get the correct types,\n// and it will ensure this file is not forgotten about if focusable mixin ever changes\ntype FocusableElement = HTMLElement & Pick<FocusableMixinInterface, \"focusableRef\">\n\nfunction isElement(el: Node): el is Element {\n  return el.nodeType === Node.ELEMENT_NODE\n}\n\nfunction referencesTooltip(node: Node, tooltip: Tooltip) {\n  return Boolean(tooltip.id) && isElement(node) && node.getAttribute(\"aria-describedby\") === tooltip.id\n}\n\nconst { transition } = fsm({\n  hidden: {\n    show: \"waiting\",\n  },\n  visible: {\n    hide: \"hidden\",\n    reposition: \"positioning\",\n    show: \"positioning\",\n  },\n  waiting: {\n    timeout: \"positioning\",\n    hide: \"hidden\",\n  },\n  positioning: {\n    positioned: \"visible\",\n    hide: \"hidden\",\n  },\n})\n\ntype TooltipStates = States<typeof transition>\n\n/**\n * Tooltips are floating containers for displaying additional information\n * for the currently focused element. A tooltip can be useful when you want\n * to e.g. give a hint about an existing Command Menu shortcut.\n *\n * @status ready\n * @category overlay\n * @slot - The tooltip content\n * @slot shortcut - Optional slot that holds shortcut keys to access the subject\n */\n@customElement(\"nord-tooltip\")\nexport default class Tooltip extends LitElement {\n  static styles = [componentStyle, style]\n\n  // tracks the last tooltip opened, so we can enforce only one is ever open at a time\n  private static lastOpened?: Tooltip\n\n  private shortcutSlot = new SlotController(this, \"shortcut\")\n  private events = new EventController(this)\n\n  // The current element which revealed the tooltip shown\n  private currentElement?: FocusableElement\n  private timeoutId?: ReturnType<typeof setTimeout>\n\n  /**\n   * the proxy element is for cases where the targetElement is a web component,\n   * and the WC has a focusable child in its shadow root e.g. a button component.\n   * in this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\n   * and wire up aria-describedby from the focusable element to the proxy.\n   * when the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship.\n   */\n  private proxy = document.createElement(\"span\")\n\n  /**\n   * The current state of the tooltip, dependent on the state machine\n   */\n  @state() private state: TooltipStates = \"hidden\"\n\n  // The current coordinates for the tooltip\n  private coords: [number, number] = [0, 0]\n\n  /**\n   * Control the position of the tooltip component.\n   * When set to \"none\", the tooltip will be shown above\n   * but accommodate for browser boundaries.\n   */\n  @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-start\"\n\n  /**\n   * The tooltip role, set on the component by default.\n   */\n  @property({ reflect: true }) role = \"tooltip\"\n\n  /**\n   * The id for the active element to reference via aria-describedby.\n   */\n  @property({ reflect: true }) id: string = \"\"\n\n  /**\n   * The delay in milliseconds before the tooltip is opened.\n   */\n  @property({ reflect: true, type: Number }) delay: number = 500\n\n  /**\n   * Apply all event listeners\n   */\n  connectedCallback() {\n    super.connectedCallback()\n\n    const rootNode = this.getRootNode() as Document\n\n    this.events.listen(rootNode, \"keydown\", this.hideOnEscape)\n\n    // we treat mouseover and focusin the same, since they both show tooltip\n    this.events.listen(rootNode, \"mouseover\", this.handleShow)\n    this.events.listen(rootNode, \"focusin\", this.handleShow)\n\n    // we treat focusout, mouseout, click the same, since they all hide tooltip\n    this.events.listen(rootNode, \"mouseout\", this.handleHide)\n    this.events.listen(rootNode, \"focusout\", this.handleHide)\n    // we use event capture here to handle cases where e.g. a close button causes its ancestor to be removed from the DOM.\n    // in this case the click event will never bubble up to the rootNode, so we never receive it, and the tooltip can remain open\n    // by capturing, we get this event first, and can close the tooltip eagerly\n    this.events.listen(rootNode, \"click\", this.handleHide, { capture: true })\n\n    this.events.listen(window, \"resize\", this.reposition, { passive: true })\n    this.events.listen(window, \"scroll\", this.reposition, { passive: true })\n  }\n\n  render() {\n    return html`\n      <div class=\"n-tooltip\">\n        <slot></slot>\n        <div class=\"n-tooltip-shortcut\" ?hidden=${this.shortcutSlot.isEmpty}>\n          <slot class=\"n-tooltip-key\" name=\"shortcut\"></slot>\n        </div>\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: The tooltip requires an id attribute and value\")\n    }\n  }\n\n  @observe(\"state\")\n  private handleStateChange(prevState: TooltipStates) {\n    switch (this.state) {\n      case \"hidden\": {\n        if (prevState === \"waiting\" && this.timeoutId) {\n          clearTimeout(this.timeoutId)\n        }\n\n        this.removeDescribedBy()\n        this.currentElement = undefined\n        this.style.visibility = \"hidden\"\n        this.style.opacity = \"0\"\n        break\n      }\n\n      case \"visible\": {\n        this.timeoutId = undefined\n        Tooltip.lastOpened = this\n        this.addDescribedBy()\n\n        const [x, y] = this.coords\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.left = `${x}px`\n        this.style.top = `${y}px`\n        this.style.visibility = \"visible\"\n        this.style.opacity = \"1\"\n        break\n      }\n\n      case \"waiting\": {\n        this.timeoutId = setTimeout(() => {\n          this.state = transition(this.state, \"timeout\")\n        }, this.delay)\n        break\n      }\n\n      case \"positioning\": {\n        if (Tooltip.lastOpened !== this) {\n          Tooltip.lastOpened?.hideTooltip()\n        }\n\n        if (this.currentElement) {\n          this.updatePosition(this.currentElement)\n        }\n        break\n      }\n    }\n  }\n\n  /**\n   * Setting and updating the position of the tooltip\n   */\n  private updatePosition = (currentElement: HTMLElement) =>\n    computePosition(currentElement, this, {\n      strategy: \"fixed\",\n      placement: logicalToPhysical(this.position),\n      middleware: [\n        offset(8),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n      ],\n    }).then(({ x, y }) => {\n      this.coords = [x, y]\n      this.state = transition(this.state, \"positioned\")\n    })\n\n  private hideTooltip = () => {\n    this.state = transition(this.state, \"hide\")\n  }\n\n  private reposition = () => {\n    this.state = transition(this.state, \"reposition\")\n  }\n\n  private handleShow = (e: Event) => {\n    const target = e.target as FocusableElement\n\n    if (referencesTooltip(target, this)) {\n      this.currentElement = target\n      this.state = transition(this.state, \"show\")\n    }\n  }\n\n  private handleHide = (e: Event) => {\n    if (e.target === this.currentElement) {\n      this.hideTooltip()\n    }\n  }\n\n  private hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === \"Escape\") {\n      this.hideTooltip()\n    }\n  }\n\n  private addDescribedBy = () => {\n    const focusable = this.currentElement?.focusableRef?.value\n\n    if (focusable) {\n      this.proxy.hidden = true\n      this.proxy.id = this.id\n      this.proxy.textContent = this.textContent\n\n      focusable.insertAdjacentElement(\"afterend\", this.proxy)\n      attr.add(focusable, \"aria-describedby\", this.id)\n    }\n  }\n\n  private removeDescribedBy = () => {\n    const focusable = this.currentElement?.focusableRef?.value\n\n    if (focusable) {\n      this.proxy.remove()\n      attr.remove(focusable, \"aria-describedby\", this.id)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tooltip\": Tooltip\n  }\n}\n"],"names":["getTokens","element","attr","value","getAttribute","split","setTokens","tokens","setAttribute","join","referencesTooltip","node","tooltip","Boolean","id","nodeType","Node","ELEMENT_NODE","transition","fsm","hidden","show","visible","hide","reposition","waiting","timeout","positioning","positioned","Tooltip","Tooltip_1","LitElement","constructor","this","shortcutSlot","SlotController","events","EventController","proxy","document","createElement","state","coords","position","role","delay","updatePosition","currentElement","computePosition","strategy","placement","logicalToPhysical","middleware","offset","flip","shift","padding","then","x","y","hideTooltip","handleShow","e","target","handleHide","hideOnEscape","key","addDescribedBy","focusable","_b","_a","focusableRef","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","rootNode","getRootNode","listen","capture","window","passive","render","html","isEmpty","handleIdChange","console","warn","handleStateChange","prevState","timeoutId","clearTimeout","undefined","style","visibility","opacity","lastOpened","left","top","setTimeout","styles","componentStyle","__decorate","prototype","property","reflect","type","Number","observe","customElement"],"mappings":"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"}