@nordhealth/components 4.12.6 → 4.12.7

package/lib/DatePicker.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-close-small-CnpAFMO3.js";import{css as i,html as o,nothing as a,LitElement as s}from"lit";import{query as r,property as n,customElement as l}from"lit/decorators.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{ref as p}from"lit/directives/ref.js";import{S as c,i as h}from"./Calendar-CL_eqbiT.js";import{D as m,c as u,p as v,a as f}from"./dates-CAAlPKZi.js";import{c as b}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as j}from"./FocusableMixin-BlQLNPdJ.js";import{F as y}from"./FormAssociatedMixin-DFL7yabe.js";import{I as $}from"./InputMixin-LetXsCyv.js";import{R as D,s as k}from"./TextField-BdEdZ0_b.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{s as w}from"./Component-DSU3Qp0O.js";import{s as z}from"./FormField--eLuhPue.js";import C from"./Icon.js";import{LocalizeController as F}from"./LocalizeController.js";import{isoAdapter as S}from"./date-adapter.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-k_ddK22Q.js";import"./Stack.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./collection-Dvg2XbxV.js";import"./DirectionController-ChvNGESZ.js";import"./EventController-BBOmvfLa.js";import"./observe-D0n0zOfU.js";import"./number-Dg2vCfGd.js";import"./DateSelectEvent.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"lit/directives/style-map.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./positioning-DDh0UNgJ.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./ScrollbarController-BFC67Y2x.js";var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',tags:"nordicon interface calendar date time day week month year",title:"interface-calendar"});const I=i`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;C.registerIcon(A),C.registerIcon(e);const L=()=>!1,B=()=>!1;let M=class extends(x(y(D($(j(s)))))){constructor(){super(...arguments),this.swipe=new c(this,{target:()=>this.popout,matchesGesture:h,onSwipeEnd:()=>this.hide()}),this.localize=new F(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=m.Monday,this.dateAdapter=S,this.isDateDisabled=L,this.isDateHighlighted=B,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.dispatchEvent(new g("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new g("focus"))},this.handleInputChange=t=>{var e;const i=t.target,o=this.dateAdapter.parse(i.value,u);this.rawValue=null===(e=this.focusableRef.value)||void 0===e?void 0:e.value,(o||""===i.value)&&this.setValue(o)}}get valueAsDate(){return v(this.value)}set valueAsDate(t){this.value=t?f(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:Number.NaN}set valueAsNumber(t){this.value=t?f(new Date(t)):""}firstUpdated(){var t;this.rawValue=null===(t=this.focusableRef.value)||void 0===t?void 0:t.value}render(){const{valueAsDate:t}=this,e=t?this.dateAdapter.format(t):"";return o`<nord-input class="n-date-picker-input" value="${e}" label="${d(this.label)}" hint="${d(this.hint)}" error="${b(this.error,this.error)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hide-label="${this.hideLabel}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${p(this.focusableRef)} aria-invalid="${b(this.error,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?a:o`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?a:o`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:a}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${d(this.min)}" max="${d(this.max)}" today="${d(this.today)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{timeZone:"UTC",day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?f(t):"";const{valueAsDate:e}=this,i=e?this.dateAdapter.format(e):"";this.rawValue=i,this.dispatchEvent(new g("change"))}hide(t){this.popout.hide(t)}show(){this.popout.show()}};M.styles=[w,z,k,I],t([r(".n-date-picker-toggle",!0)],M.prototype,"toggleButton",void 0),t([r(".n-date-picker-close-button",!0)],M.prototype,"closeButton",void 0),t([r("nord-calendar",!0)],M.prototype,"calendar",void 0),t([r('[role="dialog"]',!0)],M.prototype,"popout",void 0),t([n()],M.prototype,"value",void 0),t([n({attribute:!1})],M.prototype,"rawValue",void 0),t([n({type:Boolean,reflect:!0})],M.prototype,"open",void 0),t([n({reflect:!0})],M.prototype,"min",void 0),t([n({reflect:!0})],M.prototype,"max",void 0),t([n({reflect:!0})],M.prototype,"today",void 0),t([n({reflect:!0,attribute:"first-day-of-week",type:Number})],M.prototype,"firstDayOfWeek",void 0),t([n({attribute:!1})],M.prototype,"dateAdapter",void 0),t([n({attribute:!1})],M.prototype,"isDateDisabled",void 0),t([n({attribute:!1})],M.prototype,"isDateHighlighted",void 0),t([n({reflect:!0,type:Boolean})],M.prototype,"expand",void 0),M=t([l("nord-date-picker")],M);var E=M;export{E as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-close-small-CnpAFMO3.js";import{css as i,html as o,nothing as a,LitElement as s}from"lit";import{query as r,property as n,customElement as l}from"lit/decorators.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{ref as p}from"lit/directives/ref.js";import{S as c,i as h}from"./Calendar-CL_eqbiT.js";import{D as m,c as u,p as v,a as f}from"./dates-CAAlPKZi.js";import{c as b}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as j}from"./FocusableMixin-BlQLNPdJ.js";import{F as y}from"./FormAssociatedMixin-DFL7yabe.js";import{I as $}from"./InputMixin-LetXsCyv.js";import{R as D,s as k}from"./TextField-BdEdZ0_b.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{s as w}from"./Component-DSU3Qp0O.js";import{s as z}from"./FormField--eLuhPue.js";import C from"./Icon.js";import{LocalizeController as F}from"./LocalizeController.js";import{isoAdapter as S}from"./date-adapter.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-pKfh0-Zv.js";import"./Stack.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./collection-Dvg2XbxV.js";import"./DirectionController-ChvNGESZ.js";import"./EventController-BBOmvfLa.js";import"./observe-D0n0zOfU.js";import"./number-Dg2vCfGd.js";import"./DateSelectEvent.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"lit/directives/style-map.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./ScrollbarController-BFC67Y2x.js";var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',tags:"nordicon interface calendar date time day week month year",title:"interface-calendar"});const I=i`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;C.registerIcon(A),C.registerIcon(e);const L=()=>!1,B=()=>!1;let M=class extends(x(y(D($(j(s)))))){constructor(){super(...arguments),this.swipe=new c(this,{target:()=>this.popout,matchesGesture:h,onSwipeEnd:()=>this.hide()}),this.localize=new F(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=m.Monday,this.dateAdapter=S,this.isDateDisabled=L,this.isDateHighlighted=B,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.dispatchEvent(new g("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new g("focus"))},this.handleInputChange=t=>{var e;const i=t.target,o=this.dateAdapter.parse(i.value,u);this.rawValue=null===(e=this.focusableRef.value)||void 0===e?void 0:e.value,(o||""===i.value)&&this.setValue(o)}}get valueAsDate(){return v(this.value)}set valueAsDate(t){this.value=t?f(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:Number.NaN}set valueAsNumber(t){this.value=t?f(new Date(t)):""}firstUpdated(){var t;this.rawValue=null===(t=this.focusableRef.value)||void 0===t?void 0:t.value}render(){const{valueAsDate:t}=this,e=t?this.dateAdapter.format(t):"";return o`<nord-input class="n-date-picker-input" value="${e}" label="${d(this.label)}" hint="${d(this.hint)}" error="${b(this.error,this.error)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hide-label="${this.hideLabel}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${p(this.focusableRef)} aria-invalid="${b(this.error,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?a:o`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?a:o`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:a}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${d(this.min)}" max="${d(this.max)}" today="${d(this.today)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{timeZone:"UTC",day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?f(t):"";const{valueAsDate:e}=this,i=e?this.dateAdapter.format(e):"";this.rawValue=i,this.dispatchEvent(new g("change"))}hide(t){this.popout.hide(t)}show(){this.popout.show()}};M.styles=[w,z,k,I],t([r(".n-date-picker-toggle",!0)],M.prototype,"toggleButton",void 0),t([r(".n-date-picker-close-button",!0)],M.prototype,"closeButton",void 0),t([r("nord-calendar",!0)],M.prototype,"calendar",void 0),t([r('[role="dialog"]',!0)],M.prototype,"popout",void 0),t([n()],M.prototype,"value",void 0),t([n({attribute:!1})],M.prototype,"rawValue",void 0),t([n({type:Boolean,reflect:!0})],M.prototype,"open",void 0),t([n({reflect:!0})],M.prototype,"min",void 0),t([n({reflect:!0})],M.prototype,"max",void 0),t([n({reflect:!0})],M.prototype,"today",void 0),t([n({reflect:!0,attribute:"first-day-of-week",type:Number})],M.prototype,"firstDayOfWeek",void 0),t([n({attribute:!1})],M.prototype,"dateAdapter",void 0),t([n({attribute:!1})],M.prototype,"isDateDisabled",void 0),t([n({attribute:!1})],M.prototype,"isDateHighlighted",void 0),t([n({reflect:!0,type:Boolean})],M.prototype,"expand",void 0),M=t([l("nord-date-picker")],M);var E=M;export{E as default};
 //# sourceMappingURL=DatePicker.js.map

package/lib/Dropdown.js

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,LitElement as n}from"lit";import{query as r,property as s,customElement as d}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{S as i}from"./SlotController-Z6eG7LSZ.js";import{o as l}from"./observe-D0n0zOfU.js";import{F as p}from"./Popout-k_ddK22Q.js";import{s as c}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";import"./positioning-DDh0UNgJ.js";import"./DirectionController-ChvNGESZ.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./events-Bv6wNHwJ.js";const h=e`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px);--_n-dropdown-max-block-size:var(--n-dropdown-max-block-size, 460px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:var(--_n-dropdown-max-block-size);overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size='s']){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size='l']){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(p(n)){constructor(){super(...arguments),this.headerSlot=new i(this,"header"),this.headerEndSlot=new i(this,"header-end"),this.expand=!1,this.size="m",this.alwaysFloating=!1}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]');null==o||o.setAttribute("aria-haspopup","true")}render(){return t`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${a(this.align)}" position="${a(this.position)}" ?open="${this.open}" ?always-floating="${this.alwaysFloating}" @open="${this.handleOpen}" @close="${this.handleClose}"><div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){this.open=!0}handleClose(){this.open=!1}handleOpenChange(){var o;if(this.open){const e=null!==(o=this.querySelector("[autofocus]"))&&void 0!==o?o:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}}hide(o){return this.popout.hide(o)}show(){return this.popout.show()}};m.styles=[c,h],m.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([r(".n-dropdown-content")],m.prototype,"list",void 0),o([r("nord-popout",!0)],m.prototype,"popout",void 0),o([s({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),o([s({reflect:!0})],m.prototype,"size",void 0),o([s({reflect:!0,type:Boolean,attribute:"always-floating"})],m.prototype,"alwaysFloating",void 0),o([l("open","updated")],m.prototype,"handleOpenChange",null),m=o([d("nord-dropdown")],m);var u=m;export{u as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,LitElement as n}from"lit";import{query as r,property as s,customElement as d}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{S as i}from"./SlotController-Z6eG7LSZ.js";import{o as l}from"./observe-D0n0zOfU.js";import{F as p}from"./Popout-pKfh0-Zv.js";import{s as c}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./events-Bv6wNHwJ.js";const h=e`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px);--_n-dropdown-max-block-size:var(--n-dropdown-max-block-size, 460px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:var(--_n-dropdown-max-block-size);overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size='s']){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size='l']){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(p(n)){constructor(){super(...arguments),this.headerSlot=new i(this,"header"),this.headerEndSlot=new i(this,"header-end"),this.expand=!1,this.size="m",this.alwaysFloating=!1}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]');null==o||o.setAttribute("aria-haspopup","true")}render(){return t`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${a(this.align)}" position="${a(this.position)}" ?open="${this.open}" ?always-floating="${this.alwaysFloating}" @open="${this.handleOpen}" @close="${this.handleClose}"><div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){this.open=!0}handleClose(){this.open=!1}handleOpenChange(){var o;if(this.open){const e=null!==(o=this.querySelector("[autofocus]"))&&void 0!==o?o:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}}hide(o){return this.popout.hide(o)}show(){return this.popout.show()}};m.styles=[c,h],m.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([r(".n-dropdown-content")],m.prototype,"list",void 0),o([r("nord-popout",!0)],m.prototype,"popout",void 0),o([s({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),o([s({reflect:!0})],m.prototype,"size",void 0),o([s({reflect:!0,type:Boolean,attribute:"always-floating"})],m.prototype,"alwaysFloating",void 0),o([l("open","updated")],m.prototype,"handleOpenChange",null),m=o([d("nord-dropdown")],m);var u=m;export{u as default};
 //# sourceMappingURL=Dropdown.js.map

package/lib/IconManager.js

@@ -1,2 +1,2 @@
-const e=e=>fetch(`https://nordcdn.net/ds/icons/3.15.0/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
+const e=e=>fetch(`https://nordcdn.net/ds/icons/3.15.1/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
 //# sourceMappingURL=IconManager.js.map

package/lib/{Popout-k_ddK22Q.js → Popout-pKfh0-Zv.js}

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{o,a as i,s as e,h as s,l as n,c as a,b as r,f as l}from"./positioning-DDh0UNgJ.js";import{css as h,html as p,LitElement as d}from"lit";import{property as c,query as m,state as u,customElement as g}from"lit/decorators.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{E as f}from"./EventController-BBOmvfLa.js";import{L as y}from"./LightDismissController-4pH8cdko.js";import{S as w}from"./ScrollbarController-BFC67Y2x.js";import{o as b}from"./observe-D0n0zOfU.js";import{N as E,t as x}from"./events-Bv6wNHwJ.js";import{s as C}from"./Component-DSU3Qp0O.js";function k(o){class i extends o{constructor(){super(...arguments),this.open=!1,this.align="start",this.position="block-end"}}return t([c({type:Boolean,reflect:!0})],i.prototype,"open",void 0),t([c({reflect:!0})],i.prototype,"align",void 0),t([c({reflect:!0})],i.prototype,"position",void 0),i}const A=h`: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(:not([always-floating])){position:fixed;inset:0;overflow-y:auto;opacity:1;background:0 0;transition:background var(--n-transition-mobile)}:host([open]:not([always-floating])){pointer-events:auto;background:var(--n-color-overlay)}:host([open]:not([always-floating])) .n-popout{transform:translateY(0)}:host(:not([always-floating])) .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}`,P="undefined"==typeof matchMedia?{matches:!1,addEventListener(){}}:matchMedia("(max-width: 35.9375em)");let S=class extends(k(d)){constructor(){super(...arguments),this.scrollBar=new w(this),this.dismiss=new y(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this.popout&&t!==this.targetElement}),this.events=new f(this),this.direction=new v(this),this.smallViewport=P.matches,this.id="",this.alwaysFloating=!1,this.enableScroll=()=>{this.open||this.scrollBar.unlockScroll()},this.updatePosition=async()=>{var t;if(!this.anchorElement)return;const r={strategy:"fixed"};"auto"===this.position?r.middleware=[o(8),i({alignment:this.align,padding:8}),e({padding:8}),s()]:(r.placement=n(this.position,this.align,this.direction.dir),r.middleware=[o(8),l(),e({padding:8}),s()]);const{x:h,y:p,placement:d,middlewareData:c}=await a(this.anchorElement,this,r);this.computedPosition=d,this.style.setProperty("--_n-popout-position-x",`${h}px`),this.style.setProperty("--_n-popout-position-y",`${p}px`),(null===(t=c.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):!this.smallViewport||this.alwaysFloating?this.updatePosition().then((()=>this.show())):this.show()},this.handleMediaQueryChange=()=>{var t;this.smallViewport=P.matches,null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),(!this.smallViewport||this.alwaysFloating)&&this.open&&this.anchorElement?(this.cleanupAutoUpdate=r(this.anchorElement,this,this.updatePosition),this.scrollBar.unlockScroll()):this.open&&this.scrollBar.lockScroll()}}async show(){return this.open?Promise.resolve():(this.open=!0,await this.updateComplete,this.dispatchEvent(new E("open")),x(this.popout))}async hide(t=!0){var o,i;return this.open?(this.open=!1,null===(o=this.cleanupAutoUpdate)||void 0===o||o.call(this),this.dispatchEvent(new E("close")),t&&(null===(i=this.targetElement)||void 0===i||i.focus({preventScroll:!0})),x(this.popout)):Promise.resolve()}firstUpdated(){this.smallViewport&&!this.alwaysFloating||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.events.listen(P,"change",this.handleMediaQueryChange),this.initializeElements()}disconnectedCallback(){var t,o;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),null===(o=this.targetElement)||void 0===o||o.removeAttribute("aria-expanded")}render(){return p`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}" @transitionend="${this.enableScroll}"><slot></slot></div>`}handleIdChange(){var t;null===(t=this.targetElement)||void 0===t||t.removeEventListener("click",this.toggleOpen),this.id?this.initializeElements():console.warn("NORD: popout requires an id attribute and value")}initializeElements(){this.targetElement=this.getToggle(),this.anchorElement=this.getAnchor(),this.events.listen(this.targetElement,"click",this.toggleOpen)}handleOpenChange(){var t,o;null===(t=this.targetElement)||void 0===t||t.setAttribute("aria-expanded",`${this.open}`),this.open?this.smallViewport&&!this.alwaysFloating?this.scrollBar.lockScroll():this.anchorElement&&(this.cleanupAutoUpdate=r(this.anchorElement,this,this.updatePosition)):null===(o=this.cleanupAutoUpdate)||void 0===o||o.call(this)}handleAnchorChange(){var t;null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.anchorElement=this.getAnchor(),this.open&&(!this.smallViewport||this.alwaysFloating)&&this.anchorElement&&(this.cleanupAutoUpdate=r(this.anchorElement,this,this.updatePosition))}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}getAnchor(){if(!this.anchor)return this.targetElement;const t=this.getRootNode().querySelector(`#${this.anchor}`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};S.styles=[C,A],t([m(".n-popout",!0)],S.prototype,"popout",void 0),t([u()],S.prototype,"computedPosition",void 0),t([u()],S.prototype,"smallViewport",void 0),t([c({reflect:!0})],S.prototype,"id",void 0),t([c({reflect:!0})],S.prototype,"anchor",void 0),t([c({reflect:!0,type:Boolean,attribute:"always-floating"})],S.prototype,"alwaysFloating",void 0),t([b("id")],S.prototype,"handleIdChange",null),t([b("open")],S.prototype,"handleOpenChange",null),t([b("anchor")],S.prototype,"handleAnchorChange",null),S=t([g("nord-popout")],S);var j=S;export{k as F,j as P};
-//# sourceMappingURL=Popout-k_ddK22Q.js.map
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{o,a as i,s as e,h as s,l as n,c as a,b as r,f as l}from"./positioning-D-K8Mueq.js";import{css as h,html as p,LitElement as d}from"lit";import{property as c,query as m,state as u,customElement as g}from"lit/decorators.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{E as f}from"./EventController-BBOmvfLa.js";import{L as y}from"./LightDismissController-4pH8cdko.js";import{S as w}from"./ScrollbarController-BFC67Y2x.js";import{o as b}from"./observe-D0n0zOfU.js";import{N as E,t as x}from"./events-Bv6wNHwJ.js";import{s as C}from"./Component-DSU3Qp0O.js";function k(o){class i extends o{constructor(){super(...arguments),this.open=!1,this.align="start",this.position="block-end"}}return t([c({type:Boolean,reflect:!0})],i.prototype,"open",void 0),t([c({reflect:!0})],i.prototype,"align",void 0),t([c({reflect:!0})],i.prototype,"position",void 0),i}const A=h`: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(:not([always-floating])){position:fixed;inset:0;overflow-y:auto;opacity:1;background:0 0;transition:background var(--n-transition-mobile)}:host([open]:not([always-floating])){pointer-events:auto;background:var(--n-color-overlay)}:host([open]:not([always-floating])) .n-popout{transform:translateY(0)}:host(:not([always-floating])) .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}`,P="undefined"==typeof matchMedia?{matches:!1,addEventListener(){}}:matchMedia("(max-width: 35.9375em)");let S=class extends(k(d)){constructor(){super(...arguments),this.scrollBar=new w(this),this.dismiss=new y(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this.popout&&t!==this.targetElement}),this.events=new f(this),this.direction=new v(this),this.smallViewport=P.matches,this.id="",this.alwaysFloating=!1,this.enableScroll=()=>{this.open||this.scrollBar.unlockScroll()},this.updatePosition=async()=>{var t;if(!this.anchorElement)return;const r={strategy:"fixed"};"auto"===this.position?r.middleware=[o(8),i({alignment:this.align,padding:8}),e({padding:8}),s()]:(r.placement=n(this.position,this.align,this.direction.dir),r.middleware=[o(8),l(),e({padding:8}),s()]);const{x:h,y:p,placement:d,middlewareData:c}=await a(this.anchorElement,this,r);this.computedPosition=d,this.style.setProperty("--_n-popout-position-x",`${h}px`),this.style.setProperty("--_n-popout-position-y",`${p}px`),(null===(t=c.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):!this.smallViewport||this.alwaysFloating?this.updatePosition().then((()=>this.show())):this.show()},this.handleMediaQueryChange=()=>{var t;this.smallViewport=P.matches,null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),(!this.smallViewport||this.alwaysFloating)&&this.open&&this.anchorElement?(this.cleanupAutoUpdate=r(this.anchorElement,this,this.updatePosition),this.scrollBar.unlockScroll()):this.open&&this.scrollBar.lockScroll()}}async show(){return this.open?Promise.resolve():(this.open=!0,await this.updateComplete,this.dispatchEvent(new E("open")),x(this.popout))}async hide(t=!0){var o,i;return this.open?(this.open=!1,null===(o=this.cleanupAutoUpdate)||void 0===o||o.call(this),this.dispatchEvent(new E("close")),t&&(null===(i=this.targetElement)||void 0===i||i.focus({preventScroll:!0})),x(this.popout)):Promise.resolve()}firstUpdated(){this.smallViewport&&!this.alwaysFloating||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.events.listen(P,"change",this.handleMediaQueryChange),this.initializeElements()}disconnectedCallback(){var t,o;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),null===(o=this.targetElement)||void 0===o||o.removeAttribute("aria-expanded")}render(){return p`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}" @transitionend="${this.enableScroll}"><slot></slot></div>`}handleIdChange(){var t;null===(t=this.targetElement)||void 0===t||t.removeEventListener("click",this.toggleOpen),this.id?this.initializeElements():console.warn("NORD: popout requires an id attribute and value")}initializeElements(){this.targetElement=this.getToggle(),this.anchorElement=this.getAnchor(),this.events.listen(this.targetElement,"click",this.toggleOpen)}handleOpenChange(){var t,o;null===(t=this.targetElement)||void 0===t||t.setAttribute("aria-expanded",`${this.open}`),this.open?this.smallViewport&&!this.alwaysFloating?this.scrollBar.lockScroll():this.anchorElement&&(this.cleanupAutoUpdate=r(this.anchorElement,this,this.updatePosition)):null===(o=this.cleanupAutoUpdate)||void 0===o||o.call(this)}handleAnchorChange(){var t;null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.anchorElement=this.getAnchor(),this.open&&(!this.smallViewport||this.alwaysFloating)&&this.anchorElement&&(this.cleanupAutoUpdate=r(this.anchorElement,this,this.updatePosition))}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}getAnchor(){if(!this.anchor)return this.targetElement;const t=this.getRootNode().querySelector(`#${this.anchor}`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};S.styles=[C,A],t([m(".n-popout",!0)],S.prototype,"popout",void 0),t([u()],S.prototype,"computedPosition",void 0),t([u()],S.prototype,"smallViewport",void 0),t([c({reflect:!0})],S.prototype,"id",void 0),t([c({reflect:!0})],S.prototype,"anchor",void 0),t([c({reflect:!0,type:Boolean,attribute:"always-floating"})],S.prototype,"alwaysFloating",void 0),t([b("id")],S.prototype,"handleIdChange",null),t([b("open")],S.prototype,"handleOpenChange",null),t([b("anchor")],S.prototype,"handleAnchorChange",null),S=t([g("nord-popout")],S);var j=S;export{k as F,j as P};
+//# sourceMappingURL=Popout-pKfh0-Zv.js.map

package/lib/{Popout-k_ddK22Q.js.map → Popout-pKfh0-Zv.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Popout-k_ddK22Q.js","sources":["../src/common/mixins/FloatingComponentMixin.ts","../src/popout/Popout.ts"],"sourcesContent":["import type { Alignment } from '@floating-ui/dom'\nimport type { LitElement } from 'lit'\nimport type { LogicalSide } from '../positioning.js'\nimport { property } from 'lit/decorators.js'\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FloatingMixinInterface {\n  open: boolean\n  align: Alignment\n  position: LogicalSide | 'auto'\n}\n\nexport function FloatingMixin<T extends Constructor<LitElement>>(\n  superClass: T,\n): Constructor<FloatingMixinInterface> & T {\n  class FloatingElement extends superClass {\n    /**\n     * Controls whether the component is open or not.\n     */\n    @property({ type: Boolean, reflect: true }) open = false\n\n    /**\n     * Set the alignment in relation to the toggle (or anchor) depending on the position.\n     * `start` will align it to the left of the toggle (or anchor).\n     * `end` will align it to the right of the toggle (or anchor).\n     * Setting the `position` to `inline-start` or `inline-end` will switch\n     * `start` and `end` to the top and bottom respectively.\n     */\n    @property({ reflect: true }) align: 'start' | 'end' = 'start'\n\n    /**\n     * Set the position in relation to the toggle (or anchor).\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     * You can also set it to `auto` for automatic positioning depending on\n     * which side has the most space available.\n     */\n    @property({ reflect: true }) position: 'block-end' | 'block-start' | 'inline-start' | 'inline-end' | 'auto'\n      = 'block-end'\n  }\n\n  return FloatingElement\n}\n","import type {\n  ComputePositionConfig,\n  Placement,\n} from '@floating-ui/dom'\nimport {\n  autoPlacement,\n  autoUpdate,\n  computePosition,\n  flip,\n  hide,\n  offset,\n  shift,\n} from '@floating-ui/dom'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { ScrollbarController } from '../common/controllers/ScrollbarController.js'\n\nimport { observe } from '../common/decorators/observe.js'\nimport { NordEvent, transition } from '../common/events.js'\nimport { FloatingMixin } from '../common/mixins/FloatingComponentMixin.js'\nimport { logicalToPhysical } from '../common/positioning.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Popout.css'\n\n/*\n * The breakpoint width to switch between \"sheet\" design and floating design\n */\nconst mediaQuery\n  = typeof matchMedia === 'undefined'\n    ? ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n    : 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 FloatingMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private targetElement?: HTMLElement\n  private anchorElement?: 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   * The id for the active element to reference via aria-controls.\n   */\n\n  @property({ reflect: true }) id: string = ''\n\n  /**\n   * Set an optional anchor element to align against, replacing the triggering element.\n   */\n  @property({ reflect: true }) anchor?: string\n\n  /**\n   * Set to true to always display the popout as a floating overlay, even on smaller viewports.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'always-floating' }) alwaysFloating: boolean = false\n\n  /**\n   * Show the popout.\n   * A promise that resolves to a `TransitionEvent` when the popout's show animation ends or is cancelled.\n   * If the popout is already open, the promise resolves immediately with `undefined`.\n   */\n  async show(): Promise<TransitionEvent | void> {\n    if (this.open) {\n      return Promise.resolve()\n    }\n\n    this.open = true\n\n    // we should only focus once the popout is visible after render is complete\n    await this.updateComplete\n\n    /**\n     * Dispatched when the popout is opened.\n     */\n    this.dispatchEvent(new NordEvent('open'))\n\n    return transition(this.popout)\n  }\n\n  /**\n   * Hide the popout.\n   * Returns a promise that resolves to a `TransitionEvent` when the popout's hide animation ends or is cancelled.\n   * If the popout is already closed, the promise resolves immediately with `undefined`.\n   * @param {boolean} moveFocusToButton prevent focus returning to the target button. Default is true.\n   */\n  async hide(moveFocusToButton: boolean = true): Promise<TransitionEvent | void> {\n    if (!this.open) {\n      return Promise.resolve()\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    return transition(this.popout)\n  }\n\n  /**\n   * Position the popout on load.\n   */\n  firstUpdated() {\n    if (!this.smallViewport || this.alwaysFloating) {\n      this.updatePosition()\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.events.listen(mediaQuery, 'change', this.handleMediaQueryChange)\n\n    this.initializeElements()\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    // clean up any old listeners\n    this.targetElement?.removeEventListener('click', this.toggleOpen)\n\n    if (!this.id) {\n      console.warn('NORD: popout requires an id attribute and value')\n    }\n    else {\n      this.initializeElements()\n    }\n  }\n\n  private initializeElements() {\n    this.targetElement = this.getToggle()\n    this.anchorElement = this.getAnchor()\n\n    this.events.listen(this.targetElement, 'click', this.toggleOpen)\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 && !this.alwaysFloating) {\n        // hide scrollbar and prevent scroll on body\n        this.scrollBar.lockScroll()\n      }\n      else if (this.anchorElement) {\n        this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n      }\n    }\n    else {\n      this.cleanupAutoUpdate?.()\n    }\n  }\n\n  @observe('anchor')\n  protected handleAnchorChange() {\n    this.cleanupAutoUpdate?.()\n    this.anchorElement = this.getAnchor()\n\n    // if the popout is already open when the anchor changes, we should update its position\n    if (this.open && (!this.smallViewport || this.alwaysFloating) && this.anchorElement) {\n      this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\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.unlockScroll()\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    if (!this.anchorElement) {\n      return\n    }\n\n    const computePositionConfig: ComputePositionConfig = {\n      strategy: 'fixed',\n    }\n\n    if (this.position === 'auto') {\n      computePositionConfig.middleware = [\n        offset(8),\n        autoPlacement({ alignment: this.align, padding: 8 }),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ]\n    }\n    else {\n      computePositionConfig.placement = logicalToPhysical(this.position, this.align, this.direction.dir)\n      computePositionConfig.middleware = [\n        offset(8),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ]\n    }\n\n    const { x, y, placement, middlewareData } = await computePosition(this.anchorElement, this, computePositionConfig)\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    }\n    else if (!this.smallViewport || this.alwaysFloating) {\n      this.updatePosition().then(() => this.show())\n    }\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  private getAnchor() {\n    if (!this.anchor) {\n      return this.targetElement\n    }\n\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const anchor = <HTMLElement>rootNode.querySelector(`#${this.anchor}`)\n\n    if (anchor instanceof HTMLSlotElement) {\n      return anchor.assignedElements()[0] as HTMLElement\n    }\n\n    return anchor\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.alwaysFloating) && this.open && this.anchorElement) {\n      this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n      this.scrollBar.unlockScroll()\n    }\n    else if (this.open) {\n      this.scrollBar.lockScroll()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-popout': Popout\n  }\n}\n"],"names":["FloatingMixin","superClass","FloatingElement","constructor","this","open","align","position","__decorate","property","type","Boolean","reflect","prototype","mediaQuery","matchMedia","matches","addEventListener","Popout","LitElement","scrollBar","ScrollbarController","dismiss","LightDismissController","isOpen","onDismiss","e","hide","isDismissible","node","popout","targetElement","events","EventController","direction","DirectionController","smallViewport","id","alwaysFloating","enableScroll","unlockScroll","updatePosition","async","anchorElement","computePositionConfig","strategy","middleware","offset","autoPlacement","alignment","padding","shift","placement","logicalToPhysical","dir","flip","x","y","middlewareData","computePosition","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","then","show","handleMediaQueryChange","cleanupAutoUpdate","call","autoUpdate","lockScroll","Promise","resolve","updateComplete","dispatchEvent","NordEvent","transition","moveFocusToButton","_b","focus","preventScroll","firstUpdated","connectedCallback","super","listen","initializeElements","disconnectedCallback","removeAttribute","render","html","handleIdChange","removeEventListener","console","warn","getToggle","getAnchor","handleOpenChange","setAttribute","handleAnchorChange","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","anchor","styles","componentStyle","query","state","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Popout-pKfh0-Zv.js","sources":["../src/common/mixins/FloatingComponentMixin.ts","../src/popout/Popout.ts"],"sourcesContent":["import type { Alignment } from '@floating-ui/dom'\nimport type { LitElement } from 'lit'\nimport type { LogicalSide } from '../positioning.js'\nimport { property } from 'lit/decorators.js'\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FloatingMixinInterface {\n  open: boolean\n  align: Alignment\n  position: LogicalSide | 'auto'\n}\n\nexport function FloatingMixin<T extends Constructor<LitElement>>(\n  superClass: T,\n): Constructor<FloatingMixinInterface> & T {\n  class FloatingElement extends superClass {\n    /**\n     * Controls whether the component is open or not.\n     */\n    @property({ type: Boolean, reflect: true }) open = false\n\n    /**\n     * Set the alignment in relation to the toggle (or anchor) depending on the position.\n     * `start` will align it to the left of the toggle (or anchor).\n     * `end` will align it to the right of the toggle (or anchor).\n     * Setting the `position` to `inline-start` or `inline-end` will switch\n     * `start` and `end` to the top and bottom respectively.\n     */\n    @property({ reflect: true }) align: 'start' | 'end' = 'start'\n\n    /**\n     * Set the position in relation to the toggle (or anchor).\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     * You can also set it to `auto` for automatic positioning depending on\n     * which side has the most space available.\n     */\n    @property({ reflect: true }) position: 'block-end' | 'block-start' | 'inline-start' | 'inline-end' | 'auto'\n      = 'block-end'\n  }\n\n  return FloatingElement\n}\n","import type {\n  ComputePositionConfig,\n  Placement,\n} from '@floating-ui/dom'\nimport {\n  autoPlacement,\n  autoUpdate,\n  computePosition,\n  flip,\n  hide,\n  offset,\n  shift,\n} from '@floating-ui/dom'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { ScrollbarController } from '../common/controllers/ScrollbarController.js'\n\nimport { observe } from '../common/decorators/observe.js'\nimport { NordEvent, transition } from '../common/events.js'\nimport { FloatingMixin } from '../common/mixins/FloatingComponentMixin.js'\nimport { logicalToPhysical } from '../common/positioning.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Popout.css'\n\n/*\n * The breakpoint width to switch between \"sheet\" design and floating design\n */\nconst mediaQuery\n  = typeof matchMedia === 'undefined'\n    ? ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n    : 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 FloatingMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private targetElement?: HTMLElement\n  private anchorElement?: 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   * The id for the active element to reference via aria-controls.\n   */\n\n  @property({ reflect: true }) id: string = ''\n\n  /**\n   * Set an optional anchor element to align against, replacing the triggering element.\n   */\n  @property({ reflect: true }) anchor?: string\n\n  /**\n   * Set to true to always display the popout as a floating overlay, even on smaller viewports.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'always-floating' }) alwaysFloating: boolean = false\n\n  /**\n   * Show the popout.\n   * A promise that resolves to a `TransitionEvent` when the popout's show animation ends or is cancelled.\n   * If the popout is already open, the promise resolves immediately with `undefined`.\n   */\n  async show(): Promise<TransitionEvent | void> {\n    if (this.open) {\n      return Promise.resolve()\n    }\n\n    this.open = true\n\n    // we should only focus once the popout is visible after render is complete\n    await this.updateComplete\n\n    /**\n     * Dispatched when the popout is opened.\n     */\n    this.dispatchEvent(new NordEvent('open'))\n\n    return transition(this.popout)\n  }\n\n  /**\n   * Hide the popout.\n   * Returns a promise that resolves to a `TransitionEvent` when the popout's hide animation ends or is cancelled.\n   * If the popout is already closed, the promise resolves immediately with `undefined`.\n   * @param {boolean} moveFocusToButton prevent focus returning to the target button. Default is true.\n   */\n  async hide(moveFocusToButton: boolean = true): Promise<TransitionEvent | void> {\n    if (!this.open) {\n      return Promise.resolve()\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    return transition(this.popout)\n  }\n\n  /**\n   * Position the popout on load.\n   */\n  firstUpdated() {\n    if (!this.smallViewport || this.alwaysFloating) {\n      this.updatePosition()\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.events.listen(mediaQuery, 'change', this.handleMediaQueryChange)\n\n    this.initializeElements()\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    // clean up any old listeners\n    this.targetElement?.removeEventListener('click', this.toggleOpen)\n\n    if (!this.id) {\n      console.warn('NORD: popout requires an id attribute and value')\n    }\n    else {\n      this.initializeElements()\n    }\n  }\n\n  private initializeElements() {\n    this.targetElement = this.getToggle()\n    this.anchorElement = this.getAnchor()\n\n    this.events.listen(this.targetElement, 'click', this.toggleOpen)\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 && !this.alwaysFloating) {\n        // hide scrollbar and prevent scroll on body\n        this.scrollBar.lockScroll()\n      }\n      else if (this.anchorElement) {\n        this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n      }\n    }\n    else {\n      this.cleanupAutoUpdate?.()\n    }\n  }\n\n  @observe('anchor')\n  protected handleAnchorChange() {\n    this.cleanupAutoUpdate?.()\n    this.anchorElement = this.getAnchor()\n\n    // if the popout is already open when the anchor changes, we should update its position\n    if (this.open && (!this.smallViewport || this.alwaysFloating) && this.anchorElement) {\n      this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\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.unlockScroll()\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    if (!this.anchorElement) {\n      return\n    }\n\n    const computePositionConfig: ComputePositionConfig = {\n      strategy: 'fixed',\n    }\n\n    if (this.position === 'auto') {\n      computePositionConfig.middleware = [\n        offset(8),\n        autoPlacement({ alignment: this.align, padding: 8 }),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ]\n    }\n    else {\n      computePositionConfig.placement = logicalToPhysical(this.position, this.align, this.direction.dir)\n      computePositionConfig.middleware = [\n        offset(8),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ]\n    }\n\n    const { x, y, placement, middlewareData } = await computePosition(this.anchorElement, this, computePositionConfig)\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    }\n    else if (!this.smallViewport || this.alwaysFloating) {\n      this.updatePosition().then(() => this.show())\n    }\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  private getAnchor() {\n    if (!this.anchor) {\n      return this.targetElement\n    }\n\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const anchor = <HTMLElement>rootNode.querySelector(`#${this.anchor}`)\n\n    if (anchor instanceof HTMLSlotElement) {\n      return anchor.assignedElements()[0] as HTMLElement\n    }\n\n    return anchor\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.alwaysFloating) && this.open && this.anchorElement) {\n      this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n      this.scrollBar.unlockScroll()\n    }\n    else if (this.open) {\n      this.scrollBar.lockScroll()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-popout': Popout\n  }\n}\n"],"names":["FloatingMixin","superClass","FloatingElement","constructor","this","open","align","position","__decorate","property","type","Boolean","reflect","prototype","mediaQuery","matchMedia","matches","addEventListener","Popout","LitElement","scrollBar","ScrollbarController","dismiss","LightDismissController","isOpen","onDismiss","e","hide","isDismissible","node","popout","targetElement","events","EventController","direction","DirectionController","smallViewport","id","alwaysFloating","enableScroll","unlockScroll","updatePosition","async","anchorElement","computePositionConfig","strategy","middleware","offset","autoPlacement","alignment","padding","shift","placement","logicalToPhysical","dir","flip","x","y","middlewareData","computePosition","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","then","show","handleMediaQueryChange","cleanupAutoUpdate","call","autoUpdate","lockScroll","Promise","resolve","updateComplete","dispatchEvent","NordEvent","transition","moveFocusToButton","_b","focus","preventScroll","firstUpdated","connectedCallback","super","listen","initializeElements","disconnectedCallback","removeAttribute","render","html","handleIdChange","removeEventListener","console","warn","getToggle","getAnchor","handleOpenChange","setAttribute","handleAnchorChange","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","anchor","styles","componentStyle","query","state","attribute","observe","customElement"],"mappings":"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"}

package/lib/Popout.js

@@ -1,2 +1,2 @@
-import"./tslib.es6-CmLYFWVC.js";import"./positioning-DDh0UNgJ.js";import"lit";import"lit/decorators.js";import"./DirectionController-ChvNGESZ.js";import"./EventController-BBOmvfLa.js";import"./LightDismissController-4pH8cdko.js";import"./ScrollbarController-BFC67Y2x.js";import"./observe-D0n0zOfU.js";import"./events-Bv6wNHwJ.js";export{P as default}from"./Popout-k_ddK22Q.js";import"./Component-DSU3Qp0O.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";
+import"./tslib.es6-CmLYFWVC.js";import"./positioning-D-K8Mueq.js";import"lit";import"lit/decorators.js";import"./DirectionController-ChvNGESZ.js";import"./EventController-BBOmvfLa.js";import"./LightDismissController-4pH8cdko.js";import"./ScrollbarController-BFC67Y2x.js";import"./observe-D0n0zOfU.js";import"./events-Bv6wNHwJ.js";export{P as default}from"./Popout-pKfh0-Zv.js";import"./Component-DSU3Qp0O.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";
 //# sourceMappingURL=Popout.js.map

package/lib/Tooltip.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as i,l as e,o as s,f as o,s as n}from"./positioning-DDh0UNgJ.js";import{css as r,LitElement as a,html as l}from"lit";import{state as d,property as h,customElement as c}from"lit/decorators.js";import{E as p}from"./EventController-BBOmvfLa.js";import{S as u}from"./SlotController-Z6eG7LSZ.js";import{o as v}from"./observe-D0n0zOfU.js";import{f as m}from"./fsm-Bq5jMQrK.js";import{s as y}from"./Component-DSU3Qp0O.js";function b(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function f(t,i,e){t.setAttribute(i,e.join(" "))}const g=r`:host{--_n-tooltip-max-size:var(--n-tooltip-max-size, 50ch);--_n-tooltip-background:rgb(20, 20, 20, 0.95);--_n-tooltip-color:#fff;--_n-tooltip-key-border:rgb(255, 255, 255, 0.03);--_n-tooltip-key-background:rgb(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);word-break:break-word;max-inline-size:var(--_n-tooltip-max-size)}.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)}[slot=shortcut]::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;var x;function k(t,i){return Boolean(i.id)&&t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("aria-describedby")===i.id}function w(t){var i;const e=null===(i=null==t?void 0:t.focusableRef)||void 0===i?void 0:i.value;return e&&"focusableRef"in e?w(e):e}const{transition:z}=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 a{constructor(){super(...arguments),this.shortcutSlot=new u(this,"shortcut"),this.events=new p(this),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.updatePosition=t=>i(t,this,{strategy:"fixed",placement:e(this.position),middleware:[s(8),o(),n({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=z(this.state,"positioned")})),this.hideTooltip=()=>{this.state=z(this.state,"hide")},this.reposition=()=>{this.state=z(this.state,"reposition")},this.handleShow=t=>{const i=t.target;k(i,this)&&(this.currentElement=i,this.state=z(this.state,"show"))},this.handleHide=t=>{t.target===this.currentElement&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{const t=w(this.currentElement);t&&this.proxy&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,t.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const s=b(t,i);s.includes(e)||f(t,i,s.concat(e))}(t,"aria-describedby",this.id))},this.removeDescribedBy=()=>{const t=w(this.currentElement);t&&this.proxy&&(this.proxy.remove(),function(t,i,e){const s=b(t,i);s.includes(e)&&f(t,i,s.filter((t=>t!==e)))}(t,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback(),this.proxy=document.createElement("span");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})}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.proxy)||void 0===t||t.remove(),this.proxy=void 0}render(){return l`<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=z(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=[y,g],t([d()],E.prototype,"state",void 0),t([h({reflect:!0})],E.prototype,"position",void 0),t([h({reflect:!0})],E.prototype,"role",void 0),t([h({reflect:!0})],E.prototype,"id",void 0),t([h({reflect:!0,type:Number})],E.prototype,"delay",void 0),t([v("id")],E.prototype,"handleIdChange",null),t([v("state")],E.prototype,"handleStateChange",null),E=x=t([c("nord-tooltip")],E);var C=E;export{C as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as i,l as e,o as s,f as o,s as n}from"./positioning-D-K8Mueq.js";import{css as r,LitElement as a,html as l}from"lit";import{state as d,property as h,customElement as c}from"lit/decorators.js";import{E as p}from"./EventController-BBOmvfLa.js";import{S as u}from"./SlotController-Z6eG7LSZ.js";import{o as v}from"./observe-D0n0zOfU.js";import{f as m}from"./fsm-Bq5jMQrK.js";import{s as y}from"./Component-DSU3Qp0O.js";function b(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function f(t,i,e){t.setAttribute(i,e.join(" "))}const g=r`:host{--_n-tooltip-max-size:var(--n-tooltip-max-size, 50ch);--_n-tooltip-background:rgb(20, 20, 20, 0.95);--_n-tooltip-color:#fff;--_n-tooltip-key-border:rgb(255, 255, 255, 0.03);--_n-tooltip-key-background:rgb(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);word-break:break-word;max-inline-size:var(--_n-tooltip-max-size)}.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)}[slot=shortcut]::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;var x;function k(t,i){return Boolean(i.id)&&t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("aria-describedby")===i.id}function w(t){var i;const e=null===(i=null==t?void 0:t.focusableRef)||void 0===i?void 0:i.value;return e&&"focusableRef"in e?w(e):e}const{transition:z}=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 a{constructor(){super(...arguments),this.shortcutSlot=new u(this,"shortcut"),this.events=new p(this),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.updatePosition=t=>i(t,this,{strategy:"fixed",placement:e(this.position),middleware:[s(8),o(),n({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=z(this.state,"positioned")})),this.hideTooltip=()=>{this.state=z(this.state,"hide")},this.reposition=()=>{this.state=z(this.state,"reposition")},this.handleShow=t=>{const i=t.target;k(i,this)&&(this.currentElement=i,this.state=z(this.state,"show"))},this.handleHide=t=>{t.target===this.currentElement&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{const t=w(this.currentElement);t&&this.proxy&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,t.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const s=b(t,i);s.includes(e)||f(t,i,s.concat(e))}(t,"aria-describedby",this.id))},this.removeDescribedBy=()=>{const t=w(this.currentElement);t&&this.proxy&&(this.proxy.remove(),function(t,i,e){const s=b(t,i);s.includes(e)&&f(t,i,s.filter((t=>t!==e)))}(t,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback(),this.proxy=document.createElement("span");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})}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.proxy)||void 0===t||t.remove(),this.proxy=void 0}render(){return l`<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=z(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=[y,g],t([d()],E.prototype,"state",void 0),t([h({reflect:!0})],E.prototype,"position",void 0),t([h({reflect:!0})],E.prototype,"role",void 0),t([h({reflect:!0})],E.prototype,"id",void 0),t([h({reflect:!0,type:Number})],E.prototype,"delay",void 0),t([v("id")],E.prototype,"handleIdChange",null),t([v("state")],E.prototype,"handleStateChange",null),E=x=t([c("nord-tooltip")],E);var C=E;export{C as default};
 //# sourceMappingURL=Tooltip.js.map