@nordhealth/components 1.0.1 → 1.1.1

package/lib/DatePicker.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as i,$ as o,w as a,s as n}from"./lit-element-99bdfe5a.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as l}from"./query-2d22378e.js";import{o as d}from"./class-map-f93f9ba8.js";import{n as c}from"./ref-7e1d4d24.js";import{l as p}from"./if-defined-ee2efb2f.js";import{F as h}from"./FocusableMixin-c010d3b3.js";import{F as m}from"./FormAssociatedMixin-f69a60dd.js";import{I as u}from"./InputMixin-84ca72ae.js";import{m as v,p as b,a as g}from"./dates-56f73760.js";import{N as f}from"./events-731d0007.js";import{S as y,i as w}from"./Calendar-52774c03.js";import{L as x}from"./LightDismissController-a2645ae6.js";import{LocalizeController as k}from"./LocalizeController.js";import"./Button.js";import j from"./Icon.js";import"./VisuallyHidden.js";import{s as z}from"./Component-6bf383d6.js";import{s as $}from"./FormField-900069ed.js";import{s as D}from"./TextField-0ba775e0.js";import{isoAdapter as L}from"./date-adapter.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./number-ff1c5d88.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-8b298382.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./collection-800f5002.js";import"./cond-a3e00141.js";import"./DateSelectEvent.js";import"./ShortcutController-87615e31.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./LightDomController-f21f0a7c.js";import"./unsafe-html-feceb926.js";var F=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126v112H7zM35 7v28m70-28v28M7 63h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});var C=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z"/></svg>',title:"interface-close-small",tags:"nordicon interface close remove small cross delete erase symbol"});const A=i`:host{--n-date-picker-color-overlay:rgba(0, 0, 0, 0.8);--n-date-picker-line-height:1.25;--n-date-picker-toggle-height:34px;color:var(--n-color-text);font-size:var(--n-font-size-m);position:relative}.n-input-container{inline-size:fit-content}:host([expand]) .n-input-container{inline-size:100%}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--n-date-picker-toggle-height);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-accent);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input{padding-inline-end:calc(var(--n-space-s) * 1.6 + var(--n-date-picker-toggle-height))}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-dropdown)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-dropdown)}nord-calendar{box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform .4s ease,opacity .4s ease,visibility .4s ease;visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--n-calendar-padding:0}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0;z-index:10}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}`;j.registerIcon(F),j.registerIcon(C);const B=/[^0-9./-]+/g,E=()=>!1;let I=class extends(m(u(h(n)))){constructor(){super(...arguments),this.dismiss=new x(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new y(this,{target:()=>this.dialog,matchesGesture:w,onSwipeEnd:()=>this.hide(!1)}),this.localize=new k(this,{onLangChange:()=>this.createDateFormatters()}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.dateAdapter=L,this.isDateDisabled=E,this.handleDaySelect=e=>{e.stopPropagation(),this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new f("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new f("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,o=e.selectionStart,a=i.slice(0,o),n=i.slice(o,i.length),r=a.replace(t,""),s=r+n.replace(t,""),l=r.length;e.value=s,e.selectionStart=l,e.selectionEnd=l}(t,B),this.dispatchEvent(new f("input"));const i=this.dateAdapter.parse(t.value,v);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return b(this.value)}set valueAsDate(e){this.value=e?g(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?g(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new f("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new f("close")),e&&this.toggleButton.focus()}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"";return o`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${this.name}" .value="${t}" placeholder="${p(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${c(this.focusableRef)} aria-invalid="${p(this.error?"true":void 0)}" aria-describedby="${p(this.getDescribedBy())}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled}" type="button"><nord-icon name="interface-calendar" size="s"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${e?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(e)}</span>`:a}</nord-visually-hidden></button></div>${this.renderError()}<div class="${d({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localize.term("modalHeading")}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?g(e):"",this.dispatchEvent(new f("change"))}};I.styles=[z,$,D,A],e([l(".n-date-toggle",!0)],I.prototype,"toggleButton",void 0),e([l(".n-date-close",!0)],I.prototype,"closeButton",void 0),e([l("nord-calendar",!0)],I.prototype,"calendar",void 0),e([l('[role="dialog"]',!0)],I.prototype,"dialog",void 0),e([s()],I.prototype,"open",void 0),e([r()],I.prototype,"value",void 0),e([r()],I.prototype,"min",void 0),e([r()],I.prototype,"max",void 0),e([r()],I.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],I.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],I.prototype,"dateAdapter",void 0),e([r({attribute:!1})],I.prototype,"isDateDisabled",void 0),I=e([t("nord-date-picker")],I);var O=I;export{O as default};
+import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as i,$ as o,w as a,s as n}from"./lit-element-e382250e.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as l}from"./query-2d22378e.js";import{o as d}from"./class-map-9e39244c.js";import{n as c}from"./ref-adf41565.js";import{l as p}from"./if-defined-4d1db15c.js";import{F as m}from"./FocusableMixin-4c85ced9.js";import{F as h}from"./FormAssociatedMixin-9d38814c.js";import{I as u}from"./InputMixin-84ca72ae.js";import{m as v,p as g,a as b}from"./dates-56f73760.js";import{N as f}from"./events-731d0007.js";import{S as y,i as w}from"./Calendar-73a2fcfd.js";import{L as x}from"./LightDismissController-a2645ae6.js";import{LocalizeController as k}from"./LocalizeController.js";import"./Button.js";import j from"./Icon.js";import"./VisuallyHidden.js";import{s as z}from"./Component-fa316972.js";import{s as $}from"./FormField-44e865a4.js";import{s as D}from"./TextField-f8848f28.js";import{isoAdapter as L}from"./date-adapter.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./number-1c122a1e.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-8b298382.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./collection-800f5002.js";import"./cond-ed8742b5.js";import"./DateSelectEvent.js";import"./ShortcutController-87615e31.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./LightDomController-e0762f0d.js";import"./unsafe-html-76575c49.js";var F=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126v112H7zM35 7v28m70-28v28M7 63h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});var C=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z"/></svg>',title:"interface-close-small",tags:"nordicon interface close remove small cross delete erase symbol"});const A=i`:host{--n-date-picker-color-overlay:rgba(0, 0, 0, 0.8);--n-date-picker-line-height:1.25;--n-date-picker-toggle-height:34px;color:var(--n-color-text);font-size:var(--n-font-size-m);position:relative}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--n-date-picker-toggle-height);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-accent);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input{padding-inline-end:calc(var(--n-space-s) * 1.6 + var(--n-date-picker-toggle-height))}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-dropdown)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-dropdown)}nord-calendar{box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--n-calendar-padding:0}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0;z-index:10}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}`;j.registerIcon(F),j.registerIcon(C);const B=/[^0-9./-]+/g,E=()=>!1;let I=class extends(h(u(m(n)))){constructor(){super(...arguments),this.dismiss=new x(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new y(this,{target:()=>this.dialog,matchesGesture:w,onSwipeEnd:()=>this.hide(!1)}),this.localize=new k(this,{onLangChange:()=>this.createDateFormatters()}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.dateAdapter=L,this.isDateDisabled=E,this.handleDaySelect=e=>{e.stopPropagation(),this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new f("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new f("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,o=e.selectionStart,a=i.slice(0,o),n=i.slice(o,i.length),r=a.replace(t,""),s=r+n.replace(t,""),l=r.length;e.value=s,e.selectionStart=l,e.selectionEnd=l}(t,B),this.dispatchEvent(new f("input"));const i=this.dateAdapter.parse(t.value,v);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return g(this.value)}set valueAsDate(e){this.value=e?b(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?b(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new f("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new f("close")),e&&this.toggleButton.focus()}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"";return o`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${this.name}" .value="${t}" placeholder="${p(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${c(this.focusableRef)} aria-invalid="${p(this.error?"true":void 0)}" aria-describedby="${p(this.getDescribedBy())}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled}" type="button"><nord-icon name="interface-calendar" size="s"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${e?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(e)}</span>`:a}</nord-visually-hidden></button></div>${this.renderError()}<div class="${d({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localize.term("modalHeading")}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?b(e):"",this.dispatchEvent(new f("change"))}};I.styles=[z,$,D,A],e([l(".n-date-toggle",!0)],I.prototype,"toggleButton",void 0),e([l(".n-date-close",!0)],I.prototype,"closeButton",void 0),e([l("nord-calendar",!0)],I.prototype,"calendar",void 0),e([l('[role="dialog"]',!0)],I.prototype,"dialog",void 0),e([s()],I.prototype,"open",void 0),e([r()],I.prototype,"value",void 0),e([r()],I.prototype,"min",void 0),e([r()],I.prototype,"max",void 0),e([r()],I.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],I.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],I.prototype,"dateAdapter",void 0),e([r({attribute:!1})],I.prototype,"isDateDisabled",void 0),I=e([t("nord-date-picker")],I);var O=I;export{O as default};
 //# sourceMappingURL=DatePicker.js.map

package/lib/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../../icons/lib/assets/interface-close-small.js","../src/date-picker/DatePicker.ts","../src/common/input.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 21h126v112H7zM35 7v28m70-28v28M7 63h126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z\"/></svg>'\nexport const title = \"interface-close-small\"\nexport const tags = \"nordicon interface close remove small cross delete erase symbol\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport \"../button/Button.js\"\nimport type Button from \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport \"../calendar/Calendar.js\"\nimport { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DateDisabledPredicate } from \"../calendar/Calendar.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst DISALLOWED_CHARACTERS = /[^0-9./-]+/g\nconst isDateDisabled = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status ready\n * @category form\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(`.n-date-toggle`, true) private toggleButton!: Button\n  @query(`.n-date-close`, true) private closeButton!: HTMLButtonElement\n  @query(`nord-calendar`, true) private calendar!: Calendar\n  @query(`[role=\"dialog\"]`, true) private dialog!: HTMLElement\n\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this.calendar && node !== this.toggleButton,\n  })\n\n  private swipe = new SwipeController(this, {\n    target: () => this.dialog,\n    matchesGesture: isDownwardsSwipe,\n    onSwipeEnd: () => this.hide(false),\n  })\n\n  private localize = new LocalizeController<\"nord-date-picker\">(this, {\n    onLangChange: () => this.createDateFormatters(),\n  })\n\n  /**\n   * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n   * these are used to format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong!: Intl.DateTimeFormat\n\n  @state() private open = false\n\n  /**\n   * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = \"\"\n\n  get valueAsDate(): Date | undefined {\n    return parseISODate(this.value)\n  }\n\n  /**\n   * Get/set the value of the picker as a Date object.\n   */\n  set valueAsDate(date: Date | undefined) {\n    this.value = date ? printISODate(date) : \"\"\n  }\n\n  get valueAsNumber(): number {\n    return this.valueAsDate?.getTime() ?? NaN\n  }\n\n  /**\n   * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n   */\n  set valueAsNumber(date: number) {\n    this.value = date ? printISODate(new Date(date)) : \"\"\n  }\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @property() min: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @property() max: string = \"\"\n\n  /**\n   * Forces the opening direction of the calendar modal to be always left or right.\n   * This setting can be useful when the input is smaller than the opening date picker\n   * would be as by default the picker always opens towards right.\n   */\n  @property() direction: \"left\" | \"right\" = \"right\"\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @property({ attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   * Default is IS0-8601 parsing and formatting.\n   */\n  @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @property({ attribute: false }) isDateDisabled: DateDisabledPredicate = isDateDisabled\n\n  /**\n   * Show the calendar modal, moving focus to the calendar inside.\n   */\n  show() {\n    this.open = true\n    /**\n     * Dispatched when the calendar is toggled open.\n     */\n    this.dispatchEvent(new NordEvent(\"open\"))\n\n    // we should only focus once the calendar is visible after render is complete\n    this.updateComplete.then(() => this.calendar.focus({ target: \"month\" }))\n  }\n\n  /**\n   * Hide the calendar modal.\n   * @param {boolean} moveFocusToButton controls whether focus should be returned to the date picker's button.\n   */\n  hide(moveFocusToButton = true) {\n    this.open = false\n    /**\n     * Dispatched when the calendar is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.toggleButton.focus()\n    }\n  }\n\n  render() {\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <input\n          class=\"n-input\"\n          name=${this.name}\n          .value=${formattedDate}\n          placeholder=${ifDefined(this.placeholder)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-autocomplete=\"none\"\n          @input=${this.handleInputChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          autocomplete=\"off\"\n          ${ref(this.focusableRef)}\n          aria-invalid=${ifDefined(this.error ? \"true\" : undefined)}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n        />\n        <button class=\"n-date-toggle\" @click=${this.toggleOpen} ?disabled=${this.disabled} type=\"button\">\n          <nord-icon name=\"interface-calendar\" size=\"s\"></nord-icon>\n          <nord-visually-hidden>\n            ${this.localize.term(\"buttonLabel\")}\n            ${valueAsDate\n              ? html`\n                  <span>\n                    , ${this.localize.term(\"selectedDateMessage\")} ${this.dateFormatLong.format(valueAsDate)}\n                  </span>\n                `\n              : nothing}\n          </nord-visually-hidden>\n        </button>\n      </div>\n\n      ${this.renderError()}\n\n      <div\n        class=${classMap({\n          \"is-left\": this.direction === \"left\",\n          \"is-active\": this.open,\n        })}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n        aria-labelledby=\"dialog-header\"\n      >\n        <div class=\"n-date-dialog-content\">\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n          <div class=\"n-date-mobile\">\n            <div class=\"n-date-mobile-heading\" id=\"dialog-header\">${this.localize.term(\"modalHeading\")}</div>\n            <button class=\"n-date-close\" @click=${this.hide} type=\"button\">\n              <nord-icon color=\"var(--n-color-icon)\" name=\"interface-close-small\" size=\"xs\"></nord-icon>\n              <nord-visually-hidden>${this.localize.term(\"closeLabel\")}</nord-visually-hidden>\n            </button>\n          </div>\n          <nord-calendar\n            value=${this.value}\n            min=${this.min}\n            max=${this.max}\n            .firstDayOfWeek=${this.firstDayOfWeek}\n            .isDateDisabled=${this.isDateDisabled}\n            @change=${this.handleDaySelect}\n          ></nord-calendar>\n\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n        </div>\n      </div>\n    `\n  }\n\n  private createDateFormatters() {\n    this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n      day: \"numeric\",\n      month: \"long\",\n      year: \"numeric\",\n    })\n  }\n\n  private focusFirst() {\n    this.closeButton.focus()\n  }\n\n  private focusLast() {\n    this.calendar.focus({ target: \"day\" })\n  }\n\n  private handleDaySelect = (e: DateSelectEvent) => {\n    e.stopPropagation()\n    this.setValue(e.date)\n    this.hide()\n  }\n\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n\n    if (this.open) {\n      this.hide(false)\n    } else {\n      this.show()\n    }\n  }\n\n  private handleBlur = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"blur\"))\n  }\n\n  private handleFocus = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"focus\"))\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    cleanValue(target, DISALLOWED_CHARACTERS)\n    this.dispatchEvent(new NordEvent(\"input\"))\n\n    const parsed = this.dateAdapter.parse(target.value, createDate)\n    if (parsed || target.value === \"\") {\n      this.setValue(parsed)\n    }\n  }\n\n  private setValue(date?: Date) {\n    this.value = date ? printISODate(date) : \"\"\n    this.dispatchEvent(new NordEvent(\"change\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-date-picker\": DatePicker\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n  const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","DISALLOWED_CHARACTERS","isDateDisabled","DatePicker","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","dismiss","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","calendar","toggleButton","swipe","SwipeController","target","dialog","matchesGesture","isDownwardsSwipe","onSwipeEnd","localize","LocalizeController","onLangChange","createDateFormatters","value","min","max","direction","firstDayOfWeek","dateAdapter","isoAdapter","handleDaySelect","stopPropagation","setValue","date","toggleOpen","preventDefault","show","handleBlur","event","dispatchEvent","NordEvent","handleFocus","handleInputChange","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","parsed","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","_b","_a","getTime","NaN","Date","updateComplete","then","focus","moveFocusToButton","render","formattedDate","format","html","renderLabel","name","ifDefined","placeholder","inputId","disabled","required","ref","focusableRef","error","undefined","getDescribedBy","term","dateFormatLong","nothing","renderError","classMap","focusLast","focusFirst","Intl","DateTimeFormat","resolvedLang","day","month","year","closeButton","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","state","property","attribute","Number","customElement"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../../icons/lib/assets/interface-close-small.js","../src/date-picker/DatePicker.ts","../src/common/input.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 21h126v112H7zM35 7v28m70-28v28M7 63h126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z\"/></svg>'\nexport const title = \"interface-close-small\"\nexport const tags = \"nordicon interface close remove small cross delete erase symbol\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport \"../button/Button.js\"\nimport type Button from \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport \"../calendar/Calendar.js\"\nimport { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DateDisabledPredicate } from \"../calendar/Calendar.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst DISALLOWED_CHARACTERS = /[^0-9./-]+/g\nconst isDateDisabled = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status ready\n * @category form\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(`.n-date-toggle`, true) private toggleButton!: Button\n  @query(`.n-date-close`, true) private closeButton!: HTMLButtonElement\n  @query(`nord-calendar`, true) private calendar!: Calendar\n  @query(`[role=\"dialog\"]`, true) private dialog!: HTMLElement\n\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this.calendar && node !== this.toggleButton,\n  })\n\n  private swipe = new SwipeController(this, {\n    target: () => this.dialog,\n    matchesGesture: isDownwardsSwipe,\n    onSwipeEnd: () => this.hide(false),\n  })\n\n  private localize = new LocalizeController<\"nord-date-picker\">(this, {\n    onLangChange: () => this.createDateFormatters(),\n  })\n\n  /**\n   * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n   * these are used to format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong!: Intl.DateTimeFormat\n\n  @state() private open = false\n\n  /**\n   * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = \"\"\n\n  get valueAsDate(): Date | undefined {\n    return parseISODate(this.value)\n  }\n\n  /**\n   * Get/set the value of the picker as a Date object.\n   */\n  set valueAsDate(date: Date | undefined) {\n    this.value = date ? printISODate(date) : \"\"\n  }\n\n  get valueAsNumber(): number {\n    return this.valueAsDate?.getTime() ?? NaN\n  }\n\n  /**\n   * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n   */\n  set valueAsNumber(date: number) {\n    this.value = date ? printISODate(new Date(date)) : \"\"\n  }\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @property() min: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @property() max: string = \"\"\n\n  /**\n   * Forces the opening direction of the calendar modal to be always left or right.\n   * This setting can be useful when the input is smaller than the opening date picker\n   * would be as by default the picker always opens towards right.\n   */\n  @property() direction: \"left\" | \"right\" = \"right\"\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @property({ attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   * Default is IS0-8601 parsing and formatting.\n   */\n  @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @property({ attribute: false }) isDateDisabled: DateDisabledPredicate = isDateDisabled\n\n  /**\n   * Show the calendar modal, moving focus to the calendar inside.\n   */\n  show() {\n    this.open = true\n    /**\n     * Dispatched when the calendar is toggled open.\n     */\n    this.dispatchEvent(new NordEvent(\"open\"))\n\n    // we should only focus once the calendar is visible after render is complete\n    this.updateComplete.then(() => this.calendar.focus({ target: \"month\" }))\n  }\n\n  /**\n   * Hide the calendar modal.\n   * @param {boolean} moveFocusToButton controls whether focus should be returned to the date picker's button.\n   */\n  hide(moveFocusToButton = true) {\n    this.open = false\n    /**\n     * Dispatched when the calendar is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.toggleButton.focus()\n    }\n  }\n\n  render() {\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <input\n          class=\"n-input\"\n          name=${this.name}\n          .value=${formattedDate}\n          placeholder=${ifDefined(this.placeholder)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-autocomplete=\"none\"\n          @input=${this.handleInputChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          autocomplete=\"off\"\n          ${ref(this.focusableRef)}\n          aria-invalid=${ifDefined(this.error ? \"true\" : undefined)}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n        />\n        <button class=\"n-date-toggle\" @click=${this.toggleOpen} ?disabled=${this.disabled} type=\"button\">\n          <nord-icon name=\"interface-calendar\" size=\"s\"></nord-icon>\n          <nord-visually-hidden>\n            ${this.localize.term(\"buttonLabel\")}\n            ${valueAsDate\n              ? html`\n                  <span>\n                    , ${this.localize.term(\"selectedDateMessage\")} ${this.dateFormatLong.format(valueAsDate)}\n                  </span>\n                `\n              : nothing}\n          </nord-visually-hidden>\n        </button>\n      </div>\n\n      ${this.renderError()}\n\n      <div\n        class=${classMap({\n          \"is-left\": this.direction === \"left\",\n          \"is-active\": this.open,\n        })}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n        aria-labelledby=\"dialog-header\"\n      >\n        <div class=\"n-date-dialog-content\">\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n          <div class=\"n-date-mobile\">\n            <div class=\"n-date-mobile-heading\" id=\"dialog-header\">${this.localize.term(\"modalHeading\")}</div>\n            <button class=\"n-date-close\" @click=${this.hide} type=\"button\">\n              <nord-icon color=\"var(--n-color-icon)\" name=\"interface-close-small\" size=\"xs\"></nord-icon>\n              <nord-visually-hidden>${this.localize.term(\"closeLabel\")}</nord-visually-hidden>\n            </button>\n          </div>\n          <nord-calendar\n            value=${this.value}\n            min=${this.min}\n            max=${this.max}\n            .firstDayOfWeek=${this.firstDayOfWeek}\n            .isDateDisabled=${this.isDateDisabled}\n            @change=${this.handleDaySelect}\n          ></nord-calendar>\n\n          <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n        </div>\n      </div>\n    `\n  }\n\n  private createDateFormatters() {\n    this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n      day: \"numeric\",\n      month: \"long\",\n      year: \"numeric\",\n    })\n  }\n\n  private focusFirst() {\n    this.closeButton.focus()\n  }\n\n  private focusLast() {\n    this.calendar.focus({ target: \"day\" })\n  }\n\n  private handleDaySelect = (e: DateSelectEvent) => {\n    e.stopPropagation()\n    this.setValue(e.date)\n    this.hide()\n  }\n\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n\n    if (this.open) {\n      this.hide(false)\n    } else {\n      this.show()\n    }\n  }\n\n  private handleBlur = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"blur\"))\n  }\n\n  private handleFocus = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"focus\"))\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    // clean up any invalid characters\n    cleanValue(target, DISALLOWED_CHARACTERS)\n    this.dispatchEvent(new NordEvent(\"input\"))\n\n    const parsed = this.dateAdapter.parse(target.value, createDate)\n    if (parsed || target.value === \"\") {\n      this.setValue(parsed)\n    }\n  }\n\n  private setValue(date?: Date) {\n    this.value = date ? printISODate(date) : \"\"\n    this.dispatchEvent(new NordEvent(\"change\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-date-picker\": DatePicker\n  }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n  const { value } = inputEl\n  const cursor = inputEl.selectionStart as number\n\n  const beforeCursor = value.slice(0, cursor)\n  const afterCursor = value.slice(cursor, value.length)\n\n  const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n  const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n  const newValue = filteredBeforeCursor + filterAfterCursor\n  const newCursor = filteredBeforeCursor.length\n\n  inputEl.value = newValue\n  inputEl.selectionStart = newCursor\n  inputEl.selectionEnd = newCursor\n\n  return newValue\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","DISALLOWED_CHARACTERS","isDateDisabled","DatePicker","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","dismiss","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","calendar","toggleButton","swipe","SwipeController","target","dialog","matchesGesture","isDownwardsSwipe","onSwipeEnd","localize","LocalizeController","onLangChange","createDateFormatters","value","min","max","direction","firstDayOfWeek","dateAdapter","isoAdapter","handleDaySelect","stopPropagation","setValue","date","toggleOpen","preventDefault","show","handleBlur","event","dispatchEvent","NordEvent","handleFocus","handleInputChange","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","parsed","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","_b","_a","getTime","NaN","Date","updateComplete","then","focus","moveFocusToButton","render","formattedDate","format","html","renderLabel","name","ifDefined","placeholder","inputId","disabled","required","ref","focusableRef","error","undefined","getDescribedBy","term","dateFormatLong","nothing","renderError","classMap","focusLast","focusFirst","Intl","DateTimeFormat","resolvedLang","day","month","year","closeButton","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","state","property","attribute","Number","customElement"],"mappings":"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"}

package/lib/Dropdown.js

@@ -1,2 +1,2 @@
-import{_ as o,n as e}from"./query-assigned-elements-ef860822.js";import{r as t,s as n,$ as r}from"./lit-element-99bdfe5a.js";import{e as s}from"./property-03f59dce.js";import{i as d}from"./query-2d22378e.js";import{l as p}from"./if-defined-ee2efb2f.js";import{s as a}from"./Component-6bf383d6.js";const i=t`:host{--n-dropdown-item-margin:0 var(--n-space-s);--n-dropdown-group-margin:0 0 var(--n-space-s)}::slotted(nord-dropdown-group){border-block-end:1px solid var(--n-color-border);padding:0 var(--n-space-s) var(--n-space-s);margin:0 0 var(--n-space-s)}::slotted(nord-dropdown-group:last-child){border:0;padding:0 var(--n-space-s);margin:0}.n-dropdown-content{padding:var(--n-space-s) 0}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}`;let l=class extends n{constructor(){super(...arguments),this.expand=!1}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]')||void 0;null==o||o.setAttribute("aria-haspopup","true")}render(){return r`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${p(this.align)}" position="${p(this.position)}" @open="${this.handleOpen}"><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(){var o;null===(o=this.querySelector("nord-dropdown-item"))||void 0===o||o.focus()}};l.styles=[a,i],l.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([d("nord-popout",!0)],l.prototype,"popout",void 0),o([s({reflect:!0})],l.prototype,"align",void 0),o([s({reflect:!0})],l.prototype,"position",void 0),o([s({reflect:!0,type:Boolean})],l.prototype,"expand",void 0),l=o([e("nord-dropdown")],l);var c=l;export{c as default};
+import{_ as o,n as e}from"./query-assigned-elements-ef860822.js";import{r as t,s as n,$ as r}from"./lit-element-e382250e.js";import{e as s}from"./property-03f59dce.js";import{i as d}from"./query-2d22378e.js";import{l as p}from"./if-defined-4d1db15c.js";import{s as a}from"./Component-fa316972.js";const i=t`:host{--n-dropdown-item-margin:0 var(--n-space-s);--n-dropdown-group-margin:0 0 var(--n-space-s)}::slotted(nord-dropdown-group){border-block-end:1px solid var(--n-color-border);padding:0 var(--n-space-s) var(--n-space-s);margin:0 0 var(--n-space-s)}::slotted(nord-dropdown-group:last-child){border:0;padding:0 var(--n-space-s);margin:0}.n-dropdown-content{padding:var(--n-space-s) 0}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:80vh;overflow:scroll}}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}`;let l=class extends n{constructor(){super(...arguments),this.expand=!1}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]')||void 0;null==o||o.setAttribute("aria-haspopup","true")}render(){return r`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${p(this.align)}" position="${p(this.position)}" @open="${this.handleOpen}"><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(){var o;null===(o=this.querySelector("nord-dropdown-item"))||void 0===o||o.focus()}};l.styles=[a,i],l.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([d("nord-popout",!0)],l.prototype,"popout",void 0),o([s({reflect:!0})],l.prototype,"align",void 0),o([s({reflect:!0})],l.prototype,"position",void 0),o([s({reflect:!0,type:Boolean})],l.prototype,"expand",void 0),l=o([e("nord-dropdown")],l);var c=l;export{c as default};
 //# sourceMappingURL=Dropdown.js.map

package/lib/Dropdown.js.map

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

package/lib/DropdownGroup.js

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

package/lib/DropdownGroup.js.map

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

package/lib/DropdownItem.js

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

package/lib/DropdownItem.js.map

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

package/lib/EmptyState.js

@@ -1,2 +1,2 @@
-import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as n,s as a,$ as o}from"./lit-element-99bdfe5a.js";import{s as r}from"./Component-6bf383d6.js";const i=n`:host{background:var(--n-color-surface);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-empty-state{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:var(--n-space-xl)}@media (max-width:500px){.n-empty-state{padding:var(--n-space-l) var(--n-space-m)}}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){color:var(--n-color-text)!important;margin:0 0 var(--n-space-m)!important;font-weight:var(--n-font-weight-heading)!important;font-size:var(--n-font-size-xl)!important;line-height:var(--n-line-height-heading)!important}::slotted(p){margin:0 0 var(--n-space-l)!important;font-size:var(--n-font-size-m)!important;color:var(--n-color-text-weaker)!important;line-height:var(--n-line-height)!important;max-inline-size:var(--n-empty-state-text-width,400px)}`;let s=class extends a{render(){return o`<div class="n-empty-state"><slot></slot></div>`}};s.styles=[r,i],s=t([e("nord-empty-state")],s);var l=s;export{l as default};
+import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as n,s as a,$ as o}from"./lit-element-e382250e.js";import{s as r}from"./Component-fa316972.js";const i=n`:host{background:var(--n-color-surface);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-empty-state{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:var(--n-space-xl)}@media (max-width:500px){.n-empty-state{padding:var(--n-space-l) var(--n-space-m)}}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){color:var(--n-color-text)!important;margin:0 0 var(--n-space-m)!important;font-weight:var(--n-font-weight-heading)!important;font-size:var(--n-font-size-xl)!important;line-height:var(--n-line-height-heading)!important}::slotted(p){margin:0 0 var(--n-space-l)!important;font-size:var(--n-font-size-m)!important;color:var(--n-color-text-weaker)!important;line-height:var(--n-line-height)!important;max-inline-size:var(--n-empty-state-text-width,400px)}`;let s=class extends a{render(){return o`<div class="n-empty-state"><slot></slot></div>`}};s.styles=[r,i],s=t([e("nord-empty-state")],s);var l=s;export{l as default};
 //# sourceMappingURL=EmptyState.js.map

package/lib/Fieldset.js

@@ -1,2 +1,2 @@
-import{_ as e,n as r}from"./query-assigned-elements-ef860822.js";import{r as t,s as o,$ as s}from"./lit-element-99bdfe5a.js";import{e as n}from"./property-03f59dce.js";import{S as i}from"./SlotController-ea6eff46.js";import{c as l}from"./cond-a3e00141.js";import{s as a}from"./Component-6bf383d6.js";import{s as d}from"./FormField-900069ed.js";import"./EventController-d99ebeef.js";const h=t`fieldset{border:none}.n-label-container{margin-block-end:var(--n-space-s)}`;let m=class extends o{constructor(){super(...arguments),this.errorSlot=new i(this,"error"),this.hintSlot=new i(this,"hint"),this.label=""}render(){const{hasError:e}=this;return s`<fieldset aria-invalid="${l(e,"true")}" aria-describedby="${l(e,"error")}"><legend class="n-label-container"><slot class="n-label" name="label">${this.label}</slot><div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div></legend><slot></slot><div class="n-caption n-error" id="error" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div></fieldset>`}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}};m.styles=[a,d,h],e([n()],m.prototype,"label",void 0),e([n()],m.prototype,"hint",void 0),e([n()],m.prototype,"error",void 0),m=e([r("nord-fieldset")],m);var p=m;export{p as default};
+import{_ as e,n as r}from"./query-assigned-elements-ef860822.js";import{r as t,s as o,$ as s}from"./lit-element-e382250e.js";import{e as n}from"./property-03f59dce.js";import{S as i}from"./SlotController-ea6eff46.js";import{c as l}from"./cond-ed8742b5.js";import{s as a}from"./Component-fa316972.js";import{s as d}from"./FormField-44e865a4.js";import"./EventController-d99ebeef.js";const h=t`fieldset{border:none}.n-label-container{margin-block-end:var(--n-space-s)}`;let m=class extends o{constructor(){super(...arguments),this.errorSlot=new i(this,"error"),this.hintSlot=new i(this,"hint"),this.label=""}render(){const{hasError:e}=this;return s`<fieldset aria-invalid="${l(e,"true")}" aria-describedby="${l(e,"error")}"><legend class="n-label-container"><slot class="n-label" name="label">${this.label}</slot><div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div></legend><slot></slot><div class="n-caption n-error" id="error" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div></fieldset>`}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}};m.styles=[a,d,h],e([n()],m.prototype,"label",void 0),e([n()],m.prototype,"hint",void 0),e([n()],m.prototype,"error",void 0),m=e([r("nord-fieldset")],m);var p=m;export{p as default};
 //# sourceMappingURL=Fieldset.js.map

package/lib/FocusableMixin-4c85ced9.js

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

package/lib/{FocusableMixin-c010d3b3.js.map → FocusableMixin-4c85ced9.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FocusableMixin-c010d3b3.js","sources":["../src/common/mixins/FocusableMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\n\nimport { LitElement } from \"lit\"\nimport { createRef, Ref } from \"lit/directives/ref.js\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FocusableMixinInterface {\n  protected focusableRef: Ref<HTMLElement>\n  focus(options?: FocusOptions): void\n  blur(): void\n  click(): void\n}\n\nexport function FocusableMixin<T extends Constructable<LitElement>>(superClass: T) {\n  class FocusableElement extends superClass {\n    protected focusableRef = createRef<HTMLButtonElement>()\n\n    /**\n     * Programmatically move focus to the component.\n     * @param {FocusOptions} options An object which controls aspects of the focusing process.\n     */\n    focus(options?: FocusOptions) {\n      this.focusableRef.value?.focus(options)\n    }\n\n    /**\n     * Programmatically remove focus from the component.\n     */\n    blur() {\n      this.focusableRef.value?.blur()\n    }\n\n    /**\n     * Programmatically simulates a click on the component.\n     */\n    click() {\n      this.focusableRef.value?.click()\n    }\n  }\n\n  return FocusableElement as unknown as Constructable<FocusableMixinInterface> & T\n}\n"],"names":["FocusableMixin","superClass","constructor","this","focusableRef","createRef","focus","options","_a","value","blur","click"],"mappings":"iCAcM,SAAUA,EAAoDC,GA2BlE,OA1BA,cAA+BA,EAA/BC,kCACYC,KAAYC,aAAGC,IAMzBC,MAAMC,iBACJC,EAAAL,KAAKC,aAAaK,sBAAOH,MAAMC,GAMjCG,aAC2B,QAAzBF,EAAAL,KAAKC,aAAaK,aAAO,IAAAD,GAAAA,EAAAE,OAM3BC,cAC2B,QAAzBH,EAAAL,KAAKC,aAAaK,aAAO,IAAAD,GAAAA,EAAAG"}
+{"version":3,"file":"FocusableMixin-4c85ced9.js","sources":["../src/common/mixins/FocusableMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\n\nimport { LitElement } from \"lit\"\nimport { createRef, Ref } from \"lit/directives/ref.js\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FocusableMixinInterface {\n  protected focusableRef: Ref<HTMLElement>\n  focus(options?: FocusOptions): void\n  blur(): void\n  click(): void\n}\n\nexport function FocusableMixin<T extends Constructable<LitElement>>(superClass: T) {\n  class FocusableElement extends superClass {\n    protected focusableRef = createRef<HTMLButtonElement>()\n\n    /**\n     * Programmatically move focus to the component.\n     * @param {FocusOptions} options An object which controls aspects of the focusing process.\n     */\n    focus(options?: FocusOptions) {\n      this.focusableRef.value?.focus(options)\n    }\n\n    /**\n     * Programmatically remove focus from the component.\n     */\n    blur() {\n      this.focusableRef.value?.blur()\n    }\n\n    /**\n     * Programmatically simulates a click on the component.\n     */\n    click() {\n      this.focusableRef.value?.click()\n    }\n  }\n\n  return FocusableElement as unknown as Constructable<FocusableMixinInterface> & T\n}\n"],"names":["FocusableMixin","superClass","constructor","this","focusableRef","createRef","focus","options","_a","value","blur","click"],"mappings":"sCAcM,SAAUA,EAAoDC,GA2BlE,OA1BA,cAA+BA,EAA/BC,kCACYC,KAAYC,aAAGC,IAMzBC,MAAMC,iBACJC,EAAAL,KAAKC,aAAaK,sBAAOH,MAAMC,GAMjCG,aAC2B,QAAzBF,EAAAL,KAAKC,aAAaK,aAAO,IAAAD,GAAAA,EAAAE,OAM3BC,cAC2B,QAAzBH,EAAAL,KAAKC,aAAaK,aAAO,IAAAD,GAAAA,EAAAG"}

package/lib/{FormAssociatedMixin-f69a60dd.js → FormAssociatedMixin-9d38814c.js}

@@ -1,2 +1,2 @@
-import{_ as t}from"./query-assigned-elements-ef860822.js";import{$ as e}from"./lit-element-99bdfe5a.js";import{e as r}from"./property-03f59dce.js";import{E as o}from"./EventController-d99ebeef.js";import{S as i}from"./SlotController-ea6eff46.js";import{N as s}from"./events-731d0007.js";import"./VisuallyHidden.js";class n{constructor(t,e){this.host=t,this.options=e,this.handleFormData=t=>{const{disabled:e,name:r}=this.host;if(e)return;const o=this.options.value();r&&null!=o&&t.formData.append(r,o)},t.addController(this),this.events=new o(t)}hostConnected(){this.host.form&&this.events.listen(this.host.form,"formdata",this.handleFormData)}}function h(o){class h extends o{constructor(){super(...arguments),this.labelSlot=new i(this,"label"),this.errorSlot=new i(this,"error"),this.hintSlot=new i(this,"hint"),this.formData=new n(this,{value:()=>this.formValue}),this.inputId="input",this.errorId="error",this.hintId="hint",this.label="",this.hideLabel=!1,this.required=!1,this.expand=!1}get formValue(){return this.value}handleInput(t){t.stopPropagation();const e=t.target;this.value=e.value,this.dispatchEvent(new s("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new s("change"))}renderLabel(){const t=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot></label><div class="n-caption n-hint" id="${this.hintId}" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div>`;return this.hideLabel?e`<nord-visually-hidden>${t}</nord-visually-hidden>`:e`<div class="n-label-container">${t}</div>`}renderError(){return e`<div class="n-caption n-error" id="${this.errorId}" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div>`}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?`${this.hintId} ${this.errorId}`:t?this.hintId:e?this.errorId:void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}}return t([r()],h.prototype,"label",void 0),t([r()],h.prototype,"hint",void 0),t([r({type:Boolean,attribute:"hide-label"})],h.prototype,"hideLabel",void 0),t([r()],h.prototype,"placeholder",void 0),t([r()],h.prototype,"error",void 0),t([r({type:Boolean})],h.prototype,"required",void 0),t([r({reflect:!0,type:Boolean})],h.prototype,"expand",void 0),h}export{h as F};
-//# sourceMappingURL=FormAssociatedMixin-f69a60dd.js.map
+import{_ as t}from"./query-assigned-elements-ef860822.js";import{$ as e}from"./lit-element-e382250e.js";import{e as r}from"./property-03f59dce.js";import{E as o}from"./EventController-d99ebeef.js";import{S as i}from"./SlotController-ea6eff46.js";import{N as s}from"./events-731d0007.js";import"./VisuallyHidden.js";class n{constructor(t,e){this.host=t,this.options=e,this.handleFormData=t=>{const{disabled:e,name:r}=this.host;if(e)return;const o=this.options.value();r&&null!=o&&t.formData.append(r,o)},t.addController(this),this.events=new o(t)}hostConnected(){this.host.form&&this.events.listen(this.host.form,"formdata",this.handleFormData)}}function h(o){class h extends o{constructor(){super(...arguments),this.labelSlot=new i(this,"label"),this.errorSlot=new i(this,"error"),this.hintSlot=new i(this,"hint"),this.formData=new n(this,{value:()=>this.formValue}),this.inputId="input",this.errorId="error",this.hintId="hint",this.label="",this.hideLabel=!1,this.required=!1,this.expand=!1}get formValue(){return this.value}handleInput(t){t.stopPropagation();const e=t.target;this.value=e.value,this.dispatchEvent(new s("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new s("change"))}renderLabel(){const t=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot></label><div class="n-caption n-hint" id="${this.hintId}" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div>`;return this.hideLabel?e`<nord-visually-hidden>${t}</nord-visually-hidden>`:e`<div class="n-label-container">${t}</div>`}renderError(){return e`<div class="n-caption n-error" id="${this.errorId}" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div>`}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?`${this.hintId} ${this.errorId}`:t?this.hintId:e?this.errorId:void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}}return t([r()],h.prototype,"label",void 0),t([r()],h.prototype,"hint",void 0),t([r({type:Boolean,attribute:"hide-label"})],h.prototype,"hideLabel",void 0),t([r()],h.prototype,"placeholder",void 0),t([r()],h.prototype,"error",void 0),t([r({type:Boolean})],h.prototype,"required",void 0),t([r({reflect:!0,type:Boolean})],h.prototype,"expand",void 0),h}export{h as F};
+//# sourceMappingURL=FormAssociatedMixin-9d38814c.js.map

package/lib/{FormAssociatedMixin-f69a60dd.js.map → FormAssociatedMixin-9d38814c.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FormAssociatedMixin-f69a60dd.js","sources":["../src/common/controllers/FormDataController.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\nimport { EventController } from \"./EventController.js\"\n\ntype FormDataOptions = {\n  value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n  private events: EventController\n  constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n    host.addController(this)\n    this.events = new EventController(host)\n  }\n\n  hostConnected() {\n    if (this.host.form) {\n      this.events.listen(this.host.form, \"formdata\", this.handleFormData)\n    }\n  }\n\n  private handleFormData = (e: FormDataEvent) => {\n    const { disabled, name } = this.host\n\n    if (disabled) {\n      return\n    }\n\n    const value = this.options.value()\n\n    if (name && value != null) {\n      e.formData.append(name, value)\n    }\n  }\n}\n","/* eslint-disable max-classes-per-file */\nimport { html, LitElement, TemplateResult } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { FormDataController } from \"../controllers/FormDataController.js\"\nimport { SlotController } from \"../controllers/SlotController.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\nimport \"../../visually-hidden/VisuallyHidden.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n  label: string\n  required: boolean\n  hint?: string\n  hideLabel: boolean\n  placeholder?: string\n  error?: string\n  expand: boolean\n\n  protected inputId: string\n  protected errorId: string\n  protected hintId: string\n  protected labelSlot: SlotController\n  protected hintSlot: SlotController\n  protected errorSlot: SlotController\n  protected formData: FormDataController\n\n  protected get formValue(): string | undefined\n  protected get hasError(): boolean\n  protected get hasHint(): boolean\n\n  protected handleChange(e: Event): void\n  protected handleInput(e: Event): void\n  protected renderLabel(): TemplateResult\n  protected renderError(): TemplateResult\n  protected getDescribedBy(): string | undefined\n  protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n  // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n  /**\n   * @slot label - Use when a label requires more than plain text.\n   * @slot hint - Use when a hint requires more than plain text.\n   * @slot error - Optional slot that holds error text for the input.\n   */\n  class FormAssociatedElement extends superClass {\n    protected labelSlot = new SlotController(this, \"label\")\n    protected errorSlot = new SlotController(this, \"error\")\n    protected hintSlot = new SlotController(this, \"hint\")\n    protected formData = new FormDataController(this, { value: () => this.formValue })\n\n    protected get formValue() {\n      return this.value\n    }\n\n    protected inputId = \"input\"\n    protected errorId = \"error\"\n    protected hintId = \"hint\"\n\n    /**\n     * Label for the input.\n     */\n    @property() label: string = \"\"\n\n    /**\n     * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n     */\n    @property() hint?: string\n\n    /**\n     * Visually hide the label, but still show it to assistive technologies like screen readers.\n     */\n    @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n    /**\n     * Placeholder text to display within the input.\n     */\n    @property() placeholder?: string\n\n    /**\n     * Optional error to be shown with the input. Alternatively use the error slot.\n     */\n    @property() error?: string\n\n    /**\n     * Determines whether the input is required or not.\n     * An input marked as required will be announced as such to users of assistive technology.\n     * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n     */\n    @property({ type: Boolean }) required = false\n\n    /**\n     * Controls whether the input expands to fill the width of its container.\n     */\n    @property({ reflect: true, type: Boolean }) expand = false\n\n    protected handleInput(e: Event) {\n      e.stopPropagation()\n      const target = e.target as NativeInputElement\n      this.value = target.value\n\n      /**\n       * Fired as the user types into the input.\n       */\n      this.dispatchEvent(new NordEvent(\"input\"))\n    }\n\n    protected handleChange(e: Event) {\n      e.stopPropagation()\n\n      /**\n       * Fired whenever the input's value is changed via user interaction.\n       */\n      this.dispatchEvent(new NordEvent(\"change\"))\n    }\n\n    protected renderLabel() {\n      const label = html`\n        <label for=${this.inputId}>\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n          <slot name=\"hint\">${this.hint}</slot>\n        </div>\n      `\n\n      return this.hideLabel\n        ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n        : html`<div class=\"n-label-container\">${label}</div>`\n    }\n\n    protected renderError() {\n      return html`\n        <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n          <slot name=\"error\">${this.error}</slot>\n        </div>\n      `\n    }\n\n    protected getDescribedBy() {\n      const { hasHint, hasError } = this\n\n      if (hasHint && hasError) {\n        return `${this.hintId} ${this.errorId}`\n      }\n      if (hasHint) {\n        return this.hintId\n      }\n      if (hasError) {\n        return this.errorId\n      }\n\n      return undefined\n    }\n\n    protected getInvalid() {\n      return this.hasError ? \"true\" : undefined\n    }\n\n    protected get hasHint() {\n      return Boolean(this.hint) || this.hintSlot.hasContent\n    }\n\n    protected get hasError() {\n      return Boolean(this.error) || this.errorSlot.hasContent\n    }\n  }\n\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormDataController","constructor","host","options","this","handleFormData","e","disabled","name","value","formData","append","addController","events","EventController","hostConnected","form","listen","FormAssociatedMixin","superClass","FormAssociatedElement","labelSlot","SlotController","errorSlot","hintSlot","formValue","inputId","errorId","hintId","label","hideLabel","required","expand","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","prototype","type","attribute","reflect"],"mappings":"iUAQaA,EAEXC,YAAoBC,EAA4DC,GAA5DC,KAAIF,KAAJA,EAA4DE,KAAOD,QAAPA,EAWxEC,KAAAC,eAAkBC,IACxB,MAAMC,SAAEA,EAAQC,KAAEA,GAASJ,KAAKF,KAEhC,GAAIK,EACF,OAGF,MAAME,EAAQL,KAAKD,QAAQM,QAEvBD,GAAiB,MAATC,GACVH,EAAEI,SAASC,OAAOH,EAAMC,IApB1BP,EAAKU,cAAcR,MACnBA,KAAKS,OAAS,IAAIC,EAAgBZ,GAGpCa,gBACMX,KAAKF,KAAKc,MACZZ,KAAKS,OAAOI,OAAOb,KAAKF,KAAKc,KAAM,WAAYZ,KAAKC,iBCwBpD,SAAUa,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApClB,kCACYG,KAASiB,UAAG,IAAIC,EAAelB,KAAM,SACrCA,KAASmB,UAAG,IAAID,EAAelB,KAAM,SACrCA,KAAQoB,SAAG,IAAIF,EAAelB,KAAM,QACpCA,KAAAM,SAAW,IAAIV,EAAmBI,KAAM,CAAEK,MAAO,IAAML,KAAKqB,YAM5DrB,KAAOsB,QAAG,QACVtB,KAAOuB,QAAG,QACVvB,KAAMwB,OAAG,OAKPxB,KAAKyB,MAAW,GAU0BzB,KAAS0B,WAAG,EAiBrC1B,KAAQ2B,UAAG,EAKI3B,KAAM4B,QAAG,EA3CvCP,gBACZ,OAAOrB,KAAKK,MA4CJwB,YAAY3B,GACpBA,EAAE4B,kBACF,MAAMC,EAAS7B,EAAE6B,OACjB/B,KAAKK,MAAQ0B,EAAO1B,MAKpBL,KAAKgC,cAAc,IAAIC,EAAU,UAGzBC,aAAahC,GACrBA,EAAE4B,kBAKF9B,KAAKgC,cAAc,IAAIC,EAAU,WAGzBE,cACR,MAAMV,EAAQW,CAAI,eACHpC,KAAKsB,+BACKtB,KAAKyB,yDAGOzB,KAAKwB,qBAAmBxB,KAAKqC,8BAC1CrC,KAAKsC,oBAI7B,OAAOtC,KAAK0B,UACRU,CAAI,yBAAyBX,2BAC7BW,CAAI,kCAAkCX,UAGlCc,cACR,OAAOH,CAAI,sCAC2BpC,KAAKuB,mCAAiCvB,KAAKwC,gCACxDxC,KAAKyC,qBAKtBC,iBACR,MAAML,QAAEA,EAAOG,SAAEA,GAAaxC,KAE9B,OAAIqC,GAAWG,EACN,GAAGxC,KAAKwB,UAAUxB,KAAKuB,UAE5Bc,EACKrC,KAAKwB,OAEVgB,EACKxC,KAAKuB,aADd,EAOQoB,aACR,OAAO3C,KAAKwC,SAAW,YAASI,EAGpBP,cACZ,OAAOQ,QAAQ7C,KAAKsC,OAAStC,KAAKoB,SAAS0B,WAG/BN,eACZ,OAAOK,QAAQ7C,KAAKyC,QAAUzC,KAAKmB,UAAU2B,YAIjD,OA3GcC,EAAA,CAAXC,KAA6BhC,EAAAiC,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBhC,EAAAiC,UAAA,YAAA,GAK6BF,EAAA,CAArDC,EAAS,CAAEE,KAAML,QAASM,UAAW,gBAAiCnC,EAAAiC,UAAA,iBAAA,GAK3DF,EAAA,CAAXC,KAA+BhC,EAAAiC,UAAA,mBAAA,GAKpBF,EAAA,CAAXC,KAAyBhC,EAAAiC,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAML,WAA2B7B,EAAAiC,UAAA,gBAAA,GAKDF,EAAA,CAA3CC,EAAS,CAAEI,SAAS,EAAMF,KAAML,WAAyB7B,EAAAiC,UAAA,cAAA,GA2ErDjC"}
+{"version":3,"file":"FormAssociatedMixin-9d38814c.js","sources":["../src/common/controllers/FormDataController.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\nimport { EventController } from \"./EventController.js\"\n\ntype FormDataOptions = {\n  value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n  private events: EventController\n  constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n    host.addController(this)\n    this.events = new EventController(host)\n  }\n\n  hostConnected() {\n    if (this.host.form) {\n      this.events.listen(this.host.form, \"formdata\", this.handleFormData)\n    }\n  }\n\n  private handleFormData = (e: FormDataEvent) => {\n    const { disabled, name } = this.host\n\n    if (disabled) {\n      return\n    }\n\n    const value = this.options.value()\n\n    if (name && value != null) {\n      e.formData.append(name, value)\n    }\n  }\n}\n","/* eslint-disable max-classes-per-file */\nimport { html, LitElement, TemplateResult } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { FormDataController } from \"../controllers/FormDataController.js\"\nimport { SlotController } from \"../controllers/SlotController.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\nimport \"../../visually-hidden/VisuallyHidden.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n  label: string\n  required: boolean\n  hint?: string\n  hideLabel: boolean\n  placeholder?: string\n  error?: string\n  expand: boolean\n\n  protected inputId: string\n  protected errorId: string\n  protected hintId: string\n  protected labelSlot: SlotController\n  protected hintSlot: SlotController\n  protected errorSlot: SlotController\n  protected formData: FormDataController\n\n  protected get formValue(): string | undefined\n  protected get hasError(): boolean\n  protected get hasHint(): boolean\n\n  protected handleChange(e: Event): void\n  protected handleInput(e: Event): void\n  protected renderLabel(): TemplateResult\n  protected renderError(): TemplateResult\n  protected getDescribedBy(): string | undefined\n  protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n  // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n  /**\n   * @slot label - Use when a label requires more than plain text.\n   * @slot hint - Use when a hint requires more than plain text.\n   * @slot error - Optional slot that holds error text for the input.\n   */\n  class FormAssociatedElement extends superClass {\n    protected labelSlot = new SlotController(this, \"label\")\n    protected errorSlot = new SlotController(this, \"error\")\n    protected hintSlot = new SlotController(this, \"hint\")\n    protected formData = new FormDataController(this, { value: () => this.formValue })\n\n    protected get formValue() {\n      return this.value\n    }\n\n    protected inputId = \"input\"\n    protected errorId = \"error\"\n    protected hintId = \"hint\"\n\n    /**\n     * Label for the input.\n     */\n    @property() label: string = \"\"\n\n    /**\n     * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n     */\n    @property() hint?: string\n\n    /**\n     * Visually hide the label, but still show it to assistive technologies like screen readers.\n     */\n    @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n    /**\n     * Placeholder text to display within the input.\n     */\n    @property() placeholder?: string\n\n    /**\n     * Optional error to be shown with the input. Alternatively use the error slot.\n     */\n    @property() error?: string\n\n    /**\n     * Determines whether the input is required or not.\n     * An input marked as required will be announced as such to users of assistive technology.\n     * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n     */\n    @property({ type: Boolean }) required = false\n\n    /**\n     * Controls whether the input expands to fill the width of its container.\n     */\n    @property({ reflect: true, type: Boolean }) expand = false\n\n    protected handleInput(e: Event) {\n      e.stopPropagation()\n      const target = e.target as NativeInputElement\n      this.value = target.value\n\n      /**\n       * Fired as the user types into the input.\n       */\n      this.dispatchEvent(new NordEvent(\"input\"))\n    }\n\n    protected handleChange(e: Event) {\n      e.stopPropagation()\n\n      /**\n       * Fired whenever the input's value is changed via user interaction.\n       */\n      this.dispatchEvent(new NordEvent(\"change\"))\n    }\n\n    protected renderLabel() {\n      const label = html`\n        <label for=${this.inputId}>\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n          <slot name=\"hint\">${this.hint}</slot>\n        </div>\n      `\n\n      return this.hideLabel\n        ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n        : html`<div class=\"n-label-container\">${label}</div>`\n    }\n\n    protected renderError() {\n      return html`\n        <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n          <slot name=\"error\">${this.error}</slot>\n        </div>\n      `\n    }\n\n    protected getDescribedBy() {\n      const { hasHint, hasError } = this\n\n      if (hasHint && hasError) {\n        return `${this.hintId} ${this.errorId}`\n      }\n      if (hasHint) {\n        return this.hintId\n      }\n      if (hasError) {\n        return this.errorId\n      }\n\n      return undefined\n    }\n\n    protected getInvalid() {\n      return this.hasError ? \"true\" : undefined\n    }\n\n    protected get hasHint() {\n      return Boolean(this.hint) || this.hintSlot.hasContent\n    }\n\n    protected get hasError() {\n      return Boolean(this.error) || this.errorSlot.hasContent\n    }\n  }\n\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormDataController","constructor","host","options","this","handleFormData","e","disabled","name","value","formData","append","addController","events","EventController","hostConnected","form","listen","FormAssociatedMixin","superClass","FormAssociatedElement","labelSlot","SlotController","errorSlot","hintSlot","formValue","inputId","errorId","hintId","label","hideLabel","required","expand","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","prototype","type","attribute","reflect"],"mappings":"iUAQaA,EAEXC,YAAoBC,EAA4DC,GAA5DC,KAAIF,KAAJA,EAA4DE,KAAOD,QAAPA,EAWxEC,KAAAC,eAAkBC,IACxB,MAAMC,SAAEA,EAAQC,KAAEA,GAASJ,KAAKF,KAEhC,GAAIK,EACF,OAGF,MAAME,EAAQL,KAAKD,QAAQM,QAEvBD,GAAiB,MAATC,GACVH,EAAEI,SAASC,OAAOH,EAAMC,IApB1BP,EAAKU,cAAcR,MACnBA,KAAKS,OAAS,IAAIC,EAAgBZ,GAGpCa,gBACMX,KAAKF,KAAKc,MACZZ,KAAKS,OAAOI,OAAOb,KAAKF,KAAKc,KAAM,WAAYZ,KAAKC,iBCwBpD,SAAUa,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApClB,kCACYG,KAASiB,UAAG,IAAIC,EAAelB,KAAM,SACrCA,KAASmB,UAAG,IAAID,EAAelB,KAAM,SACrCA,KAAQoB,SAAG,IAAIF,EAAelB,KAAM,QACpCA,KAAAM,SAAW,IAAIV,EAAmBI,KAAM,CAAEK,MAAO,IAAML,KAAKqB,YAM5DrB,KAAOsB,QAAG,QACVtB,KAAOuB,QAAG,QACVvB,KAAMwB,OAAG,OAKPxB,KAAKyB,MAAW,GAU0BzB,KAAS0B,WAAG,EAiBrC1B,KAAQ2B,UAAG,EAKI3B,KAAM4B,QAAG,EA3CvCP,gBACZ,OAAOrB,KAAKK,MA4CJwB,YAAY3B,GACpBA,EAAE4B,kBACF,MAAMC,EAAS7B,EAAE6B,OACjB/B,KAAKK,MAAQ0B,EAAO1B,MAKpBL,KAAKgC,cAAc,IAAIC,EAAU,UAGzBC,aAAahC,GACrBA,EAAE4B,kBAKF9B,KAAKgC,cAAc,IAAIC,EAAU,WAGzBE,cACR,MAAMV,EAAQW,CAAI,eACHpC,KAAKsB,+BACKtB,KAAKyB,yDAGOzB,KAAKwB,qBAAmBxB,KAAKqC,8BAC1CrC,KAAKsC,oBAI7B,OAAOtC,KAAK0B,UACRU,CAAI,yBAAyBX,2BAC7BW,CAAI,kCAAkCX,UAGlCc,cACR,OAAOH,CAAI,sCAC2BpC,KAAKuB,mCAAiCvB,KAAKwC,gCACxDxC,KAAKyC,qBAKtBC,iBACR,MAAML,QAAEA,EAAOG,SAAEA,GAAaxC,KAE9B,OAAIqC,GAAWG,EACN,GAAGxC,KAAKwB,UAAUxB,KAAKuB,UAE5Bc,EACKrC,KAAKwB,OAEVgB,EACKxC,KAAKuB,aADd,EAOQoB,aACR,OAAO3C,KAAKwC,SAAW,YAASI,EAGpBP,cACZ,OAAOQ,QAAQ7C,KAAKsC,OAAStC,KAAKoB,SAAS0B,WAG/BN,eACZ,OAAOK,QAAQ7C,KAAKyC,QAAUzC,KAAKmB,UAAU2B,YAIjD,OA3GcC,EAAA,CAAXC,KAA6BhC,EAAAiC,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBhC,EAAAiC,UAAA,YAAA,GAK6BF,EAAA,CAArDC,EAAS,CAAEE,KAAML,QAASM,UAAW,gBAAiCnC,EAAAiC,UAAA,iBAAA,GAK3DF,EAAA,CAAXC,KAA+BhC,EAAAiC,UAAA,mBAAA,GAKpBF,EAAA,CAAXC,KAAyBhC,EAAAiC,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAML,WAA2B7B,EAAAiC,UAAA,gBAAA,GAKDF,EAAA,CAA3CC,EAAS,CAAEI,SAAS,EAAMF,KAAML,WAAyB7B,EAAAiC,UAAA,cAAA,GA2ErDjC"}

package/lib/{FormField-900069ed.js → FormField-44e865a4.js}

@@ -1,2 +1,2 @@
-import{r as n}from"./lit-element-99bdfe5a.js";const t=n`.n-caption,::slotted(.n-caption){font-size:var(--n-font-size-s);line-height:var(--n-line-height-caption)}.n-label-container{padding-block-end:var(--n-space-s);display:inline-block}.n-label,::slotted(label),label{display:block!important;color:var(--n-color-text);font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading);margin:0!important}.n-hint{padding-block-start:calc(var(--n-space-s)/ 2);color:var(--n-color-text-weaker)}.n-error{margin-block-start:var(--n-space-s);color:var(--n-color-text-error)}`;export{t as s};
-//# sourceMappingURL=FormField-900069ed.js.map
+import{r as n}from"./lit-element-e382250e.js";const t=n`.n-caption,::slotted(.n-caption){font-size:var(--n-font-size-s);line-height:var(--n-line-height-caption)}.n-label-container{padding-block-end:var(--n-space-s);display:inline-block}.n-label,::slotted(label),label{display:block!important;color:var(--n-color-text);font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading);margin:0!important}.n-hint{padding-block-start:calc(var(--n-space-s)/ 2);color:var(--n-color-text-weaker)}.n-error{margin-block-start:var(--n-space-s);color:var(--n-color-text-error)}`;export{t as s};
+//# sourceMappingURL=FormField-44e865a4.js.map

package/lib/FormField-44e865a4.js.map

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

package/lib/Header.js

@@ -1,2 +1,2 @@
-import{_ as e,n as o}from"./query-assigned-elements-ef860822.js";import{r,s as n,$ as a}from"./lit-element-99bdfe5a.js";import{S as t}from"./SlotController-ea6eff46.js";import{s}from"./Component-6bf383d6.js";import"./EventController-d99ebeef.js";const d=r`:host{--n-banner-box-shadow:none;font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-end{display:flex;flex-flow:row wrap;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--n-space-m) var(--n-space-l);background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--n-box-shadow-header);min-block-size:var(--n-space-xxl)}.n-header-end{margin-inline-start:auto;gap:var(--n-space-s)}`;let l=class extends n{constructor(){super(...arguments),this.endSlot=new t(this,"end")}render(){return a`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};l.styles=[s,d],l=e([o("nord-header")],l);var i=l;export{i as default};
+import{_ as e,n as o}from"./query-assigned-elements-ef860822.js";import{r,s as n,$ as a}from"./lit-element-e382250e.js";import{S as t}from"./SlotController-ea6eff46.js";import{s}from"./Component-fa316972.js";import"./EventController-d99ebeef.js";const d=r`:host{--n-banner-box-shadow:none;font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-end{display:flex;flex-flow:row wrap;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--n-space-m) var(--n-space-l);background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--n-box-shadow-header);min-block-size:var(--n-space-xxl)}.n-header-end{margin-inline-start:auto;gap:var(--n-space-s)}`;let l=class extends n{constructor(){super(...arguments),this.endSlot=new t(this,"end")}render(){return a`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};l.styles=[s,d],l=e([o("nord-header")],l);var i=l;export{i as default};
 //# sourceMappingURL=Header.js.map

package/lib/Icon.js

@@ -1,2 +1,2 @@
-import{_ as e,n as s}from"./query-assigned-elements-ef860822.js";import{r as i,s as o,$ as t}from"./lit-element-99bdfe5a.js";import{e as r}from"./property-03f59dce.js";import{t as n}from"./state-70f38ceb.js";import{l as a}from"./if-defined-ee2efb2f.js";import{o as c}from"./unsafe-html-feceb926.js";import{o as l}from"./observe-a9c6dfb6.js";import{c as d}from"./cond-a3e00141.js";import{s as h}from"./Component-6bf383d6.js";import"./directive-de55b00a.js";const m=i`:host{--n-icon-size:var(--n-size-icon-m);display:inline-block;block-size:var(--n-icon-size);inline-size:var(--n-icon-size);min-inline-size:var(--n-icon-size)}:host([size=xs]){--n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--n-icon-size:var(--n-size-icon-s)}:host([size="l"]){--n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--n-icon-size:var(--n-size-icon-xxl)}.n-icon{display:block}svg{display:block}`;var p;let v=p=class extends o{constructor(){super(...arguments),this.name="",this.size="m",this.svg=""}static registerResolver(e){p.resolver=e}static registerIcon(e,s){let i,o;if("string"==typeof e?(i=e,o=s):(i=e.title,o=e.default),!i)throw new Error("name is required when registering an icon");if(!o)throw new Error("icon must not be empty");p.registeredIcons.has(i)||p.registeredIcons.set(i,o)}render(){return t`<div role="${d(this.label,"img")}" style="${d(this.color,`color:${this.color}`)}" aria-label="${a(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${c(this.svg)}</div></div>`}handleNameChange(){this.name?p.registeredIcons.has(this.name)?this.svg=p.registeredIcons.get(this.name):p.resolver(this.name).then((e=>{this.svg=e})).catch((()=>{this.svg=""})):this.svg=""}};v.styles=[h,m],v.resolver=e=>fetch(`https://nordcdn.net/ds/icons/1.3.7/assets/${e}.svg`).then((s=>{if(!s.ok)throw new TypeError(`NORD: unknown icon '${e}'`);return s.text()})),v.registeredIcons=new Map,e([r({reflect:!0})],v.prototype,"name",void 0),e([r({reflect:!0})],v.prototype,"size",void 0),e([r({reflect:!0})],v.prototype,"color",void 0),e([r({reflect:!0})],v.prototype,"label",void 0),e([n()],v.prototype,"svg",void 0),e([l("name")],v.prototype,"handleNameChange",null),v=p=e([s("nord-icon")],v);var f=v;export{f as default};
+import{_ as e,n as s}from"./query-assigned-elements-ef860822.js";import{r as i,s as o,$ as t}from"./lit-element-e382250e.js";import{e as r}from"./property-03f59dce.js";import{t as n}from"./state-70f38ceb.js";import{l as a}from"./if-defined-4d1db15c.js";import{o as c}from"./unsafe-html-76575c49.js";import{o as l}from"./observe-a9c6dfb6.js";import{c as d}from"./cond-ed8742b5.js";import{s as h}from"./Component-fa316972.js";import"./directive-de55b00a.js";const m=i`:host{--n-icon-size:var(--n-size-icon-m);display:inline-block;block-size:var(--n-icon-size);inline-size:var(--n-icon-size);min-inline-size:var(--n-icon-size)}:host([size=xs]){--n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--n-icon-size:var(--n-size-icon-s)}:host([size="l"]){--n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--n-icon-size:var(--n-size-icon-xxl)}.n-icon{display:block}svg{display:block}`;var p;let v=p=class extends o{constructor(){super(...arguments),this.name="",this.size="m",this.svg=""}static registerResolver(e){p.resolver=e}static registerIcon(e,s){let i,o;if("string"==typeof e?(i=e,o=s):(i=e.title,o=e.default),!i)throw new Error("name is required when registering an icon");if(!o)throw new Error("icon must not be empty");p.registeredIcons.has(i)||p.registeredIcons.set(i,o)}render(){return t`<div role="${d(this.label,"img")}" style="${d(this.color,`color:${this.color}`)}" aria-label="${a(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${c(this.svg)}</div></div>`}handleNameChange(){this.name?p.registeredIcons.has(this.name)?this.svg=p.registeredIcons.get(this.name):p.resolver(this.name).then((e=>{this.svg=e})).catch((()=>{this.svg=""})):this.svg=""}};v.styles=[h,m],v.resolver=e=>fetch(`https://nordcdn.net/ds/icons/1.3.7/assets/${e}.svg`).then((s=>{if(!s.ok)throw new TypeError(`NORD: unknown icon '${e}'`);return s.text()})),v.registeredIcons=new Map,e([r({reflect:!0})],v.prototype,"name",void 0),e([r({reflect:!0})],v.prototype,"size",void 0),e([r({reflect:!0})],v.prototype,"color",void 0),e([r({reflect:!0})],v.prototype,"label",void 0),e([n()],v.prototype,"svg",void 0),e([l("name")],v.prototype,"handleNameChange",null),v=p=e([s("nord-icon")],v);var f=v;export{f as default};
 //# sourceMappingURL=Icon.js.map

package/lib/Input.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as s,w as i,$ as n,s as r}from"./lit-element-99bdfe5a.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-ee2efb2f.js";import{n as l}from"./ref-7e1d4d24.js";import{o as d}from"./unsafe-html-feceb926.js";import{F as p}from"./FocusableMixin-c010d3b3.js";import{F as m}from"./FormAssociatedMixin-f69a60dd.js";import{I as c}from"./InputMixin-84ca72ae.js";import{s as h}from"./Component-6bf383d6.js";import{s as f}from"./FormField-900069ed.js";import{s as u}from"./TextField-0ba775e0.js";import{S as v}from"./SlotController-ea6eff46.js";import{c as b}from"./cond-a3e00141.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const y=s`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.n-input-container{font-size:var(--n-font-size-m)}slot[name=start]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;color:var(--n-color-icon)}slot[name=start]:not([hidden])+.n-input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-s)!important;inline-size:var(--n-size-icon-s)!important}`;let $=class extends(m(c(p(r)))){constructor(){super(...arguments),this.startSlot=new v(this,"start"),this.type="text"}render(){var e;const t="search"===this.type||this.startSlot.hasContent,s="number"===this.type,r="search"===this.type?d('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):i;return n`${this.renderLabel()}<div class="n-input-container"><slot name="${this.startSlot.slotName}" ?hidden="${!t}">${r}</slot><input ${l(this.focusableRef)} id="${this.inputId}" class="n-input" type="${s?"text":this.type}" inputmode="${b(s,"numeric")}" pattern="${b(s,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInput}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false"></div>${this.renderError()}`}handleKeydown(e){var t;"Enter"===e.key&&this.form&&(null===(t=this.form.querySelector('button[type="submit"]'))||void 0===t||t.click())}};$.styles=[h,f,u,y],e([o()],$.prototype,"type",void 0),$=e([t("nord-input")],$);var j=$;export{j as default};
+import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as s,w as i,$ as n,s as r}from"./lit-element-e382250e.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-4d1db15c.js";import{n as l}from"./ref-adf41565.js";import{o as d}from"./unsafe-html-76575c49.js";import{F as p}from"./FocusableMixin-4c85ced9.js";import{F as m}from"./FormAssociatedMixin-9d38814c.js";import{I as c}from"./InputMixin-84ca72ae.js";import{s as h}from"./Component-fa316972.js";import{s as u}from"./FormField-44e865a4.js";import{s as f}from"./TextField-f8848f28.js";import{S as v}from"./SlotController-ea6eff46.js";import{c as b}from"./cond-ed8742b5.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const y=s`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.n-input-container{font-size:var(--n-font-size-m)}slot[name=start]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;color:var(--n-color-icon)}slot[name=start]:not([hidden])+.n-input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-s)!important;inline-size:var(--n-size-icon-s)!important}`;let $=class extends(m(c(p(r)))){constructor(){super(...arguments),this.startSlot=new v(this,"start"),this.type="text"}render(){var e;const t="search"===this.type||this.startSlot.hasContent,s="number"===this.type,r="search"===this.type?d('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):i;return n`${this.renderLabel()}<div class="n-input-container"><slot name="${this.startSlot.slotName}" ?hidden="${!t}">${r}</slot><input ${l(this.focusableRef)} id="${this.inputId}" class="n-input" type="${s?"text":this.type}" inputmode="${b(s,"numeric")}" pattern="${b(s,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInput}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false"></div>${this.renderError()}`}handleKeydown(e){var t;"Enter"===e.key&&this.form&&(null===(t=this.form.querySelector('button[type="submit"]'))||void 0===t||t.click())}};$.styles=[h,u,f,y],e([o()],$.prototype,"type",void 0),$=e([t("nord-input")],$);var j=$;export{j as default};
 //# sourceMappingURL=Input.js.map

package/lib/Layout.js

@@ -1,2 +1,2 @@
-import{_ as n,n as t}from"./query-assigned-elements-ef860822.js";import{r as a,$ as e,s as o}from"./lit-element-99bdfe5a.js";import{D as i}from"./DraftComponentMixin-9e4b7b34.js";import{s}from"./Component-6bf383d6.js";const r=a`:host{--n-nav-width:250px;background:var(--n-color-background);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--n-color-background);inset-block-start:0;min-block-size:100%;position:absolute}.n-layout-nav{position:fixed;transition:transform .3s ease;user-select:none;inline-size:var(--n-nav-width);z-index:2;inset-block-start:0;inset-inline-start:0;inset-block-end:0}@media (max-width:768px){.n-layout-nav{transform:translateX(-100%)}}.n-layout-main{inset-inline-end:0;z-index:1;transition:width .2s ease;inline-size:calc(100% - var(--n-nav-width))}@media (max-width:768px){.n-layout-main{inline-size:100%}}main{padding:var(--n-space-l)}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let l=class extends(i(o)){render(){return e`<div class="n-layout"><div class="n-layout-nav"><slot name="nav"></slot></div><div class="n-layout-main"><slot name="header"></slot><main><slot></slot></main></div></div>`}};l.styles=[s,r],l=n([t("nord-layout")],l);var d=l;export{d as default};
+import{_ as n,n as t}from"./query-assigned-elements-ef860822.js";import{r as a,$ as e,s as o}from"./lit-element-e382250e.js";import{D as i}from"./DraftComponentMixin-9e4b7b34.js";import{s}from"./Component-fa316972.js";const r=a`:host{--n-nav-width:250px;background:var(--n-color-background);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--n-color-background);inset-block-start:0;min-block-size:100%;position:absolute}.n-layout-nav{position:fixed;transition:transform .3s ease;user-select:none;inline-size:var(--n-nav-width);z-index:2;inset-block-start:0;inset-inline-start:0;inset-block-end:0}@media (max-width:768px){.n-layout-nav{transform:translateX(-100%)}}.n-layout-main{inset-inline-end:0;z-index:1;transition:width .2s ease;inline-size:calc(100% - var(--n-nav-width))}@media (max-width:768px){.n-layout-main{inline-size:100%}}main{padding:var(--n-space-l)}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let l=class extends(i(o)){render(){return e`<div class="n-layout"><div class="n-layout-nav"><slot name="nav"></slot></div><div class="n-layout-main"><slot name="header"></slot><main><slot></slot></main></div></div>`}};l.styles=[s,r],l=n([t("nord-layout")],l);var d=l;export{d as default};
 //# sourceMappingURL=Layout.js.map

package/lib/{LightDomController-f21f0a7c.js → LightDomController-e0762f0d.js}

@@ -1,2 +1,2 @@
-import{x as t,w as o}from"./lit-element-99bdfe5a.js";class s{constructor(t,o){this.host=t,this.options=o,t.addController(this)}get container(){return this.options.container||this.host}hostUpdated(){this.render()}hostDisconnected(){t(o,this.container,this.options.renderOptions)}render(){t(this.options.render(),this.container,this.options.renderOptions)}}export{s as L};
-//# sourceMappingURL=LightDomController-f21f0a7c.js.map
+import{x as t,w as o}from"./lit-element-e382250e.js";class s{constructor(t,o){this.host=t,this.options=o,t.addController(this)}get container(){return this.options.container||this.host}hostUpdated(){this.render()}hostDisconnected(){t(o,this.container,this.options.renderOptions)}render(){t(this.options.render(),this.container,this.options.renderOptions)}}export{s as L};
+//# sourceMappingURL=LightDomController-e0762f0d.js.map

package/lib/{LightDomController-f21f0a7c.js.map → LightDomController-e0762f0d.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LightDomController-f21f0a7c.js","sources":["../src/common/controllers/LightDomController.ts"],"sourcesContent":["import { nothing, ReactiveController, ReactiveControllerHost, render, RenderOptions } from \"lit\"\n\ntype LightDomOptions = {\n  render: () => unknown\n  renderOptions?: RenderOptions\n  container?: HTMLElement\n}\n\nexport class LightDomController implements ReactiveController {\n  constructor(private host: ReactiveControllerHost & HTMLElement, private options: LightDomOptions) {\n    host.addController(this)\n  }\n\n  private get container(): HTMLElement {\n    return this.options.container || this.host\n  }\n\n  hostUpdated() {\n    this.render()\n  }\n\n  hostDisconnected() {\n    render(nothing, this.container, this.options.renderOptions)\n  }\n\n  private render() {\n    render(this.options.render(), this.container, this.options.renderOptions)\n  }\n}\n"],"names":["LightDomController","constructor","host","options","this","addController","container","hostUpdated","render","hostDisconnected","nothing","renderOptions"],"mappings":"2DAQaA,EACXC,YAAoBC,EAAoDC,GAApDC,KAAIF,KAAJA,EAAoDE,KAAOD,QAAPA,EACtED,EAAKG,cAAcD,MAGTE,gBACV,OAAOF,KAAKD,QAAQG,WAAaF,KAAKF,KAGxCK,cACEH,KAAKI,SAGPC,mBACED,EAAOE,EAASN,KAAKE,UAAWF,KAAKD,QAAQQ,eAGvCH,SACNA,EAAOJ,KAAKD,QAAQK,SAAUJ,KAAKE,UAAWF,KAAKD,QAAQQ"}
+{"version":3,"file":"LightDomController-e0762f0d.js","sources":["../src/common/controllers/LightDomController.ts"],"sourcesContent":["import { nothing, ReactiveController, ReactiveControllerHost, render, RenderOptions } from \"lit\"\n\ntype LightDomOptions = {\n  render: () => unknown\n  renderOptions?: RenderOptions\n  container?: HTMLElement\n}\n\nexport class LightDomController implements ReactiveController {\n  constructor(private host: ReactiveControllerHost & HTMLElement, private options: LightDomOptions) {\n    host.addController(this)\n  }\n\n  private get container(): HTMLElement {\n    return this.options.container || this.host\n  }\n\n  hostUpdated() {\n    this.render()\n  }\n\n  hostDisconnected() {\n    render(nothing, this.container, this.options.renderOptions)\n  }\n\n  private render() {\n    render(this.options.render(), this.container, this.options.renderOptions)\n  }\n}\n"],"names":["LightDomController","constructor","host","options","this","addController","container","hostUpdated","render","hostDisconnected","nothing","renderOptions"],"mappings":"2DAQaA,EACXC,YAAoBC,EAAoDC,GAApDC,KAAIF,KAAJA,EAAoDE,KAAOD,QAAPA,EACtED,EAAKG,cAAcD,MAGTE,gBACV,OAAOF,KAAKD,QAAQG,WAAaF,KAAKF,KAGxCK,cACEH,KAAKI,SAGPC,mBACED,EAAOE,EAASN,KAAKE,UAAWF,KAAKD,QAAQQ,eAGvCH,SACNA,EAAOJ,KAAKD,QAAQK,SAAUJ,KAAKE,UAAWF,KAAKD,QAAQQ"}

package/lib/NavGroup.js

@@ -1,2 +1,2 @@
-import{_ as e,n as i}from"./query-assigned-elements-ef860822.js";import{r as n,$ as t,w as o,s as r}from"./lit-element-99bdfe5a.js";import{e as a}from"./property-03f59dce.js";import{D as s}from"./DraftComponentMixin-9e4b7b34.js";import"./Icon.js";import"./state-70f38ceb.js";import"./if-defined-ee2efb2f.js";import"./unsafe-html-feceb926.js";import"./directive-de55b00a.js";import"./observe-a9c6dfb6.js";import"./cond-a3e00141.js";import"./Component-6bf383d6.js";const l=n`:host{all:unset;display:block;color:var(--n-color-text-weak);font-weight:var(--n-font-weight);font-family:var(--n-font-family);line-height:var(--n-line-height-tight);white-space:nowrap;text-overflow:ellipsis;user-select:none;font-size:var(--n-font-size-m)}*,::after,::before{box-sizing:border-box}[role=list]{margin-block-end:var(--n-space-m);min-inline-size:100%;list-style:none;appearance:none;border:0;box-sizing:border-box;margin:0;padding:0}.n-heading{min-inline-size:100%;color:var(--n-color-nav-heading);font-weight:var(--n-font-weight-active);font-size:var(--n-font-size-m);padding-inline-start:var(--n-space-s);margin-block-end:var(--n-space-s)}`;let d=class extends(s(r)){render(){return t`${this.heading?t`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:o}<div role="list" aria-labelledby="${this.heading?"heading":o}"><slot></slot></div>`}};d.styles=l,e([a()],d.prototype,"heading",void 0),d=e([i("nord-nav-group")],d);var f=d;export{f as default};
+import{_ as e,n as i}from"./query-assigned-elements-ef860822.js";import{r as n,s as t,$ as o,w as r}from"./lit-element-e382250e.js";import{e as a}from"./property-03f59dce.js";import"./Icon.js";import"./state-70f38ceb.js";import"./if-defined-4d1db15c.js";import"./unsafe-html-76575c49.js";import"./directive-de55b00a.js";import"./observe-a9c6dfb6.js";import"./cond-ed8742b5.js";import"./Component-fa316972.js";const s=n`:host{all:unset;display:block;color:var(--n-color-text-weak);font-weight:var(--n-font-weight);font-family:var(--n-font-family);line-height:var(--n-line-height-tight);white-space:nowrap;text-overflow:ellipsis;user-select:none;font-size:var(--n-font-size-m)}*,::after,::before{box-sizing:border-box}[role=list]{margin-block-end:var(--n-space-m);min-inline-size:100%;list-style:none;appearance:none;border:0;box-sizing:border-box;margin:0;padding:0}.n-heading{min-inline-size:100%;color:var(--n-color-nav-heading);font-weight:var(--n-font-weight-active);font-size:var(--n-font-size-m);padding-inline-start:var(--n-space-s);margin-block-end:var(--n-space-s)}`;let d=class extends t{render(){return o`${this.heading?o`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:r}<div role="list" aria-labelledby="${this.heading?"heading":r}"><slot></slot></div>`}};d.styles=s,e([a()],d.prototype,"heading",void 0),d=e([i("nord-nav-group")],d);var l=d;export{l as default};
 //# sourceMappingURL=NavGroup.js.map

package/lib/NavGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavGroup.js","sources":["../src/nav-group/NavGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport \"../icon/Icon.js\"\n\nimport style from \"./NavGroup.css\"\n\n/**\n * Navigation group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status draft\n * @slot - The default slot used for the nav items.\n */\n@customElement(\"nord-nav-group\")\nexport default class NavGroup extends DraftComponentMixin(LitElement) {\n  static styles = style\n\n  /**\n   * Heading and accessible label for the nav group\n   */\n  @property() heading?: string\n\n  render() {\n    return html`\n      ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n      <div role=\"list\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-group\": NavGroup\n  }\n}\n"],"names":["NavGroup","DraftComponentMixin","LitElement","render","html","this","heading","nothing","styles","style","__decorate","property","prototype","customElement"],"mappings":"ymCAgBA,IAAqBA,EAArB,cAAsCC,EAAoBC,IAQxDC,SACE,OAAOC,CAAI,GACPC,KAAKC,QAAUF,CAAI,wDAAwDC,KAAKC,cAAgBC,sCAC/DF,KAAKC,QAAU,UAAYC,2BAV3DP,EAAMQ,OAAGC,EAKJC,EAAA,CAAXC,KAA2BX,EAAAY,UAAA,eAAA,GANTZ,EAAQU,EAAA,CAD5BG,EAAc,mBACMb,SAAAA"}
+{"version":3,"file":"NavGroup.js","sources":["../src/nav-group/NavGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport \"../icon/Icon.js\"\n\nimport style from \"./NavGroup.css\"\n\n/**\n * Navigation group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status new\n * @slot - The default slot used for the nav items.\n */\n@customElement(\"nord-nav-group\")\nexport default class NavGroup extends LitElement {\n  static styles = style\n\n  /**\n   * Heading and accessible label for the nav group\n   */\n  @property() heading?: string\n\n  render() {\n    return html`\n      ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n      <div role=\"list\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-group\": NavGroup\n  }\n}\n"],"names":["NavGroup","LitElement","render","html","this","heading","nothing","styles","style","__decorate","property","prototype","customElement"],"mappings":"mjCAeA,IAAqBA,EAArB,cAAsCC,EAQpCC,SACE,OAAOC,CAAI,GACPC,KAAKC,QAAUF,CAAI,wDAAwDC,KAAKC,cAAgBC,sCAC/DF,KAAKC,QAAU,UAAYC,2BAV3DN,EAAMO,OAAGC,EAKJC,EAAA,CAAXC,KAA2BV,EAAAW,UAAA,eAAA,GANTX,EAAQS,EAAA,CAD5BG,EAAc,mBACMZ,SAAAA"}

package/lib/NavItem.js

@@ -1,2 +1,2 @@
-import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as t,$ as o,w as a,s as r}from"./lit-element-99bdfe5a.js";import{e as i}from"./property-03f59dce.js";import{o as s}from"./class-map-f93f9ba8.js";import{n as c}from"./ref-7e1d4d24.js";import{D as l}from"./DirectionController-8b298382.js";import{S as d}from"./SlotController-ea6eff46.js";import{c as v}from"./cond-a3e00141.js";import{N as p}from"./events-731d0007.js";import{D as f}from"./DraftComponentMixin-9e4b7b34.js";import{F as h}from"./FocusableMixin-c010d3b3.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const m=t`:host{all:unset;display:block;font-size:var(--n-font-size-m);font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--n-nav-item-box-shadow,none)}.n-nav-item:focus{outline:0}.n-nav-item:focus-visible{--n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([active]) .n-nav-item{--n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-highlight);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight-active);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;margin-inline-start:var(--n-space-s);font-size:var(--n-font-size-xs);display:inline-block}`;let g=class extends(h(f(r))){constructor(){super(...arguments),this.subnavSlot=new d(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=o`${this.icon?o`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}<div class="n-content"><slot></slot></div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),o`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return o`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${v(this.active,"page")}" href="${this.href||""}">${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:a}</a>`}renderToggle(e){return o`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${e}<nord-icon size="xs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return o`<button class="n-nav-item" ${c(this.focusableRef)}>${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:a}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};g.styles=m,e([i({type:Boolean,reflect:!0})],g.prototype,"active",void 0),e([i()],g.prototype,"icon",void 0),e([i()],g.prototype,"href",void 0),e([i()],g.prototype,"badge",void 0),e([i({type:Boolean})],g.prototype,"open",void 0),g=e([n("nord-nav-item")],g);var b=g;export{b as default};
+import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as t,$ as o,w as a,s as r}from"./lit-element-e382250e.js";import{e as i}from"./property-03f59dce.js";import{o as s}from"./class-map-9e39244c.js";import{n as c}from"./ref-adf41565.js";import{D as l}from"./DirectionController-8b298382.js";import{S as d}from"./SlotController-ea6eff46.js";import{c as v}from"./cond-ed8742b5.js";import{N as p}from"./events-731d0007.js";import{F as h}from"./FocusableMixin-4c85ced9.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const f=t`:host{all:unset;display:block;font-size:var(--n-font-size-m);font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--n-nav-item-box-shadow,none)}.n-nav-item:focus{outline:0}.n-nav-item:focus-visible{--n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([active]) .n-nav-item{--n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-highlight);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight-active);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;margin-inline-start:var(--n-space-s);font-size:var(--n-font-size-xs);display:inline-block}`;let m=class extends(h(r)){constructor(){super(...arguments),this.subnavSlot=new d(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=o`${this.icon?o`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}<div class="n-content"><slot></slot></div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),o`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return o`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${v(this.active,"page")}" href="${this.href||""}">${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:a}</a>`}renderToggle(e){return o`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${e}<nord-icon size="xs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return o`<button class="n-nav-item" ${c(this.focusableRef)}>${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:a}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};m.styles=f,e([i({type:Boolean,reflect:!0})],m.prototype,"active",void 0),e([i()],m.prototype,"icon",void 0),e([i()],m.prototype,"href",void 0),e([i()],m.prototype,"badge",void 0),e([i({type:Boolean})],m.prototype,"open",void 0),m=e([n("nord-nav-item")],m);var g=m;export{g as default};
 //# sourceMappingURL=NavItem.js.map

package/lib/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status draft\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(DraftComponentMixin(LitElement)) {\n  static styles = style\n\n  private subnavSlot = new SlotController(this, \"subnav\")\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property() icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property() href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property() badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ type: Boolean }) open = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // in cases where there is nested nav, and one of the items is active\n    // we should auto-open the nav item for developer convenience\n    if (this.querySelector(`nord-nav-item[active]`)) {\n      this.open = true\n    }\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-content\">\n        <slot></slot>\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    } else if (this.href) {\n      element = this.renderLink(innards)\n    } else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, \"page\")} href=${this.href || \"\"}>\n        ${innards} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? \"true\" : \"false\"}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xs\"\n          class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>\n      ${innards} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n    </button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent(\"toggle\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-item\": NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","DraftComponentMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","connectedCallback","super","querySelector","render","innards","html","icon","nothing","element","hasContent","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","badge","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","styles","style","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"qoFAwBA,IAAqBA,EAArB,cAAqCC,EAAeC,EAAoBC,KAAxEC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBxBL,KAAIM,MAAG,EAEpCC,oBACEC,MAAMD,oBAIFP,KAAKS,cAAc,2BACrBT,KAAKM,MAAO,GAIhBI,SACE,MAAMC,EAAUC,CAAI,GAChBZ,KAAKa,KAAOD,CAAI,uCAAsCZ,KAAKa,8BAA+BC,8CAK9F,IAAIC,EAUJ,OAPEA,EADEf,KAAKC,WAAWe,WACRhB,KAAKiB,aAAaN,GACnBX,KAAKkB,KACJlB,KAAKmB,WAAWR,GAEhBX,KAAKoB,aAAaT,GAGvBC,CAAI,wBAELG,gBACWf,KAAKC,WAAWoB,uBAAqBrB,KAAKM,sBAKrDa,WAAWR,GACjB,OAAOC,CAAI,yBACeU,EAAItB,KAAKuB,+BAA8BC,EAAKxB,KAAKK,OAAQ,kBAAgBL,KAAKkB,MAAQ,OAC1GP,KAAWX,KAAKyB,MAAQb,CAAI,6BAA6BZ,KAAKyB,eAAiBX,QAK/EG,aAAaN,GACnB,OAAOC,CAAI,sCAGEZ,KAAK0B,8BACE1B,KAAKM,KAAO,OAAS,YACnCgB,EAAItB,KAAKuB,iBAETZ,gCAIQgB,EAAS,CAAE,iBAAiB,EAAM,QAAS3B,KAAKG,UAAUyB,iEAOlER,aAAaT,GACnB,OAAOC,CAAI,8BAA8BU,EAAItB,KAAKuB,iBAC9CZ,KAAWX,KAAKyB,MAAQb,CAAI,6BAA6BZ,KAAKyB,eAAiBX,aAI7EY,aACN1B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK6B,cAAc,IAAIC,EAAU,aAvG5BnC,EAAMoC,OAAGC,EAS4BC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsB1C,EAAA2C,UAAA,cAAA,GAK9CL,EAAA,CAAXC,KAAwBvC,EAAA2C,UAAA,YAAA,GAMbL,EAAA,CAAXC,KAAwBvC,EAAA2C,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAAyBvC,EAAA2C,UAAA,aAAA,GAMGL,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAuBzC,EAAA2C,UAAA,YAAA,GAhCtB3C,EAAOsC,EAAA,CAD3BM,EAAc,kBACM5C,SAAAA"}
+{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status new\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = style\n\n  private subnavSlot = new SlotController(this, \"subnav\")\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property() icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property() href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property() badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ type: Boolean }) open = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // in cases where there is nested nav, and one of the items is active\n    // we should auto-open the nav item for developer convenience\n    if (this.querySelector(`nord-nav-item[active]`)) {\n      this.open = true\n    }\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-content\">\n        <slot></slot>\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    } else if (this.href) {\n      element = this.renderLink(innards)\n    } else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, \"page\")} href=${this.href || \"\"}>\n        ${innards} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? \"true\" : \"false\"}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xs\"\n          class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>\n      ${innards} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n    </button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent(\"toggle\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-item\": NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","connectedCallback","super","querySelector","render","innards","html","icon","nothing","element","hasContent","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","badge","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","styles","style","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"+kFAuBA,IAAqBA,EAArB,cAAqCC,EAAeC,IAApDC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBxBL,KAAIM,MAAG,EAEpCC,oBACEC,MAAMD,oBAIFP,KAAKS,cAAc,2BACrBT,KAAKM,MAAO,GAIhBI,SACE,MAAMC,EAAUC,CAAI,GAChBZ,KAAKa,KAAOD,CAAI,uCAAsCZ,KAAKa,8BAA+BC,8CAK9F,IAAIC,EAUJ,OAPEA,EADEf,KAAKC,WAAWe,WACRhB,KAAKiB,aAAaN,GACnBX,KAAKkB,KACJlB,KAAKmB,WAAWR,GAEhBX,KAAKoB,aAAaT,GAGvBC,CAAI,wBAELG,gBACWf,KAAKC,WAAWoB,uBAAqBrB,KAAKM,sBAKrDa,WAAWR,GACjB,OAAOC,CAAI,yBACeU,EAAItB,KAAKuB,+BAA8BC,EAAKxB,KAAKK,OAAQ,kBAAgBL,KAAKkB,MAAQ,OAC1GP,KAAWX,KAAKyB,MAAQb,CAAI,6BAA6BZ,KAAKyB,eAAiBX,QAK/EG,aAAaN,GACnB,OAAOC,CAAI,sCAGEZ,KAAK0B,8BACE1B,KAAKM,KAAO,OAAS,YACnCgB,EAAItB,KAAKuB,iBAETZ,gCAIQgB,EAAS,CAAE,iBAAiB,EAAM,QAAS3B,KAAKG,UAAUyB,iEAOlER,aAAaT,GACnB,OAAOC,CAAI,8BAA8BU,EAAItB,KAAKuB,iBAC9CZ,KAAWX,KAAKyB,MAAQb,CAAI,6BAA6BZ,KAAKyB,eAAiBX,aAI7EY,aACN1B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK6B,cAAc,IAAIC,EAAU,aAvG5BlC,EAAMmC,OAAGC,EAS4BC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBzC,EAAA0C,UAAA,cAAA,GAK9CL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAMbL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAAyBtC,EAAA0C,UAAA,aAAA,GAMGL,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAuBxC,EAAA0C,UAAA,YAAA,GAhCtB1C,EAAOqC,EAAA,CAD3BM,EAAc,kBACM3C,SAAAA"}