@nordhealth/components 3.2.0 → 3.4.0-alpha.0

package/lib/CommandMenu.js

@@ -1,2 +1,2 @@
-import{i as e,_ as o,s as t,x as n,A as s,e as i}from"./query-assigned-elements-822fe360.js";import{e as r}from"./property-03f59dce.js";import{t as a}from"./state-70f38ceb.js";import{g as l,c}from"./collection-498f2b1f.js";import{e as d,n as p}from"./ref-6b46e5ea.js";import{o as m}from"./class-map-c0d8e1e5.js";import{l as h}from"./if-defined-8a007930.js";import{w as v}from"./number-c3ab3e95.js";import{N as u}from"./events-d9666e88.js";import{L as f}from"./LightDismissController-a2645ae6.js";import{KeyboardController as b}from"./KeyboardController.js";import x from"./Icon.js";import"./VisuallyHidden.js";import"./CommandMenuAction.js";import{SelectEvent as g}from"./SelectEvent.js";import{s as y}from"./Component-1f694235.js";import{LocalizeController as w}from"./LocalizeController.js";import{c as z}from"./cond-09498763.js";import{o as k}from"./observe-a9c6dfb6.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./IconManager.js";import"./DirectionController-f35f5476.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";const j="keyboard-arrow-up-down";var $=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m8.29008 12.3413 1.41 1.42-3.96 3.95c-.2.19-.45.29-.71.29s-.51-.1-.71-.29l-3.990002-4 1.410002-1.42 2.26 2.25v-12.54002h2v12.63002zm11.38002-6.05002-4.01-4c-.39-.39-1.02-.39-1.41 0l-3.96 3.95 1.41 1.42 2.29-2.29v12.63002h2v-12.54002l2.26 2.25 1.41-1.42z" fill="currentColor"/></svg>',title:j,tags:"nordicon keyboard keys arrow up down shortcut"});const C="keyboard-return";var _=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18.0025 4v8c0 1.1-.9 2-2 2h-12.59l3 3-1.41 1.41-4.71-4.7c-.39-.39-.39-1.02 0-1.41l4.71-4.71 1.41 1.41-3 3h12.59v-8h-4v-2h4c1.1 0 2 .9 2 2z" fill="currentColor"/></svg>',title:C,tags:"nordicon keyboard return key shortcut"});const I="keyboard-backspace";var B=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-10.54c-.58 0-1.14.25-1.52.7l-5.14 6c-.65.75-.65 1.85 0 2.6l5.14 6c.38.44.93.7 1.52.7h10.54c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm0 14h-10.54l-5.14-6 5.14-6h10.54zm-9.54-3.88 2.12-2.12-2.12-2.12 1.41-1.41 2.12 2.12 2.12-2.12 1.41 1.41-2.12 2.12 2.12 2.12-1.41 1.41-2.12-2.12-2.12 2.12z" fill="currentColor"/></svg>',title:I,tags:"nordicon keyboard backspace back delete key shortcut"});function E(e){var o;return(null===(o=e.activeElement)||void 0===o?void 0:o.shadowRoot)?E(e.activeElement.shadowRoot):e.activeElement||void 0}const R=e`:host{--_n-command-menu-inline-size:var(--n-command-menu-inline-size, 640px);--_n-command-menu-block-size:var(--n-command-menu-block-size, 290px);--_n-command-menu-block-start:var(--n-command-menu-block-start, 16%)}.n-modal{display:none;position:fixed;pointer-events:none;z-index:var(--n-index-modal);inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;overflow:auto}.n-modal.n-visible{display:block}.n-modal-content{position:relative;pointer-events:all;inset-block-start:var(--_n-command-menu-block-start);margin:auto;display:flex;flex-direction:column;min-inline-size:0;background:var(--n-color-surface);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-modal);max-inline-size:var(--_n-command-menu-inline-size);overflow:hidden}.n-bump{animation:zoom-in-zoom-out var(--n-transition-slowly)}@keyframes zoom-in-zoom-out{0%{transform:translateY(-10px) scale(.97);opacity:0}100%{transform:translateY(0) scale(1.0001);opacity:1}}.n-modal-footer{display:flex;gap:var(--n-space-s);padding:var(--n-space-s) var(--n-space-m);font-size:calc(var(--n-font-size-s) - 1px);color:var(--n-color-text-weaker)}.n-help{display:flex;align-items:center;gap:2px}.n-help+.n-help{padding-inline-start:var(--n-space-s);border-inline-start:1px solid var(--n-color-border-strong)}.n-help nord-icon{--_n-icon-size:10px;color:currentColor;margin:3px 4px}.n-help.n-backspace nord-icon{--_n-icon-size:12px}.n-search-wrapper{display:flex;border-block-end:1px solid var(--n-color-border)}[role=combobox]{flex:1;font-size:var(--n-font-size-l);font-weight:var(--n-font-weight);font-family:inherit;background:0 0;color:var(--n-color-text);border:none;border-radius:0;appearance:none;outline:0;margin:0;padding:var(--n-space-m)}[role=combobox]::-webkit-input-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=combobox]::-moz-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=combobox]::-ms-input-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=listbox]{max-block-size:var(--_n-command-menu-block-size);overflow:auto;margin:0;padding:0}.n-group-header{line-height:var(--n-line-height);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-s)/ 1.4) var(--n-space-m);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:var(--n-font-size-s);background:var(--n-color-surface-raised);font-weight:var(--n-font-weight-active);color:var(--n-color-text-weaker)}.n-command-empty{display:flex;flex:1;flex-direction:column;border-inline-start:2px solid transparent;align-items:flex-start;color:var(--n-color-text);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-command-empty .n-title{flex:1;margin-block-start:var(--n-space-s);margin-inline-end:var(--n-space-xs);max-inline-size:100%;font-size:var(--n-font-size-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-command-empty .n-tip{flex:1;margin-block-start:var(--n-space-s);margin-block-end:var(--n-space-m);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker)}`;x.registerIcon($),x.registerIcon(_),x.registerIcon(B);let O=class extends t{constructor(){super(...arguments),this.inputRef=d(),this.listRef=d(),this.localize=new w(this),this.dismissController=new f(this,{isOpen:()=>this.open,onDismiss:()=>this.close()}),this.keyboardController=new b(this,{trigger:()=>this.select(),goBack:()=>this.goBack(),end:()=>this.end(),start:()=>this.start(),next:()=>this.next(),previous:()=>this.previous(),toggleOpen:()=>this.toggleOpen()}),this.open=!1,this.commands=[],this.search="",this.bump=!0,this.selectedIndex=0,this.filteredCommands=[]}get selected(){return this.filteredCommands[this.selectedIndex]}show(e={}){this.dispatchEvent(new u("open",{cancelable:!0}))&&(this.open=!0,this.setParent(e.parent))}close(){var e;this.open=!1,null===(e=this.previousFocus)||void 0===e||e.focus(),this.previousFocus=void 0,this.dispatchEvent(new u("close"))}toggleOpen(){this.open?this.close():this.show()}focus(){var e;null===(e=this.inputRef.value)||void 0===e||e.focus()}render(){var e;const o=l(this.filteredCommands,"section"),t=0===this.filteredCommands.length?"no-results":null===(e=this.selected)||void 0===e?void 0:e.id;return n`<div class="${m({"n-visible":this.open,"n-modal":!0})}"><div @animationend="${this.handleAnimationEnd}" class="${m({"n-bump":this.bump,"n-modal-content":!0})}"><div class="n-search-wrapper"><nord-visually-hidden id="instructions">${this.localize.term("instructions")}</nord-visually-hidden><input type="text" id="search" @input="${this.handleInput}" @blur="${this.handleBlur}" ${p(this.inputRef)} placeholder="${this.localize.term("placeholder")}" .value="${this.search}" spellcheck="false" autocomplete="off" autocapitalize="off" aria-label="${this.localize.term("inputLabel")}" aria-autocomplete="list" aria-haspopup="listbox" role="combobox" aria-controls="list" aria-expanded="true" aria-activedescendant="${h(t)}" aria-describedby="instructions"></div><div class="n-modal-body"><div id="list" ${p(this.listRef)} role="listbox">${0===this.filteredCommands.length?this.renderNoResults():Array.from(o,(([e,o])=>this.renderSection(e,o)))}</div></div><slot name="footer"><div class="n-modal-footer"><span class="n-help"><nord-icon label="Arrow keys" name="${j}"></nord-icon>${this.localize.term("footerArrowKeys")} </span><span class="n-help"><nord-icon label="Enter key" name="${C}"></nord-icon>${this.localize.term("footerEnterKey")} </span><span class="n-help">${this.localize.term("footerEscapeKey")}</span> <span class="n-help n-backspace"><nord-icon label="Backspace key" name="${I}"></nord-icon>${this.localize.term("footerBackspaceKey")}</span></div></slot></div></div>`}renderNoResults(){return n`<div id="no-results" class="n-command-empty" role="option" aria-selected="true"><div class="n-title">${this.localize.term("noResults",this.search)}</div><div class="n-tip">${this.localize.term("tip")}</div></div>`}renderSection(e,o){const t=`section-${e}`;return n`<div role="group" aria-labelledby="${z(e,t)}">${e?n`<div class="n-group-header" role="presentation" id="${t}">${e}</div>`:s} ${c(o,(e=>e.id),(e=>{var o,t;return n`<nord-command-menu-action id="${e.id}" .command="${e}" ?selected="${this.open&&e.id===(null===(o=this.selected)||void 0===o?void 0:o.id)}" @click="${()=>this.select(e)}" role="option" aria-selected="${z(e.id===(null===(t=this.selected)||void 0===t?void 0:t.id),"true")}"></nord-command-menu-action>`}))}</div>`}handleCommandsChange(){this.keyboardController.registerCommandShortcuts()}handleBump(){this.open&&(this.bump=!0)}focusOnOpen(){this.open&&(this.previousFocus=E(document),this.focus(),this.listRef.value&&(this.listRef.value.scrollTop=0))}handleAnimationEnd(){this.bump=!1}handleBlur(){this.open&&this.focus()}handleInput(e){const o=e.target;this.setSearch(o.value)}select(e=this.selected){var o;this.commands.some((o=>o.parent===e.id))?(this.setParent(e.id),this.bump=!0,this.focus()):this.close(),this.setSearch(""),null===(o=e.handler)||void 0===o||o.call(e,this);const t=new g(e);this.dispatchEvent(t)}start(){this.selectedIndex=0}end(){this.selectedIndex=this.filteredCommands.length-1}next(){this.selectedIndex=v(this.selectedIndex+1,0,this.filteredCommands.length-1)}previous(){this.selectedIndex=v(this.selectedIndex-1,0,this.filteredCommands.length-1)}goBack(){if(!this.search&&this.parent){const e=this.commands.find((e=>e.id===this.parent));this.setParent(null==e?void 0:e.parent)}}setParent(e){this.parent=e,this.setSearch("")}setSearch(e){this.search=e,this.selectedIndex=0}filterCommands(){const e=this.search.toLocaleLowerCase().split(/\s+/),o=[...l(this.commands,"section").values()].flat();this.filteredCommands=o.filter((({title:o,keywords:t="",parent:n})=>{const s=`${o} ${t}`.toLocaleLowerCase(),i=e.every((e=>s.includes(e)));return(!this.parent&&this.search||n==this.parent)&&i}))}};O.styles=[y,R],o([r({type:Boolean})],O.prototype,"open",void 0),o([r({type:Array,attribute:!1})],O.prototype,"commands",void 0),o([a()],O.prototype,"parent",void 0),o([a()],O.prototype,"search",void 0),o([a()],O.prototype,"bump",void 0),o([a()],O.prototype,"selectedIndex",void 0),o([a()],O.prototype,"filteredCommands",void 0),o([k("commands")],O.prototype,"handleCommandsChange",null),o([k("open")],O.prototype,"handleBump",null),o([k("open","updated")],O.prototype,"focusOnOpen",null),o([k("search"),k("parent"),k("commands")],O.prototype,"filterCommands",null),O=o([i("nord-command-menu")],O);var S=O;export{S as default};
+import{i as e,_ as o,s as t,x as n,A as i,e as s}from"./query-assigned-elements-2f8275b7.js";import{e as r}from"./property-03f59dce.js";import{t as a}from"./state-70f38ceb.js";import{g as l,c}from"./collection-bba319d3.js";import{e as d,n as p}from"./ref-f75a30b7.js";import{o as m}from"./class-map-4a0dec4a.js";import{l as h}from"./if-defined-10508457.js";import{w as v}from"./number-c3ab3e95.js";import{N as u}from"./events-d9666e88.js";import{L as f}from"./LightDismissController-a2645ae6.js";import{KeyboardController as b}from"./KeyboardController.js";import x from"./Icon.js";import"./VisuallyHidden.js";import"./CommandMenuAction.js";import{SelectEvent as g}from"./SelectEvent.js";import{s as y}from"./Component-253ecb24.js";import{LocalizeController as w}from"./LocalizeController.js";import{c as z}from"./cond-77258def.js";import{o as k}from"./observe-a9c6dfb6.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./IconManager.js";import"./DirectionController-f35f5476.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";const j="keyboard-arrow-up-down";var $=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m8.29008 12.3413 1.41 1.42-3.96 3.95c-.2.19-.45.29-.71.29s-.51-.1-.71-.29l-3.990002-4 1.410002-1.42 2.26 2.25v-12.54002h2v12.63002zm11.38002-6.05002-4.01-4c-.39-.39-1.02-.39-1.41 0l-3.96 3.95 1.41 1.42 2.29-2.29v12.63002h2v-12.54002l2.26 2.25 1.41-1.42z" fill="currentColor"/></svg>',title:j,tags:"nordicon keyboard keys arrow up down shortcut"});var C=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18.0025 4v8c0 1.1-.9 2-2 2h-12.59l3 3-1.41 1.41-4.71-4.7c-.39-.39-.39-1.02 0-1.41l4.71-4.71 1.41 1.41-3 3h12.59v-8h-4v-2h4c1.1 0 2 .9 2 2z" fill="currentColor"/></svg>',title:"keyboard-return",tags:"nordicon keyboard return key shortcut"});const _="keyboard-backspace";var I=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-10.54c-.58 0-1.14.25-1.52.7l-5.14 6c-.65.75-.65 1.85 0 2.6l5.14 6c.38.44.93.7 1.52.7h10.54c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm0 14h-10.54l-5.14-6 5.14-6h10.54zm-9.54-3.88 2.12-2.12-2.12-2.12 1.41-1.41 2.12 2.12 2.12-2.12 1.41 1.41-2.12 2.12 2.12 2.12-1.41 1.41-2.12-2.12-2.12 2.12z" fill="currentColor"/></svg>',title:_,tags:"nordicon keyboard backspace back delete key shortcut"});function B(e){var o;return(null===(o=e.activeElement)||void 0===o?void 0:o.shadowRoot)?B(e.activeElement.shadowRoot):e.activeElement||void 0}const E=e`:host{--_n-command-menu-inline-size:var(--n-command-menu-inline-size, 640px);--_n-command-menu-block-size:var(--n-command-menu-block-size, 290px);--_n-command-menu-block-start:var(--n-command-menu-block-start, 16%)}.n-modal{display:none;position:fixed;pointer-events:none;z-index:var(--n-index-modal);inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;overflow:auto}.n-modal.n-visible{display:block}.n-modal-content{position:relative;pointer-events:all;inset-block-start:var(--_n-command-menu-block-start);margin:auto;display:flex;flex-direction:column;min-inline-size:0;background:var(--n-color-surface);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-modal);max-inline-size:var(--_n-command-menu-inline-size);overflow:hidden}.n-bump{animation:zoom-in-zoom-out var(--n-transition-slowly)}@keyframes zoom-in-zoom-out{0%{transform:translateY(-10px) scale(.97);opacity:0}100%{transform:translateY(0) scale(1.0001);opacity:1}}.n-modal-footer{display:flex;gap:var(--n-space-s);padding:var(--n-space-s) var(--n-space-m);font-size:calc(var(--n-font-size-s) - 1px);color:var(--n-color-text-weaker)}.n-help{display:flex;align-items:center;gap:2px}.n-help+.n-help{padding-inline-start:var(--n-space-s);border-inline-start:1px solid var(--n-color-border-strong)}.n-help nord-icon{--_n-icon-size:10px;color:currentColor;margin:3px 4px}.n-help.n-backspace nord-icon{--_n-icon-size:12px}.n-search-wrapper{display:flex;border-block-end:1px solid var(--n-color-border)}[role=combobox]{flex:1;font-size:var(--n-font-size-l);font-weight:var(--n-font-weight);font-family:inherit;background:0 0;color:var(--n-color-text);border:none;border-radius:0;appearance:none;outline:0;margin:0;padding:var(--n-space-m)}[role=combobox]::-webkit-input-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=combobox]::-moz-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=combobox]::-ms-input-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=listbox]{max-block-size:var(--_n-command-menu-block-size);overflow:auto;margin:0;padding:0}.n-group-header{line-height:var(--n-line-height);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-s)/ 1.4) var(--n-space-m);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:var(--n-font-size-s);background:var(--n-color-surface-raised);font-weight:var(--n-font-weight-active);color:var(--n-color-text-weaker)}.n-command-empty{display:flex;flex:1;flex-direction:column;border-inline-start:2px solid transparent;align-items:flex-start;color:var(--n-color-text);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-command-empty .n-title{flex:1;margin-block-start:var(--n-space-s);margin-inline-end:var(--n-space-xs);max-inline-size:100%;font-size:var(--n-font-size-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-command-empty .n-tip{flex:1;margin-block-start:var(--n-space-s);margin-block-end:var(--n-space-m);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker)}`;x.registerIcon($),x.registerIcon(C),x.registerIcon(I);let R=class extends t{constructor(){super(...arguments),this.inputRef=d(),this.listRef=d(),this.localize=new w(this),this.dismissController=new f(this,{isOpen:()=>this.open,onDismiss:()=>this.close()}),this.keyboardController=new b(this,{trigger:()=>this.select(),goBack:()=>this.goBack(),end:()=>this.end(),start:()=>this.start(),next:()=>this.next(),previous:()=>this.previous(),toggleOpen:()=>this.toggleOpen()}),this.open=!1,this.commands=[],this.search="",this.bump=!0,this.selectedIndex=0,this.filteredCommands=[]}get selected(){return this.filteredCommands[this.selectedIndex]}show(e={}){this.dispatchEvent(new u("open",{cancelable:!0}))&&(this.open=!0,this.setParent(e.parent))}close(){var e;this.open=!1,null===(e=this.previousFocus)||void 0===e||e.focus(),this.previousFocus=void 0,this.dispatchEvent(new u("close"))}toggleOpen(){this.open?this.close():this.show()}focus(){var e;null===(e=this.inputRef.value)||void 0===e||e.focus()}render(){var e;const o=l(this.filteredCommands,"section"),t=0===this.filteredCommands.length?"no-results":null===(e=this.selected)||void 0===e?void 0:e.id;return n`<div class="${m({"n-visible":this.open,"n-modal":!0})}"><div @animationend="${this.handleAnimationEnd}" class="${m({"n-bump":this.bump,"n-modal-content":!0})}"><div class="n-search-wrapper"><nord-visually-hidden id="instructions">${this.localize.term("instructions")}</nord-visually-hidden><input type="text" id="search" @input="${this.handleInput}" @blur="${this.handleBlur}" ${p(this.inputRef)} placeholder="${this.localize.term("placeholder")}" .value="${this.search}" spellcheck="false" autocomplete="off" autocapitalize="off" aria-label="${this.localize.term("inputLabel")}" aria-autocomplete="list" aria-haspopup="listbox" role="combobox" aria-controls="list" aria-expanded="true" aria-activedescendant="${h(t)}" aria-describedby="instructions"></div><div class="n-modal-body"><div id="list" ${p(this.listRef)} role="listbox">${0===this.filteredCommands.length?this.renderNoResults():Array.from(o,(([e,o])=>this.renderSection(e,o)))}</div></div><slot name="footer"><div class="n-modal-footer"><span class="n-help"><nord-icon label="Arrow keys" name="${j}"></nord-icon>${this.localize.term("footerArrowKeys")} </span><span class="n-help"><nord-icon label="Enter key" name="${"keyboard-return"}"></nord-icon>${this.localize.term("footerEnterKey")} </span><span class="n-help">${this.localize.term("footerEscapeKey")}</span> <span class="n-help n-backspace"><nord-icon label="Backspace key" name="${_}"></nord-icon>${this.localize.term("footerBackspaceKey")}</span></div></slot></div></div>`}renderNoResults(){return n`<div id="no-results" class="n-command-empty" role="option" aria-selected="true"><div class="n-title">${this.localize.term("noResults",this.search)}</div><div class="n-tip">${this.localize.term("tip")}</div></div>`}renderSection(e,o){const t=`section-${e}`;return n`<div role="group" aria-labelledby="${z(e,t)}">${e?n`<div class="n-group-header" role="presentation" id="${t}">${e}</div>`:i} ${c(o,(e=>e.id),(e=>{var o,t;return n`<nord-command-menu-action id="${e.id}" .command="${e}" ?selected="${this.open&&e.id===(null===(o=this.selected)||void 0===o?void 0:o.id)}" @click="${()=>this.select(e)}" role="option" aria-selected="${z(e.id===(null===(t=this.selected)||void 0===t?void 0:t.id),"true")}"></nord-command-menu-action>`}))}</div>`}handleCommandsChange(){this.keyboardController.registerCommandShortcuts()}handleBump(){this.open&&(this.bump=!0)}focusOnOpen(){this.open&&(this.previousFocus=B(document),this.focus(),this.listRef.value&&(this.listRef.value.scrollTop=0))}handleAnimationEnd(){this.bump=!1}handleBlur(){this.open&&this.focus()}handleInput(e){const o=e.target;this.setSearch(o.value)}select(e=this.selected){var o;this.commands.some((o=>o.parent===e.id))?(this.setParent(e.id),this.bump=!0,this.focus()):this.close(),this.setSearch(""),null===(o=e.handler)||void 0===o||o.call(e,this);const t=new g(e);this.dispatchEvent(t)}start(){this.selectedIndex=0}end(){this.selectedIndex=this.filteredCommands.length-1}next(){this.selectedIndex=v(this.selectedIndex+1,0,this.filteredCommands.length-1)}previous(){this.selectedIndex=v(this.selectedIndex-1,0,this.filteredCommands.length-1)}goBack(){if(!this.search&&this.parent){const e=this.commands.find((e=>e.id===this.parent));this.setParent(null==e?void 0:e.parent)}}setParent(e){this.parent=e,this.setSearch("")}setSearch(e){this.search=e,this.selectedIndex=0}filterCommands(){const e=this.search.toLocaleLowerCase().split(/\s+/),o=[...l(this.commands,"section").values()].flat();this.filteredCommands=o.filter((({title:o,keywords:t="",parent:n})=>{const i=`${o} ${t}`.toLocaleLowerCase(),s=e.every((e=>i.includes(e)));return(!this.parent&&this.search||n==this.parent)&&s}))}};R.styles=[y,E],o([r({type:Boolean})],R.prototype,"open",void 0),o([r({type:Array,attribute:!1})],R.prototype,"commands",void 0),o([a()],R.prototype,"parent",void 0),o([a()],R.prototype,"search",void 0),o([a()],R.prototype,"bump",void 0),o([a()],R.prototype,"selectedIndex",void 0),o([a()],R.prototype,"filteredCommands",void 0),o([k("commands")],R.prototype,"handleCommandsChange",null),o([k("open")],R.prototype,"handleBump",null),o([k("open","updated")],R.prototype,"focusOnOpen",null),o([k("search"),k("parent"),k("commands")],R.prototype,"filterCommands",null),R=o([s("nord-command-menu")],R);var O=R;export{O as default};
 //# sourceMappingURL=CommandMenu.js.map

package/lib/CommandMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandMenu.js","sources":["../../icons/lib/assets/keyboard-arrow-up-down.js","../../icons/lib/assets/keyboard-return.js","../../icons/lib/assets/keyboard-backspace.js","../src/common/focus.ts","../src/command-menu/CommandMenu.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m8.29008 12.3413 1.41 1.42-3.96 3.95c-.2.19-.45.29-.71.29s-.51-.1-.71-.29l-3.990002-4 1.410002-1.42 2.26 2.25v-12.54002h2v12.63002zm11.38002-6.05002-4.01-4c-.39-.39-1.02-.39-1.41 0l-3.96 3.95 1.41 1.42 2.29-2.29v12.63002h2v-12.54002l2.26 2.25 1.41-1.42z\" fill=\"currentColor\"/></svg>'\nexport const title = \"keyboard-arrow-up-down\"\nexport const tags = \"nordicon keyboard keys arrow up down shortcut\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18.0025 4v8c0 1.1-.9 2-2 2h-12.59l3 3-1.41 1.41-4.71-4.7c-.39-.39-.39-1.02 0-1.41l4.71-4.71 1.41 1.41-3 3h12.59v-8h-4v-2h4c1.1 0 2 .9 2 2z\" fill=\"currentColor\"/></svg>'\nexport const title = \"keyboard-return\"\nexport const tags = \"nordicon keyboard return key shortcut\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18 2h-10.54c-.58 0-1.14.25-1.52.7l-5.14 6c-.65.75-.65 1.85 0 2.6l5.14 6c.38.44.93.7 1.52.7h10.54c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm0 14h-10.54l-5.14-6 5.14-6h10.54zm-9.54-3.88 2.12-2.12-2.12-2.12 1.41-1.41 2.12 2.12 2.12-2.12 1.41 1.41-2.12 2.12 2.12 2.12-1.41 1.41-2.12-2.12-2.12 2.12z\" fill=\"currentColor\"/></svg>'\nexport const title = \"keyboard-backspace\"\nexport const tags = \"nordicon keyboard backspace back delete key shortcut\"\n","/**\n * Gets the currently focused element, taking shadow roots into account.\n */\nexport function getFocusedElement(root: Document | ShadowRoot): Element | undefined {\n  if (root.activeElement?.shadowRoot) {\n    return getFocusedElement(root.activeElement.shadowRoot)\n  }\n\n  return root.activeElement || undefined\n}\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { repeat } from \"lit/directives/repeat.js\"\nimport { createRef, ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\n\nimport * as navigateIcon from \"@nordhealth/icons/lib/assets/keyboard-arrow-up-down.js\"\nimport * as enterIcon from \"@nordhealth/icons/lib/assets/keyboard-return.js\"\nimport * as backspaceIcon from \"@nordhealth/icons/lib/assets/keyboard-backspace.js\"\n\nimport { groupBy } from \"../common/collection.js\"\nimport { wrap } from \"../common/number.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { getFocusedElement } from \"../common/focus.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { KeyboardController } from \"./KeyboardController.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"./CommandMenuAction.js\"\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\nimport { SelectEvent } from \"./SelectEvent.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./CommandMenu.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nIcon.registerIcon(navigateIcon)\nIcon.registerIcon(enterIcon)\nIcon.registerIcon(backspaceIcon)\n\n/**\n * Command Menu allows users to navigate and use an app without\n * touching the mouse and helps them transform into “power users”\n * who can harness more advanced features far faster.\n *\n * @status ready\n * @category action\n * @slot footer - Used to replace the default footer contents.\n * @fires open - The command menu was opened.\n * @fires close - The command menu was closed.\n * @fires {SelectEvent} nord-select - User selected a command from the menu.\n *\n * @cssprop [--n-command-menu-inline-size=640px] - Controls the max inline size, or width, of the command menu.\n * @cssprop [--n-command-menu-block-size=290px] - Controls the max block size, or height, of the command menu.\n * @cssprop [--n-command-menu-block-start=16%] - Controls the command menu offset from the block start, or top, of the screen.\n *\n * @localization instructions - Instructions that offer guidance on how to use the command menu.\n * @localization inputLabel - Accessible label given to the command menu's input.\n * @localization footerArrowKeys - Describes what the arrow keys do.\n * @localization footerEnterKey - Describes what the enter key does.\n * @localization footerEscapeKey - Describes what the escape key does.\n * @localization footerBackspaceKey - Describes what the backspace key does.\n * @localization noResults - A message shown when there are no matching results.\n * @localization tip - A hint tip that describes some approaches to find a command when there are no matching results.\n * @localization placeholder - Hint text to display in the Command Menu search field.\n */\n@customElement(\"nord-command-menu\")\nexport default class CommandMenu extends LitElement {\n  static styles = [componentStyle, style]\n\n  private inputRef = createRef<HTMLInputElement>()\n  private listRef = createRef<HTMLElement>()\n  private previousFocus?: HTMLElement\n\n  private localize = new LocalizeController<\"nord-command-menu\">(this)\n  private dismissController = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.close(),\n  })\n\n  private keyboardController = new KeyboardController(this, {\n    trigger: () => this.select(),\n    goBack: () => this.goBack(),\n    end: () => this.end(),\n    start: () => this.start(),\n    next: () => this.next(),\n    previous: () => this.previous(),\n    toggleOpen: () => this.toggleOpen(),\n  })\n\n  /**\n   * Show or hide the command menu.\n   */\n  @property({ type: Boolean }) open = false\n\n  /**\n   * Array of commands to be included in the menu.\n   * Please see “Commands data” section for more documentation.\n   */\n  @property({ type: Array, attribute: false }) commands: Array<ICommandMenuAction> = []\n\n  @state() private parent: ICommandMenuAction[\"parent\"]\n  @state() private search: string = \"\"\n  @state() private bump = true\n  @state() private selectedIndex = 0\n  @state() private filteredCommands: Array<ICommandMenuAction> = []\n\n  private get selected(): ICommandMenuAction {\n    return this.filteredCommands[this.selectedIndex]\n  }\n\n  /**\n   * Show the command menu programmatically.\n   * @param options allows you to open the menu filtered to a specific parent command.\n   */\n  show(options: { parent?: string } = {}) {\n    const notCancelled = this.dispatchEvent(new NordEvent(\"open\", { cancelable: true }))\n\n    if (notCancelled) {\n      this.open = true\n      this.setParent(options.parent)\n    }\n  }\n\n  /**\n   * Close the command menu programmatically.\n   */\n  close() {\n    this.open = false\n    this.previousFocus?.focus()\n    this.previousFocus = undefined\n\n    this.dispatchEvent(new NordEvent(\"close\"))\n  }\n\n  /**\n   * Toggle the open state programmatically.\n   */\n  toggleOpen() {\n    if (this.open) {\n      this.close()\n    } else {\n      this.show()\n    }\n  }\n\n  /**\n   * Focus the command menu's input.\n   */\n  focus() {\n    this.inputRef.value?.focus()\n  }\n\n  override render() {\n    const sections = groupBy(this.filteredCommands, \"section\")\n    const activeDescendant = this.filteredCommands.length === 0 ? \"no-results\" : this.selected?.id\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-visible\": this.open,\n          \"n-modal\": true,\n        })}\n      >\n        <div\n          @animationend=${this.handleAnimationEnd}\n          class=${classMap({\n            \"n-bump\": this.bump,\n            \"n-modal-content\": true,\n          })}\n        >\n          <div class=\"n-search-wrapper\">\n            <nord-visually-hidden id=\"instructions\">${this.localize.term(\"instructions\")}</nord-visually-hidden>\n            <input\n              type=\"text\"\n              id=\"search\"\n              @input=${this.handleInput}\n              @blur=${this.handleBlur}\n              ${ref(this.inputRef)}\n              placeholder=${this.localize.term(\"placeholder\")}\n              .value=${this.search}\n              spellcheck=\"false\"\n              autocomplete=\"off\"\n              autocapitalize=\"off\"\n              aria-label=${this.localize.term(\"inputLabel\")}\n              aria-autocomplete=\"list\"\n              aria-haspopup=\"listbox\"\n              role=\"combobox\"\n              aria-controls=\"list\"\n              aria-expanded=\"true\"\n              aria-activedescendant=${ifDefined(activeDescendant)}\n              aria-describedby=\"instructions\"\n            />\n          </div>\n\n          <div class=\"n-modal-body\">\n            <div id=\"list\" ${ref(this.listRef)} role=\"listbox\">\n              ${this.filteredCommands.length === 0\n                ? this.renderNoResults()\n                : Array.from(sections, ([section, commands]) => this.renderSection(section, commands))}\n            </div>\n          </div>\n          <slot name=\"footer\">\n            <div class=\"n-modal-footer\">\n              <span class=\"n-help\">\n                <nord-icon label=\"Arrow keys\" name=${navigateIcon.title}></nord-icon>\n                ${this.localize.term(\"footerArrowKeys\")}\n              </span>\n              <span class=\"n-help\">\n                <nord-icon label=\"Enter key\" name=${enterIcon.title}></nord-icon>\n                ${this.localize.term(\"footerEnterKey\")}\n              </span>\n              <span class=\"n-help\">${this.localize.term(\"footerEscapeKey\")}</span>\n              <span class=\"n-help n-backspace\">\n                <nord-icon label=\"Backspace key\" name=${backspaceIcon.title}></nord-icon>\n                ${this.localize.term(\"footerBackspaceKey\")}\n              </span>\n            </div>\n          </slot>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNoResults() {\n    return html`\n      <div id=\"no-results\" class=\"n-command-empty\" role=\"option\" aria-selected=\"true\">\n        <div class=\"n-title\">${this.localize.term(\"noResults\", this.search)}</div>\n        <div class=\"n-tip\">${this.localize.term(\"tip\")}</div>\n      </div>\n    `\n  }\n\n  private renderSection(section: string | undefined, commands: ICommandMenuAction[]) {\n    const sectionId = `section-${section}`\n\n    // TODO: test on latest safari, since it seems to have issues with grouped options\n    return html`\n      <div role=\"group\" aria-labelledby=${cond(section, sectionId)}>\n        ${section ? html`<div class=\"n-group-header\" role=\"presentation\" id=${sectionId}>${section}</div>` : nothing}\n        ${repeat(\n          commands,\n          command => command.id,\n          command => html`\n            <nord-command-menu-action\n              id=${command.id}\n              .command=${command}\n              ?selected=${this.open && command.id === this.selected?.id}\n              @click=${() => this.select(command)}\n              role=\"option\"\n              aria-selected=${cond(command.id === this.selected?.id, \"true\")}\n            ></nord-command-menu-action>\n          `\n        )}\n      </div>\n    `\n  }\n\n  @observe(\"commands\")\n  protected handleCommandsChange() {\n    this.keyboardController.registerCommandShortcuts()\n  }\n\n  @observe(\"open\")\n  protected handleBump() {\n    if (this.open) {\n      this.bump = true\n    }\n  }\n\n  @observe(\"open\", \"updated\")\n  protected focusOnOpen() {\n    if (this.open) {\n      this.previousFocus = getFocusedElement(document) as HTMLElement\n      this.focus()\n\n      if (this.listRef.value) {\n        this.listRef.value.scrollTop = 0\n      }\n    }\n  }\n\n  private handleAnimationEnd() {\n    this.bump = false\n  }\n\n  private handleBlur() {\n    if (this.open) {\n      this.focus()\n    }\n  }\n\n  private handleInput(event: KeyboardEvent) {\n    const input = event.target as HTMLInputElement\n    this.setSearch(input.value)\n  }\n\n  private select(command: ICommandMenuAction = this.selected) {\n    const isParent = this.commands.some(item => item.parent === command.id)\n\n    if (isParent) {\n      this.setParent(command.id)\n      this.bump = true\n      this.focus()\n    } else {\n      this.close()\n    }\n\n    this.setSearch(\"\")\n    command.handler?.(this)\n\n    // this is separated into two parts because of a bug in Custom Elements Analyzer, where it gets the event name wrong.\n    // TODO: cleanup when bug is fixed.\n    const event = new SelectEvent(command)\n    this.dispatchEvent(event)\n  }\n\n  private start() {\n    this.selectedIndex = 0\n  }\n\n  private end() {\n    this.selectedIndex = this.filteredCommands.length - 1\n  }\n\n  private next() {\n    this.selectedIndex = wrap(this.selectedIndex + 1, 0, this.filteredCommands.length - 1)\n  }\n\n  private previous() {\n    this.selectedIndex = wrap(this.selectedIndex - 1, 0, this.filteredCommands.length - 1)\n  }\n\n  private goBack() {\n    if (this.search) {\n      return\n    }\n\n    if (this.parent) {\n      const parentCommand = this.commands.find(command => command.id === this.parent)\n      this.setParent(parentCommand?.parent)\n    }\n  }\n\n  private setParent(parent?: ICommandMenuAction[\"parent\"]) {\n    this.parent = parent\n    this.setSearch(\"\")\n  }\n\n  private setSearch(str: string) {\n    this.search = str\n    this.selectedIndex = 0\n  }\n\n  @observe(\"search\")\n  @observe(\"parent\")\n  @observe(\"commands\")\n  private filterCommands() {\n    const searchTerms = this.search.toLocaleLowerCase().split(/\\s+/)\n\n    // sort commands in the same way as they are visually displayed\n    // this is a quick fix for cases where the visual order of commands is different from order in the commands array\n    // without ordering, the up/down arrow keys can end up navigating out of visual order.\n    // but it feels wasteful to groupBy here, then discard the result, only to re-calculate in render.\n    // TODO: is there a way to do this without grouping twice?\n    const groupedBySection = groupBy(this.commands, \"section\")\n    const ordered = [...groupedBySection.values()].flat()\n\n    this.filteredCommands = ordered.filter(({ title, keywords = \"\", parent }) => {\n      const searchSpace = `${title} ${keywords}`.toLocaleLowerCase()\n      const matcher = searchTerms.every(term => searchSpace.includes(term))\n\n      if (!this.parent && this.search) {\n        // global search for items on root\n        return matcher\n      }\n\n      // use looser equality check so that it handles `null` as command's `parent` value\n      // eslint-disable-next-line eqeqeq\n      return parent == this.parent && matcher\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-command-menu\": CommandMenu\n  }\n}\n"],"names":["title","getFocusedElement","root","activeElement","_a","shadowRoot","undefined","Icon","registerIcon","navigateIcon","enterIcon","backspaceIcon","CommandMenu","LitElement","constructor","this","inputRef","createRef","listRef","localize","LocalizeController","dismissController","LightDismissController","isOpen","open","onDismiss","close","keyboardController","KeyboardController","trigger","select","goBack","end","start","next","previous","toggleOpen","commands","search","bump","selectedIndex","filteredCommands","selected","show","options","dispatchEvent","NordEvent","cancelable","setParent","parent","previousFocus","focus","value","render","sections","groupBy","activeDescendant","length","id","html","classMap","handleAnimationEnd","term","handleInput","handleBlur","ref","ifDefined","renderNoResults","Array","from","section","renderSection","navigateIcon.title","enterIcon.title","backspaceIcon.title","sectionId","cond","nothing","repeat","command","_b","handleCommandsChange","registerCommandShortcuts","handleBump","focusOnOpen","document","scrollTop","event","input","target","setSearch","some","item","handler","call","SelectEvent","wrap","parentCommand","find","str","filterCommands","searchTerms","toLocaleLowerCase","split","ordered","values","flat","filter","keywords","searchSpace","matcher","every","includes","styles","componentStyle","style","__decorate","property","type","Boolean","prototype","attribute","state","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"CommandMenu.js","sources":["../../icons/lib/assets/keyboard-arrow-up-down.js","../../icons/lib/assets/keyboard-return.js","../../icons/lib/assets/keyboard-backspace.js","../src/common/focus.ts","../src/command-menu/CommandMenu.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m8.29008 12.3413 1.41 1.42-3.96 3.95c-.2.19-.45.29-.71.29s-.51-.1-.71-.29l-3.990002-4 1.410002-1.42 2.26 2.25v-12.54002h2v12.63002zm11.38002-6.05002-4.01-4c-.39-.39-1.02-.39-1.41 0l-3.96 3.95 1.41 1.42 2.29-2.29v12.63002h2v-12.54002l2.26 2.25 1.41-1.42z\" fill=\"currentColor\"/></svg>'\nexport const title = \"keyboard-arrow-up-down\"\nexport const tags = \"nordicon keyboard keys arrow up down shortcut\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18.0025 4v8c0 1.1-.9 2-2 2h-12.59l3 3-1.41 1.41-4.71-4.7c-.39-.39-.39-1.02 0-1.41l4.71-4.71 1.41 1.41-3 3h12.59v-8h-4v-2h4c1.1 0 2 .9 2 2z\" fill=\"currentColor\"/></svg>'\nexport const title = \"keyboard-return\"\nexport const tags = \"nordicon keyboard return key shortcut\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18 2h-10.54c-.58 0-1.14.25-1.52.7l-5.14 6c-.65.75-.65 1.85 0 2.6l5.14 6c.38.44.93.7 1.52.7h10.54c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm0 14h-10.54l-5.14-6 5.14-6h10.54zm-9.54-3.88 2.12-2.12-2.12-2.12 1.41-1.41 2.12 2.12 2.12-2.12 1.41 1.41-2.12 2.12 2.12 2.12-1.41 1.41-2.12-2.12-2.12 2.12z\" fill=\"currentColor\"/></svg>'\nexport const title = \"keyboard-backspace\"\nexport const tags = \"nordicon keyboard backspace back delete key shortcut\"\n","/**\n * Gets the currently focused element, taking shadow roots into account.\n */\nexport function getFocusedElement(root: Document | ShadowRoot): Element | undefined {\n  if (root.activeElement?.shadowRoot) {\n    return getFocusedElement(root.activeElement.shadowRoot)\n  }\n\n  return root.activeElement || undefined\n}\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { repeat } from \"lit/directives/repeat.js\"\nimport { createRef, ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\n\nimport * as navigateIcon from \"@nordhealth/icons/lib/assets/keyboard-arrow-up-down.js\"\nimport * as enterIcon from \"@nordhealth/icons/lib/assets/keyboard-return.js\"\nimport * as backspaceIcon from \"@nordhealth/icons/lib/assets/keyboard-backspace.js\"\n\nimport { groupBy } from \"../common/collection.js\"\nimport { wrap } from \"../common/number.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { getFocusedElement } from \"../common/focus.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { KeyboardController } from \"./KeyboardController.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"./CommandMenuAction.js\"\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\nimport { SelectEvent } from \"./SelectEvent.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./CommandMenu.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nIcon.registerIcon(navigateIcon)\nIcon.registerIcon(enterIcon)\nIcon.registerIcon(backspaceIcon)\n\n/**\n * Command Menu allows users to navigate and use an app without\n * touching the mouse and helps them transform into “power users”\n * who can harness more advanced features far faster.\n *\n * @status ready\n * @category action\n * @slot footer - Used to replace the default footer contents.\n * @fires open - The command menu was opened.\n * @fires close - The command menu was closed.\n * @fires {SelectEvent} nord-select - User selected a command from the menu.\n *\n * @cssprop [--n-command-menu-inline-size=640px] - Controls the max inline size, or width, of the command menu.\n * @cssprop [--n-command-menu-block-size=290px] - Controls the max block size, or height, of the command menu.\n * @cssprop [--n-command-menu-block-start=16%] - Controls the command menu offset from the block start, or top, of the screen.\n *\n * @localization instructions - Instructions that offer guidance on how to use the command menu.\n * @localization inputLabel - Accessible label given to the command menu's input.\n * @localization footerArrowKeys - Describes what the arrow keys do.\n * @localization footerEnterKey - Describes what the enter key does.\n * @localization footerEscapeKey - Describes what the escape key does.\n * @localization footerBackspaceKey - Describes what the backspace key does.\n * @localization noResults - A message shown when there are no matching results.\n * @localization tip - A hint tip that describes some approaches to find a command when there are no matching results.\n * @localization placeholder - Hint text to display in the Command Menu search field.\n */\n@customElement(\"nord-command-menu\")\nexport default class CommandMenu extends LitElement {\n  static styles = [componentStyle, style]\n\n  private inputRef = createRef<HTMLInputElement>()\n  private listRef = createRef<HTMLElement>()\n  private previousFocus?: HTMLElement\n\n  private localize = new LocalizeController<\"nord-command-menu\">(this)\n  private dismissController = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.close(),\n  })\n\n  private keyboardController = new KeyboardController(this, {\n    trigger: () => this.select(),\n    goBack: () => this.goBack(),\n    end: () => this.end(),\n    start: () => this.start(),\n    next: () => this.next(),\n    previous: () => this.previous(),\n    toggleOpen: () => this.toggleOpen(),\n  })\n\n  /**\n   * Show or hide the command menu.\n   */\n  @property({ type: Boolean }) open = false\n\n  /**\n   * Array of commands to be included in the menu.\n   * Please see “Commands data” section for more documentation.\n   */\n  @property({ type: Array, attribute: false }) commands: Array<ICommandMenuAction> = []\n\n  @state() private parent: ICommandMenuAction[\"parent\"]\n  @state() private search: string = \"\"\n  @state() private bump = true\n  @state() private selectedIndex = 0\n  @state() private filteredCommands: Array<ICommandMenuAction> = []\n\n  private get selected(): ICommandMenuAction {\n    return this.filteredCommands[this.selectedIndex]\n  }\n\n  /**\n   * Show the command menu programmatically.\n   * @param options allows you to open the menu filtered to a specific parent command.\n   */\n  show(options: { parent?: string } = {}) {\n    const notCancelled = this.dispatchEvent(new NordEvent(\"open\", { cancelable: true }))\n\n    if (notCancelled) {\n      this.open = true\n      this.setParent(options.parent)\n    }\n  }\n\n  /**\n   * Close the command menu programmatically.\n   */\n  close() {\n    this.open = false\n    this.previousFocus?.focus()\n    this.previousFocus = undefined\n\n    this.dispatchEvent(new NordEvent(\"close\"))\n  }\n\n  /**\n   * Toggle the open state programmatically.\n   */\n  toggleOpen() {\n    if (this.open) {\n      this.close()\n    } else {\n      this.show()\n    }\n  }\n\n  /**\n   * Focus the command menu's input.\n   */\n  focus() {\n    this.inputRef.value?.focus()\n  }\n\n  override render() {\n    const sections = groupBy(this.filteredCommands, \"section\")\n    const activeDescendant = this.filteredCommands.length === 0 ? \"no-results\" : this.selected?.id\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-visible\": this.open,\n          \"n-modal\": true,\n        })}\n      >\n        <div\n          @animationend=${this.handleAnimationEnd}\n          class=${classMap({\n            \"n-bump\": this.bump,\n            \"n-modal-content\": true,\n          })}\n        >\n          <div class=\"n-search-wrapper\">\n            <nord-visually-hidden id=\"instructions\">${this.localize.term(\"instructions\")}</nord-visually-hidden>\n            <input\n              type=\"text\"\n              id=\"search\"\n              @input=${this.handleInput}\n              @blur=${this.handleBlur}\n              ${ref(this.inputRef)}\n              placeholder=${this.localize.term(\"placeholder\")}\n              .value=${this.search}\n              spellcheck=\"false\"\n              autocomplete=\"off\"\n              autocapitalize=\"off\"\n              aria-label=${this.localize.term(\"inputLabel\")}\n              aria-autocomplete=\"list\"\n              aria-haspopup=\"listbox\"\n              role=\"combobox\"\n              aria-controls=\"list\"\n              aria-expanded=\"true\"\n              aria-activedescendant=${ifDefined(activeDescendant)}\n              aria-describedby=\"instructions\"\n            />\n          </div>\n\n          <div class=\"n-modal-body\">\n            <div id=\"list\" ${ref(this.listRef)} role=\"listbox\">\n              ${this.filteredCommands.length === 0\n                ? this.renderNoResults()\n                : Array.from(sections, ([section, commands]) => this.renderSection(section, commands))}\n            </div>\n          </div>\n          <slot name=\"footer\">\n            <div class=\"n-modal-footer\">\n              <span class=\"n-help\">\n                <nord-icon label=\"Arrow keys\" name=${navigateIcon.title}></nord-icon>\n                ${this.localize.term(\"footerArrowKeys\")}\n              </span>\n              <span class=\"n-help\">\n                <nord-icon label=\"Enter key\" name=${enterIcon.title}></nord-icon>\n                ${this.localize.term(\"footerEnterKey\")}\n              </span>\n              <span class=\"n-help\">${this.localize.term(\"footerEscapeKey\")}</span>\n              <span class=\"n-help n-backspace\">\n                <nord-icon label=\"Backspace key\" name=${backspaceIcon.title}></nord-icon>\n                ${this.localize.term(\"footerBackspaceKey\")}\n              </span>\n            </div>\n          </slot>\n        </div>\n      </div>\n    `\n  }\n\n  private renderNoResults() {\n    return html`\n      <div id=\"no-results\" class=\"n-command-empty\" role=\"option\" aria-selected=\"true\">\n        <div class=\"n-title\">${this.localize.term(\"noResults\", this.search)}</div>\n        <div class=\"n-tip\">${this.localize.term(\"tip\")}</div>\n      </div>\n    `\n  }\n\n  private renderSection(section: string | undefined, commands: ICommandMenuAction[]) {\n    const sectionId = `section-${section}`\n\n    // TODO: test on latest safari, since it seems to have issues with grouped options\n    return html`\n      <div role=\"group\" aria-labelledby=${cond(section, sectionId)}>\n        ${section ? html`<div class=\"n-group-header\" role=\"presentation\" id=${sectionId}>${section}</div>` : nothing}\n        ${repeat(\n          commands,\n          command => command.id,\n          command => html`\n            <nord-command-menu-action\n              id=${command.id}\n              .command=${command}\n              ?selected=${this.open && command.id === this.selected?.id}\n              @click=${() => this.select(command)}\n              role=\"option\"\n              aria-selected=${cond(command.id === this.selected?.id, \"true\")}\n            ></nord-command-menu-action>\n          `\n        )}\n      </div>\n    `\n  }\n\n  @observe(\"commands\")\n  protected handleCommandsChange() {\n    this.keyboardController.registerCommandShortcuts()\n  }\n\n  @observe(\"open\")\n  protected handleBump() {\n    if (this.open) {\n      this.bump = true\n    }\n  }\n\n  @observe(\"open\", \"updated\")\n  protected focusOnOpen() {\n    if (this.open) {\n      this.previousFocus = getFocusedElement(document) as HTMLElement\n      this.focus()\n\n      if (this.listRef.value) {\n        this.listRef.value.scrollTop = 0\n      }\n    }\n  }\n\n  private handleAnimationEnd() {\n    this.bump = false\n  }\n\n  private handleBlur() {\n    if (this.open) {\n      this.focus()\n    }\n  }\n\n  private handleInput(event: KeyboardEvent) {\n    const input = event.target as HTMLInputElement\n    this.setSearch(input.value)\n  }\n\n  private select(command: ICommandMenuAction = this.selected) {\n    const isParent = this.commands.some(item => item.parent === command.id)\n\n    if (isParent) {\n      this.setParent(command.id)\n      this.bump = true\n      this.focus()\n    } else {\n      this.close()\n    }\n\n    this.setSearch(\"\")\n    command.handler?.(this)\n\n    // this is separated into two parts because of a bug in Custom Elements Analyzer, where it gets the event name wrong.\n    // TODO: cleanup when bug is fixed.\n    const event = new SelectEvent(command)\n    this.dispatchEvent(event)\n  }\n\n  private start() {\n    this.selectedIndex = 0\n  }\n\n  private end() {\n    this.selectedIndex = this.filteredCommands.length - 1\n  }\n\n  private next() {\n    this.selectedIndex = wrap(this.selectedIndex + 1, 0, this.filteredCommands.length - 1)\n  }\n\n  private previous() {\n    this.selectedIndex = wrap(this.selectedIndex - 1, 0, this.filteredCommands.length - 1)\n  }\n\n  private goBack() {\n    if (this.search) {\n      return\n    }\n\n    if (this.parent) {\n      const parentCommand = this.commands.find(command => command.id === this.parent)\n      this.setParent(parentCommand?.parent)\n    }\n  }\n\n  private setParent(parent?: ICommandMenuAction[\"parent\"]) {\n    this.parent = parent\n    this.setSearch(\"\")\n  }\n\n  private setSearch(str: string) {\n    this.search = str\n    this.selectedIndex = 0\n  }\n\n  @observe(\"search\")\n  @observe(\"parent\")\n  @observe(\"commands\")\n  private filterCommands() {\n    const searchTerms = this.search.toLocaleLowerCase().split(/\\s+/)\n\n    // sort commands in the same way as they are visually displayed\n    // this is a quick fix for cases where the visual order of commands is different from order in the commands array\n    // without ordering, the up/down arrow keys can end up navigating out of visual order.\n    // but it feels wasteful to groupBy here, then discard the result, only to re-calculate in render.\n    // TODO: is there a way to do this without grouping twice?\n    const groupedBySection = groupBy(this.commands, \"section\")\n    const ordered = [...groupedBySection.values()].flat()\n\n    this.filteredCommands = ordered.filter(({ title, keywords = \"\", parent }) => {\n      const searchSpace = `${title} ${keywords}`.toLocaleLowerCase()\n      const matcher = searchTerms.every(term => searchSpace.includes(term))\n\n      if (!this.parent && this.search) {\n        // global search for items on root\n        return matcher\n      }\n\n      // use looser equality check so that it handles `null` as command's `parent` value\n      // eslint-disable-next-line eqeqeq\n      return parent == this.parent && matcher\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-command-menu\": CommandMenu\n  }\n}\n"],"names":["title","getFocusedElement","root","activeElement","_a","shadowRoot","undefined","Icon","registerIcon","navigateIcon","enterIcon","backspaceIcon","CommandMenu","LitElement","constructor","this","inputRef","createRef","listRef","localize","LocalizeController","dismissController","LightDismissController","isOpen","open","onDismiss","close","keyboardController","KeyboardController","trigger","select","goBack","end","start","next","previous","toggleOpen","commands","search","bump","selectedIndex","filteredCommands","selected","show","options","dispatchEvent","NordEvent","cancelable","setParent","parent","previousFocus","focus","value","render","sections","groupBy","activeDescendant","length","id","html","classMap","handleAnimationEnd","term","handleInput","handleBlur","ref","ifDefined","renderNoResults","Array","from","section","renderSection","navigateIcon.title","backspaceIcon.title","sectionId","cond","nothing","repeat","command","_b","handleCommandsChange","registerCommandShortcuts","handleBump","focusOnOpen","document","scrollTop","event","input","target","setSearch","some","item","handler","call","SelectEvent","wrap","parentCommand","find","str","filterCommands","searchTerms","toLocaleLowerCase","split","ordered","values","flat","filter","keywords","searchSpace","matcher","every","includes","styles","componentStyle","style","__decorate","property","type","Boolean","prototype","attribute","state","observe","customElement"],"mappings":"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"}

package/lib/CommandMenuAction.js

@@ -1,2 +1,2 @@
-import{i as e,_ as o,s as r,x as n,A as t,e as i}from"./query-assigned-elements-822fe360.js";import{e as s}from"./property-03f59dce.js";import{o as a}from"./class-map-c0d8e1e5.js";import{D as c}from"./DirectionController-f35f5476.js";import{o as l}from"./observe-a9c6dfb6.js";import d from"./Icon.js";import"./VisuallyHidden.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./if-defined-8a007930.js";import"./cond-09498763.js";import"./IconManager.js";import"./Component-1f694235.js";const m="arrow-right";var p=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.7098 10.7401-8.63996 8.67-1.42-1.41 7.93996-7.97-7.99996-8.03001 1.42-1.410002 8.69996 8.740002c.39.39.39 1.02001 0 1.41001z" fill="currentColor"/></svg>',title:m,tags:"nordicon arrow right caret pointing triangle chevron"});const v="arrow-left";var h=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z"/><path d="m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z"/></g></svg>',title:v,tags:"nordicon arrow left caret pointing triangle chevron"});const g="keyboard-option";var f=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.5 14h6.5v2h-6.5c-.63 0-1.22-.3-1.6-.8l-5.4-7.2h-6.5v-2h6.5c.63 0 1.22.3 1.6.8zm-1.5-8v2h8v-2z" fill="currentColor"/></svg>',title:g,tags:"nordicon keyboard option key shortcut"});const u=e`:host{display:flex}.n-command{display:flex;flex:1;border-inline-start:2px solid transparent;align-items:center;color:var(--n-color-text);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-command.n-selected,.n-command:hover{cursor:pointer;background-color:var(--n-color-active)}.n-command.n-selected{border-inline-start-color:var(--n-color-accent)}nord-icon{color:var(--n-color-icon)}.n-command-icon{margin-inline-start:2px;margin-inline-end:calc(var(--n-space-s) * 1.4);line-height:var(--n-line-height-tight)}.n-selected .n-command-icon nord-icon{color:var(--n-color-icon-hover)}.n-title{flex:1;margin-inline-end:var(--n-space-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-shortcuts{display:flex;gap:var(--n-space-xs)}.n-shortcut{padding:calc(var(--n-space-xs)/ 2) calc(var(--n-space-s)/ 3);text-transform:capitalize;font-size:var(--n-font-size-xs);border:1px solid var(--n-color-border-strong);font-weight:var(--n-font-weight);box-shadow:var(--n-box-shadow);border-radius:var(--n-border-radius-s);color:var(--n-color-icon);background:var(--n-color-button);line-height:var(--n-line-height-tight);min-inline-size:var(--n-space-s);display:inline-flex;align-items:center;justify-content:center;user-select:none}`,w=/(?:Key|Digit)([A-Z0-9])/g;d.registerIcon(h),d.registerIcon(p),d.registerIcon(f);let x=class extends r{constructor(){super(...arguments),this.direction=new c(this),this.selected=!1}render(){return n`<div class="${a({"n-selected":this.selected,"n-command":!0})}"><div aria-hidden="true" class="n-command-icon"><nord-icon size="s" name="${this.getIconName()}"></nord-icon></div><div class="n-title">${this.command.title}</div>${this.renderShortcut()}</div>`}ensureInView(){this.selected&&requestAnimationFrame((()=>this.scrollIntoView({block:"nearest"})))}getIconName(){return this.command.icon?this.command.icon:this.direction.isLTR?m:v}renderShortcut(){if(!this.command.shortcut)return t;const e=this.command.shortcut.replace(w,"$1");return n`<nord-visually-hidden>, ${e}</nord-visually-hidden><div aria-hidden="true" class="n-shortcuts">${e.split("+").map((e=>n`<div class="n-shortcut">${"alt"===e.toLowerCase()&&navigator.platform.indexOf("Mac")>-1?n`<nord-icon name="${g}" size="s"></nord-icon>`:e}</div>`))}</div>`}};x.styles=u,o([s({type:Object})],x.prototype,"command",void 0),o([s({type:Boolean})],x.prototype,"selected",void 0),o([l("selected")],x.prototype,"ensureInView",null),x=o([i("nord-command-menu-action")],x);var b=x;export{b as default};
+import{i as e,_ as r,s as o,x as n,A as t,e as i}from"./query-assigned-elements-2f8275b7.js";import{e as s}from"./property-03f59dce.js";import{o as a}from"./class-map-4a0dec4a.js";import{D as c}from"./DirectionController-f35f5476.js";import{o as l}from"./observe-a9c6dfb6.js";import d from"./Icon.js";import"./VisuallyHidden.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./if-defined-10508457.js";import"./cond-77258def.js";import"./IconManager.js";import"./Component-253ecb24.js";var m=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.7098 10.7401-8.63996 8.67-1.42-1.41 7.93996-7.97-7.99996-8.03001 1.42-1.410002 8.69996 8.740002c.39.39.39 1.02001 0 1.41001z" fill="currentColor"/></svg>',title:"arrow-right",tags:"nordicon arrow right caret pointing triangle chevron"});var p=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z"/><path d="m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z"/></g></svg>',title:"arrow-left",tags:"nordicon arrow left caret pointing triangle chevron"});var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.5 14h6.5v2h-6.5c-.63 0-1.22-.3-1.6-.8l-5.4-7.2h-6.5v-2h6.5c.63 0 1.22.3 1.6.8zm-1.5-8v2h8v-2z" fill="currentColor"/></svg>',title:"keyboard-option",tags:"nordicon keyboard option key shortcut"});const h=e`:host{display:flex}.n-command{display:flex;flex:1;border-inline-start:2px solid transparent;align-items:center;color:var(--n-color-text);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-command.n-selected,.n-command:hover{cursor:pointer;background-color:var(--n-color-active)}.n-command.n-selected{border-inline-start-color:var(--n-color-accent)}nord-icon{color:var(--n-color-icon)}.n-command-icon{margin-inline-start:2px;margin-inline-end:calc(var(--n-space-s) * 1.4);line-height:var(--n-line-height-tight)}.n-selected .n-command-icon nord-icon{color:var(--n-color-icon-hover)}.n-title{flex:1;margin-inline-end:var(--n-space-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-shortcuts{display:flex;gap:var(--n-space-xs)}.n-shortcut{padding:calc(var(--n-space-xs)/ 2) calc(var(--n-space-s)/ 3);text-transform:capitalize;font-size:var(--n-font-size-xs);border:1px solid var(--n-color-border-strong);font-weight:var(--n-font-weight);box-shadow:var(--n-box-shadow);border-radius:var(--n-border-radius-s);color:var(--n-color-icon);background:var(--n-color-button);line-height:var(--n-line-height-tight);min-inline-size:var(--n-space-s);display:inline-flex;align-items:center;justify-content:center;user-select:none}`,g=/(?:Key|Digit)([A-Z0-9])/g;d.registerIcon(p),d.registerIcon(m),d.registerIcon(v);let f=class extends o{constructor(){super(...arguments),this.direction=new c(this),this.selected=!1}render(){return n`<div class="${a({"n-selected":this.selected,"n-command":!0})}"><div aria-hidden="true" class="n-command-icon"><nord-icon size="s" name="${this.getIconName()}"></nord-icon></div><div class="n-title">${this.command.title}</div>${this.renderShortcut()}</div>`}ensureInView(){this.selected&&requestAnimationFrame((()=>this.scrollIntoView({block:"nearest"})))}getIconName(){return this.command.icon?this.command.icon:this.direction.isLTR?"arrow-right":"arrow-left"}renderShortcut(){if(!this.command.shortcut)return t;const e=this.command.shortcut.replace(g,"$1");return n`<nord-visually-hidden>, ${e}</nord-visually-hidden><div aria-hidden="true" class="n-shortcuts">${e.split("+").map((e=>n`<div class="n-shortcut">${"alt"===e.toLowerCase()&&navigator.platform.indexOf("Mac")>-1?n`<nord-icon name="${"keyboard-option"}" size="s"></nord-icon>`:e}</div>`))}</div>`}};f.styles=h,r([s({type:Object})],f.prototype,"command",void 0),r([s({type:Boolean})],f.prototype,"selected",void 0),r([l("selected")],f.prototype,"ensureInView",null),f=r([i("nord-command-menu-action")],f);var u=f;export{u as default};
 //# sourceMappingURL=CommandMenuAction.js.map

package/lib/CommandMenuAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandMenuAction.js","sources":["../../icons/lib/assets/arrow-right.js","../../icons/lib/assets/arrow-left.js","../../icons/lib/assets/keyboard-option.js","../src/command-menu/CommandMenuAction.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m14.7098 10.7401-8.63996 8.67-1.42-1.41 7.93996-7.97-7.99996-8.03001 1.42-1.410002 8.69996 8.740002c.39.39.39 1.02001 0 1.41001z\" fill=\"currentColor\"/></svg>'\nexport const title = \"arrow-right\"\nexport const tags = \"nordicon arrow right caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"currentColor\"><path d=\"m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z\"/><path d=\"m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z\"/></g></svg>'\nexport const title = \"arrow-left\"\nexport const tags = \"nordicon arrow left caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.5 14h6.5v2h-6.5c-.63 0-1.22-.3-1.6-.8l-5.4-7.2h-6.5v-2h6.5c.63 0 1.22.3 1.6.8zm-1.5-8v2h8v-2z\" fill=\"currentColor\"/></svg>'\nexport const title = \"keyboard-option\"\nexport const tags = \"nordicon keyboard option key shortcut\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as chevronIconRight from \"@nordhealth/icons/lib/assets/arrow-right.js\"\nimport * as chevronIconLeft from \"@nordhealth/icons/lib/assets/arrow-left.js\"\nimport * as altKeyIcon from \"@nordhealth/icons/lib/assets/keyboard-option.js\"\n\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport style from \"./CommandMenuAction.css\"\n\nconst KEY_REGEX = /(?:Key|Digit)([A-Z0-9])/g\nconst isMacintosh = () => navigator.platform.indexOf(\"Mac\") > -1\n\nIcon.registerIcon(chevronIconLeft)\nIcon.registerIcon(chevronIconRight)\nIcon.registerIcon(altKeyIcon)\n\n/**\n * Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.\n *\n * @status internal\n */\n@customElement(\"nord-command-menu-action\")\nexport default class CommandMenuAction extends LitElement {\n  static styles = style\n\n  private direction = new DirectionController(this)\n\n  @property({ type: Object }) command!: ICommandMenuAction\n\n  @property({ type: Boolean }) selected = false\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          \"n-selected\": this.selected,\n          \"n-command\": true,\n        })}\n      >\n        <div aria-hidden=\"true\" class=\"n-command-icon\">\n          <nord-icon size=\"s\" name=${this.getIconName()}></nord-icon>\n        </div>\n        <div class=\"n-title\">${this.command.title}</div>\n        ${this.renderShortcut()}\n      </div>\n    `\n  }\n\n  /**\n   * Scroll to show element\n   */\n  @observe(\"selected\")\n  protected ensureInView() {\n    if (this.selected) {\n      requestAnimationFrame(() => this.scrollIntoView({ block: \"nearest\" }))\n    }\n  }\n\n  private getIconName() {\n    if (this.command.icon) {\n      return this.command.icon\n    }\n\n    return this.direction.isLTR ? chevronIconRight.title : chevronIconLeft.title\n  }\n\n  private renderShortcut() {\n    if (!this.command.shortcut) {\n      return nothing\n    }\n\n    const keys = this.command.shortcut.replace(KEY_REGEX, \"$1\")\n\n    return html`\n      <nord-visually-hidden>, ${keys}</nord-visually-hidden>\n\n      <div aria-hidden=\"true\" class=\"n-shortcuts\">\n        ${keys\n          .split(\"+\")\n          .map(\n            key =>\n              html`<div class=\"n-shortcut\">\n                ${key.toLowerCase() === \"alt\" && isMacintosh()\n                  ? html`<nord-icon name=${altKeyIcon.title} size=\"s\"></nord-icon>`\n                  : key}\n              </div>`\n          )}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-command-menu-action\": CommandMenuAction\n  }\n}\n"],"names":["title","KEY_REGEX","Icon","registerIcon","chevronIconLeft","chevronIconRight","altKeyIcon","CommandMenuAction","LitElement","constructor","this","direction","DirectionController","selected","render","html","classMap","getIconName","command","renderShortcut","ensureInView","requestAnimationFrame","scrollIntoView","block","icon","isLTR","chevronIconRight.title","chevronIconLeft.title","shortcut","nothing","keys","replace","split","map","key","toLowerCase","navigator","platform","indexOf","altKeyIcon.title","styles","style","__decorate","property","type","Object","prototype","Boolean","observe","customElement"],"mappings":"0fACO,MAAMA,EAAQ,0DADN,kPAEK,yDCDb,MAAMA,EAAQ,yDADN,2YAEK,wDCDb,MAAMA,EAAQ,8DADN,mNAEK,wzCCadC,EAAY,2BAGlBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAQH,IAAMC,EAAN,cAAgCC,EAAhCC,kCAGLC,KAAAC,UAAY,IAAIC,EAAoBF,MAIfA,KAAQG,UAAG,CA6DzC,CA3DUC,SACP,OAAOC,CAAI,eAECC,EAAS,CACf,aAAcN,KAAKG,SACnB,aAAa,iFAIcH,KAAKO,yDAEXP,KAAKQ,QAAQlB,cAClCU,KAAKS,wBAGZ,CAMSC,eACJV,KAAKG,UACPQ,uBAAsB,IAAMX,KAAKY,eAAe,CAAEC,MAAO,aAE5D,CAEON,cACN,OAAIP,KAAKQ,QAAQM,KACRd,KAAKQ,QAAQM,KAGfd,KAAKC,UAAUc,MAAQC,EAAyBC,CACxD,CAEOR,iBACN,IAAKT,KAAKQ,QAAQU,SAChB,OAAOC,EAGT,MAAMC,EAAOpB,KAAKQ,QAAQU,SAASG,QAAQ9B,EAAW,MAEtD,OAAOc,CAAI,2BACiBe,uEAGtBA,EACCE,MAAM,KACNC,KACCC,GACEnB,CAAI,2BACsB,QAAtBmB,EAAIC,eAxEIC,UAAUC,SAASC,QAAQ,QAAU,EAyE3CvB,CAAI,oBAAmBwB,2BACvBL,mBAKjB,GAlEM3B,EAAMiC,OAAGC,EAIYC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAAsCtC,EAAAuC,UAAA,eAAA,GAE3BJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,WAA2BxC,EAAAuC,UAAA,gBAAA,GAuBnCJ,EAAA,CADTM,EAAQ,aAKRzC,EAAAuC,UAAA,eAAA,MAlCkBvC,EAAiBmC,EAAA,CADrCO,EAAc,6BACM1C,SAAAA"}
+{"version":3,"file":"CommandMenuAction.js","sources":["../../icons/lib/assets/arrow-right.js","../../icons/lib/assets/arrow-left.js","../../icons/lib/assets/keyboard-option.js","../src/command-menu/CommandMenuAction.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m14.7098 10.7401-8.63996 8.67-1.42-1.41 7.93996-7.97-7.99996-8.03001 1.42-1.410002 8.69996 8.740002c.39.39.39 1.02001 0 1.41001z\" fill=\"currentColor\"/></svg>'\nexport const title = \"arrow-right\"\nexport const tags = \"nordicon arrow right caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"currentColor\"><path d=\"m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z\"/><path d=\"m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z\"/></g></svg>'\nexport const title = \"arrow-left\"\nexport const tags = \"nordicon arrow left caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.5 14h6.5v2h-6.5c-.63 0-1.22-.3-1.6-.8l-5.4-7.2h-6.5v-2h6.5c.63 0 1.22.3 1.6.8zm-1.5-8v2h8v-2z\" fill=\"currentColor\"/></svg>'\nexport const title = \"keyboard-option\"\nexport const tags = \"nordicon keyboard option key shortcut\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as chevronIconRight from \"@nordhealth/icons/lib/assets/arrow-right.js\"\nimport * as chevronIconLeft from \"@nordhealth/icons/lib/assets/arrow-left.js\"\nimport * as altKeyIcon from \"@nordhealth/icons/lib/assets/keyboard-option.js\"\n\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport style from \"./CommandMenuAction.css\"\n\nconst KEY_REGEX = /(?:Key|Digit)([A-Z0-9])/g\nconst isMacintosh = () => navigator.platform.indexOf(\"Mac\") > -1\n\nIcon.registerIcon(chevronIconLeft)\nIcon.registerIcon(chevronIconRight)\nIcon.registerIcon(altKeyIcon)\n\n/**\n * Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.\n *\n * @status internal\n */\n@customElement(\"nord-command-menu-action\")\nexport default class CommandMenuAction extends LitElement {\n  static styles = style\n\n  private direction = new DirectionController(this)\n\n  @property({ type: Object }) command!: ICommandMenuAction\n\n  @property({ type: Boolean }) selected = false\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          \"n-selected\": this.selected,\n          \"n-command\": true,\n        })}\n      >\n        <div aria-hidden=\"true\" class=\"n-command-icon\">\n          <nord-icon size=\"s\" name=${this.getIconName()}></nord-icon>\n        </div>\n        <div class=\"n-title\">${this.command.title}</div>\n        ${this.renderShortcut()}\n      </div>\n    `\n  }\n\n  /**\n   * Scroll to show element\n   */\n  @observe(\"selected\")\n  protected ensureInView() {\n    if (this.selected) {\n      requestAnimationFrame(() => this.scrollIntoView({ block: \"nearest\" }))\n    }\n  }\n\n  private getIconName() {\n    if (this.command.icon) {\n      return this.command.icon\n    }\n\n    return this.direction.isLTR ? chevronIconRight.title : chevronIconLeft.title\n  }\n\n  private renderShortcut() {\n    if (!this.command.shortcut) {\n      return nothing\n    }\n\n    const keys = this.command.shortcut.replace(KEY_REGEX, \"$1\")\n\n    return html`\n      <nord-visually-hidden>, ${keys}</nord-visually-hidden>\n\n      <div aria-hidden=\"true\" class=\"n-shortcuts\">\n        ${keys\n          .split(\"+\")\n          .map(\n            key =>\n              html`<div class=\"n-shortcut\">\n                ${key.toLowerCase() === \"alt\" && isMacintosh()\n                  ? html`<nord-icon name=${altKeyIcon.title} size=\"s\"></nord-icon>`\n                  : key}\n              </div>`\n          )}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-command-menu-action\": CommandMenuAction\n  }\n}\n"],"names":["KEY_REGEX","Icon","registerIcon","chevronIconLeft","chevronIconRight","altKeyIcon","CommandMenuAction","LitElement","constructor","this","direction","DirectionController","selected","render","html","classMap","getIconName","command","title","renderShortcut","ensureInView","requestAnimationFrame","scrollIntoView","block","icon","isLTR","shortcut","nothing","keys","replace","split","map","key","toLowerCase","navigator","platform","indexOf","styles","style","__decorate","property","type","Object","prototype","Boolean","observe","customElement"],"mappings":"siBAAe,2OACM,mBACD,qGCFL,oYACM,kBACD,oGCFL,4MACM,uBACD,wzCCadA,EAAY,2BAGlBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAQH,IAAMC,EAAN,cAAgCC,EAAhCC,kCAGLC,KAAAC,UAAY,IAAIC,EAAoBF,MAIfA,KAAQG,UAAG,CA6DzC,CA3DUC,SACP,OAAOC,CAAI,eAECC,EAAS,CACf,aAAcN,KAAKG,SACnB,aAAa,iFAIcH,KAAKO,yDAEXP,KAAKQ,QAAQC,cAClCT,KAAKU,wBAGZ,CAMSC,eACJX,KAAKG,UACPS,uBAAsB,IAAMZ,KAAKa,eAAe,CAAEC,MAAO,aAE5D,CAEOP,cACN,OAAIP,KAAKQ,QAAQO,KACRf,KAAKQ,QAAQO,KAGff,KAAKC,UAAUe,MHpEL,cCAA,YEqElB,CAEON,iBACN,IAAKV,KAAKQ,QAAQS,SAChB,OAAOC,EAGT,MAAMC,EAAOnB,KAAKQ,QAAQS,SAASG,QAAQ7B,EAAW,MAEtD,OAAOc,CAAI,2BACiBc,uEAGtBA,EACCE,MAAM,KACNC,KACCC,GACElB,CAAI,2BACsB,QAAtBkB,EAAIC,eAxEIC,UAAUC,SAASC,QAAQ,QAAU,EAyE3CtB,CAAI,oBDxFH,2CCyFDkB,mBAKjB,GAlEM1B,EAAM+B,OAAGC,EAIYC,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,UAAsCpC,EAAAqC,UAAA,eAAA,GAE3BJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,WAA2BtC,EAAAqC,UAAA,gBAAA,GAuBnCJ,EAAA,CADTM,EAAQ,aAKRvC,EAAAqC,UAAA,eAAA,MAlCkBrC,EAAiBiC,EAAA,CADrCO,EAAc,6BACMxC,SAAAA"}

package/lib/{Component-1f694235.js → Component-253ecb24.js}

@@ -1,2 +1,2 @@
-import{i as e}from"./query-assigned-elements-822fe360.js";const n=e`:host{all:unset;display:block;font-family:var(--n-font-family);font-size:var(--n-font-size-m);line-height:var(--n-line-height);font-feature-settings:var(--n-font-features);box-sizing:border-box;text-align:start}*,::after,::before{box-sizing:border-box;margin:0;padding:0}:host([hidden]),[hidden]{display:none!important}`;export{n as s};
-//# sourceMappingURL=Component-1f694235.js.map
+import{i as e}from"./query-assigned-elements-2f8275b7.js";const n=e`:host{all:unset;display:block;font-family:var(--n-font-family);font-size:var(--n-font-size-m);line-height:var(--n-line-height);font-feature-settings:var(--n-font-features);box-sizing:border-box;text-align:start}*,::after,::before{box-sizing:border-box;margin:0;padding:0}:host([hidden]),[hidden]{display:none!important}`;export{n as s};
+//# sourceMappingURL=Component-253ecb24.js.map

package/lib/Component-253ecb24.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component-253ecb24.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/DatePicker.js

@@ -1,2 +1,2 @@
-import{i as t,x as e,A as i,_ as o,e as a,s}from"./query-assigned-elements-822fe360.js";import{e as r}from"./property-03f59dce.js";import{i as n}from"./query-2d22378e.js";import{n as l}from"./ref-6b46e5ea.js";import{l as d}from"./if-defined-8a007930.js";import{c as p}from"./interface-close-small-f26b0299.js";import{F as c}from"./FocusableMixin-186c69a2.js";import{F as h}from"./FormAssociatedMixin-5fedde68.js";import{I as m}from"./InputMixin-d50cb41a.js";import{o as u,p as v,a as f}from"./dates-5b651fbe.js";import{N as b}from"./events-d9666e88.js";import{S as g,i as j}from"./Calendar-3fd55b5d.js";import{LocalizeController as y}from"./LocalizeController.js";import $ from"./Icon.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-6a85e4b6.js";import"./Stack.js";import{s as k}from"./Component-1f694235.js";import{s as D}from"./FormField-3226fb17.js";import{R as x,s as z}from"./TextField-3f901ec8.js";import{isoAdapter as w}from"./date-adapter.js";import{c as C}from"./cond-09498763.js";import{S as F}from"./SizeMixin-f04ac402.js";import"./directive-de55b00a.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./state-70f38ceb.js";import"./class-map-c0d8e1e5.js";import"./collection-498f2b1f.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-f35f5476.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./DateSelectEvent.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./IconManager.js";import"./style-map-5b757428.js";import"./AutocompleteMixin-a98ada34.js";import"./LightDomController-8a770234.js";import"./Spinner.js";import"./positioning-a572d126.js";import"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./ScrollbarController-773c79f4.js";var S=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});const A=t`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;$.registerIcon(S),$.registerIcon(p);const I=()=>!1,L=()=>!1;let B=class extends(F(h(x(m(c(s)))))){constructor(){super(...arguments),this.swipe=new g(this,{target:()=>this.popout,matchesGesture:j,onSwipeEnd:()=>this.hide()}),this.localize=new y(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.min="",this.max="",this.firstDayOfWeek=1,this.dateAdapter=w,this.isDateDisabled=I,this.isDateHighlighted=L,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.dispatchEvent(new b("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new b("focus"))},this.handleInputChange=t=>{const e=t.target,i=this.dateAdapter.parse(e.value,u);(i||""===e.value)&&this.setValue(i)}}get valueAsDate(){return v(this.value)}set valueAsDate(t){this.value=t?f(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:NaN}set valueAsNumber(t){this.value=t?f(new Date(t)):""}render(){const{valueAsDate:t}=this,o=t?this.dateAdapter.format(t):"";return e`<nord-input class="n-date-picker-input" value="${o}" label="${d(this.label)}" hint="${d(this.hint)}" error="${C(this.error,this.error)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hide-label="${this.hideLabel}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${l(this.focusableRef)} aria-invalid="${C(this.error,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?i:e`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?i:e`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?e`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:i}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?f(t):"",this.dispatchEvent(new b("change"))}hide(t){this.popout.hide(t)}show(){this.popout.show()}};B.styles=[k,D,z,A],o([n(".n-date-picker-toggle",!0)],B.prototype,"toggleButton",void 0),o([n(".n-date-picker-close-button",!0)],B.prototype,"closeButton",void 0),o([n("nord-calendar",!0)],B.prototype,"calendar",void 0),o([n('[role="dialog"]',!0)],B.prototype,"popout",void 0),o([r()],B.prototype,"value",void 0),o([r({type:Boolean,reflect:!0})],B.prototype,"open",void 0),o([r()],B.prototype,"min",void 0),o([r()],B.prototype,"max",void 0),o([r({attribute:"first-day-of-week",type:Number})],B.prototype,"firstDayOfWeek",void 0),o([r({attribute:!1})],B.prototype,"dateAdapter",void 0),o([r({attribute:!1})],B.prototype,"isDateDisabled",void 0),o([r({attribute:!1})],B.prototype,"isDateHighlighted",void 0),o([r({reflect:!0,type:Boolean})],B.prototype,"expand",void 0),B=o([a("nord-date-picker")],B);var E=B;export{E as default};
+import{i as t,x as e,A as i,_ as o,e as a,s}from"./query-assigned-elements-2f8275b7.js";import{e as r}from"./property-03f59dce.js";import{i as n}from"./query-2d22378e.js";import{n as l}from"./ref-f75a30b7.js";import{l as d}from"./if-defined-10508457.js";import{c as p}from"./interface-close-small-f26b0299.js";import{F as c}from"./FocusableMixin-003e1094.js";import{F as h}from"./FormAssociatedMixin-0638b151.js";import{I as m}from"./InputMixin-87012c5a.js";import{o as u,p as v,a as b}from"./dates-5b651fbe.js";import{N as f}from"./events-d9666e88.js";import{S as g,i as j}from"./Calendar-f7e95d9a.js";import{LocalizeController as y}from"./LocalizeController.js";import $ from"./Icon.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-1183c22b.js";import"./Stack.js";import{s as k}from"./Component-253ecb24.js";import{s as D}from"./FormField-0783cb5a.js";import{R as x,s as z}from"./TextField-b455a6dd.js";import{isoAdapter as w}from"./date-adapter.js";import{c as C}from"./cond-77258def.js";import{S as F}from"./SizeMixin-bc2098f4.js";import"./directive-de55b00a.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./state-70f38ceb.js";import"./class-map-4a0dec4a.js";import"./collection-bba319d3.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-f35f5476.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./DateSelectEvent.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./IconManager.js";import"./style-map-75ce20b3.js";import"./AutocompleteMixin-60503685.js";import"./LightDomController-5c53b3f4.js";import"./Spinner.js";import"./positioning-a572d126.js";import"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./ScrollbarController-773c79f4.js";var S=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});const A=t`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;$.registerIcon(S),$.registerIcon(p);const I=()=>!1,L=()=>!1;let B=class extends(F(h(x(m(c(s)))))){constructor(){super(...arguments),this.swipe=new g(this,{target:()=>this.popout,matchesGesture:j,onSwipeEnd:()=>this.hide()}),this.localize=new y(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.min="",this.max="",this.firstDayOfWeek=1,this.dateAdapter=w,this.isDateDisabled=I,this.isDateHighlighted=L,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.dispatchEvent(new f("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new f("focus"))},this.handleInputChange=t=>{const e=t.target,i=this.dateAdapter.parse(e.value,u);(i||""===e.value)&&this.setValue(i)}}get valueAsDate(){return v(this.value)}set valueAsDate(t){this.value=t?b(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:NaN}set valueAsNumber(t){this.value=t?b(new Date(t)):""}render(){const{valueAsDate:t}=this,o=t?this.dateAdapter.format(t):"";return e`<nord-input class="n-date-picker-input" value="${o}" label="${d(this.label)}" hint="${d(this.hint)}" error="${C(this.error,this.error)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hide-label="${this.hideLabel}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${l(this.focusableRef)} aria-invalid="${C(this.error,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?i:e`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?i:e`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?e`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:i}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?b(t):"",this.dispatchEvent(new f("change"))}hide(t){this.popout.hide(t)}show(){this.popout.show()}};B.styles=[k,D,z,A],o([n(".n-date-picker-toggle",!0)],B.prototype,"toggleButton",void 0),o([n(".n-date-picker-close-button",!0)],B.prototype,"closeButton",void 0),o([n("nord-calendar",!0)],B.prototype,"calendar",void 0),o([n('[role="dialog"]',!0)],B.prototype,"popout",void 0),o([r()],B.prototype,"value",void 0),o([r({type:Boolean,reflect:!0})],B.prototype,"open",void 0),o([r()],B.prototype,"min",void 0),o([r()],B.prototype,"max",void 0),o([r({attribute:"first-day-of-week",type:Number})],B.prototype,"firstDayOfWeek",void 0),o([r({attribute:!1})],B.prototype,"dateAdapter",void 0),o([r({attribute:!1})],B.prototype,"isDateDisabled",void 0),o([r({attribute:!1})],B.prototype,"isDateHighlighted",void 0),o([r({reflect:!0,type:Boolean})],B.prototype,"expand",void 0),B=o([a("nord-date-picker")],B);var E=B;export{E as default};
 //# sourceMappingURL=DatePicker.js.map

package/lib/Divider.js

@@ -1,2 +1,2 @@
-import{i as r,_ as i,s as e,e as o}from"./query-assigned-elements-822fe360.js";import{e as t}from"./property-03f59dce.js";import{o as s}from"./observe-a9c6dfb6.js";import{s as d}from"./Component-1f694235.js";const n=r`:host{--_n-divider-color:var(--n-divider-color, var(--n-color-border));--_n-divider-size:var(--n-divider-size, 1px)}:host([direction=horizontal]){display:block;border-block-start:var(--_n-divider-size) solid var(--_n-divider-color)}:host([direction=vertical]){display:inline-block;min-block-size:100%;border-inline-start:var(--_n-divider-size) solid var(--_n-divider-color)}`;let a=class extends e{constructor(){super(...arguments),this.direction="horizontal"}firstUpdated(){this.setAttribute("role","separator")}handleDirectionChange(){this.setAttribute("aria-orientation","vertical"===this.direction?"vertical":"horizontal")}};a.styles=[d,n],i([t({reflect:!0})],a.prototype,"direction",void 0),i([s("direction")],a.prototype,"handleDirectionChange",null),a=i([o("nord-divider")],a);var l=a;export{l as default};
+import{i as r,_ as i,s as e,e as o}from"./query-assigned-elements-2f8275b7.js";import{e as t}from"./property-03f59dce.js";import{o as s}from"./observe-a9c6dfb6.js";import{s as d}from"./Component-253ecb24.js";const n=r`:host{--_n-divider-color:var(--n-divider-color, var(--n-color-border));--_n-divider-size:var(--n-divider-size, 1px)}:host([direction=horizontal]){display:block;border-block-start:var(--_n-divider-size) solid var(--_n-divider-color)}:host([direction=vertical]){display:inline-block;min-block-size:100%;border-inline-start:var(--_n-divider-size) solid var(--_n-divider-color)}`;let a=class extends e{constructor(){super(...arguments),this.direction="horizontal"}firstUpdated(){this.setAttribute("role","separator")}handleDirectionChange(){this.setAttribute("aria-orientation","vertical"===this.direction?"vertical":"horizontal")}};a.styles=[d,n],i([t({reflect:!0})],a.prototype,"direction",void 0),i([s("direction")],a.prototype,"handleDirectionChange",null),a=i([o("nord-divider")],a);var l=a;export{l as default};
 //# sourceMappingURL=Divider.js.map

package/lib/Drawer.js

@@ -1,2 +1,2 @@
-import{i as e,_ as r,s as o,x as d,e as a}from"./query-assigned-elements-822fe360.js";import{e as t}from"./property-03f59dce.js";import{S as n}from"./SlotController-d733c575.js";import{s}from"./Component-1f694235.js";import"./EventController-d99ebeef.js";const i=e`:host{--_n-drawer-padding:var(--n-drawer-padding, var(--n-space-l))}.n-drawer{display:flex;flex-direction:column;block-size:100%}.n-drawer-main{flex:1;padding:var(--_n-drawer-padding);overflow-y:auto}.n-drawer-footer{padding:var(--n-space-m) var(--n-space-l);border-block-start:1px solid var(--n-color-border)}:host([padding=none]){--_n-drawer-padding:var(--n-drawer-padding, 0)}::slotted(nord-header){--_n-header-box-shadow:none}slot[name=footer]{display:flex;justify-content:flex-end;gap:var(--n-space-s);flex-direction:row;align-items:center}`;let l=class extends o{constructor(){super(...arguments),this.footerSlot=new n(this,"footer"),this.padding="m"}render(){return d`<div class="n-drawer"><slot name="header"></slot><div class="n-drawer-main"><slot></slot></div><div class="n-drawer-footer" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div>`}};l.styles=[s,i],r([t({reflect:!0})],l.prototype,"padding",void 0),l=r([a("nord-drawer")],l);var p=l;export{p as default};
+import{i as e,_ as r,s as o,x as d,e as a}from"./query-assigned-elements-2f8275b7.js";import{e as t}from"./property-03f59dce.js";import{S as n}from"./SlotController-d733c575.js";import{s}from"./Component-253ecb24.js";import"./EventController-d99ebeef.js";const i=e`:host{--_n-drawer-padding:var(--n-drawer-padding, var(--n-space-l))}.n-drawer{display:flex;flex-direction:column;block-size:100%}.n-drawer-main{flex:1;padding:var(--_n-drawer-padding);overflow-y:auto}.n-drawer-footer{padding:var(--n-space-m) var(--n-space-l);border-block-start:1px solid var(--n-color-border)}:host([padding=none]){--_n-drawer-padding:var(--n-drawer-padding, 0)}::slotted(nord-header){--_n-header-box-shadow:none}slot[name=footer]{display:flex;justify-content:flex-end;gap:var(--n-space-s);flex-direction:row;align-items:center}`;let l=class extends o{constructor(){super(...arguments),this.footerSlot=new n(this,"footer"),this.padding="m"}render(){return d`<div class="n-drawer"><slot name="header"></slot><div class="n-drawer-main"><slot></slot></div><div class="n-drawer-footer" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div>`}};l.styles=[s,i],r([t({reflect:!0})],l.prototype,"padding",void 0),l=r([a("nord-drawer")],l);var p=l;export{p as default};
 //# sourceMappingURL=Drawer.js.map

package/lib/Dropdown.js

@@ -1,2 +1,2 @@
-import{i as o,x as e,s as t,_ as n,e as r}from"./query-assigned-elements-822fe360.js";import{e as s}from"./property-03f59dce.js";import{i as d}from"./query-2d22378e.js";import{l as a}from"./if-defined-8a007930.js";import{S as i}from"./SlotController-d733c575.js";import{F as l}from"./Popout-6a85e4b6.js";import{o as p}from"./observe-a9c6dfb6.js";import{s as c}from"./Component-1f694235.js";import"./EventController-d99ebeef.js";import"./state-70f38ceb.js";import"./positioning-a572d126.js";import"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-773c79f4.js";import"./events-d9666e88.js";import"./DirectionController-f35f5476.js";const h=o`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:460px;overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size="s"]){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size="l"]){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(l(t)){constructor(){super(...arguments),this.headerSlot=new i(this,"header"),this.headerEndSlot=new i(this,"header-end"),this.expand=!1,this.size="m"}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]');null==o||o.setAttribute("aria-haspopup","true")}render(){return e`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${a(this.align)}" position="${a(this.position)}" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}"><div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){this.open=!0}handleClose(){this.open=!1}handleOpenChange(){var o;if(this.open){const e=null!==(o=this.querySelector("[autofocus]"))&&void 0!==o?o:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}}hide(o){return this.popout.hide(o)}show(){return this.popout.show()}};m.styles=[c,h],m.shadowRootOptions={...t.shadowRootOptions,delegatesFocus:!0},n([d(".n-dropdown-content")],m.prototype,"list",void 0),n([d("nord-popout",!0)],m.prototype,"popout",void 0),n([s({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),n([s({reflect:!0})],m.prototype,"size",void 0),n([p("open","updated")],m.prototype,"handleOpenChange",null),m=n([r("nord-dropdown")],m);var u=m;export{u as default};
+import{i as o,x as e,s as t,_ as n,e as r}from"./query-assigned-elements-2f8275b7.js";import{e as s}from"./property-03f59dce.js";import{i as d}from"./query-2d22378e.js";import{l as a}from"./if-defined-10508457.js";import{S as i}from"./SlotController-d733c575.js";import{F as l}from"./Popout-1183c22b.js";import{o as p}from"./observe-a9c6dfb6.js";import{s as c}from"./Component-253ecb24.js";import"./EventController-d99ebeef.js";import"./state-70f38ceb.js";import"./positioning-a572d126.js";import"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-773c79f4.js";import"./events-d9666e88.js";import"./DirectionController-f35f5476.js";const h=o`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:460px;overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size="s"]){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size="l"]){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(l(t)){constructor(){super(...arguments),this.headerSlot=new i(this,"header"),this.headerEndSlot=new i(this,"header-end"),this.expand=!1,this.size="m"}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]');null==o||o.setAttribute("aria-haspopup","true")}render(){return e`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${a(this.align)}" position="${a(this.position)}" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}"><div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){this.open=!0}handleClose(){this.open=!1}handleOpenChange(){var o;if(this.open){const e=null!==(o=this.querySelector("[autofocus]"))&&void 0!==o?o:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}}hide(o){return this.popout.hide(o)}show(){return this.popout.show()}};m.styles=[c,h],m.shadowRootOptions={...t.shadowRootOptions,delegatesFocus:!0},n([d(".n-dropdown-content")],m.prototype,"list",void 0),n([d("nord-popout",!0)],m.prototype,"popout",void 0),n([s({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),n([s({reflect:!0})],m.prototype,"size",void 0),n([p("open","updated")],m.prototype,"handleOpenChange",null),m=n([r("nord-dropdown")],m);var u=m;export{u as default};
 //# sourceMappingURL=Dropdown.js.map

package/lib/DropdownGroup.js

@@ -1,2 +1,2 @@
-import{i as e,_ as n,s as o,x as a,A as d,e as r}from"./query-assigned-elements-822fe360.js";import{e as s}from"./property-03f59dce.js";import{s as i}from"./Component-1f694235.js";const t=e`.n-dropdown-group-heading{font-size:var(--n-font-size-xs);font-weight:var(--n-font-weight-heading);color:var(--n-color-text-weaker);padding:var(--n-space-xs) 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}::slotted(nord-message){inline-size:calc(100% + calc(var(--n-space-s) * 2));margin-inline-start:calc(var(--n-space-s) * -1)}::slotted(nord-message:last-of-type){padding-block-end:0;border-block-end:0}`;let p=class extends o{render(){return a`<div class="n-dropdown-group">${this.heading?a`<p id="heading" aria-hidden="true" class="n-dropdown-group-heading">${this.heading}</p>`:d}<div class="n-dropdown-group-content" role="group" aria-labelledby="${this.heading?"heading":d}"><slot></slot></div></div>`}};p.styles=[i,t],n([s()],p.prototype,"heading",void 0),p=n([r("nord-dropdown-group")],p);var l=p;export{l as default};
+import{i as e,_ as n,s as o,x as a,A as d,e as r}from"./query-assigned-elements-2f8275b7.js";import{e as s}from"./property-03f59dce.js";import{s as i}from"./Component-253ecb24.js";const t=e`.n-dropdown-group-heading{font-size:var(--n-font-size-xs);font-weight:var(--n-font-weight-heading);color:var(--n-color-text-weaker);padding:var(--n-space-xs) 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}::slotted(nord-message){inline-size:calc(100% + calc(var(--n-space-s) * 2));margin-inline-start:calc(var(--n-space-s) * -1)}::slotted(nord-message:last-of-type){padding-block-end:0;border-block-end:0}`;let p=class extends o{render(){return a`<div class="n-dropdown-group">${this.heading?a`<p id="heading" aria-hidden="true" class="n-dropdown-group-heading">${this.heading}</p>`:d}<div class="n-dropdown-group-content" role="group" aria-labelledby="${this.heading?"heading":d}"><slot></slot></div></div>`}};p.styles=[i,t],n([s()],p.prototype,"heading",void 0),p=n([r("nord-dropdown-group")],p);var l=p;export{l as default};
 //# sourceMappingURL=DropdownGroup.js.map

package/lib/{DropdownItem-4a02675f.js → DropdownItem-75a2468a.js}

@@ -1,2 +1,2 @@
-import{i as o}from"./query-assigned-elements-822fe360.js";const n=o`:host{display:flex;line-height:var(--n-line-height-tight)}.n-dropdown-item{-webkit-appearance:none;appearance:none;cursor:pointer;display:flex;flex:1;gap:var(--n-space-s);align-items:center;font-family:inherit;font-size:inherit;text-decoration:none;border:0;color:var(--n-color-text);padding:var(--n-space-s);border-radius:var(--n-border-radius-s);background:0 0;text-align:start;box-shadow:var(--n-dropdown-item-box-shadow,none);min-inline-size:0}.n-dropdown-item:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-dropdown-item:hover ::slotted(*){color:var(--n-color-text-on-accent)!important}.n-dropdown-item ::slotted(nord-icon){color:var(--n-color-icon)}.n-dropdown-item:hover ::slotted(nord-icon){color:currentColor}.n-dropdown-item:active{opacity:.7}.n-dropdown-item:focus{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-dropdown-item:focus{--n-dropdown-item-box-shadow:none}.n-dropdown-item:focus-visible{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent)}}@media (max-width:35.9375em){.n-dropdown-item{gap:var(--n-space-m);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-dropdown-item ::slotted(nord-icon){block-size:var(--n-size-icon-m);inline-size:var(--n-size-icon-m)}}slot[name=end],slot[name=start]{flex:0 0 auto}slot[name=end]{display:flex;margin-inline-start:auto}.n-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;export{n as s};
-//# sourceMappingURL=DropdownItem-4a02675f.js.map
+import{i as o}from"./query-assigned-elements-2f8275b7.js";const n=o`:host{display:flex;line-height:var(--n-line-height-tight)}.n-dropdown-item{-webkit-appearance:none;appearance:none;cursor:pointer;display:flex;flex:1;gap:var(--n-space-s);align-items:center;font-family:inherit;font-size:inherit;text-decoration:none;border:0;color:var(--n-color-text);padding:var(--n-space-s);border-radius:var(--n-border-radius-s);background:0 0;text-align:start;box-shadow:var(--n-dropdown-item-box-shadow,none);min-inline-size:0}.n-dropdown-item:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-dropdown-item:hover ::slotted(*){color:var(--n-color-text-on-accent)!important}.n-dropdown-item ::slotted(nord-icon){color:var(--n-color-icon)}.n-dropdown-item:hover ::slotted(nord-icon){color:currentColor}.n-dropdown-item:active{opacity:.7}.n-dropdown-item:focus{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-dropdown-item:focus{--n-dropdown-item-box-shadow:none}.n-dropdown-item:focus-visible{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent)}}@media (max-width:35.9375em){.n-dropdown-item{gap:var(--n-space-m);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-dropdown-item ::slotted(nord-icon){block-size:var(--n-size-icon-m);inline-size:var(--n-size-icon-m)}}slot[name=end],slot[name=start]{flex:0 0 auto}slot[name=end]{display:flex;margin-inline-start:auto}.n-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;export{n as s};
+//# sourceMappingURL=DropdownItem-75a2468a.js.map

package/lib/DropdownItem-75a2468a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownItem-75a2468a.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/DropdownItem.js

@@ -1,2 +1,2 @@
-import{_ as t,e,x as s,s as o}from"./query-assigned-elements-822fe360.js";import{e as r}from"./property-03f59dce.js";import{l as a}from"./if-defined-8a007930.js";import{n as i}from"./ref-6b46e5ea.js";import{F as n}from"./FocusableMixin-186c69a2.js";import{s as f}from"./Component-1f694235.js";import{s as m}from"./DropdownItem-4a02675f.js";import"./directive-de55b00a.js";let p=class extends(n(o)){constructor(){super(...arguments),this.target="_self"}render(){return(this.href?t=>s`<a href="${a(this.href)}" ${i(this.focusableRef)} target="${this.target}" class="n-dropdown-item">${t}</a>`:t=>s`<button ${i(this.focusableRef)} class="n-dropdown-item">${t}</button>`)(s`<slot name="start"></slot><span class="n-truncate"><slot></slot></span><slot name="end"></slot>`)}};p.styles=[f,m],t([r({reflect:!0})],p.prototype,"href",void 0),t([r()],p.prototype,"target",void 0),p=t([e("nord-dropdown-item")],p);var d=p;export{d as default};
+import{_ as t,e,x as s,s as o}from"./query-assigned-elements-2f8275b7.js";import{e as r}from"./property-03f59dce.js";import{l as a}from"./if-defined-10508457.js";import{n as i}from"./ref-f75a30b7.js";import{F as n}from"./FocusableMixin-003e1094.js";import{s as f}from"./Component-253ecb24.js";import{s as m}from"./DropdownItem-75a2468a.js";import"./directive-de55b00a.js";let p=class extends(n(o)){constructor(){super(...arguments),this.target="_self"}render(){return(this.href?t=>s`<a href="${a(this.href)}" ${i(this.focusableRef)} target="${this.target}" class="n-dropdown-item">${t}</a>`:t=>s`<button ${i(this.focusableRef)} class="n-dropdown-item">${t}</button>`)(s`<slot name="start"></slot><span class="n-truncate"><slot></slot></span><slot name="end"></slot>`)}};p.styles=[f,m],t([r({reflect:!0})],p.prototype,"href",void 0),t([r()],p.prototype,"target",void 0),p=t([e("nord-dropdown-item")],p);var d=p;export{d as default};
 //# sourceMappingURL=DropdownItem.js.map

package/lib/EmptyState.js

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

package/lib/EmptyState.js.map

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

package/lib/Fieldset.js

@@ -1,2 +1,2 @@
-import{i as e,_ as r,s as t,x as o,e as i}from"./query-assigned-elements-822fe360.js";import{e as s}from"./property-03f59dce.js";import{S as n}from"./SlotController-d733c575.js";import{c as a}from"./cond-09498763.js";import{s as l}from"./Component-1f694235.js";import{s as d}from"./FormField-3226fb17.js";import"./EventController-d99ebeef.js";const h=e`fieldset{border:none}.n-label-container{margin-block-end:calc(var(--n-space-s) * 2)}`;let p=class extends t{constructor(){super(...arguments),this.errorSlot=new n(this,"error"),this.hintSlot=new n(this,"hint"),this.label="",this.required=!1,this.hideRequired=!1}render(){const{hasError:e}=this;return o`<fieldset aria-invalid="${a(e,"true")}" aria-describedby="${a(e,"error")}" ?aria-required="${this.required}"><legend class="n-label-container"><div class="n-label"><slot name="label">${this.label}</slot><span aria-hidden="true" class="n-required" ?hidden="${!this.required||this.hideRequired}">*</span></div><div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div></legend><slot></slot><div class="n-caption n-error" id="error" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div></fieldset>`}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}};p.styles=[l,d,h],r([s()],p.prototype,"label",void 0),r([s()],p.prototype,"hint",void 0),r([s()],p.prototype,"error",void 0),r([s({type:Boolean})],p.prototype,"required",void 0),r([s({type:Boolean,attribute:"hide-required"})],p.prototype,"hideRequired",void 0),p=r([i("nord-fieldset")],p);var c=p;export{c as default};
+import{i as e,_ as r,s as t,x as i,e as o}from"./query-assigned-elements-2f8275b7.js";import{e as s}from"./property-03f59dce.js";import{S as n}from"./SlotController-d733c575.js";import{c as a}from"./cond-77258def.js";import{s as l}from"./Component-253ecb24.js";import{s as d}from"./FormField-0783cb5a.js";import"./EventController-d99ebeef.js";const h=e`fieldset{border:none}.n-label-container{margin-block-end:calc(var(--n-space-s) * 2)}.n-hidden{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);block-size:1px;inline-size:1px;white-space:nowrap}`;let p=class extends t{constructor(){super(...arguments),this.errorSlot=new n(this,"error"),this.hintSlot=new n(this,"hint"),this.label="",this.required=!1,this.hideRequired=!1,this.hideLabel=!1}render(){const{hasError:e}=this;return i`<fieldset aria-invalid="${a(e,"true")}" aria-describedby="${a(e,"error")}" aria-required="${a(this.required,"true")}"><legend class="n-label-container ${this.hideLabel?"n-hidden":""}"><div class="n-label"><slot name="label">${this.label}</slot><span aria-hidden="true" class="n-required" ?hidden="${!this.required||this.hideRequired}">*</span></div><div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div></legend><slot></slot><div class="n-caption n-error" id="error" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div></fieldset>`}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}};p.styles=[l,d,h],r([s()],p.prototype,"label",void 0),r([s()],p.prototype,"hint",void 0),r([s()],p.prototype,"error",void 0),r([s({type:Boolean})],p.prototype,"required",void 0),r([s({type:Boolean,attribute:"hide-required"})],p.prototype,"hideRequired",void 0),r([s({type:Boolean,attribute:"hide-label"})],p.prototype,"hideLabel",void 0),p=r([o("nord-fieldset")],p);var c=p;export{c as default};
 //# sourceMappingURL=Fieldset.js.map

package/lib/Fieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.js","sources":["../src/fieldset/Fieldset.ts"],"sourcesContent":["import { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Fieldset.css\"\n\n/**\n * Fieldset is used for grouping sets of input components.\n * It is necessary to use a fieldset with radio and checkbox components.\n * It can also be useful for logically grouping other types of inputs.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the fieldset.\n * @slot error - Optional slot that holds error text for the fieldset.\n */\n@customElement(\"nord-fieldset\")\nexport default class Fieldset extends LitElement {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  private errorSlot = new SlotController(this, \"error\")\n  private hintSlot = new SlotController(this, \"hint\")\n\n  /**\n   * Label for the fieldset.\n   */\n  @property() label: string = \"\"\n\n  /**\n   * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n   */\n  @property() hint?: string\n\n  /**\n   * Optional error to be shown with the fieldset. Alternatively use the error slot.\n   */\n  @property() error?: string\n\n  /**\n   * Determines whether the fieldset is required or not.\n   * A fieldset marked as required will be announced as such to users of assistive technology.\n   * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n   */\n  @property({ type: Boolean }) required = false\n\n  /**\n   * Visually hide the required indicator, but still show\n   * required attribute to assistive technologies like screen readers.\n   */\n  @property({ type: Boolean, attribute: \"hide-required\" }) hideRequired = false\n\n  render() {\n    const { hasError } = this\n\n    return html`\n      <fieldset\n        aria-invalid=${cond(hasError, \"true\")}\n        aria-describedby=${cond(hasError, \"error\")}\n        ?aria-required=${this.required}\n      >\n        <legend class=\"n-label-container\">\n          <div class=\"n-label\">\n            <slot name=\"label\">${this.label}</slot\n            ><span aria-hidden=\"true\" class=\"n-required\" ?hidden=${!this.required || this.hideRequired}>*</span>\n          </div>\n\n          <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n            <slot name=\"hint\">${this.hint}</slot>\n          </div>\n        </legend>\n\n        <slot></slot>\n\n        <div class=\"n-caption n-error\" id=\"error\" role=\"alert\" ?hidden=${!this.hasError}>\n          <slot name=\"error\">${this.error}</slot>\n        </div>\n      </fieldset>\n    `\n  }\n\n  protected get hasHint() {\n    return Boolean(this.hint) || this.hintSlot.hasContent\n  }\n\n  protected get hasError() {\n    return Boolean(this.error) || this.errorSlot.hasContent\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-fieldset\": Fieldset\n  }\n}\n"],"names":["Fieldset","LitElement","constructor","this","errorSlot","SlotController","hintSlot","label","required","hideRequired","render","hasError","html","cond","hasHint","hint","error","Boolean","hasContent","styles","componentStyle","formFieldStyle","style","__decorate","property","prototype","type","attribute","customElement"],"mappings":"ubAqBe,IAAMA,EAAN,cAAuBC,EAAvBC,kCAGLC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAQG,SAAG,IAAID,EAAeF,KAAM,QAKhCA,KAAKI,MAAW,GAiBCJ,KAAQK,UAAG,EAMiBL,KAAYM,cAAG,CAsCzE,CApCCC,SACE,MAAMC,SAAEA,GAAaR,KAErB,OAAOS,CAAI,2BAEQC,EAAKF,EAAU,8BACXE,EAAKF,EAAU,6BACjBR,KAAKK,uFAIGL,KAAKI,qEAC8BJ,KAAKK,UAAYL,KAAKM,uEAGvCN,KAAKW,8BACxBX,KAAKY,2GAMqCZ,KAAKQ,gCAChDR,KAAKa,+BAIjC,CAEaF,cACZ,OAAOG,QAAQd,KAAKY,OAASZ,KAAKG,SAASY,UAC5C,CAEaP,eACZ,OAAOM,QAAQd,KAAKa,QAAUb,KAAKC,UAAUc,UAC9C,GApEMlB,EAAMmB,OAAG,CAACC,EAAgBC,EAAgBC,GAQrCC,EAAA,CAAXC,KAA6BxB,EAAAyB,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBxB,EAAAyB,UAAA,YAAA,GAKbF,EAAA,CAAXC,KAAyBxB,EAAAyB,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAMT,WAA2BjB,EAAAyB,UAAA,gBAAA,GAMYF,EAAA,CAAxDC,EAAS,CAAEE,KAAMT,QAASU,UAAW,mBAAuC3B,EAAAyB,UAAA,oBAAA,GAhC1DzB,EAAQuB,EAAA,CAD5BK,EAAc,kBACM5B,SAAAA"}
+{"version":3,"file":"Fieldset.js","sources":["../src/fieldset/Fieldset.ts"],"sourcesContent":["import { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Fieldset.css\"\n\n/**\n * Fieldset is used for grouping sets of input components.\n * It is necessary to use a fieldset with radio and checkbox components.\n * It can also be useful for logically grouping other types of inputs.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the fieldset.\n * @slot error - Optional slot that holds error text for the fieldset.\n */\n@customElement(\"nord-fieldset\")\nexport default class Fieldset extends LitElement {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  private errorSlot = new SlotController(this, \"error\")\n  private hintSlot = new SlotController(this, \"hint\")\n\n  /**\n   * Label for the fieldset. Rendered as a `<legend>` element.\n   */\n  @property() label: string = \"\"\n\n  /**\n   * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n   */\n  @property() hint?: string\n\n  /**\n   * Optional error to be shown with the fieldset. Alternatively use the error slot.\n   */\n  @property() error?: string\n\n  /**\n   * Determines whether the fieldset is required or not.\n   * A fieldset marked as required will be announced as such to users of assistive technology.\n   * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n   */\n  @property({ type: Boolean }) required = false\n\n  /**\n   * Visually hide the required indicator, but still show\n   * required attribute to assistive technologies like screen readers.\n   */\n  @property({ type: Boolean, attribute: \"hide-required\" }) hideRequired = false\n\n  /**\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  render() {\n    const { hasError } = this\n\n    return html`\n      <fieldset\n        aria-invalid=${cond(hasError, \"true\")}\n        aria-describedby=${cond(hasError, \"error\")}\n        aria-required=${cond(this.required, \"true\")}\n      >\n        <legend class=\"n-label-container ${this.hideLabel ? \"n-hidden\" : \"\"}\">\n          <div class=\"n-label\">\n            <slot name=\"label\">${this.label}</slot\n            ><span aria-hidden=\"true\" class=\"n-required\" ?hidden=${!this.required || this.hideRequired}>*</span>\n          </div>\n\n          <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n            <slot name=\"hint\">${this.hint}</slot>\n          </div>\n        </legend>\n\n        <slot></slot>\n\n        <div class=\"n-caption n-error\" id=\"error\" role=\"alert\" ?hidden=${!this.hasError}>\n          <slot name=\"error\">${this.error}</slot>\n        </div>\n      </fieldset>\n    `\n  }\n\n  protected get hasHint() {\n    return Boolean(this.hint) || this.hintSlot.hasContent\n  }\n\n  protected get hasError() {\n    return Boolean(this.error) || this.errorSlot.hasContent\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-fieldset\": Fieldset\n  }\n}\n"],"names":["Fieldset","LitElement","constructor","this","errorSlot","SlotController","hintSlot","label","required","hideRequired","hideLabel","render","hasError","html","cond","hasHint","hint","error","Boolean","hasContent","styles","componentStyle","formFieldStyle","style","__decorate","property","prototype","type","attribute","customElement"],"mappings":"6jBAqBe,IAAMA,EAAN,cAAuBC,EAAvBC,kCAGLC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAQG,SAAG,IAAID,EAAeF,KAAM,QAKhCA,KAAKI,MAAW,GAiBCJ,KAAQK,UAAG,EAMiBL,KAAYM,cAAG,EAKlBN,KAASO,WAAG,CAsCnE,CApCCC,SACE,MAAMC,SAAEA,GAAaT,KAErB,OAAOU,CAAI,2BAEQC,EAAKF,EAAU,8BACXE,EAAKF,EAAU,4BAClBE,EAAKX,KAAKK,SAAU,6CAEDL,KAAKO,UAAY,WAAa,+CAExCP,KAAKI,qEAC8BJ,KAAKK,UAAYL,KAAKM,uEAGvCN,KAAKY,8BACxBZ,KAAKa,2GAMqCb,KAAKS,gCAChDT,KAAKc,+BAIjC,CAEaF,cACZ,OAAOG,QAAQf,KAAKa,OAASb,KAAKG,SAASa,UAC5C,CAEaP,eACZ,OAAOM,QAAQf,KAAKc,QAAUd,KAAKC,UAAUe,UAC9C,GAzEMnB,EAAMoB,OAAG,CAACC,EAAgBC,EAAgBC,GAQrCC,EAAA,CAAXC,KAA6BzB,EAAA0B,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBzB,EAAA0B,UAAA,YAAA,GAKbF,EAAA,CAAXC,KAAyBzB,EAAA0B,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAMT,WAA2BlB,EAAA0B,UAAA,gBAAA,GAMYF,EAAA,CAAxDC,EAAS,CAAEE,KAAMT,QAASU,UAAW,mBAAuC5B,EAAA0B,UAAA,oBAAA,GAKvBF,EAAA,CAArDC,EAAS,CAAEE,KAAMT,QAASU,UAAW,gBAAiC5B,EAAA0B,UAAA,iBAAA,GArCpD1B,EAAQwB,EAAA,CAD5BK,EAAc,kBACM7B,SAAAA"}

package/lib/FocusableMixin-003e1094.js

@@ -0,0 +1,2 @@
+import{e as l}from"./ref-f75a30b7.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-003e1094.js.map

package/lib/{FocusableMixin-186c69a2.js.map → FocusableMixin-003e1094.js.map}

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

package/lib/{FormAssociatedMixin-5fedde68.js → FormAssociatedMixin-0638b151.js}

@@ -1,2 +1,2 @@
-import{_ as t,x as e}from"./query-assigned-elements-822fe360.js";import{e as r}from"./property-03f59dce.js";import{S as i}from"./SlotController-d733c575.js";import{N as o}from"./events-d9666e88.js";import"./VisuallyHidden.js";class s{constructor(t,e){this.host=t,this.options=e,this._form=null,this.handleFormData=t=>{const{disabled:e,name:r}=this.host;if(e)return;if(!r)return;const i=this.options.value();null!=i&&t.formData.append(r,i)},t.addController(this)}hostConnected(){this.listen(this.host.form)}hostUpdated(){this.listen(this.host.form)}hostDisconnected(){this.cleanup()}listen(t){var e;this._form!==t&&(this.cleanup(),this._form=t,null===(e=this._form)||void 0===e||e.addEventListener("formdata",this.handleFormData))}cleanup(){var t;null===(t=this._form)||void 0===t||t.removeEventListener("formdata",this.handleFormData),this._form=null}}function n(n){class h extends n{constructor(){super(...arguments),this.labelSlot=new i(this,"label"),this.errorSlot=new i(this,"error"),this.hintSlot=new i(this,"hint"),this.formData=new s(this,{value:()=>this.formValue}),this.inputId="input",this.errorId="error",this.hintId="hint",this.label="",this.hideLabel=!1,this.required=!1,this.hideRequired=!1}get formValue(){return this.value}handleInput(t){t.stopPropagation();const e=t.target;this.value=e.value,this.dispatchEvent(new o("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new o("change"))}renderLabel(t){const r=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot><span ?hidden="${!this.required||this.hideRequired}" aria-hidden="true" class="n-required">*</span> ${t}</label><div class="n-caption n-hint" id="${this.hintId}" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div>`;return this.hideLabel?e`<nord-visually-hidden>${r}</nord-visually-hidden>`:e`<div class="n-label-container">${r}</div>`}renderError(){return e`<div class="n-caption n-error" id="${this.errorId}" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div>`}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?`${this.hintId} ${this.errorId}`:t?this.hintId:e?this.errorId:void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}}return t([r()],h.prototype,"label",void 0),t([r()],h.prototype,"hint",void 0),t([r({type:Boolean,attribute:"hide-label"})],h.prototype,"hideLabel",void 0),t([r()],h.prototype,"placeholder",void 0),t([r()],h.prototype,"error",void 0),t([r({type:Boolean})],h.prototype,"required",void 0),t([r({type:Boolean,attribute:"hide-required"})],h.prototype,"hideRequired",void 0),h}export{n as F};
-//# sourceMappingURL=FormAssociatedMixin-5fedde68.js.map
+import{_ as t,x as e}from"./query-assigned-elements-2f8275b7.js";import{e as r}from"./property-03f59dce.js";import{S as i}from"./SlotController-d733c575.js";import{N as o}from"./events-d9666e88.js";import"./VisuallyHidden.js";class s{constructor(t,e){this.host=t,this.options=e,this._form=null,this.handleFormData=t=>{const{disabled:e,name:r}=this.host;if(e)return;if(!r)return;const i=this.options.value();null!=i&&t.formData.append(r,i)},t.addController(this)}hostConnected(){this.listen(this.host.form)}hostUpdated(){this.listen(this.host.form)}hostDisconnected(){this.cleanup()}listen(t){var e;this._form!==t&&(this.cleanup(),this._form=t,null===(e=this._form)||void 0===e||e.addEventListener("formdata",this.handleFormData))}cleanup(){var t;null===(t=this._form)||void 0===t||t.removeEventListener("formdata",this.handleFormData),this._form=null}}function n(n){class h extends n{constructor(){super(...arguments),this.labelSlot=new i(this,"label"),this.errorSlot=new i(this,"error"),this.hintSlot=new i(this,"hint"),this.formData=new s(this,{value:()=>this.formValue}),this.inputId="input",this.errorId="error",this.hintId="hint",this.label="",this.hideLabel=!1,this.required=!1,this.hideRequired=!1}get formValue(){return this.value}handleInput(t){t.stopPropagation();const e=t.target;this.value=e.value,this.dispatchEvent(new o("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new o("change"))}renderLabel(t){const r=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot><span ?hidden="${!this.required||this.hideRequired}" aria-hidden="true" class="n-required">*</span> ${t}</label><div class="n-caption n-hint" id="${this.hintId}" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div>`;return this.hideLabel?e`<nord-visually-hidden>${r}</nord-visually-hidden>`:e`<div class="n-label-container">${r}</div>`}renderError(){return e`<div class="n-caption n-error" id="${this.errorId}" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div>`}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?`${this.hintId} ${this.errorId}`:t?this.hintId:e?this.errorId:void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}}return t([r()],h.prototype,"label",void 0),t([r()],h.prototype,"hint",void 0),t([r({type:Boolean,attribute:"hide-label"})],h.prototype,"hideLabel",void 0),t([r()],h.prototype,"placeholder",void 0),t([r()],h.prototype,"error",void 0),t([r({type:Boolean})],h.prototype,"required",void 0),t([r({type:Boolean,attribute:"hide-required"})],h.prototype,"hideRequired",void 0),h}export{n as F};
+//# sourceMappingURL=FormAssociatedMixin-0638b151.js.map

package/lib/{FormAssociatedMixin-5fedde68.js.map → FormAssociatedMixin-0638b151.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FormAssociatedMixin-5fedde68.js","sources":["../src/common/controllers/FormDataController.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\n\ntype FormDataOptions = {\n  value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n  private _form: HTMLFormElement | null = null\n\n  constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n    host.addController(this)\n  }\n\n  hostConnected() {\n    this.listen(this.host.form)\n  }\n\n  hostUpdated() {\n    this.listen(this.host.form)\n  }\n\n  hostDisconnected() {\n    this.cleanup()\n  }\n\n  private listen(form: HTMLFormElement | null) {\n    if (this._form !== form) {\n      this.cleanup()\n      this._form = form\n      this._form?.addEventListener(\"formdata\", this.handleFormData)\n    }\n  }\n\n  private cleanup() {\n    this._form?.removeEventListener(\"formdata\", this.handleFormData)\n    this._form = null\n  }\n\n  private handleFormData = (e: FormDataEvent) => {\n    const { disabled, name } = this.host\n\n    if (disabled) {\n      return\n    }\n    if (!name) {\n      return\n    }\n\n    const value = this.options.value()\n    if (value != null) {\n      e.formData.append(name, value)\n    }\n  }\n}\n","/* eslint-disable max-classes-per-file */\nimport { html, LitElement, TemplateResult } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { FormDataController } from \"../controllers/FormDataController.js\"\nimport { SlotController } from \"../controllers/SlotController.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\nimport \"../../visually-hidden/VisuallyHidden.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n  label: string\n  required: boolean\n  hideRequired: boolean\n  hint?: string\n  hideLabel: boolean\n  placeholder?: string\n  error?: string\n\n  protected inputId: string\n  protected errorId: string\n  protected hintId: string\n  protected labelSlot: SlotController\n  protected hintSlot: SlotController\n  protected errorSlot: SlotController\n  protected formData: FormDataController\n\n  protected get formValue(): string | undefined\n  protected get hasError(): boolean\n  protected get hasHint(): boolean\n\n  protected handleChange(e: Event): void\n  protected handleInput(e: Event): void\n  protected renderLabel(additionalContent?: TemplateResult): TemplateResult\n  protected renderError(): TemplateResult\n  protected getDescribedBy(): string | undefined\n  protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n  // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n  /**\n   * @slot label - Use when a label requires more than plain text.\n   * @slot hint - Use when a hint requires more than plain text.\n   * @slot error - Optional slot that holds error text for the input.\n   */\n  class FormAssociatedElement extends superClass {\n    protected labelSlot = new SlotController(this, \"label\")\n    protected errorSlot = new SlotController(this, \"error\")\n    protected hintSlot = new SlotController(this, \"hint\")\n    protected formData = new FormDataController(this, { value: () => this.formValue })\n\n    protected get formValue() {\n      return this.value\n    }\n\n    protected inputId = \"input\"\n    protected errorId = \"error\"\n    protected hintId = \"hint\"\n\n    /**\n     * Label for the input.\n     */\n    @property() label: string = \"\"\n\n    /**\n     * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n     */\n    @property() hint?: string\n\n    /**\n     * Visually hide the label, but still show it to assistive technologies like screen readers.\n     */\n    @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n    /**\n     * Placeholder text to display within the input.\n     */\n    @property() placeholder?: string\n\n    /**\n     * Optional error to be shown with the input. Alternatively use the error slot.\n     */\n    @property() error?: string\n\n    /**\n     * Determines whether the input is required or not.\n     * An input marked as required will be announced as such to users of assistive technology.\n     * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n     */\n    @property({ type: Boolean }) required = false\n\n    /**\n     * Visually hide the required indicator, but still show\n     * required attribute to assistive technologies like screen readers.\n     */\n    @property({ type: Boolean, attribute: \"hide-required\" }) hideRequired = false\n\n    protected handleInput(e: Event) {\n      e.stopPropagation()\n      const target = e.target as NativeInputElement\n      this.value = target.value\n\n      /**\n       * Fired as the user types into the input.\n       */\n      this.dispatchEvent(new NordEvent(\"input\"))\n    }\n\n    protected handleChange(e: Event) {\n      e.stopPropagation()\n\n      /**\n       * Fired whenever the input's value is changed via user interaction.\n       */\n      this.dispatchEvent(new NordEvent(\"change\"))\n    }\n\n    protected renderLabel(additionalContent?: TemplateResult) {\n      const label = html`\n        <label for=${this.inputId}>\n          <slot name=\"label\">${this.label}</slot\n          ><span ?hidden=${!this.required || this.hideRequired} aria-hidden=\"true\" class=\"n-required\">*</span>\n          ${additionalContent}\n        </label>\n\n        <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n          <slot name=\"hint\">${this.hint}</slot>\n        </div>\n      `\n\n      return this.hideLabel\n        ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n        : html`<div class=\"n-label-container\">${label}</div>`\n    }\n\n    protected renderError() {\n      return html`\n        <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n          <slot name=\"error\">${this.error}</slot>\n        </div>\n      `\n    }\n\n    protected getDescribedBy() {\n      const { hasHint, hasError } = this\n\n      if (hasHint && hasError) {\n        return `${this.hintId} ${this.errorId}`\n      }\n      if (hasHint) {\n        return this.hintId\n      }\n      if (hasError) {\n        return this.errorId\n      }\n\n      return undefined\n    }\n\n    protected getInvalid() {\n      return this.hasError ? \"true\" : undefined\n    }\n\n    protected get hasHint() {\n      return Boolean(this.hint) || this.hintSlot.hasContent\n    }\n\n    protected get hasError() {\n      return Boolean(this.error) || this.errorSlot.hasContent\n    }\n  }\n\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormDataController","constructor","host","options","this","_form","handleFormData","e","disabled","name","value","formData","append","addController","hostConnected","listen","form","hostUpdated","hostDisconnected","cleanup","_a","addEventListener","removeEventListener","FormAssociatedMixin","superClass","FormAssociatedElement","labelSlot","SlotController","errorSlot","hintSlot","formValue","inputId","errorId","hintId","label","hideLabel","required","hideRequired","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","additionalContent","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","prototype","type","attribute"],"mappings":"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"}
+{"version":3,"file":"FormAssociatedMixin-0638b151.js","sources":["../src/common/controllers/FormDataController.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\n\ntype FormDataOptions = {\n  value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n  private _form: HTMLFormElement | null = null\n\n  constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n    host.addController(this)\n  }\n\n  hostConnected() {\n    this.listen(this.host.form)\n  }\n\n  hostUpdated() {\n    this.listen(this.host.form)\n  }\n\n  hostDisconnected() {\n    this.cleanup()\n  }\n\n  private listen(form: HTMLFormElement | null) {\n    if (this._form !== form) {\n      this.cleanup()\n      this._form = form\n      this._form?.addEventListener(\"formdata\", this.handleFormData)\n    }\n  }\n\n  private cleanup() {\n    this._form?.removeEventListener(\"formdata\", this.handleFormData)\n    this._form = null\n  }\n\n  private handleFormData = (e: FormDataEvent) => {\n    const { disabled, name } = this.host\n\n    if (disabled) {\n      return\n    }\n    if (!name) {\n      return\n    }\n\n    const value = this.options.value()\n    if (value != null) {\n      e.formData.append(name, value)\n    }\n  }\n}\n","/* eslint-disable max-classes-per-file */\nimport { html, LitElement, TemplateResult } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { FormDataController } from \"../controllers/FormDataController.js\"\nimport { SlotController } from \"../controllers/SlotController.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\nimport \"../../visually-hidden/VisuallyHidden.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n  label: string\n  required: boolean\n  hideRequired: boolean\n  hint?: string\n  hideLabel: boolean\n  placeholder?: string\n  error?: string\n\n  protected inputId: string\n  protected errorId: string\n  protected hintId: string\n  protected labelSlot: SlotController\n  protected hintSlot: SlotController\n  protected errorSlot: SlotController\n  protected formData: FormDataController\n\n  protected get formValue(): string | undefined\n  protected get hasError(): boolean\n  protected get hasHint(): boolean\n\n  protected handleChange(e: Event): void\n  protected handleInput(e: Event): void\n  protected renderLabel(additionalContent?: TemplateResult): TemplateResult\n  protected renderError(): TemplateResult\n  protected getDescribedBy(): string | undefined\n  protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n  // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n  /**\n   * @slot label - Use when a label requires more than plain text.\n   * @slot hint - Use when a hint requires more than plain text.\n   * @slot error - Optional slot that holds error text for the input.\n   */\n  class FormAssociatedElement extends superClass {\n    protected labelSlot = new SlotController(this, \"label\")\n    protected errorSlot = new SlotController(this, \"error\")\n    protected hintSlot = new SlotController(this, \"hint\")\n    protected formData = new FormDataController(this, { value: () => this.formValue })\n\n    protected get formValue() {\n      return this.value\n    }\n\n    protected inputId = \"input\"\n    protected errorId = \"error\"\n    protected hintId = \"hint\"\n\n    /**\n     * Label for the input.\n     */\n    @property() label: string = \"\"\n\n    /**\n     * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n     */\n    @property() hint?: string\n\n    /**\n     * Visually hide the label, but still show it to assistive technologies like screen readers.\n     */\n    @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n    /**\n     * Placeholder text to display within the input.\n     */\n    @property() placeholder?: string\n\n    /**\n     * Optional error to be shown with the input. Alternatively use the error slot.\n     */\n    @property() error?: string\n\n    /**\n     * Determines whether the input is required or not.\n     * An input marked as required will be announced as such to users of assistive technology.\n     * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n     */\n    @property({ type: Boolean }) required = false\n\n    /**\n     * Visually hide the required indicator, but still show\n     * required attribute to assistive technologies like screen readers.\n     */\n    @property({ type: Boolean, attribute: \"hide-required\" }) hideRequired = false\n\n    protected handleInput(e: Event) {\n      e.stopPropagation()\n      const target = e.target as NativeInputElement\n      this.value = target.value\n\n      /**\n       * Fired as the user types into the input.\n       */\n      this.dispatchEvent(new NordEvent(\"input\"))\n    }\n\n    protected handleChange(e: Event) {\n      e.stopPropagation()\n\n      /**\n       * Fired whenever the input's value is changed via user interaction.\n       */\n      this.dispatchEvent(new NordEvent(\"change\"))\n    }\n\n    protected renderLabel(additionalContent?: TemplateResult) {\n      const label = html`\n        <label for=${this.inputId}>\n          <slot name=\"label\">${this.label}</slot\n          ><span ?hidden=${!this.required || this.hideRequired} aria-hidden=\"true\" class=\"n-required\">*</span>\n          ${additionalContent}\n        </label>\n\n        <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n          <slot name=\"hint\">${this.hint}</slot>\n        </div>\n      `\n\n      return this.hideLabel\n        ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n        : html`<div class=\"n-label-container\">${label}</div>`\n    }\n\n    protected renderError() {\n      return html`\n        <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n          <slot name=\"error\">${this.error}</slot>\n        </div>\n      `\n    }\n\n    protected getDescribedBy() {\n      const { hasHint, hasError } = this\n\n      if (hasHint && hasError) {\n        return `${this.hintId} ${this.errorId}`\n      }\n      if (hasHint) {\n        return this.hintId\n      }\n      if (hasError) {\n        return this.errorId\n      }\n\n      return undefined\n    }\n\n    protected getInvalid() {\n      return this.hasError ? \"true\" : undefined\n    }\n\n    protected get hasHint() {\n      return Boolean(this.hint) || this.hintSlot.hasContent\n    }\n\n    protected get hasError() {\n      return Boolean(this.error) || this.errorSlot.hasContent\n    }\n  }\n\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormDataController","constructor","host","options","this","_form","handleFormData","e","disabled","name","value","formData","append","addController","hostConnected","listen","form","hostUpdated","hostDisconnected","cleanup","_a","addEventListener","removeEventListener","FormAssociatedMixin","superClass","FormAssociatedElement","labelSlot","SlotController","errorSlot","hintSlot","formValue","inputId","errorId","hintId","label","hideLabel","required","hideRequired","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","additionalContent","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","prototype","type","attribute"],"mappings":"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"}