@nordhealth/components 4.26.1 → 5.0.0-alpha.0

package/lib/FilterDropdown.js

@@ -0,0 +1,2 @@
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{c as t}from"./interface-checked-small-BQmkNgCI.js";import{c as i,A as o}from"./ActiveDescendantController-BnMqM79O.js";import{c as n}from"./interface-close-small-CnpAFMO3.js";import{f as s}from"./interface-filter-CCsx9-u6.js";import{s as r}from"./navigation-search-CBbIGzo2.js";import{css as l,html as a,nothing as d,LitElement as p}from"lit";import{query as c,property as h,state as u,customElement as v}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{createRef as m,ref as b}from"lit/directives/ref.js";import{repeat as g}from"lit/directives/repeat.js";import{L as w}from"./LightDismissController-4pH8cdko.js";import{O as y}from"./OpenStateController-CCnZ7up6.js";import{i as j}from"./light-dom-styles-DXsbiKU9.js";import{D as z}from"./DraftComponentMixin-4qug5Rky.js";import{s as $}from"./filter-chip-C97zd4PT.js";import k from"./Icon.js";import{LocalizeController as x}from"./LocalizeController.js";import{FilterDropdownRemoveEvent as S,FilterDropdownSearchChangeEvent as A,FilterDropdownLoadMoreEvent as D,FilterDropdownChangeEvent as I,FilterDropdownClearEvent as O}from"./FilterDropdownEvents.js";import"./Button.js";import"./ButtonGroup.js";import"./Input.js";import"./Popout-DpN7PP9h.js";import"./Spinner.js";import"./VisuallyHidden.js";import"./number-Dg2vCfGd.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./events-Bv6wNHwJ.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./DirectionController-ChvNGESZ.js";import"lit/directives/style-map.js";import"./ResizeController-14PUwRQy.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./FormAssociatedMixin-D9aPREgv.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./ReadonlyMixin-BdJPGtQ3.js";import"./SizeMixin-CU9cLbLC.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./FormField-CMgEFZCK.js";import"./TextField-CSKvieoG.js";import"./positioning-D-K8Mueq.js";import"./ScrollbarController-BFC67Y2x.js";const C=l`nord-filter-dropdown{--_n-filter-dropdown-list-inline-size:var(--n-filter-dropdown-list-inline-size,250px)}nord-filter-dropdown .n-filter-dropdown-panel{display:flex;flex-direction:column;max-inline-size:calc(var(--_n-filter-dropdown-list-inline-size)*1.5);min-inline-size:var(--_n-filter-dropdown-list-inline-size)}nord-filter-dropdown .n-filter-dropdown-size-s{--_n-filter-dropdown-list-inline-size:var(--n-filter-dropdown-list-inline-size,250px)}nord-filter-dropdown .n-filter-dropdown-size-l{--_n-filter-dropdown-list-inline-size:var(--n-filter-dropdown-list-inline-size,300px)}nord-filter-dropdown .n-filter-dropdown-search{padding-block-end:var(--n-space-xs);padding-block-start:var(--n-space-m);padding-inline-end:var(--n-space-m);padding-inline-start:var(--n-space-m)}nord-filter-dropdown .n-filter-dropdown-select-all{border-block-end:1px solid var(--n-color-border);padding-block-start:0}nord-filter-dropdown .n-filter-dropdown-list,nord-filter-dropdown .n-filter-dropdown-select-all{padding-block-end:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-list{max-block-size:330px;overflow-y:auto;padding-block-start:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-list.is-loading-more{opacity:.3;pointer-events:none}@media (width <= 35.9375em){nord-filter-dropdown .n-filter-dropdown-panel{max-inline-size:none}nord-filter-dropdown .n-filter-dropdown-list{max-block-size:70vh}}nord-filter-dropdown .n-filter-dropdown-group{border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s);padding-block-end:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-group:last-child{border-block-end:0;margin-block-end:0;padding-block-end:0}nord-filter-dropdown .n-filter-dropdown-heading{color:var(--n-color-text-weaker);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);padding-block-end:var(--n-space-xs);padding-block-start:var(--n-space-xs);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-option{align-items:center;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:flex;gap:var(--n-space-s);padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s);user-select:none}nord-filter-dropdown .n-filter-dropdown-option.is-indented{padding-inline-start:var(--n-space-l)}nord-filter-dropdown .n-filter-dropdown-option.is-active,nord-filter-dropdown .n-filter-dropdown-option:hover{background-color:var(--n-color-active)}nord-filter-dropdown .n-filter-dropdown-option.is-disabled{color:var(--n-color-text-weakest);cursor:not-allowed;pointer-events:none}nord-filter-dropdown .n-filter-dropdown-option-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nord-filter-dropdown .n-filter-dropdown-checkbox{background-color:var(--n-color-surface);block-size:var(--n-space-m);border:1px solid var(--n-color-border-hover);border-radius:var(--n-border-radius-s);color:var(--n-color-text-on-accent);display:grid;flex:0 0 var(--n-space-m);inline-size:var(--n-space-m);place-items:center}nord-filter-dropdown .n-filter-dropdown-checkbox:has(nord-icon){background-color:var(--n-color-accent);border-color:var(--n-color-accent)}nord-filter-dropdown .n-filter-dropdown-check{block-size:var(--n-space-m);color:var(--n-color-text-highlight);display:grid;flex:0 0 var(--n-space-m);inline-size:var(--n-space-m);place-items:center}nord-filter-dropdown .n-filter-dropdown-empty{color:var(--n-color-text-weaker);display:flex;justify-content:center;padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}`;k.registerIcon(t),k.registerIcon(i),k.registerIcon(n),k.registerIcon(s),k.registerIcon(r);let L=1;function M(e){return"heading"in e}let R=class extends(z(p)){constructor(){super(...arguments),this.filterDropdownId="nord-filter-dropdown-"+L++,this.localize=new x(this),this.listRef=m(),this.dismiss=new w(this,{isOpen:()=>this.open,onDismiss:()=>this.hide(),isDismissible:e=>e!==this}),this.activeDescendant=new o(this,{count:()=>this.flatOptions.length,isEnabled:e=>{var t;return!(null===(t=this.flatOptions[e])||void 0===t?void 0:t.disabled)},optionId:e=>this.optionId(e)}),this.openState=new y(this,{isOpen:()=>this.open,setOpen:e=>{this.open=e},popout:()=>this.popout,isInert:()=>this.disabled,onOpen:()=>{var e;this.loadMoreRequested=!1,null===(e=this.listRef.value)||void 0===e||e.scrollTo(0,0),this.activeDescendant.reset()},onClose:()=>{this.search&&(this.search=""),this.removable&&this.isInactive&&this.dispatchEvent(new S)}}),this.label="",this.name="",this.icon="interface-filter",this.size="s",this.options=[],this.optionsValueKey="value",this.optionsLabelKey="label",this.value="",this.multiple=!1,this.searchable=!1,this.internalSearch=!0,this.selectAll=!1,this.clearable=!0,this.removable=!1,this.disabled=!1,this.loading=!1,this.open=!1,this.noResultsMessage="",this.labelForUnknown="",this.search="",this.scrollActivePending=!1,this.loadMoreRequested=!1,this.handleTriggerClick=()=>{this.openState.toggle()},this.toggleSelectAll=()=>{!this.disabled&&this.multiple&&this.commit(this.isAllSelected?[]:[...this.allSelectableValues])},this.handleClear=e=>{e.stopPropagation(),this.disabled||(this.clear(),this.focus())},this.handleRemove=e=>{e.stopPropagation(),this.disabled||(this.clear(),this.dispatchEvent(new S))},this.handleSearchInput=e=>{if(e.stopPropagation(),this.disabled)return;const t=e.target;this.search=t.value,this.activeDescendant.reset(),this.scrollActivePending=!0,this.dispatchEvent(new A(this.search))},this.handleListScroll=e=>{if(this.disabled)return;const t=e.target,{scrollTop:i,scrollHeight:o,clientHeight:n}=t;if(o<=n)return;(i+n)/o>.8?this.loading||this.loadMoreRequested||(this.loadMoreRequested=!0,this.dispatchEvent(new D)):this.loadMoreRequested=!1},this.handleKeydown=e=>{if(!this.disabled)switch(e.key){case"ArrowDown":if(e.preventDefault(),!this.open)return void this.show();this.activeDescendant.move(1),this.scrollActivePending=!0;break;case"ArrowUp":if(e.preventDefault(),!this.open)return void this.show();this.activeDescendant.move(-1),this.scrollActivePending=!0;break;case"Home":this.open&&(e.preventDefault(),this.activeDescendant.first(),this.scrollActivePending=!0);break;case"End":this.open&&(e.preventDefault(),this.activeDescendant.last(),this.scrollActivePending=!0);break;case"Enter":{if(!this.open)return e.preventDefault(),void this.show();e.preventDefault();const t=this.flatOptions[this.activeDescendant.activeIndex];t&&this.toggle(t);break}case"Escape":this.open&&(e.preventDefault(),this.hide(),this.focus())}}}connectedCallback(){super.connectedCallback(),j(this,C),j(this,$,"nord-filter-chip")}createRenderRoot(){return this}get valueAsArray(){const{value:e}=this;return Array.isArray(e)?e:e?[e]:[]}get isInactive(){return 0===this.valueAsArray.length}getOptionValue(e){var t;return String(null!==(t=e[this.optionsValueKey])&&void 0!==t?t:"")}getOptionLabel(e){var t;return String(null!==(t=e[this.optionsLabelKey])&&void 0!==t?t:"")}get hasGroupedOptions(){return this.options.some((e=>{var t;return M(e)||Boolean(null===(t=e.children)||void 0===t?void 0:t.length)}))}get needle(){return this.searchable&&this.internalSearch?this.search.trim().toLocaleLowerCase():""}matchesSearch(e){const t=this.needle;return!t||this.getOptionLabel(e).toLocaleLowerCase().includes(t)}get sections(){var e,t;const i=(e,t)=>({value:this.getOptionValue(e),label:this.getOptionLabel(e),disabled:Boolean(e.disabled),indent:t,source:e});if(!this.hasGroupedOptions){const e=this.options.filter((e=>this.matchesSearch(e))).map((e=>i(e,!1)));return e.length?[{options:e}]:[]}const o=[];let n=[];const s=()=>{n.length&&(o.push({options:n}),n=[])};for(const r of this.options)if(M(r)){s();const t=(null!==(e=r.children)&&void 0!==e?e:[]).filter((e=>this.matchesSearch(e))).map((e=>i({...e,disabled:e.disabled||r.disabled},!1)));t.length&&o.push({heading:r.heading,options:t})}else if(null===(t=r.children)||void 0===t?void 0:t.length){const e=this.matchesSearch(r),t=r.children.filter((e=>this.matchesSearch(e)));if(e||t.length){e&&n.push(i(r,!1));for(const e of t)n.push(i(e,!0))}}else this.matchesSearch(r)&&n.push(i(r,!1));return s(),o}get flatOptions(){return this.sections.flatMap((e=>e.options))}get allSelectableValues(){var e,t;const i=[];for(const o of this.options)if(M(o)){if(o.disabled)continue;for(const t of null!==(e=o.children)&&void 0!==e?e:[])t.disabled||i.push(this.getOptionValue(t))}else{o.disabled||i.push(this.getOptionValue(o));for(const e of null!==(t=o.children)&&void 0!==t?t:[])o.disabled||e.disabled||i.push(this.getOptionValue(e))}return i}get isAllSelected(){if(!this.selectAll||!this.multiple)return!1;const e=this.allSelectableValues,t=new Set(this.valueAsArray);return e.length>0&&e.every((e=>t.has(e)))}labelForValue(e){var t,i;for(const o of this.options)if(M(o)){for(const i of null!==(t=o.children)&&void 0!==t?t:[])if(this.getOptionValue(i)===e)return this.getOptionLabel(i)}else{if(this.getOptionValue(o)===e)return this.getOptionLabel(o);for(const t of null!==(i=o.children)&&void 0!==i?i:[])if(this.getOptionValue(t)===e)return this.getOptionLabel(t)}return this.labelForUnknown||this.localize.term("unknown")}get selectionLabel(){const e=this.valueAsArray;if(0===e.length)return"";const t=this.labelForValue(e[0]);return e.length>1?t+this.localize.term("countSuffix",e.length-1):t}isSelected(e){return this.valueAsArray.includes(e)}show(){this.openState.show()}hide(){this.openState.hide()}focus(e){var t;null===(t=this.triggerButton)||void 0===t||t.focus(e)}updated(e){var t,i;super.updated(e),this.scrollActivePending&&(this.scrollActivePending=!1,null===(i=null===(t=this.listRef.value)||void 0===t?void 0:t.querySelector(".n-filter-dropdown-option.is-active"))||void 0===i||i.scrollIntoView({block:"nearest"})),this.loadMoreRequested&&(e.has("loading")||e.has("options"))&&(this.loadMoreRequested=!1),e.has("disabled")&&this.disabled&&(this.activeDescendant.reset(),this.scrollActivePending=!0)}commit(e){this.value=e,this.dispatchEvent(new I(e))}toggle(e){if(this.disabled||e.disabled)return;if(!this.multiple)return this.commit(e.value),void this.hide();const t=this.valueAsArray,i=t.includes(e.value)?t.filter((t=>t!==e.value)):[...t,e.value];this.commit(i)}clear(){this.disabled||(this.search="",this.dispatchEvent(new O),this.commit(this.multiple?[]:""))}get listInlineSizeClass(){return`n-filter-dropdown-size-${this.size}`}renderIndicator(e){const t=this.isSelected(e);return this.multiple?a`<span class="n-filter-dropdown-checkbox">${t?a`<nord-icon name="interface-checked-small" size="xs"></nord-icon>`:d}</span>`:a`<span class="n-filter-dropdown-check">${t?a`<nord-icon name="interface-checked" size="s"></nord-icon>`:d}</span>`}renderOption(e,t){const i=this.isSelected(e.value);return a`<div id="${this.optionId(t)}" class="${f({"n-filter-dropdown-option":!0,"is-active":t===this.activeDescendant.activeIndex,"is-disabled":e.disabled,"is-indented":e.indent})}" role="option" aria-selected="${i?"true":"false"}" aria-disabled="${e.disabled?"true":d}" @click="${()=>this.toggle(e)}" @mousemove="${()=>this.activeDescendant.setActiveIndex(t)}">${this.renderIndicator(e.value)} <span class="n-filter-dropdown-option-label">${e.label}</span></div>`}optionId(e){return`${this.filterDropdownId}-option-${e}`}renderList(){const e=this.sections,t=e.flatMap((e=>e.options));if(this.loading&&0===t.length)return a`<div class="n-filter-dropdown-empty" role="status"><nord-spinner size="s"></nord-spinner></div>`;if(0===t.length)return a`<div class="n-filter-dropdown-empty" role="status">${this.noResultsMessage||this.localize.term("noResults")}</div>`;let i=0;return g(e,((e,t)=>t),((e,t)=>{const o=e.heading?`${this.filterDropdownId}-group-${t}`:void 0;return a`<div class="n-filter-dropdown-group" role="group" aria-labelledby="${null!=o?o:d}">${e.heading?a`<div class="n-filter-dropdown-heading" id="${o}" role="presentation">${e.heading}</div>`:d} ${g(e.options,((e,i)=>`${t}-${i}`),(e=>this.renderOption(e,i++)))}</div>`}))}render(){var e;const t=`${this.filterDropdownId}-popout`,i=`${this.filterDropdownId}-list`,o=!this.isInactive,n=this.removable,s=!n&&this.clearable&&o,r=this.open&&null!==(e=this.activeDescendant.activeDescendant)&&void 0!==e?e:d;return a`<nord-button-group><nord-button class="n-filter-dropdown-trigger" type="button" size="${this.size}" variant="${o?d:"dashed"}" aria-controls="${t}" aria-haspopup="dialog" aria-expanded="${this.open?"true":"false"}" aria-activedescendant="${r}" ?disabled="${this.disabled}" @click="${this.handleTriggerClick}" @keydown="${this.handleKeydown}"><nord-icon slot="start" name="${this.icon}" label="${this.localize.term("filterIconLabel")}"></nord-icon><span class="n-filter-dropdown-label">${o?this.localize.term("selectionLabel",this.label):this.label}</span> ${o?a`<span class="n-filter-dropdown-value">${this.selectionLabel}</span>`:d}</nord-button>${s?a`<nord-button class="n-filter-dropdown-clear" type="button" size="${this.size}" square ?disabled="${this.disabled}" @click="${this.handleClear}"><nord-icon name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("clearLabel")}</nord-visually-hidden></nord-button>`:d} ${n?a`<nord-button class="n-filter-dropdown-remove" type="button" size="${this.size}" square variant="${o?d:"dashed"}" ?disabled="${this.disabled}" @click="${this.handleRemove}"><nord-icon name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("removeLabel")}</nord-visually-hidden></nord-button>`:d}</nord-button-group><nord-popout id="${t}" controlled always-floating @open="${this.openState.onPopoutOpen}" @close="${this.openState.onPopoutClose}"><div class="${f({"n-filter-dropdown-panel":!0,[this.listInlineSizeClass]:!0})}">${this.searchable?a`<div class="n-filter-dropdown-search"><nord-input type="search" label="${this.localize.term("searchLabel")}" hide-label expand size="s" .value="${this.search}" ?disabled="${this.disabled}" @input="${this.handleSearchInput}" @keydown="${this.handleKeydown}"><nord-icon slot="start" name="navigation-search"></nord-icon>${this.loading?a`<nord-spinner slot="end" size="s"></nord-spinner>`:d}</nord-input></div>`:d} ${this.selectAll&&this.multiple?a`<div class="n-filter-dropdown-select-all"><div class="${f({"n-filter-dropdown-option":!0,"is-active":!1})}" role="button" tabindex="0" aria-pressed="${this.isAllSelected?"true":"false"}" aria-disabled="${this.disabled?"true":d}" @click="${this.toggleSelectAll}" @keydown="${e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.toggleSelectAll())}}"><span class="n-filter-dropdown-checkbox">${this.isAllSelected?a`<nord-icon name="interface-checked-small" size="xs"></nord-icon>`:d} </span><span class="n-filter-dropdown-option-label">${this.isAllSelected?this.localize.term("deselectAll"):this.localize.term("selectAll")}</span></div></div>`:d}<div ${b(this.listRef)} id="${i}" class="${f({"n-filter-dropdown-list":!0,"is-loading-more":this.loading&&this.flatOptions.length>0})}" role="listbox" aria-label="${this.label||d}" aria-multiselectable="${this.multiple?"true":"false"}" @scroll="${this.handleListScroll}" @keydown="${this.handleKeydown}">${this.renderList()}</div></div></nord-popout>`}};e([c("nord-popout",!0)],R.prototype,"popout",void 0),e([c(".n-filter-dropdown-trigger")],R.prototype,"triggerButton",void 0),e([h({reflect:!0})],R.prototype,"label",void 0),e([h({reflect:!0})],R.prototype,"name",void 0),e([h({reflect:!0})],R.prototype,"icon",void 0),e([h({reflect:!0})],R.prototype,"size",void 0),e([h({attribute:!1})],R.prototype,"options",void 0),e([h({reflect:!0,attribute:"options-value-key"})],R.prototype,"optionsValueKey",void 0),e([h({reflect:!0,attribute:"options-label-key"})],R.prototype,"optionsLabelKey",void 0),e([h({attribute:!1})],R.prototype,"value",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"multiple",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"searchable",void 0),e([h({reflect:!0,type:Boolean,attribute:"internal-search"})],R.prototype,"internalSearch",void 0),e([h({reflect:!0,type:Boolean,attribute:"select-all"})],R.prototype,"selectAll",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"clearable",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"removable",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"disabled",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"loading",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"open",void 0),e([h({reflect:!0,attribute:"no-results-message"})],R.prototype,"noResultsMessage",void 0),e([h({reflect:!0,attribute:"label-for-unknown"})],R.prototype,"labelForUnknown",void 0),e([u()],R.prototype,"search",void 0),R=e([v("nord-filter-dropdown")],R);var V=R;export{I as FilterDropdownChangeEvent,O as FilterDropdownClearEvent,D as FilterDropdownLoadMoreEvent,S as FilterDropdownRemoveEvent,A as FilterDropdownSearchChangeEvent,V as default};
+//# sourceMappingURL=FilterDropdown.js.map

package/lib/FilterDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDropdown.js","sources":["../src/filter-dropdown/FilterDropdown.ts"],"sourcesContent":["// The trigger `nord-button` carries `aria-activedescendant` while the popout is\n// open (it keeps DOM focus, delegating to its inner focusable `<button>`), so it\n// is a valid tab stop. The lint rule cannot statically resolve tabbability\n// through a custom element, so it is disabled for this file.\n/* eslint-disable lit-a11y/aria-activedescendant-has-tabindex */\nimport type { PropertyValues, TemplateResult } from 'lit'\nimport * as checkedSmallIcon from '@nordhealth/icons/lib/assets/interface-checked-small.js'\nimport * as checkedIcon from '@nordhealth/icons/lib/assets/interface-checked.js'\nimport * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport * as filterIcon from '@nordhealth/icons/lib/assets/interface-filter.js'\nimport * as searchIcon from '@nordhealth/icons/lib/assets/navigation-search.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { repeat } from 'lit/directives/repeat.js'\n\nimport { ActiveDescendantController } from '../common/controllers/ActiveDescendantController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { OpenStateController } from '../common/controllers/OpenStateController.js'\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport chipStyle from '../common/styles/filter-chip.css'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './FilterDropdown.css'\nimport {\n  FilterDropdownChangeEvent,\n  FilterDropdownClearEvent,\n  FilterDropdownLoadMoreEvent,\n  FilterDropdownRemoveEvent,\n  FilterDropdownSearchChangeEvent,\n} from './FilterDropdownEvents.js'\nimport '../button/Button.js'\nimport '../button-group/ButtonGroup.js'\nimport '../input/Input.js'\nimport '../popout/Popout.js'\nimport '../spinner/Spinner.js'\nimport '../visually-hidden/VisuallyHidden.js'\n\nIcon.registerIcon(checkedSmallIcon)\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(closeIcon)\nIcon.registerIcon(filterIcon)\nIcon.registerIcon(searchIcon)\n\nexport {\n  FilterDropdownChangeEvent,\n  FilterDropdownClearEvent,\n  FilterDropdownLoadMoreEvent,\n  FilterDropdownRemoveEvent,\n  FilterDropdownSearchChangeEvent,\n} from './FilterDropdownEvents.js'\n\n/** Per-instance counter so the popout/trigger ids stay unique in the light DOM. */\nlet filterDropdownCount = 1\n\n/** The size of the trigger and popout. */\nexport type FilterDropdownSize = 's' | 'm' | 'l'\n\n/**\n * A flat, selectable option. With `children` it becomes a tree-style option: the\n * parent stays selectable and the children render indented beneath it.\n */\nexport interface FilterDropdownSelectableOption {\n  /** The value submitted with `change` and tracked in `value`. */\n  value: string\n  /** The human-readable text shown in the list. */\n  label: string\n  /** When `true`, the option cannot be selected. */\n  disabled?: boolean\n  /** Tree-style child options, rendered indented under this option. */\n  children?: FilterDropdownSelectableOption[]\n  /** Arbitrary data; lets `optionsValueKey`/`optionsLabelKey` overrides work. */\n  [key: string]: unknown\n}\n\n/** A heading-labelled cluster of options, rendered with a divider. */\nexport interface FilterDropdownGroupOption {\n  /** The heading shown above the group's options. */\n  heading: string\n  /** The options within the group. */\n  children: FilterDropdownSelectableOption[]\n  /** When `true`, all options within the group cannot be selected. */\n  disabled?: boolean\n}\n\n/** Any option shape accepted by the dropdown: flat, grouped, or tree. */\nexport type FilterDropdownOption = FilterDropdownSelectableOption | FilterDropdownGroupOption\n\n/** A flattened, render-ready selectable option (tree children carry `indent`). */\ninterface FlatOption {\n  value: string\n  label: string\n  disabled: boolean\n  /** Children are rendered indented under their parent. */\n  indent: boolean\n  /** The original option, for arbitrary data. */\n  source: FilterDropdownSelectableOption\n}\n\n/** A rendered section of the list: a heading group, or a run of flat options. */\ninterface RenderSection {\n  heading?: string\n  options: FlatOption[]\n}\n\nfunction isGroup(option: FilterDropdownOption): option is FilterDropdownGroupOption {\n  return 'heading' in option\n}\n\n/**\n * Filter Dropdown is a full-featured filter control: a chip trigger that opens a\n * popout list of options. It owns its selection and tracks `value`, unlike the\n * composition-first [Filter Field](/components/filter-field/) — pass it `options`\n * and listen for `change`. It ports the Provet Cloud filter dropdown.\n *\n * Options come in three shapes: a flat list (`{ value, label }`), groups\n * (`{ heading, children }`) rendered with dividers, and tree-style options\n * (a selectable option with `children`) where the parent stays selectable and the\n * children render indented. Single mode tracks a string value and closes on\n * select; `multiple` tracks an array, shows checkboxes and keeps the popout open.\n *\n * @status draft\n * @category form\n * @lightDom true\n *\n * @fires {FilterDropdownChangeEvent} change - Dispatched when the committed selection changes via user interaction.\n * @fires {FilterDropdownSearchChangeEvent} search-change - Dispatched as the user types when `searchable` (use with `internal-search=\"false\"` for async search).\n * @fires {FilterDropdownClearEvent} clear - Dispatched when the selection is cleared, before `change`.\n * @fires {FilterDropdownRemoveEvent} remove - Dispatched when the filter is removed (only when `removable`).\n * @fires {FilterDropdownLoadMoreEvent} load-more - Dispatched when the list is scrolled near its end (infinite scroll).\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n *\n * @localization filterIconLabel - Accessible label for the leading filter icon.\n * @localization selectionLabel - The chip prefix shown before the highlighted value (e.g. \"Status is\").\n * @localization searchLabel - Accessible label for the search input.\n * @localization clearLabel - Accessible label for the clear button.\n * @localization removeLabel - Accessible label for the remove button.\n * @localization selectAll - Label for the select-all row.\n * @localization deselectAll - Label for the select-all row when everything is selected.\n * @localization noResults - Message shown when no options match the search.\n * @localization unknown - Fallback label for a selected value with no matching option.\n * @localization countSuffix - Suffix appended to the first label when several options are selected.\n *\n * @cssprop [--n-filter-dropdown-list-inline-size=250px] - Controls the inline size, or width, of the popout list. Defaults vary by `size`.\n *\n * @parent FilterBar\n */\n@customElement('nord-filter-dropdown')\nexport default class FilterDropdown extends DraftComponentMixin(LitElement) {\n  private filterDropdownId = `nord-filter-dropdown-${filterDropdownCount++}`\n\n  private localize = new LocalizeController<'nord-filter-dropdown'>(this)\n\n  private listRef = createRef<HTMLDivElement>()\n\n  @query('nord-popout', true) private popout?: HTMLElement & {\n    show: () => Promise<unknown>\n    hide: (moveFocusToButton?: boolean) => Promise<unknown>\n  }\n\n  @query('.n-filter-dropdown-trigger') private triggerButton?: HTMLElement\n\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.hide(),\n    isDismissible: node => node !== this,\n  })\n\n  // Tracks the virtual-focus active row (the trigger keeps DOM focus and carries\n  // `aria-activedescendant`). Centralises the nextEnabledIndex/move/wrap math.\n  private activeDescendant = new ActiveDescendantController(this, {\n    count: () => this.flatOptions.length,\n    isEnabled: i => !this.flatOptions[i]?.disabled,\n    optionId: i => this.optionId(i),\n  })\n\n  // Coordinates `open` with the popout (drive show/hide, sync from its events,\n  // emit one canonical open/close, reject opening while disabled).\n  private openState = new OpenStateController(this, {\n    isOpen: () => this.open,\n    setOpen: (open) => { this.open = open },\n    popout: () => this.popout,\n    isInert: () => this.disabled,\n    onOpen: () => {\n      // Reset the list scroll and active row to the top each time it opens, and\n      // re-arm infinite scroll so a stale request from a prior open can't block it.\n      this.loadMoreRequested = false\n      this.listRef.value?.scrollTo(0, 0)\n      this.activeDescendant.reset()\n    },\n    onClose: () => {\n      // Discard an abandoned search so the next open shows the full list.\n      if (this.search) {\n        this.search = ''\n      }\n      // Removing a removable filter that ends up with no selection mirrors the\n      // Provet behaviour of removing it on close when nothing is selected.\n      if (this.removable && this.isInactive) {\n        this.dispatchEvent(new FilterDropdownRemoveEvent())\n      }\n    },\n  })\n\n  /**\n   * The label naming what this filter targets, shown on the chip.\n   */\n  @property({ reflect: true }) label = ''\n\n  /**\n   * A name identifying what this dropdown filters, for form/identification.\n   */\n  @property({ reflect: true }) name = ''\n\n  /**\n   * The icon shown on the trigger.\n   */\n  @property({ reflect: true }) icon = 'interface-filter'\n\n  /**\n   * The size of the trigger and popout. Defaults to `s` to match the other\n   * filter controls.\n   */\n  @property({ reflect: true }) size: FilterDropdownSize = 's'\n\n  /**\n   * The options to show. Either a flat list (`{ value, label }`), groups\n   * (`{ heading, children }`), or tree-style options (a selectable option with\n   * `children`).\n   */\n  @property({ attribute: false }) options: FilterDropdownOption[] = []\n\n  /**\n   * The key on each option object to read the value from. Defaults to `value`.\n   */\n  @property({ reflect: true, attribute: 'options-value-key' }) optionsValueKey = 'value'\n\n  /**\n   * The key on each option object to read the label from. Defaults to `label`.\n   */\n  @property({ reflect: true, attribute: 'options-label-key' }) optionsLabelKey = 'label'\n\n  /**\n   * The committed value. A single string in single-select mode, or an array of\n   * strings when `multiple`.\n   */\n  @property({ attribute: false }) value: string | string[] = ''\n\n  /**\n   * Allows selecting more than one option. Selected options show a checkbox\n   * indicator and the popout stays open after each selection.\n   */\n  @property({ reflect: true, type: Boolean }) multiple = false\n\n  /**\n   * Shows a search input at the top of the popout to filter the options.\n   */\n  @property({ reflect: true, type: Boolean }) searchable = false\n\n  /**\n   * Whether options are filtered client-side by their label. Defaults to `true`.\n   * Set to `false` for async search: the component then emits `search-change` and\n   * leaves filtering to the consumer (who updates `options`).\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'internal-search' }) internalSearch = true\n\n  /**\n   * Shows a \"Select all\" control at the top of the popout. Only applies with\n   * `multiple`.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'select-all' }) selectAll = false\n\n  /**\n   * Shows a clear (✕) button while there is a selection. Pressing it clears the\n   * value (firing `clear` then `change`) without removing the dropdown.\n   */\n  @property({ reflect: true, type: Boolean }) clearable = true\n\n  /**\n   * Whether the whole dropdown can be removed. When `true` the trailing\n   * affordance clears the value and fires `remove`; the consumer removes the\n   * dropdown from the DOM. Takes precedence over `clearable`.\n   */\n  @property({ reflect: true, type: Boolean }) removable = false\n\n  /**\n   * Makes the component disabled. This prevents users from being able to\n   * interact with it and conveys its inactive state to assistive technologies.\n   */\n  @property({ reflect: true, type: Boolean }) disabled = false\n\n  /**\n   * Shows a spinner in the popout while asynchronous results are loading. Pair\n   * with `internal-search=\"false\"` for async search.\n   */\n  @property({ reflect: true, type: Boolean }) loading = false\n\n  /**\n   * Whether the popout is open. Set it to open or close the popout\n   * programmatically.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * Message shown when no options match the search. Defaults to \"No results.\".\n   */\n  @property({ reflect: true, attribute: 'no-results-message' }) noResultsMessage = ''\n\n  /**\n   * Fallback label shown for a selected value that has no matching option.\n   */\n  @property({ reflect: true, attribute: 'label-for-unknown' }) labelForUnknown = ''\n\n  /** The current search text. */\n  @state() private search = ''\n\n  /** Set after a keyboard move so the active row is scrolled into view. */\n  private scrollActivePending = false\n\n  /**\n   * Set once a near-end scroll has emitted `load-more`; blocks further emits\n   * from the same gesture until the consumer responds (by toggling `loading` or\n   * appending to `options`). Cleared in `updated` when either changes.\n   */\n  private loadMoreRequested = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n    injectLightDomStyles(this, chipStyle, 'nord-filter-chip')\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n\n  // ---------------------------------------------------------------------------\n  // Selection helpers\n  // ---------------------------------------------------------------------------\n\n  /** Normalises `value` to an array regardless of single/multiple shape. */\n  private get valueAsArray(): string[] {\n    const { value } = this\n    if (Array.isArray(value)) {\n      return value\n    }\n    return value ? [value] : []\n  }\n\n  /** Whether there is any committed selection. */\n  private get isInactive(): boolean {\n    return this.valueAsArray.length === 0\n  }\n\n  private getOptionValue(option: FilterDropdownSelectableOption): string {\n    return String(option[this.optionsValueKey] ?? '')\n  }\n\n  private getOptionLabel(option: FilterDropdownSelectableOption): string {\n    return String(option[this.optionsLabelKey] ?? '')\n  }\n\n  // ---------------------------------------------------------------------------\n  // Flattening + filtering (mirrors the Provet flattenedOptions logic)\n  // ---------------------------------------------------------------------------\n\n  /** Whether any option is a group (has a heading) or a tree (has children). */\n  private get hasGroupedOptions(): boolean {\n    return this.options.some(option => isGroup(option) || Boolean(option.children?.length))\n  }\n\n  /** Lowercased search needle, or empty when not filtering internally. */\n  private get needle(): string {\n    return this.searchable && this.internalSearch ? this.search.trim().toLocaleLowerCase() : ''\n  }\n\n  private matchesSearch(option: FilterDropdownSelectableOption): boolean {\n    const needle = this.needle\n    if (!needle) {\n      return true\n    }\n    return this.getOptionLabel(option).toLocaleLowerCase().includes(needle)\n  }\n\n  /**\n   * Flattens grouped/tree options into render sections while preserving visual\n   * hierarchy: groups keep their heading; tree children are emitted right after\n   * their (still-selectable) parent and marked `indent`. Runs of standalone\n   * options are coalesced into one section so no divider appears between them.\n   * Applies the internal search filter as it goes.\n   */\n  private get sections(): RenderSection[] {\n    const toFlat = (option: FilterDropdownSelectableOption, indent: boolean): FlatOption => ({\n      value: this.getOptionValue(option),\n      label: this.getOptionLabel(option),\n      disabled: Boolean(option.disabled),\n      indent,\n      source: option,\n    })\n\n    if (!this.hasGroupedOptions) {\n      const flat = (this.options as FilterDropdownSelectableOption[])\n        .filter(option => this.matchesSearch(option))\n        .map(option => toFlat(option, false))\n      return flat.length ? [{ options: flat }] : []\n    }\n\n    const sections: RenderSection[] = []\n    let run: FlatOption[] = []\n\n    const flushRun = () => {\n      if (run.length) {\n        sections.push({ options: run })\n        run = []\n      }\n    }\n\n    for (const option of this.options) {\n      if (isGroup(option)) {\n        flushRun()\n        const children = (option.children ?? [])\n          .filter(child => this.matchesSearch(child))\n          .map(child => toFlat({ ...child, disabled: child.disabled || option.disabled }, false))\n        if (children.length) {\n          sections.push({ heading: option.heading, options: children })\n        }\n        continue\n      }\n\n      // Tree-style option: parent stays selectable, children render indented.\n      if (option.children?.length) {\n        const parentMatches = this.matchesSearch(option)\n        const children = option.children.filter(child => this.matchesSearch(child))\n        if (parentMatches || children.length) {\n          if (parentMatches) {\n            run.push(toFlat(option, false))\n          }\n          for (const child of children) {\n            run.push(toFlat(child, true))\n          }\n        }\n        continue\n      }\n\n      // Standalone option.\n      if (this.matchesSearch(option)) {\n        run.push(toFlat(option, false))\n      }\n    }\n\n    flushRun()\n    return sections\n  }\n\n  /** The flat option list in render order, used for keyboard navigation. */\n  private get flatOptions(): FlatOption[] {\n    return this.sections.flatMap(section => section.options)\n  }\n\n  /** Every selectable value (skipping disabled options), for select-all. */\n  private get allSelectableValues(): string[] {\n    const values: string[] = []\n    for (const option of this.options) {\n      if (isGroup(option)) {\n        if (option.disabled) {\n          continue\n        }\n        for (const child of option.children ?? []) {\n          if (!child.disabled) {\n            values.push(this.getOptionValue(child))\n          }\n        }\n        continue\n      }\n      if (!option.disabled) {\n        values.push(this.getOptionValue(option))\n      }\n      for (const child of option.children ?? []) {\n        if (!option.disabled && !child.disabled) {\n          values.push(this.getOptionValue(child))\n        }\n      }\n    }\n    return values\n  }\n\n  private get isAllSelected(): boolean {\n    if (!this.selectAll || !this.multiple) {\n      return false\n    }\n    const all = this.allSelectableValues\n    const selected = new Set(this.valueAsArray)\n    return all.length > 0 && all.every(value => selected.has(value))\n  }\n\n  /** Resolves a value to its label across flat, grouped and tree options. */\n  private labelForValue(key: string): string {\n    for (const option of this.options) {\n      if (isGroup(option)) {\n        for (const child of option.children ?? []) {\n          if (this.getOptionValue(child) === key) {\n            return this.getOptionLabel(child)\n          }\n        }\n        continue\n      }\n      if (this.getOptionValue(option) === key) {\n        return this.getOptionLabel(option)\n      }\n      for (const child of option.children ?? []) {\n        if (this.getOptionValue(child) === key) {\n          return this.getOptionLabel(child)\n        }\n      }\n    }\n    return this.labelForUnknown || this.localize.term('unknown')\n  }\n\n  /** The summary shown on the chip when there is a selection. */\n  private get selectionLabel(): string {\n    const values = this.valueAsArray\n    if (values.length === 0) {\n      return ''\n    }\n    const first = this.labelForValue(values[0]!)\n    if (values.length > 1) {\n      return first + this.localize.term('countSuffix', values.length - 1)\n    }\n    return first\n  }\n\n  private isSelected(value: string): boolean {\n    return this.valueAsArray.includes(value)\n  }\n\n  // ---------------------------------------------------------------------------\n  // Open / close\n  // ---------------------------------------------------------------------------\n\n  /** Open the popout. */\n  show() {\n    this.openState.show()\n  }\n\n  /** Close the popout. */\n  hide() {\n    this.openState.hide()\n  }\n\n  /** Focus the trigger button. */\n  focus(options?: FocusOptions) {\n    this.triggerButton?.focus(options)\n  }\n\n  private handleTriggerClick = () => {\n    this.openState.toggle()\n  }\n\n  protected updated(changed: PropertyValues) {\n    super.updated(changed)\n    if (this.scrollActivePending) {\n      this.scrollActivePending = false\n      this.listRef.value?.querySelector('.n-filter-dropdown-option.is-active')?.scrollIntoView({ block: 'nearest' })\n    }\n    // The consumer has responded to a `load-more` (toggled `loading` or appended\n    // options), so allow the next near-end gesture to request again.\n    if (this.loadMoreRequested && (changed.has('loading') || changed.has('options'))) {\n      this.loadMoreRequested = false\n    }\n    if (changed.has('disabled') && this.disabled) {\n      this.activeDescendant.reset()\n      this.scrollActivePending = true\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Selection actions\n  // ---------------------------------------------------------------------------\n\n  private commit(value: string | string[]) {\n    this.value = value\n    /** Dispatched when the committed value changes via user interaction. */\n    this.dispatchEvent(new FilterDropdownChangeEvent(value))\n  }\n\n  private toggle(option: FlatOption) {\n    if (this.disabled || option.disabled) {\n      return\n    }\n\n    if (!this.multiple) {\n      this.commit(option.value)\n      this.hide()\n      return\n    }\n\n    const current = this.valueAsArray\n    const next = current.includes(option.value)\n      ? current.filter(value => value !== option.value)\n      : [...current, option.value]\n    this.commit(next)\n  }\n\n  private toggleSelectAll = () => {\n    if (this.disabled || !this.multiple) {\n      return\n    }\n    this.commit(this.isAllSelected ? [] : [...this.allSelectableValues])\n  }\n\n  private clear() {\n    if (this.disabled) {\n      return\n    }\n\n    this.search = ''\n    this.dispatchEvent(new FilterDropdownClearEvent())\n    this.commit(this.multiple ? [] : '')\n  }\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation()\n    if (this.disabled) {\n      return\n    }\n\n    this.clear()\n    this.focus()\n  }\n\n  private handleRemove = (e: Event) => {\n    e.stopPropagation()\n    if (this.disabled) {\n      return\n    }\n\n    this.clear()\n    /** Dispatched when the filter is removed. */\n    this.dispatchEvent(new FilterDropdownRemoveEvent())\n  }\n\n  private handleSearchInput = (e: Event) => {\n    e.stopPropagation()\n    if (this.disabled) {\n      return\n    }\n\n    const input = e.target as HTMLInputElement & { value: string }\n    this.search = input.value\n    this.activeDescendant.reset()\n    this.scrollActivePending = true\n    /** Dispatched as the user types into the search input. */\n    this.dispatchEvent(new FilterDropdownSearchChangeEvent(this.search))\n  }\n\n  private handleListScroll = (e: Event) => {\n    if (this.disabled) {\n      return\n    }\n\n    const target = e.target as HTMLElement\n    const { scrollTop, scrollHeight, clientHeight } = target\n    if (scrollHeight <= clientHeight) {\n      return\n    }\n    const nearEnd = (scrollTop + clientHeight) / scrollHeight > 0.8\n\n    // Re-arm once the user scrolls back up away from the end, so a fresh near-end\n    // gesture can request more even when the consumer answered the previous\n    // `load-more` without changing `loading`/`options` (e.g. an exhausted or\n    // empty page). Otherwise the flag could stick `true` forever.\n    if (!nearEnd) {\n      this.loadMoreRequested = false\n      return\n    }\n\n    // While a load is in flight, or a previous near-end gesture has already\n    // requested more, swallow the scroll so one gesture cannot emit a burst of\n    // duplicate `load-more` events before `options`/`loading` have caught up.\n    if (this.loading || this.loadMoreRequested) {\n      return\n    }\n\n    this.loadMoreRequested = true\n    /** Dispatched when the list is scrolled near its end. */\n    this.dispatchEvent(new FilterDropdownLoadMoreEvent())\n  }\n\n  // ---------------------------------------------------------------------------\n  // Keyboard navigation (mirrors ComboboxBase)\n  // ---------------------------------------------------------------------------\n\n  private handleKeydown = (e: KeyboardEvent) => {\n    if (this.disabled) {\n      return\n    }\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault()\n        if (!this.open) {\n          this.show()\n          return\n        }\n        this.activeDescendant.move(1)\n        this.scrollActivePending = true\n        break\n      case 'ArrowUp':\n        e.preventDefault()\n        if (!this.open) {\n          this.show()\n          return\n        }\n        this.activeDescendant.move(-1)\n        this.scrollActivePending = true\n        break\n      case 'Home':\n        if (this.open) {\n          e.preventDefault()\n          this.activeDescendant.first()\n          this.scrollActivePending = true\n        }\n        break\n      case 'End':\n        if (this.open) {\n          e.preventDefault()\n          this.activeDescendant.last()\n          this.scrollActivePending = true\n        }\n        break\n      case 'Enter': {\n        if (!this.open) {\n          // Prevent the native button click that Enter would also fire, which\n          // would run handleTriggerClick with open already true and close it again.\n          e.preventDefault()\n          this.show()\n          return\n        }\n        // While open, Enter belongs to the list (commit the active option, or a\n        // no-op) — never let it submit a surrounding form.\n        e.preventDefault()\n        const option = this.flatOptions[this.activeDescendant.activeIndex]\n        if (option) {\n          this.toggle(option)\n        }\n        break\n      }\n      case 'Escape':\n        if (this.open) {\n          e.preventDefault()\n          this.hide()\n          this.focus()\n        }\n        break\n      default:\n        break\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Rendering\n  // ---------------------------------------------------------------------------\n\n  private get listInlineSizeClass(): string {\n    return `n-filter-dropdown-size-${this.size}`\n  }\n\n  private renderIndicator(value: string): TemplateResult {\n    const selected = this.isSelected(value)\n    if (this.multiple) {\n      return html`\n        <span class=\"n-filter-dropdown-checkbox\">\n          ${selected\n            ? html`<nord-icon name=\"interface-checked-small\" size=\"xs\"></nord-icon>`\n            : nothing}\n        </span>\n      `\n    }\n    return html`\n      <span class=\"n-filter-dropdown-check\">\n        ${selected ? html`<nord-icon name=\"interface-checked\" size=\"s\"></nord-icon>` : nothing}\n      </span>\n    `\n  }\n\n  private renderOption(option: FlatOption, index: number): TemplateResult {\n    const selected = this.isSelected(option.value)\n    return html`\n      <div\n        id=${this.optionId(index)}\n        class=${classMap({\n          'n-filter-dropdown-option': true,\n          'is-active': index === this.activeDescendant.activeIndex,\n          'is-disabled': option.disabled,\n          'is-indented': option.indent,\n        })}\n        role=\"option\"\n        aria-selected=${selected ? 'true' : 'false'}\n        aria-disabled=${option.disabled ? 'true' : nothing}\n        @click=${() => this.toggle(option)}\n        @mousemove=${() => this.activeDescendant.setActiveIndex(index)}\n      >\n        ${this.renderIndicator(option.value)}\n        <span class=\"n-filter-dropdown-option-label\">${option.label}</span>\n      </div>\n    `\n  }\n\n  private optionId(index: number): string {\n    return `${this.filterDropdownId}-option-${index}`\n  }\n\n  private renderList(): unknown {\n    const sections = this.sections\n    // Derive the flat list from THIS `sections` instance — `this.flatOptions`\n    // re-invokes the `sections` getter and produces fresh option objects, which\n    // would mean the indices below no longer line up with the rendered rows.\n    const flat = sections.flatMap(section => section.options)\n\n    if (this.loading && flat.length === 0) {\n      return html`\n        <div class=\"n-filter-dropdown-empty\" role=\"status\">\n          <nord-spinner size=\"s\"></nord-spinner>\n        </div>\n      `\n    }\n\n    if (flat.length === 0) {\n      return html`\n        <div class=\"n-filter-dropdown-empty\" role=\"status\">\n          ${this.noResultsMessage || this.localize.term('noResults')}\n        </div>\n      `\n    }\n\n    // Render order is the source of truth for the navigable index. Thread a\n    // running counter through the sections so each rendered row gets its true\n    // flat-list position — a value→index lookup would collapse duplicate values\n    // that appear in more than one group or tree branch onto a single index.\n    let flatIndex = 0\n\n    return repeat(\n      sections,\n      (_section, index) => index,\n      (section, index) => {\n        const headingId = section.heading ? `${this.filterDropdownId}-group-${index}` : undefined\n        return html`\n          <div\n            class=\"n-filter-dropdown-group\"\n            role=\"group\"\n            aria-labelledby=${headingId ?? nothing}\n          >\n            ${section.heading\n              ? html`<div class=\"n-filter-dropdown-heading\" id=${headingId} role=\"presentation\">${section.heading}</div>`\n              : nothing}\n            ${repeat(\n              section.options,\n              (_option, i) => `${index}-${i}`,\n              option => this.renderOption(option, flatIndex++),\n            )}\n          </div>\n        `\n      },\n    )\n  }\n\n  render() {\n    const popoutId = `${this.filterDropdownId}-popout`\n    const listId = `${this.filterDropdownId}-list`\n    const active = !this.isInactive\n    const showRemove = this.removable\n    const showClear = !showRemove && this.clearable && active\n    // The trigger keeps DOM focus while the popout is open, so it carries\n    // `aria-activedescendant` pointing at the highlighted option row. Cleared\n    // (set to `nothing`) when closed or when nothing is active.\n    const activeDescendant\n      = this.open ? this.activeDescendant.activeDescendant ?? nothing : nothing\n\n    return html`\n      <nord-button-group>\n        <nord-button\n          class=\"n-filter-dropdown-trigger\"\n          type=\"button\"\n          size=${this.size}\n          variant=${active ? nothing : 'dashed'}\n          aria-controls=${popoutId}\n          aria-haspopup=\"dialog\"\n          aria-expanded=${this.open ? 'true' : 'false'}\n          aria-activedescendant=${activeDescendant}\n          ?disabled=${this.disabled}\n          @click=${this.handleTriggerClick}\n          @keydown=${this.handleKeydown}\n        >\n          <nord-icon\n            slot=\"start\"\n            name=${this.icon}\n            label=${this.localize.term('filterIconLabel')}\n          ></nord-icon>\n          <span class=\"n-filter-dropdown-label\">${active ? this.localize.term('selectionLabel', this.label) : this.label}</span>\n          ${active\n            ? html`<span class=\"n-filter-dropdown-value\">${this.selectionLabel}</span>`\n            : nothing}\n        </nord-button>\n\n        ${showClear\n          ? html`\n              <nord-button\n                class=\"n-filter-dropdown-clear\"\n                type=\"button\"\n                size=${this.size}\n                square\n                ?disabled=${this.disabled}\n                @click=${this.handleClear}\n              >\n                <nord-icon name=\"interface-close-small\" size=\"xs\"></nord-icon>\n                <nord-visually-hidden>${this.localize.term('clearLabel')}</nord-visually-hidden>\n              </nord-button>\n            `\n          : nothing}\n        ${showRemove\n          ? html`\n              <nord-button\n                class=\"n-filter-dropdown-remove\"\n                type=\"button\"\n                size=${this.size}\n                square\n                variant=${active ? nothing : 'dashed'}\n                ?disabled=${this.disabled}\n                @click=${this.handleRemove}\n              >\n                <nord-icon name=\"interface-close-small\" size=\"xs\"></nord-icon>\n                <nord-visually-hidden>${this.localize.term('removeLabel')}</nord-visually-hidden>\n              </nord-button>\n            `\n          : nothing}\n      </nord-button-group>\n\n      <nord-popout\n        id=${popoutId}\n        controlled\n        always-floating\n        @open=${this.openState.onPopoutOpen}\n        @close=${this.openState.onPopoutClose}\n      >\n        <div class=${classMap({ 'n-filter-dropdown-panel': true, [this.listInlineSizeClass]: true })}>\n          ${this.searchable\n            ? html`\n                <div class=\"n-filter-dropdown-search\">\n                  <nord-input\n                    type=\"search\"\n                    label=${this.localize.term('searchLabel')}\n                    hide-label\n                    expand\n                    size=\"s\"\n                    .value=${this.search}\n                    ?disabled=${this.disabled}\n                    @input=${this.handleSearchInput}\n                    @keydown=${this.handleKeydown}\n                  >\n                    <nord-icon slot=\"start\" name=\"navigation-search\"></nord-icon>\n                    ${this.loading ? html`<nord-spinner slot=\"end\" size=\"s\"></nord-spinner>` : nothing}\n                  </nord-input>\n                </div>\n              `\n            : nothing}\n\n          ${this.selectAll && this.multiple\n            ? html`\n                <div class=\"n-filter-dropdown-select-all\">\n                  <div\n                    class=${classMap({\n                      'n-filter-dropdown-option': true,\n                      'is-active': false,\n                    })}\n                    role=\"button\"\n                    tabindex=\"0\"\n                    aria-pressed=${this.isAllSelected ? 'true' : 'false'}\n                    aria-disabled=${this.disabled ? 'true' : nothing}\n                    @click=${this.toggleSelectAll}\n                    @keydown=${(e: KeyboardEvent) => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault()\n                        this.toggleSelectAll()\n                      }\n                    }}\n                  >\n                    <span class=\"n-filter-dropdown-checkbox\">\n                      ${this.isAllSelected\n                        ? html`<nord-icon name=\"interface-checked-small\" size=\"xs\"></nord-icon>`\n                        : nothing}\n                    </span>\n                    <span class=\"n-filter-dropdown-option-label\">\n                      ${this.isAllSelected ? this.localize.term('deselectAll') : this.localize.term('selectAll')}\n                    </span>\n                  </div>\n                </div>\n              `\n            : nothing}\n\n          <div\n            ${ref(this.listRef)}\n            id=${listId}\n            class=${classMap({ 'n-filter-dropdown-list': true, 'is-loading-more': this.loading && this.flatOptions.length > 0 })}\n            role=\"listbox\"\n            aria-label=${this.label || nothing}\n            aria-multiselectable=${this.multiple ? 'true' : 'false'}\n            @scroll=${this.handleListScroll}\n            @keydown=${this.handleKeydown}\n          >\n            ${this.renderList()}\n          </div>\n        </div>\n      </nord-popout>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-filter-dropdown': FilterDropdown\n  }\n}\n"],"names":["Icon","registerIcon","checkedSmallIcon","checkedIcon","closeIcon","filterIcon","searchIcon","filterDropdownCount","isGroup","option","FilterDropdown","DraftComponentMixin","LitElement","constructor","this","filterDropdownId","localize","LocalizeController","listRef","createRef","dismiss","LightDismissController","isOpen","open","onDismiss","hide","isDismissible","node","activeDescendant","ActiveDescendantController","count","flatOptions","length","isEnabled","i","_a","disabled","optionId","openState","OpenStateController","setOpen","popout","isInert","onOpen","loadMoreRequested","value","scrollTo","reset","onClose","search","removable","isInactive","dispatchEvent","FilterDropdownRemoveEvent","label","name","icon","size","options","optionsValueKey","optionsLabelKey","multiple","searchable","internalSearch","selectAll","clearable","loading","noResultsMessage","labelForUnknown","scrollActivePending","handleTriggerClick","toggle","toggleSelectAll","commit","isAllSelected","allSelectableValues","handleClear","e","stopPropagation","clear","focus","handleRemove","handleSearchInput","input","target","FilterDropdownSearchChangeEvent","handleListScroll","scrollTop","scrollHeight","clientHeight","FilterDropdownLoadMoreEvent","handleKeydown","key","preventDefault","show","move","first","last","activeIndex","connectedCallback","super","injectLightDomStyles","style","chipStyle","createRenderRoot","valueAsArray","Array","isArray","getOptionValue","String","getOptionLabel","hasGroupedOptions","some","Boolean","children","needle","trim","toLocaleLowerCase","matchesSearch","includes","sections","toFlat","indent","source","flat","filter","map","run","flushRun","push","child","heading","_b","parentMatches","flatMap","section","values","all","selected","Set","every","has","labelForValue","term","selectionLabel","isSelected","triggerButton","updated","changed","querySelector","scrollIntoView","block","FilterDropdownChangeEvent","current","next","FilterDropdownClearEvent","listInlineSizeClass","renderIndicator","html","nothing","renderOption","index","classMap","setActiveIndex","renderList","flatIndex","repeat","_section","headingId","undefined","_option","render","popoutId","listId","active","showRemove","showClear","onPopoutOpen","onPopoutClose","ref","__decorate","query","prototype","property","reflect","attribute","type","state","customElement"],"mappings":"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"}

package/lib/FilterDropdownEvents.js

@@ -0,0 +1,2 @@
+import{N as e}from"./events-Bv6wNHwJ.js";class t extends e{constructor(e){super(t.eventName),this.value=e}get detail(){return this.value}}t.eventName="change";class s extends e{constructor(e){super(s.eventName),this.value=e}get detail(){return this.value}}s.eventName="search-change";class a extends e{constructor(){super(a.eventName)}}a.eventName="clear";class r extends e{constructor(){super(r.eventName)}}r.eventName="remove";class n extends e{constructor(){super(n.eventName)}}n.eventName="load-more";export{t as FilterDropdownChangeEvent,a as FilterDropdownClearEvent,n as FilterDropdownLoadMoreEvent,r as FilterDropdownRemoveEvent,s as FilterDropdownSearchChangeEvent};
+//# sourceMappingURL=FilterDropdownEvents.js.map

package/lib/FilterDropdownEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDropdownEvents.js","sources":["../src/filter-dropdown/FilterDropdownEvents.ts"],"sourcesContent":["import { NordEvent } from '../common/events.js'\n\n/**\n * Dispatched when the committed selection changes via user interaction (picking\n * an option, toggling a checkbox, select-all, or clearing). Carries the new\n * `value`: a single string in single-select mode, or an array of strings in\n * `multiple` mode.\n */\nexport class FilterDropdownChangeEvent extends NordEvent {\n  static eventName = 'change'\n\n  constructor(\n    /** The new committed value. */\n    public readonly value: string | string[],\n  ) {\n    super(FilterDropdownChangeEvent.eventName)\n  }\n\n  /** Convenience accessor mirroring `CustomEvent.detail`. */\n  get detail() {\n    return this.value\n  }\n}\n\n/**\n * Dispatched as the user types into the search input. Carries the current search\n * text so a consumer running external (async) search can update `options`. Only\n * fired when `searchable` is set.\n */\nexport class FilterDropdownSearchChangeEvent extends NordEvent {\n  static eventName = 'search-change'\n\n  constructor(\n    /** The current search text. */\n    public readonly value: string,\n  ) {\n    super(FilterDropdownSearchChangeEvent.eventName)\n  }\n\n  /** Convenience accessor mirroring `CustomEvent.detail`. */\n  get detail() {\n    return this.value\n  }\n}\n\n/**\n * Dispatched when the selection is cleared via the clear affordance or `clear()`,\n * before the accompanying `change` event.\n */\nexport class FilterDropdownClearEvent extends NordEvent {\n  static eventName = 'clear'\n\n  constructor() {\n    super(FilterDropdownClearEvent.eventName)\n  }\n}\n\n/**\n * Dispatched when the filter is removed via the remove affordance (only when\n * `removable`). The consumer removes the dropdown from the DOM in the handler.\n * The selection is cleared (firing `change`) before this event.\n */\nexport class FilterDropdownRemoveEvent extends NordEvent {\n  static eventName = 'remove'\n\n  constructor() {\n    super(FilterDropdownRemoveEvent.eventName)\n  }\n}\n\n/**\n * Dispatched when the option list is scrolled near its end, so a consumer can\n * load the next page of options (infinite scroll).\n */\nexport class FilterDropdownLoadMoreEvent extends NordEvent {\n  static eventName = 'load-more'\n\n  constructor() {\n    super(FilterDropdownLoadMoreEvent.eventName)\n  }\n}\n"],"names":["FilterDropdownChangeEvent","NordEvent","constructor","value","super","eventName","this","detail","FilterDropdownSearchChangeEvent","FilterDropdownClearEvent","FilterDropdownRemoveEvent","FilterDropdownLoadMoreEvent"],"mappings":"yCAQM,MAAOA,UAAkCC,EAG7C,WAAAC,CAEkBC,GAEhBC,MAAMJ,EAA0BK,WAFhBC,KAAKH,MAALA,CAGjB,CAGD,UAAII,GACF,OAAOD,KAAKH,KACb,EAZMH,EAASK,UAAG,SAoBf,MAAOG,UAAwCP,EAGnD,WAAAC,CAEkBC,GAEhBC,MAAMI,EAAgCH,WAFtBC,KAAKH,MAALA,CAGjB,CAGD,UAAII,GACF,OAAOD,KAAKH,KACb,EAZMK,EAASH,UAAG,gBAmBf,MAAOI,UAAiCR,EAG5C,WAAAC,GACEE,MAAMK,EAAyBJ,UAChC,EAJMI,EAASJ,UAAG,QAYf,MAAOK,UAAkCT,EAG7C,WAAAC,GACEE,MAAMM,EAA0BL,UACjC,EAJMK,EAASL,UAAG,SAWf,MAAOM,UAAoCV,EAG/C,WAAAC,GACEE,MAAMO,EAA4BN,UACnC,EAJMM,EAASN,UAAG"}

package/lib/FilterField.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as i}from"./interface-close-small-CnpAFMO3.js";import{f as o}from"./interface-filter-CCsx9-u6.js";import{html as e,nothing as r,LitElement as s}from"lit";import{query as l,property as a,customElement as n}from"lit/decorators.js";import{i as c}from"./light-dom-styles-DXsbiKU9.js";import{D as p}from"./DraftComponentMixin-4qug5Rky.js";import{s as d}from"./filter-chip-C97zd4PT.js";import m from"./Icon.js";import{LocalizeController as h}from"./LocalizeController.js";import{FilterFieldClearEvent as f,FilterFieldRemoveEvent as b}from"./FilterFieldEvents.js";import"./Button.js";import"./ButtonGroup.js";import"./VisuallyHidden.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./events-Bv6wNHwJ.js";import"lit/directives/ref.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";import"lit/directives/class-map.js";import"./DirectionController-ChvNGESZ.js";m.registerIcon(i),m.registerIcon(o);const j=["aria-controls","aria-haspopup","aria-expanded"];let u=class extends(p(s)){constructor(){super(...arguments),this.localize=new h(this),this.label="",this.value="",this.active=!1,this.clearable=!0,this.icon="interface-filter",this.name="",this.removable=!1,this.disabled=!1,this.size="s",this.handleClear=t=>{t.stopPropagation(),this.dispatchEvent(new f)},this.handleRemove=t=>{t.stopPropagation(),this.dispatchEvent(new b)}}connectedCallback(){super.connectedCallback(),c(this,d,"nord-filter-chip"),this.ariaObserver=new MutationObserver((()=>this.forwardAria())),this.ariaObserver.observe(this,{attributes:!0,attributeFilter:[...j]})}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.ariaObserver)||void 0===t||t.disconnect()}createRenderRoot(){return this}updated(){this.forwardAria()}forwardAria(){const t=this.triggerButton;if(t)for(const i of j){const o=this.getAttribute(i);null==o?t.removeAttribute(i):t.setAttribute(i,o)}}get isActive(){return this.active||this.value.length>0}render(){const t=this.isActive;return e`<nord-button-group><nord-button class="n-filter-field-trigger" type="button" size="${this.size}" variant="${t?r:"dashed"}" ?disabled="${this.disabled}"><nord-icon slot="start" name="${this.icon}" label="${this.localize.term("filterIconLabel")}"></nord-icon>${t&&this.value?e`<span class="n-filter-field-label">${this.localize.term("selectionLabel",this.label)}</span> <span class="n-filter-field-value">${this.value}</span>`:e`<span class="n-filter-field-label">${this.label}</span>`}</nord-button>${this.removable?e`<nord-button class="n-filter-field-remove" type="button" size="${this.size}" square variant="${t?r:"dashed"}" ?disabled="${this.disabled}" @click="${this.handleRemove}"><nord-icon name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("removeLabel")}</nord-visually-hidden></nord-button>`:t&&this.clearable?e`<nord-button class="n-filter-field-clear" type="button" size="${this.size}" square ?disabled="${this.disabled}" @click="${this.handleClear}"><nord-icon name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("clearLabel")}</nord-visually-hidden></nord-button>`:r}</nord-button-group>`}};t([l(".n-filter-field-trigger")],u.prototype,"triggerButton",void 0),t([a({reflect:!0})],u.prototype,"label",void 0),t([a({reflect:!0})],u.prototype,"value",void 0),t([a({reflect:!0,type:Boolean})],u.prototype,"active",void 0),t([a({reflect:!0,type:Boolean})],u.prototype,"clearable",void 0),t([a({reflect:!0})],u.prototype,"icon",void 0),t([a({reflect:!0})],u.prototype,"name",void 0),t([a({reflect:!0,type:Boolean})],u.prototype,"removable",void 0),t([a({reflect:!0,type:Boolean})],u.prototype,"disabled",void 0),t([a({reflect:!0})],u.prototype,"size",void 0),u=t([n("nord-filter-field")],u);var v=u;export{f as FilterFieldClearEvent,b as FilterFieldRemoveEvent,v as default};
+//# sourceMappingURL=FilterField.js.map

package/lib/FilterField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterField.js","sources":["../src/filter-field/FilterField.ts"],"sourcesContent":["import * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport * as filterIcon from '@nordhealth/icons/lib/assets/interface-filter.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport chipStyle from '../common/styles/filter-chip.css'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport { FilterFieldClearEvent, FilterFieldRemoveEvent } from './FilterFieldEvents.js'\nimport '../button/Button.js'\nimport '../button-group/ButtonGroup.js'\nimport '../visually-hidden/VisuallyHidden.js'\n\nIcon.registerIcon(closeIcon)\nIcon.registerIcon(filterIcon)\n\nexport { FilterFieldClearEvent, FilterFieldRemoveEvent } from './FilterFieldEvents.js'\n\n/** Popup ARIA a host sets on this element; mirrored onto the focusable trigger. */\nconst FORWARDED_ARIA = ['aria-controls', 'aria-haspopup', 'aria-expanded'] as const\n\n/**\n * Filter Field is the presentation-only filter **chip**: a joined pill showing a\n * leading icon, the filter's `label`, the active selection summary (`value`) and\n * a clear or remove affordance, dashed while inactive. It is the shared chip used\n * across the filter family and the building block for custom filters.\n *\n * It owns no popout and tracks no value — drop it into a popout-owning control as\n * its `slot=\"trigger\"` (the host opens/positions the popout and sets\n * `aria-controls`/`aria-haspopup`/`aria-expanded` on this element). Show the\n * active selection with `value`, reset it in response to `clear`, and remove the\n * whole field in response to `remove`. Your app owns the active filters and any\n * URL/query state.\n *\n * @status draft\n * @category form\n * @lightDom true\n *\n * @fires {FilterFieldClearEvent} clear - Dispatched when the clear affordance is pressed.\n * @fires {FilterFieldRemoveEvent} remove - Dispatched when the remove affordance is pressed.\n *\n * @localization filterIconLabel - Accessible label for the leading filter icon.\n * @localization selectionLabel - The chip prefix shown before the highlighted value (e.g. \"Status is\").\n * @localization clearLabel - Accessible label for the clear button.\n * @localization removeLabel - Accessible label for the remove button.\n *\n * @parent FilterBar\n */\n@customElement('nord-filter-field')\nexport default class FilterField extends DraftComponentMixin(LitElement) {\n  private localize = new LocalizeController<'nord-filter-field'>(this)\n\n  @query('.n-filter-field-trigger') private triggerButton?: HTMLElement\n\n  private ariaObserver?: MutationObserver\n\n  /** The label naming what this filter targets, shown on the chip. */\n  @property({ reflect: true }) label = ''\n\n  /**\n   * A short summary of the active selection (e.g. the selected option's label,\n   * or \"3 selected\"). When set the chip is shown as active and the clear button\n   * appears; leave it empty for an inactive filter. The chip does not derive this\n   * — set it from your app's state.\n   */\n  @property({ reflect: true }) value = ''\n\n  /**\n   * Forces the active (solid) treatment without a `value` summary, for filters\n   * that are on but have nothing short to show.\n   */\n  @property({ reflect: true, type: Boolean }) active = false\n\n  /**\n   * Shows a clear (✕) button while the chip is active. Defaults to `true`. Has no\n   * effect when `removable` is set.\n   */\n  @property({ reflect: true, type: Boolean }) clearable = true\n\n  /** The leading icon shown on the chip. */\n  @property({ reflect: true }) icon = 'interface-filter'\n\n  /** Identifies the filter (e.g. for your app's active-filter state). */\n  @property({ reflect: true }) name = ''\n\n  /**\n   * Whether the whole field can be removed. When `true` the trailing affordance\n   * is a remove button that fires `remove`; otherwise it is a clear button (shown\n   * only when there is a value) that fires `clear`.\n   */\n  @property({ reflect: true, type: Boolean }) removable = false\n\n  /**\n   * Makes the component disabled. This prevents users from being able to\n   * interact with it and conveys its inactive state to assistive technologies.\n   */\n  @property({ reflect: true, type: Boolean }) disabled = false\n\n  /** The size of the chip controls. */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 's'\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, chipStyle, 'nord-filter-chip')\n    // A host (e.g. nord-filter-date-range, or a consumer's popout) sets the popup\n    // ARIA on this element; mirror it onto the focusable trigger button.\n    this.ariaObserver = new MutationObserver(() => this.forwardAria())\n    this.ariaObserver.observe(this, { attributes: true, attributeFilter: [...FORWARDED_ARIA] })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.ariaObserver?.disconnect()\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n\n  protected updated() {\n    this.forwardAria()\n  }\n\n  private forwardAria() {\n    const button = this.triggerButton\n    if (!button) {\n      return\n    }\n    for (const attr of FORWARDED_ARIA) {\n      const value = this.getAttribute(attr)\n      if (value == null) {\n        button.removeAttribute(attr)\n      }\n      else {\n        button.setAttribute(attr, value)\n      }\n    }\n  }\n\n  /** Whether the filter currently has an active selection. */\n  private get isActive(): boolean {\n    return this.active || this.value.length > 0\n  }\n\n  private handleClear = (e: Event) => {\n    // Stop the click reaching the host so clearing doesn't also open the popout.\n    e.stopPropagation()\n\n    /** Dispatched when the clear affordance is pressed. */\n    this.dispatchEvent(new FilterFieldClearEvent())\n  }\n\n  private handleRemove = (e: Event) => {\n    e.stopPropagation()\n\n    /** Dispatched when the remove affordance is pressed. */\n    this.dispatchEvent(new FilterFieldRemoveEvent())\n  }\n\n  render() {\n    const active = this.isActive\n\n    return html`\n      <nord-button-group>\n        <nord-button\n          class=\"n-filter-field-trigger\"\n          type=\"button\"\n          size=${this.size}\n          variant=${active ? nothing : 'dashed'}\n          ?disabled=${this.disabled}\n        >\n          <nord-icon slot=\"start\" name=${this.icon} label=${this.localize.term('filterIconLabel')}></nord-icon>\n          ${active && this.value\n            ? html`\n                <span class=\"n-filter-field-label\">${this.localize.term('selectionLabel', this.label)}</span>\n                <span class=\"n-filter-field-value\">${this.value}</span>\n              `\n            : html`<span class=\"n-filter-field-label\">${this.label}</span>`}\n        </nord-button>\n\n        ${this.removable\n          ? html`\n              <nord-button\n                class=\"n-filter-field-remove\"\n                type=\"button\"\n                size=${this.size}\n                square\n                variant=${active ? nothing : 'dashed'}\n                ?disabled=${this.disabled}\n                @click=${this.handleRemove}\n              >\n                <nord-icon name=\"interface-close-small\" size=\"xs\"></nord-icon>\n                <nord-visually-hidden>${this.localize.term('removeLabel')}</nord-visually-hidden>\n              </nord-button>\n            `\n          : active && this.clearable\n            ? html`\n                <nord-button\n                  class=\"n-filter-field-clear\"\n                  type=\"button\"\n                  size=${this.size}\n                  square\n                  ?disabled=${this.disabled}\n                  @click=${this.handleClear}\n                >\n                  <nord-icon name=\"interface-close-small\" size=\"xs\"></nord-icon>\n                  <nord-visually-hidden>${this.localize.term('clearLabel')}</nord-visually-hidden>\n                </nord-button>\n              `\n            : nothing}\n      </nord-button-group>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-filter-field': FilterField\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","filterIcon","FORWARDED_ARIA","FilterField","DraftComponentMixin","LitElement","constructor","this","localize","LocalizeController","label","value","active","clearable","icon","name","removable","disabled","size","handleClear","e","stopPropagation","dispatchEvent","FilterFieldClearEvent","handleRemove","FilterFieldRemoveEvent","connectedCallback","super","injectLightDomStyles","chipStyle","ariaObserver","MutationObserver","forwardAria","observe","attributes","attributeFilter","disconnectedCallback","_a","disconnect","createRenderRoot","updated","button","triggerButton","attr","getAttribute","removeAttribute","setAttribute","isActive","length","render","html","nothing","term","__decorate","query","prototype","property","reflect","type","Boolean","customElement"],"mappings":"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"}

package/lib/FilterFieldEvents.js

@@ -0,0 +1,2 @@
+import{N as e}from"./events-Bv6wNHwJ.js";class s extends e{constructor(){super(s.eventName)}}s.eventName="clear";class t extends e{constructor(){super(t.eventName)}}t.eventName="remove";export{s as FilterFieldClearEvent,t as FilterFieldRemoveEvent};
+//# sourceMappingURL=FilterFieldEvents.js.map

package/lib/FilterFieldEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterFieldEvents.js","sources":["../src/filter-field/FilterFieldEvents.ts"],"sourcesContent":["import { NordEvent } from '../common/events.js'\n\n/**\n * Dispatched when the filter's value is cleared via the clear affordance. The\n * field holds no value itself, so the consumer resets the composed control (and\n * any active-filter/URL state) in the handler.\n */\nexport class FilterFieldClearEvent extends NordEvent {\n  static eventName = 'clear'\n\n  constructor() {\n    super(FilterFieldClearEvent.eventName)\n  }\n}\n\n/**\n * Dispatched when the filter is removed via the remove affordance. The consumer\n * removes the field from the bar (and clears its filter) in the handler.\n */\nexport class FilterFieldRemoveEvent extends NordEvent {\n  static eventName = 'remove'\n\n  constructor() {\n    super(FilterFieldRemoveEvent.eventName)\n  }\n}\n"],"names":["FilterFieldClearEvent","NordEvent","constructor","super","eventName","FilterFieldRemoveEvent"],"mappings":"yCAOM,MAAOA,UAA8BC,EAGzC,WAAAC,GACEC,MAAMH,EAAsBI,UAC7B,EAJMJ,EAASI,UAAG,QAWf,MAAOC,UAA+BJ,EAG1C,WAAAC,GACEC,MAAME,EAAuBD,UAC9B,EAJMC,EAASD,UAAG"}

package/lib/FilterInput.js

@@ -0,0 +1,2 @@
+import{_ as i}from"./tslib.es6-CmLYFWVC.js";import{c as t}from"./interface-close-small-CnpAFMO3.js";import{f as e}from"./interface-filter-CCsx9-u6.js";import{s as n}from"./navigation-search-CBbIGzo2.js";import{css as r,isServer as o,html as l,nothing as s,LitElement as a}from"lit";import{query as p,property as c,customElement as d}from"lit/decorators.js";import{ifDefined as u}from"lit/directives/if-defined.js";import{ref as f}from"lit/directives/ref.js";import{L as m}from"./LightDismissController-4pH8cdko.js";import{O as h}from"./OpenStateController-CCnZ7up6.js";import{N as v}from"./events-Bv6wNHwJ.js";import{i as b}from"./light-dom-styles-DXsbiKU9.js";import{D as z}from"./DraftComponentMixin-4qug5Rky.js";import{F as j}from"./FocusableMixin-BlQLNPdJ.js";import{F as g}from"./FormAssociatedMixin-D9aPREgv.js";import{I as x}from"./InputMixin-LetXsCyv.js";import{R as y}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as k}from"./SizeMixin-CU9cLbLC.js";import $ from"./Icon.js";import{LocalizeController as C}from"./LocalizeController.js";import"./Button.js";import"./Popout-DpN7PP9h.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./ScrollbarController-BFC67Y2x.js";const _=r`nord-filter-input,nord-filter-input *,nord-filter-input :after,nord-filter-input :before{box-sizing:border-box}nord-filter-input{--_n-filter-input-inline-size:var(--n-filter-input-inline-size,16rem);--_n-filter-input-background:var(--n-input-background,var(--n-color-surface));--_n-filter-input-border-color:var(--n-input-border-color,var(--n-color-border-strong));--_n-filter-input-border-radius:var(--n-input-border-radius,var(--n-border-radius-s));--_n-filter-input-block-size:calc(var(--n-space-l) + var(--n-space-xs));--_n-filter-input-padding-inline:var(--n-space-s);--_n-filter-input-font-size:var(--n-font-size-s);display:inline-flex;inline-size:var(--_n-filter-input-inline-size);max-inline-size:100%}nord-filter-input[size=m]{--_n-filter-input-block-size:var(--n-space-xl);--_n-filter-input-font-size:var(--n-font-size-m)}nord-filter-input[size=l]{--_n-filter-input-block-size:calc(var(--n-space-xxl) - var(--n-space-l));--_n-filter-input-font-size:var(--n-font-size-l)}nord-filter-input[mode=chip]{inline-size:auto}nord-filter-input .n-filter-input-root{display:contents}nord-filter-input .n-filter-input-control{align-items:center;background:var(--_n-filter-input-background);block-size:var(--_n-filter-input-block-size);border:1px solid var(--_n-filter-input-border-color);border-radius:var(--_n-filter-input-border-radius);display:flex;inline-size:100%;position:relative}nord-filter-input .n-filter-input-control:focus-within{border-color:var(--n-color-accent);box-shadow:0 0 0 1px var(--n-color-accent)}nord-filter-input .n-filter-input-slot{align-items:center;color:var(--n-color-icon);display:inline-flex;flex:0 0 auto}nord-filter-input .n-filter-input-slot-start{margin-inline-start:var(--_n-filter-input-padding-inline)}nord-filter-input .n-filter-input-slot-end:not(:empty){margin-inline-end:var(--n-space-xs)}nord-filter-input .n-filter-input-default-icon{--_n-icon-color:var(--n-color-text-weaker);color:var(--n-color-text-weaker)}nord-filter-input .n-filter-input-slot-start:has([slot=start]) .n-filter-input-default-icon{display:none}nord-filter-input .n-filter-input-slot nord-icon{--_n-icon-size:var(--n-size-icon-s)}nord-filter-input[disabled] .n-filter-input-slot{color:var(--n-color-text-weakest)}nord-filter-input .n-filter-input-control .n-filter-input-label{align-items:center;align-self:stretch;border-inline-end:1px solid var(--_n-filter-input-border-color);color:var(--n-color-text-weaker);display:inline-flex;flex:0 0 auto;font-family:var(--n-font-family);font-size:var(--_n-filter-input-font-size);font-weight:var(--n-font-weight);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s);white-space:nowrap}nord-filter-input .n-filter-input-field{appearance:none;background:#0000;block-size:100%;border:0;color:var(--n-color-text);flex:1 1 auto;font-family:var(--n-font-family);font-size:var(--_n-filter-input-font-size);inline-size:100%;min-inline-size:0;outline:none;padding-block:0;padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-input .n-filter-input-field::placeholder{color:var(--n-color-text-weaker)}nord-filter-input .n-filter-input-field::-webkit-search-cancel-button{appearance:none}nord-filter-input .n-filter-input-clear{align-items:center;background:#0000;border:0;border-radius:var(--n-border-radius-s);color:var(--n-color-text-weaker);cursor:pointer;display:inline-flex;flex:0 0 auto;justify-content:center;margin-inline-end:var(--n-space-xs);padding:var(--n-space-xs)}nord-filter-input .n-filter-input-clear:hover{color:var(--n-color-text)}nord-filter-input .n-filter-input-clear nord-icon{--_n-icon-size:var(--n-size-icon-s);block-size:var(--n-size-icon-s);inline-size:var(--n-size-icon-s)}nord-filter-input .n-filter-input-popout{inline-size:var(--_n-filter-input-inline-size);max-inline-size:100%;padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-input .n-filter-input-popout .n-filter-input-control{block-size:var(--n-space-xl)}`;$.registerIcon(t),$.registerIcon(e),$.registerIcon(n);let w=1,I=class extends(z(k(g(y(x(j(a))))))){constructor(){super(...arguments),this.filterInputId="nord-filter-input-"+w++,this.localize=new C(this),this.dismiss=new m(this,{isOpen:()=>this.open,onDismiss:()=>this.hide(),isDismissible:i=>i!==this}),this.openState=new h(this,{isOpen:()=>this.open,setOpen:i=>{this.open=i},popout:()=>this.popout,isInert:()=>this.disabled||this.readonly||"chip"!==this.mode,onOpen:()=>this.focus()}),this.mode="inline",this.open=!1,this.size="s",this.clearable=!1,this.handleTriggerClick=()=>{this.openState.toggle()},this.handleClear=i=>{i.stopPropagation(),this.value="",this.dispatchEvent(new v("input")),this.dispatchEvent(new v("change")),this.focus()}}connectedCallback(){var i;super.connectedCallback(),b(this,_),null!==(i=this.slotObserver)&&void 0!==i||(this.slotObserver=new MutationObserver((()=>this.requestUpdate()))),this.slotObserver.observe(this,{childList:!0})}disconnectedCallback(){var i;super.disconnectedCallback(),null===(i=this.slotObserver)||void 0===i||i.disconnect(),this.slotObserver=void 0}createRenderRoot(){if(o)return this;const i=document.createElement("div");return i.className="n-filter-input-root",this.appendChild(i),i}relocateSlots(){if(o)return;const i=(i,t)=>{if(t)for(const e of Array.from(this.children))e.getAttribute("slot")===i&&e.parentElement!==t&&t.appendChild(e)};i("start",this.startZone),i("end",this.endZone)}updated(i){super.updated(i),this.relocateSlots()}get inputAccessibleName(){return this.controlAriaLabel||this.getAttribute("aria-label")||this.label||this.localize.term("searchLabel")}show(){this.openState.show()}hide(){this.openState.hide()}renderInput(){var i;const t=this.clearable&&Boolean(this.value)&&!this.disabled,e=Boolean(this.label)&&!this.hideLabel;return l`<div class="n-filter-input-control">${e?l`<label class="n-filter-input-label" for="${this.filterInputId}-input">${this.label}</label>`:l`<span class="n-filter-input-slot n-filter-input-slot-start"><nord-icon class="n-filter-input-default-icon" name="navigation-search" aria-hidden="true"></nord-icon></span>`} <input ${f(this.focusableRef)} class="n-filter-input-field" type="search" id="${this.filterInputId}-input" .value="${null!==(i=this.value)&&void 0!==i?i:""}" placeholder="${u(this.placeholder)}" aria-label="${e?s:this.inputAccessibleName}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" autocomplete="off" autocapitalize="off" spellcheck="false" @input="${this.handleInput}" @change="${this.handleChange}"> <span class="n-filter-input-slot n-filter-input-slot-end"></span> ${t?l`<button class="n-filter-input-clear" type="button" tabindex="-1" aria-label="${this.localize.term("clearLabel")}" ?disabled="${this.disabled}" @click="${this.handleClear}"><nord-icon name="interface-close-small"></nord-icon></button>`:s}</div>`}render(){if("chip"!==this.mode)return this.renderInput();const i=`${this.filterInputId}-popout`,t=Boolean(this.value);return l`<nord-button class="n-filter-input-trigger" type="button" size="${this.size}" variant="${t?s:"dashed"}" aria-controls="${i}" aria-haspopup="dialog" aria-expanded="${this.open?"true":"false"}" ?disabled="${this.disabled}" @click="${this.handleTriggerClick}"><nord-icon slot="start" name="interface-filter" label="${this.inputAccessibleName}"></nord-icon>${t?this.value:this.label||this.localize.term("searchLabel")}</nord-button><nord-popout id="${i}" controlled always-floating @open="${this.openState.onPopoutOpen}" @close="${this.openState.onPopoutClose}"><div class="n-filter-input-popout">${this.renderInput()}</div></nord-popout>`}};i([p("nord-popout",!0)],I.prototype,"popout",void 0),i([p(".n-filter-input-slot-start")],I.prototype,"startZone",void 0),i([p(".n-filter-input-slot-end")],I.prototype,"endZone",void 0),i([c({reflect:!0})],I.prototype,"mode",void 0),i([c({reflect:!0,type:Boolean})],I.prototype,"open",void 0),i([c({reflect:!0})],I.prototype,"size",void 0),i([c({reflect:!0,type:Boolean})],I.prototype,"clearable",void 0),I=i([d("nord-filter-input")],I);var S=I;export{S as default};
+//# sourceMappingURL=FilterInput.js.map

package/lib/FilterInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterInput.js","sources":["../src/filter-input/FilterInput.ts"],"sourcesContent":["import type { PropertyValues } from 'lit'\nimport * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport * as filterIcon from '@nordhealth/icons/lib/assets/interface-filter.js'\nimport * as searchIcon from '@nordhealth/icons/lib/assets/navigation-search.js'\nimport { html, isServer, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { OpenStateController } from '../common/controllers/OpenStateController.js'\nimport { NordEvent } from '../common/events.js'\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { ReadonlyMixin } from '../common/mixins/ReadonlyMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './FilterInput.css'\nimport '../button/Button.js'\nimport '../popout/Popout.js'\n\nIcon.registerIcon(closeIcon)\nIcon.registerIcon(filterIcon)\nIcon.registerIcon(searchIcon)\n\n/** Per-instance counter so the light-DOM ids stay unique. */\nlet filterInputCount = 1\n\n/**\n * Filter Input is a compact search/text field for filtering a collection. It\n * replaces the small ad-hoc search inputs that sit in toolbars and table\n * headers. By default it renders inline as a small search field with a leading\n * search icon; set `mode=\"chip\"` to collapse it behind a chip button that opens\n * the input in a popout, which is handy in a crowded [Filter Bar](/components/filter-bar/).\n *\n * It emits intent only: `input` as the user types and `change` when the value is\n * committed. Your app owns the active filters and any URL/query state — read the\n * value from the event target (or bind `value`) and filter accordingly.\n *\n * It is a control only, like [Combobox](/components/combobox/): compose it inside\n * a [Field](/components/field/) for a visible label, or set `label` for an\n * accessible name when used standalone.\n *\n * @status draft\n * @category form\n * @lightDom true\n *\n * @fires {NordEvent} input - Dispatched as the user types into the input.\n * @fires {NordEvent} change - Dispatched when the value is committed.\n * @fires {NordEvent} open - Dispatched when the chip-mode popout is opened.\n * @fires {NordEvent} close - Dispatched when the chip-mode popout is closed.\n *\n * @slot start - Leading icon/content; defaults to a search icon.\n * @slot end - Trailing icon/content before the clear button.\n *\n * @localization searchLabel - Default accessible label for the input when no `label` is set.\n * @localization clearLabel - Accessible label for the clear button.\n *\n * @cssprop [--n-filter-input-inline-size] - Controls the inline size, or width, of the inline input.\n *\n * @parent FilterBar\n */\n@customElement('nord-filter-input')\nexport default class FilterInput extends DraftComponentMixin(\n  SizeMixin(FormAssociatedMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))),\n) {\n  private filterInputId = `nord-filter-input-${filterInputCount++}`\n\n  private localize = new LocalizeController<'nord-filter-input'>(this)\n\n  @query('nord-popout', true) private popout?: HTMLElement & {\n    show: () => Promise<unknown>\n    hide: (moveFocusToButton?: boolean) => Promise<unknown>\n  }\n\n  // Landing zones for relocated `slot=\"start\"`/`slot=\"end\"` host children. The\n  // control renders into light DOM, so real `<slot>` projection isn't available.\n  @query('.n-filter-input-slot-start') private startZone?: HTMLElement\n  @query('.n-filter-input-slot-end') private endZone?: HTMLElement\n\n  // Watches for `slot=\"start\"`/`slot=\"end\"` children being added or removed so\n  // they get relocated into their landing zones on the next render.\n  private slotObserver?: MutationObserver\n\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.hide(),\n    isDismissible: node => node !== this,\n  })\n\n  // Coordinates the chip popout's open state. Only opens in chip mode, and not\n  // while disabled or read-only; focuses the input once opened.\n  private openState = new OpenStateController(this, {\n    isOpen: () => this.open,\n    setOpen: (open) => { this.open = open },\n    popout: () => this.popout,\n    isInert: () => this.disabled || this.readonly || this.mode !== 'chip',\n    onOpen: () => this.focus(),\n  })\n\n  /**\n   * How the input is presented.\n   *\n   * - `inline` (default) renders the search field directly.\n   * - `chip` collapses the field behind a chip button that opens a popout\n   *   containing the input.\n   */\n  @property({ reflect: true }) mode: 'inline' | 'chip' = 'inline'\n\n  /**\n   * Whether the chip-mode popout is open. Only meaningful with `mode=\"chip\"`.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * The size of the search control. Defaults to `s` to match the other filter\n   * controls in a compact filter bar; set `m` or `l` to enlarge it.\n   */\n  @property({ reflect: true }) override size: 's' | 'm' | 'l' = 's'\n\n  /**\n   * Whether to show a clear (✕) button while there is a value. Clearing resets\n   * the value to `''`, then fires `input` and `change`.\n   */\n  @property({ reflect: true, type: Boolean }) clearable = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n\n    this.slotObserver ??= new MutationObserver(() => this.requestUpdate())\n    this.slotObserver.observe(this, { childList: true })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.slotObserver?.disconnect()\n    this.slotObserver = undefined\n  }\n\n  // Render in the light DOM (form labelling, Tailwind) like the other new Nord\n  // components, but into a layout-transparent (`display: contents`) wrapper\n  // rather than the host itself, so slotted `slot=\"start\"`/`slot=\"end\"` children\n  // can live as untouched siblings instead of being wiped by this element's own\n  // render (mirrors `nord-combobox`).\n  protected createRenderRoot() {\n    if (isServer) {\n      return this\n    }\n    const root = document.createElement('div')\n    root.className = 'n-filter-input-root'\n    this.appendChild(root)\n    return root\n  }\n\n  /**\n   * Relocates the host's `slot=\"start\"`/`slot=\"end\"` children into the matching\n   * landing zone inside the control. Only direct host children are considered,\n   * and a child already sitting in its zone is left untouched, so repeated\n   * updates are idempotent and don't disturb focus or pointer state.\n   */\n  private relocateSlots() {\n    if (isServer) {\n      return\n    }\n\n    const move = (name: 'start' | 'end', target?: HTMLElement) => {\n      if (!target) {\n        return\n      }\n      for (const child of Array.from(this.children)) {\n        if (child.getAttribute('slot') === name && child.parentElement !== target) {\n          target.appendChild(child)\n        }\n      }\n    }\n\n    move('start', this.startZone)\n    move('end', this.endZone)\n  }\n\n  protected updated(changed: PropertyValues) {\n    super.updated(changed)\n\n    // Move any `slot=\"start\"`/`slot=\"end\"` host children into their landing\n    // zones inside the control. The control is light DOM, so real `<slot>`\n    // projection isn't available; relocating keeps the public API like `nord-input`.\n    this.relocateSlots()\n  }\n\n  /**\n   * The accessible name for the input: the enclosing Field's label, the host\n   * `aria-label`, the `label` prop, or the default term.\n   */\n  private get inputAccessibleName(): string {\n    return (\n      this.controlAriaLabel || this.getAttribute('aria-label') || this.label || this.localize.term('searchLabel')\n    )\n  }\n\n  /** Open the chip popout. */\n  show() {\n    this.openState.show()\n  }\n\n  /** Close the chip popout. */\n  hide() {\n    this.openState.hide()\n  }\n\n  private handleTriggerClick = () => {\n    this.openState.toggle()\n  }\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation()\n    this.value = ''\n\n    /** Fired as the user types into the input — also on clear. */\n    this.dispatchEvent(new NordEvent('input'))\n    /** Fired whenever the value is committed — also on clear. */\n    this.dispatchEvent(new NordEvent('change'))\n    this.focus()\n  }\n\n  /** The search field itself, shared by both modes. */\n  private renderInput() {\n    const showClear = this.clearable && Boolean(this.value) && !this.disabled\n    // A visible, connected label shows when `label` is set and not hidden; the\n    // input is then named by it. Otherwise the input falls back to `aria-label`\n    // (so `hide-label` keeps the accessible name without showing the text).\n    const showLabel = Boolean(this.label) && !this.hideLabel\n\n    return html`\n      <div class=\"n-filter-input-control\">\n        ${showLabel\n          ? html`<label class=\"n-filter-input-label\" for=\"${this.filterInputId}-input\">${this.label}</label>`\n          : html`<span class=\"n-filter-input-slot n-filter-input-slot-start\"\n              ><nord-icon\n                class=\"n-filter-input-default-icon\"\n                name=\"navigation-search\"\n                aria-hidden=\"true\"\n              ></nord-icon\n            ></span>`}\n        <input\n          ${ref(this.focusableRef)}\n          class=\"n-filter-input-field\"\n          type=\"search\"\n          id=\"${this.filterInputId}-input\"\n          .value=${this.value ?? ''}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-label=${showLabel ? nothing : this.inputAccessibleName}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          autocomplete=\"off\"\n          autocapitalize=\"off\"\n          spellcheck=\"false\"\n          @input=${this.handleInput}\n          @change=${this.handleChange}\n        />\n        <span class=\"n-filter-input-slot n-filter-input-slot-end\"></span>\n        ${showClear\n          ? html`\n              <button\n                class=\"n-filter-input-clear\"\n                type=\"button\"\n                tabindex=\"-1\"\n                aria-label=${this.localize.term('clearLabel')}\n                ?disabled=${this.disabled}\n                @click=${this.handleClear}\n              >\n                <nord-icon name=\"interface-close-small\"></nord-icon>\n              </button>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  render() {\n    if (this.mode !== 'chip') {\n      return this.renderInput()\n    }\n\n    const popoutId = `${this.filterInputId}-popout`\n    const active = Boolean(this.value)\n\n    return html`\n      <nord-button\n        class=\"n-filter-input-trigger\"\n        type=\"button\"\n        size=${this.size}\n        variant=${active ? nothing : 'dashed'}\n        aria-controls=${popoutId}\n        aria-haspopup=\"dialog\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        ?disabled=${this.disabled}\n        @click=${this.handleTriggerClick}\n      >\n        <nord-icon\n          slot=\"start\"\n          name=\"interface-filter\"\n          label=${this.inputAccessibleName}\n        ></nord-icon>\n        ${active ? this.value : this.label || this.localize.term('searchLabel')}\n      </nord-button>\n\n      <nord-popout\n        id=${popoutId}\n        controlled\n        always-floating\n        @open=${this.openState.onPopoutOpen}\n        @close=${this.openState.onPopoutClose}\n      >\n        <div class=\"n-filter-input-popout\">${this.renderInput()}</div>\n      </nord-popout>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-filter-input': FilterInput\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","filterIcon","searchIcon","filterInputCount","FilterInput","DraftComponentMixin","SizeMixin","FormAssociatedMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","filterInputId","localize","LocalizeController","dismiss","LightDismissController","isOpen","open","onDismiss","hide","isDismissible","node","openState","OpenStateController","setOpen","popout","isInert","disabled","readonly","mode","onOpen","focus","size","clearable","handleTriggerClick","toggle","handleClear","e","stopPropagation","value","dispatchEvent","NordEvent","connectedCallback","super","injectLightDomStyles","style","_a","slotObserver","MutationObserver","requestUpdate","observe","childList","disconnectedCallback","disconnect","undefined","createRenderRoot","isServer","root","document","createElement","className","appendChild","relocateSlots","move","name","target","child","Array","from","children","getAttribute","parentElement","startZone","endZone","updated","changed","inputAccessibleName","controlAriaLabel","label","term","show","renderInput","showClear","Boolean","showLabel","hideLabel","html","ref","focusableRef","ifDefined","placeholder","nothing","required","handleInput","handleChange","render","popoutId","active","onPopoutOpen","onPopoutClose","__decorate","query","prototype","property","reflect","type","customElement"],"mappings":"84MAyBAA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAGlB,IAAIC,EAAmB,EAqCFC,EAAN,cAA0BC,EACvCC,EAAUC,EAAoBC,EAAcC,EAAWC,EAAeC,SADzD,WAAAC,uBAGLC,KAAAC,cAAgB,qBAAqBX,IAErCU,KAAAE,SAAW,IAAIC,EAAwCH,MAgBvDA,KAAAI,QAAU,IAAIC,EAAuBL,KAAM,CACjDM,OAAQ,IAAMN,KAAKO,KACnBC,UAAW,IAAMR,KAAKS,OACtBC,cAAeC,GAAQA,IAASX,OAK1BA,KAAAY,UAAY,IAAIC,EAAoBb,KAAM,CAChDM,OAAQ,IAAMN,KAAKO,KACnBO,QAAUP,IAAWP,KAAKO,KAAOA,CAAI,EACrCQ,OAAQ,IAAMf,KAAKe,OACnBC,QAAS,IAAMhB,KAAKiB,UAAYjB,KAAKkB,UAA0B,SAAdlB,KAAKmB,KACtDC,OAAQ,IAAMpB,KAAKqB,UAUQrB,KAAImB,KAAsB,SAKXnB,KAAIO,MAAG,EAMbP,KAAIsB,KAAoB,IAMlBtB,KAASuB,WAAG,EAsFhDvB,KAAkBwB,mBAAG,KAC3BxB,KAAKY,UAAUa,QAAQ,EAGjBzB,KAAA0B,YAAeC,IACrBA,EAAEC,kBACF5B,KAAK6B,MAAQ,GAGb7B,KAAK8B,cAAc,IAAIC,EAAU,UAEjC/B,KAAK8B,cAAc,IAAIC,EAAU,WACjC/B,KAAKqB,OAAO,CAiGf,CAjMC,iBAAAW,SACEC,MAAMD,oBACNE,EAAqBlC,KAAMmC,WAE3BC,EAAApC,KAAKqC,4BAALrC,KAAKqC,aAAiB,IAAIC,kBAAiB,IAAMtC,KAAKuC,mBACtDvC,KAAKqC,aAAaG,QAAQxC,KAAM,CAAEyC,WAAW,GAC9C,CAED,oBAAAC,SACET,MAAMS,uBACa,QAAnBN,EAAApC,KAAKqC,oBAAc,IAAAD,GAAAA,EAAAO,aACnB3C,KAAKqC,kBAAeO,CACrB,CAOS,gBAAAC,GACR,GAAIC,EACF,OAAO9C,KAET,MAAM+C,EAAOC,SAASC,cAAc,OAGpC,OAFAF,EAAKG,UAAY,sBACjBlD,KAAKmD,YAAYJ,GACVA,CACR,CAQO,aAAAK,GACN,GAAIN,EACF,OAGF,MAAMO,EAAO,CAACC,EAAuBC,KACnC,GAAKA,EAGL,IAAK,MAAMC,KAASC,MAAMC,KAAK1D,KAAK2D,UAC9BH,EAAMI,aAAa,UAAYN,GAAQE,EAAMK,gBAAkBN,GACjEA,EAAOJ,YAAYK,EAEtB,EAGHH,EAAK,QAASrD,KAAK8D,WACnBT,EAAK,MAAOrD,KAAK+D,QAClB,CAES,OAAAC,CAAQC,GAChBhC,MAAM+B,QAAQC,GAKdjE,KAAKoD,eACN,CAMD,uBAAYc,GACV,OACElE,KAAKmE,kBAAoBnE,KAAK4D,aAAa,eAAiB5D,KAAKoE,OAASpE,KAAKE,SAASmE,KAAK,cAEhG,CAGD,IAAAC,GACEtE,KAAKY,UAAU0D,MAChB,CAGD,IAAA7D,GACET,KAAKY,UAAUH,MAChB,CAkBO,WAAA8D,SACN,MAAMC,EAAYxE,KAAKuB,WAAakD,QAAQzE,KAAK6B,SAAW7B,KAAKiB,SAI3DyD,EAAYD,QAAQzE,KAAKoE,SAAWpE,KAAK2E,UAE/C,OAAOC,CAAI,uCAELF,EACEE,CAAI,4CAA4C5E,KAAKC,wBAAwBD,KAAKoE,gBAClFQ,CAAI,uLAQJC,EAAI7E,KAAK8E,gEAGL9E,KAAKC,gCACQ,QAAVmC,EAAApC,KAAK6B,aAAK,IAAAO,EAAAA,EAAI,oBACT2C,EAAU/E,KAAKgF,6BAChBN,EAAYO,EAAUjF,KAAKkE,mCAC5BlE,KAAKiB,wBACLjB,KAAKkB,wBACLlB,KAAKkF,gFAIRlF,KAAKmF,yBACJnF,KAAKoF,oFAGfZ,EACEI,CAAI,gFAKa5E,KAAKE,SAASmE,KAAK,6BACpBrE,KAAKiB,qBACRjB,KAAK0B,6EAKlBuD,SAGT,CAED,MAAAI,GACE,GAAkB,SAAdrF,KAAKmB,KACP,OAAOnB,KAAKuE,cAGd,MAAMe,EAAW,GAAGtF,KAAKC,uBACnBsF,EAASd,QAAQzE,KAAK6B,OAE5B,OAAO+C,CAAI,mEAIA5E,KAAKsB,kBACFiE,EAASN,EAAU,4BACbK,4CAEAtF,KAAKO,KAAO,OAAS,uBACzBP,KAAKiB,qBACRjB,KAAKwB,8EAKJxB,KAAKkE,oCAEbqB,EAASvF,KAAK6B,MAAQ7B,KAAKoE,OAASpE,KAAKE,SAASmE,KAAK,gDAIpDiB,wCAGGtF,KAAKY,UAAU4E,yBACdxF,KAAKY,UAAU6E,qDAEazF,KAAKuE,mCAG/C,GAxPmCmB,EAAA,CAAnCC,EAAM,eAAe,IAGrBpG,EAAAqG,UAAA,cAAA,GAI4CF,EAAA,CAA5CC,EAAM,+BAA6DpG,EAAAqG,UAAA,iBAAA,GACzBF,EAAA,CAA1CC,EAAM,6BAAyDpG,EAAAqG,UAAA,eAAA,GA6BnCF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAA0CvG,EAAAqG,UAAA,YAAA,GAKnBF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMtB,WAAuBlF,EAAAqG,UAAA,YAAA,GAMlBF,EAAA,CAArCG,EAAS,CAAEC,SAAS,KAA4CvG,EAAAqG,UAAA,YAAA,GAMrBF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMtB,WAA4BlF,EAAAqG,UAAA,iBAAA,GA7D1CrG,EAAWmG,EAAA,CAD/BM,EAAc,sBACMzG,SAAAA"}

package/lib/FilterResetButton.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as o}from"./interface-close-BvKnv9eh.js";import{css as i,html as r,LitElement as e}from"lit";import{property as s,customElement as l}from"lit/decorators.js";import{N as n}from"./events-Bv6wNHwJ.js";import{i as a}from"./light-dom-styles-DXsbiKU9.js";import{D as c}from"./DraftComponentMixin-4qug5Rky.js";import m from"./Icon.js";import{LocalizeController as p}from"./LocalizeController.js";import"./Button.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"lit/directives/ref.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";const j=i`nord-filter-reset-button{--_n-filter-reset-button-color:var(--n-filter-reset-button-color,var(--n-color-text-highlight));display:inline-flex}nord-filter-reset-button .n-filter-reset-button:not([disabled]){--n-button-color:var(--_n-filter-reset-button-color);--n-color-icon:var(--_n-filter-reset-button-color)}`;m.registerIcon(o);let d=class extends(c(e)){constructor(){super(...arguments),this.localize=new p(this),this.disabled=!1,this.size="s",this.handleClick=()=>{this.disabled||this.dispatchEvent(new n("reset"))}}connectedCallback(){super.connectedCallback(),a(this,j)}createRenderRoot(){return this}render(){return r`<nord-button class="n-filter-reset-button" type="button" variant="plain" size="${this.size}" ?disabled="${this.disabled}" @click="${this.handleClick}"><nord-icon slot="start" name="interface-close" size="xs"></nord-icon>${this.localize.term("label")}</nord-button>`}};t([s({reflect:!0,type:Boolean})],d.prototype,"disabled",void 0),t([s({reflect:!0})],d.prototype,"size",void 0),d=t([l("nord-filter-reset-button")],d);var z=d;export{z as default};
+//# sourceMappingURL=FilterResetButton.js.map

package/lib/FilterResetButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterResetButton.js","sources":["../src/filter-reset-button/FilterResetButton.ts"],"sourcesContent":["import * as closeIcon from '@nordhealth/icons/lib/assets/interface-close.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { NordEvent } from '../common/events.js'\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './FilterResetButton.css'\nimport '../button/Button.js'\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Filter Reset Button clears every active filter at once. It is a thin,\n * intent-only control: it renders a plain button and dispatches a `reset` event\n * when pressed. Your app owns the active filters and is responsible for clearing\n * them (and any URL/query state) in the handler — the button holds no state of\n * its own.\n *\n * Disable it while there is nothing to reset by binding `disabled` to whether any\n * filter is active (e.g. `?disabled=${!hasFilters}`). Mirrors the Provet Cloud\n * filter reset button.\n *\n * @status draft\n * @category form\n * @lightDom true\n *\n * @fires {NordEvent} reset - Dispatched when the button is pressed to clear all active filters.\n *\n * @localization label - The text label for the reset button.\n *\n * @cssprop [--n-filter-reset-button-color=var(--n-color-text-highlight)] - Controls the text and icon color while the button is enabled.\n *\n * @parent FilterBar\n */\n@customElement('nord-filter-reset-button')\nexport default class FilterResetButton extends DraftComponentMixin(LitElement) {\n  private localize = new LocalizeController<'nord-filter-reset-button'>(this)\n\n  /**\n   * Makes the component disabled. This prevents users from being able to\n   * interact with it and conveys its inactive state to assistive technologies.\n   * Bind it to whether any filter is active so the control is only enabled when\n   * there is something to reset.\n   */\n  @property({ reflect: true, type: Boolean }) disabled = false\n\n  /**\n   * The size of the button.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 's'\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  protected createRenderRoot() {\n    return this\n  }\n\n  private handleClick = () => {\n    if (this.disabled) {\n      return\n    }\n\n    /**\n     * Dispatched when the button is pressed to clear all active filters.\n     */\n    this.dispatchEvent(new NordEvent('reset'))\n  }\n\n  render() {\n    return html`\n      <nord-button\n        class=\"n-filter-reset-button\"\n        type=\"button\"\n        variant=\"plain\"\n        size=${this.size}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n      >\n        <nord-icon slot=\"start\" name=\"interface-close\" size=\"xs\"></nord-icon>\n        ${this.localize.term('label')}\n      </nord-button>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-filter-reset-button': FilterResetButton\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","FilterResetButton","DraftComponentMixin","LitElement","constructor","this","localize","LocalizeController","disabled","size","handleClick","dispatchEvent","NordEvent","connectedCallback","super","injectLightDomStyles","style","createRenderRoot","render","html","term","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"m0DAYAA,EAAKC,aAAaC,GA0BH,IAAMC,EAAN,cAAgCC,EAAoBC,IAApD,WAAAC,uBACLC,KAAAC,SAAW,IAAIC,EAA+CF,MAQ1BA,KAAQG,UAAG,EAK1BH,KAAII,KAAoB,IAW7CJ,KAAWK,YAAG,KAChBL,KAAKG,UAOTH,KAAKM,cAAc,IAAIC,EAAU,SAAS,CAkB7C,CAnCC,iBAAAC,GACEC,MAAMD,oBACNE,EAAqBV,KAAMW,EAC5B,CAES,gBAAAC,GACR,OAAOZ,IACR,CAaD,MAAAa,GACE,OAAOC,CAAI,kFAKAd,KAAKI,oBACAJ,KAAKG,qBACRH,KAAKK,qFAGZL,KAAKC,SAASc,KAAK,wBAG1B,GAzC2CC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAA2BxB,EAAAyB,UAAA,gBAAA,GAK/BL,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmCtB,EAAAyB,UAAA,YAAA,GAdrCzB,EAAiBoB,EAAA,CADrCM,EAAc,6BACM1B,SAAAA"}

package/lib/FocusableWhenDisabledController-C_Mn1mfN.js

@@ -0,0 +1,2 @@
+class t{constructor(t,s){this.host=t,this.options=s,t.addController(this)}hostConnected(){this.sync()}hostUpdated(){this.sync()}sync(){"0"!==this.host.getAttribute("tabindex")&&this.host.setAttribute("tabindex","0");this.options.disabled()?"true"!==this.host.getAttribute("aria-disabled")&&this.host.setAttribute("aria-disabled","true"):this.host.hasAttribute("aria-disabled")&&this.host.removeAttribute("aria-disabled")}}export{t as F};
+//# sourceMappingURL=FocusableWhenDisabledController-C_Mn1mfN.js.map

package/lib/FocusableWhenDisabledController-C_Mn1mfN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusableWhenDisabledController-C_Mn1mfN.js","sources":["../src/common/controllers/FocusableWhenDisabledController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\n\nexport interface FocusableWhenDisabledOptions {\n  /** Reads the host's disabled state; re-read after every host update. */\n  disabled: () => boolean\n}\n\n/**\n * Keeps an interactive host focusable while disabled, mirroring Base UI's\n * accessible-disabled pattern: a disabled control stays in the tab order\n * (`tabindex=\"0\"`) with `aria-disabled=\"true\"`, rather than being removed from\n * it (`tabindex=\"-1\"`), so assistive-technology users can still discover it.\n * Activation must be blocked by the host (it should no-op its click/key handlers\n * while disabled).\n *\n * The host stays the focusable element (these are light-DOM `role=\"button\"`\n * elements that can't delegate focus into a shadow `<button>`).\n *\n * @example\n * ```ts\n * private focusable = new FocusableWhenDisabledController(this, { disabled: () => this.disabled })\n * ```\n */\nexport class FocusableWhenDisabledController implements ReactiveController {\n  constructor(\n    private host: ReactiveControllerHost & HTMLElement,\n    private options: FocusableWhenDisabledOptions,\n  ) {\n    host.addController(this)\n  }\n\n  hostConnected() {\n    this.sync()\n  }\n\n  hostUpdated() {\n    this.sync()\n  }\n\n  private sync() {\n    // Always focusable — the element is a button, in the tab order whether or not\n    // it is disabled (Base UI behaviour).\n    if (this.host.getAttribute('tabindex') !== '0') {\n      this.host.setAttribute('tabindex', '0')\n    }\n\n    const disabled = this.options.disabled()\n    if (disabled) {\n      if (this.host.getAttribute('aria-disabled') !== 'true') {\n        this.host.setAttribute('aria-disabled', 'true')\n      }\n    }\n    else if (this.host.hasAttribute('aria-disabled')) {\n      this.host.removeAttribute('aria-disabled')\n    }\n  }\n}\n"],"names":["FocusableWhenDisabledController","constructor","host","options","this","addController","hostConnected","sync","hostUpdated","getAttribute","setAttribute","disabled","hasAttribute","removeAttribute"],"mappings":"MAuBaA,EACX,WAAAC,CACUC,EACAC,GADAC,KAAIF,KAAJA,EACAE,KAAOD,QAAPA,EAERD,EAAKG,cAAcD,KACpB,CAED,aAAAE,GACEF,KAAKG,MACN,CAED,WAAAC,GACEJ,KAAKG,MACN,CAEO,IAAAA,GAGqC,MAAvCH,KAAKF,KAAKO,aAAa,aACzBL,KAAKF,KAAKQ,aAAa,WAAY,KAGpBN,KAAKD,QAAQQ,WAEoB,SAA5CP,KAAKF,KAAKO,aAAa,kBACzBL,KAAKF,KAAKQ,aAAa,gBAAiB,QAGnCN,KAAKF,KAAKU,aAAa,kBAC9BR,KAAKF,KAAKW,gBAAgB,gBAE7B"}

package/lib/Footer.js

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as n,html as e}from"lit";import{property as t,customElement as a}from"lit/decorators.js";import{s as d}from"./Component-DSU3Qp0O.js";const i=r`:host{--_n-footer-padding-inline:var(--n-footer-padding-inline, var(--n-space-l));--_n-footer-padding-inline-start:var(--n-footer-padding-inline-start, var(--_n-footer-padding-inline));--_n-footer-padding-inline-end:var(--n-footer-padding-inline-end, var(--_n-footer-padding-inline));--_n-footer-box-shadow:var(--n-footer-box-shadow, var(--n-box-shadow-header));--_n-footer-background-color:var(--n-footer-background-color, var(--n-color-surface));--_n-footer-padding-block:var(--n-space-m);color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-footer{display:flex;flex-flow:row;align-items:center;flex-wrap:wrap;gap:var(--n-space-s);padding-block-start:var(--_n-footer-padding-block);padding-block-end:var(--_n-footer-padding-block);padding-inline-start:var(--_n-footer-padding-inline-start);padding-inline-end:var(--_n-footer-padding-inline-end);background-color:var(--_n-footer-background-color);border-block-start:1px solid var(--n-color-border);box-shadow:var(--_n-footer-box-shadow);justify-content:flex-end}:host([size='s']){--_n-footer-padding-block:var(--n-space-s)}`;let l=class extends n{constructor(){super(...arguments),this.size="m"}render(){return e`<footer class="n-footer"><slot></slot></footer>`}};l.styles=[d,i],o([t({reflect:!0})],l.prototype,"size",void 0),l=o([a("nord-footer")],l);var s=l;export{s as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as n,html as e}from"lit";import{property as t,customElement as a}from"lit/decorators.js";import{s as d}from"./Component-BJ5O5n8k.js";const i=r`:host{--_n-footer-padding-inline:var(--n-footer-padding-inline,var(--n-space-l));--_n-footer-padding-inline-start:var(--n-footer-padding-inline-start,var(--_n-footer-padding-inline));--_n-footer-padding-inline-end:var(--n-footer-padding-inline-end,var(--_n-footer-padding-inline));--_n-footer-box-shadow:var(--n-footer-box-shadow,var(--n-box-shadow-header));--_n-footer-background-color:var(--n-footer-background-color,var(--n-color-surface));--_n-footer-padding-block:var(--n-space-m);color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-footer{align-items:center;background-color:var(--_n-footer-background-color);border-block-start:1px solid var(--n-color-border);box-shadow:var(--_n-footer-box-shadow);display:flex;flex-flow:row;flex-wrap:wrap;gap:var(--n-space-s);justify-content:flex-end;padding-block-end:var(--_n-footer-padding-block);padding-block-start:var(--_n-footer-padding-block);padding-inline-end:var(--_n-footer-padding-inline-end);padding-inline-start:var(--_n-footer-padding-inline-start)}:host([size=s]){--_n-footer-padding-block:var(--n-space-s)}`;let l=class extends n{constructor(){super(...arguments),this.size="m"}render(){return e`<footer class="n-footer"><slot></slot></footer>`}};l.styles=[d,i],o([t({reflect:!0})],l.prototype,"size",void 0),l=o([a("nord-footer")],l);var s=l;export{s as default};
 //# sourceMappingURL=Footer.js.map

package/lib/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","sources":["../src/footer/Footer.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Footer.css'\n\n/**\n * The footer is a block of designated space for providing additional information or actions that are positioned below the main content.\n *\n * @status new\n * @category structure\n * @slot - The footer content.\n *\n * @cssprop [--n-footer-padding-inline=var(--n-space-l)] - Controls the inline padding around the footer’s main slot, using [spacing tokens](/tokens/#space).\n * @cssprop [--n-footer-box-shadow=var(--n-box-shadow-header)] - Controls the box shadow of the footer, using [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-footer-background-color=var(--n-color-surface)] - Controls the background color of the footer, using [color tokens](/tokens/#color).\n */\n@customElement('nord-footer')\nexport default class Footer extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * Controls the size of the footer component.\n   */\n  @property({ reflect: true }) size: 'm' | 's' = 'm'\n\n  render() {\n    return html`\n      <footer class=\"n-footer\">\n        <slot></slot>\n      </footer>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-footer': Footer\n  }\n}\n"],"names":["Footer","LitElement","constructor","this","size","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"g4CAiBe,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAMgBC,KAAIC,KAAc,GAShD,CAPC,MAAAC,GACE,OAAOC,CAAI,iDAKZ,GAbMN,EAAAO,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6BZ,EAAAa,UAAA,YAAA,GAN/Bb,EAAMU,EAAA,CAD1BI,EAAc,gBACMd,SAAAA"}
+{"version":3,"file":"Footer.js","sources":["../src/footer/Footer.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Footer.css'\n\n/**\n * The footer is a block of designated space for providing additional information or actions that are positioned below the main content.\n *\n * @status new\n * @category structure\n * @slot - The footer content.\n *\n * @cssprop [--n-footer-padding-inline=var(--n-space-l)] - Controls the inline padding around the footer’s main slot, using [spacing tokens](/tokens/#space).\n * @cssprop [--n-footer-box-shadow=var(--n-box-shadow-header)] - Controls the box shadow of the footer, using [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-footer-background-color=var(--n-color-surface)] - Controls the background color of the footer, using [color tokens](/tokens/#color).\n */\n@customElement('nord-footer')\nexport default class Footer extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * Controls the size of the footer component.\n   */\n  @property({ reflect: true }) size: 'm' | 's' = 'm'\n\n  render() {\n    return html`\n      <footer class=\"n-footer\">\n        <slot></slot>\n      </footer>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-footer': Footer\n  }\n}\n"],"names":["Footer","LitElement","constructor","this","size","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"y3CAiBe,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAMgBC,KAAIC,KAAc,GAShD,CAPC,MAAAC,GACE,OAAOC,CAAI,iDAKZ,GAbMN,EAAAO,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6BZ,EAAAa,UAAA,YAAA,GAN/Bb,EAAMU,EAAA,CAD1BI,EAAc,gBACMd,SAAAA"}

package/lib/FormAssociatedMixin-D9aPREgv.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{property as o}from"lit/decorators.js";import{F as e}from"./FormDataController-OUt5L5uC.js";import{N as r}from"./events-Bv6wNHwJ.js";import{F as s}from"./FieldControlMixin-BXNZJXu9.js";function a(a){class i extends(s(a)){constructor(){super(...arguments),this.formData=new e(this,{value:()=>this.formValue})}get formValue(){return this.value}handleInput(t){t.stopPropagation();const o=t.target;this.value=o.value,this.dispatchEvent(new r("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new r("change"))}}return t([o({reflect:!0})],i.prototype,"placeholder",void 0),i}export{a as F};
+//# sourceMappingURL=FormAssociatedMixin-D9aPREgv.js.map

package/lib/FormAssociatedMixin-D9aPREgv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormAssociatedMixin-D9aPREgv.js","sources":["../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import type { LitElement } from 'lit'\nimport type { FieldControlMixinInterface } from './FieldControlMixin.js'\nimport type { InputMixinInterface } from './InputMixin.js'\nimport { property } from 'lit/decorators.js'\nimport { FormDataController } from '../controllers/FormDataController.js'\nimport { NordEvent } from '../events.js'\nimport { FieldControlMixin } from './FieldControlMixin.js'\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface extends FieldControlMixinInterface {\n  placeholder?: string\n\n  protected formData: FormDataController\n\n  protected get formValue(): string | undefined\n\n  protected handleChange(e: Event): void\n  protected handleInput(e: Event): void\n}\n\n/**\n * Adds form participation (value submission, input/change events) on top of\n * {@link FieldControlMixin}, which provides the built-in field UI and the\n * `<nord-field>` context integration.\n */\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n  class FormAssociatedElement extends FieldControlMixin(superClass) {\n    protected formData = new FormDataController(this, { value: () => this.formValue })\n\n    protected get formValue() {\n      return this.value\n    }\n\n    /**\n     * Placeholder text to display within the control.\n     */\n    @property({ reflect: true }) placeholder?: string\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\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormAssociatedMixin","superClass","FormAssociatedElement","FieldControlMixin","constructor","this","formData","FormDataController","value","formValue","handleInput","e","stopPropagation","target","dispatchEvent","NordEvent","handleChange","__decorate","property","reflect","prototype"],"mappings":"2OA2BM,SAAUA,EAA6EC,GAC3F,MAAMC,UAA8BC,EAAkBF,IAAtD,WAAAG,uBACYC,KAAAC,SAAW,IAAIC,EAAmBF,KAAM,CAAEG,MAAO,IAAMH,KAAKI,WA8BvE,CA5BC,aAAcA,GACZ,OAAOJ,KAAKG,KACb,CAOS,WAAAE,CAAYC,GACpBA,EAAEC,kBACF,MAAMC,EAASF,EAAEE,OACjBR,KAAKG,MAAQK,EAAOL,MAKpBH,KAAKS,cAAc,IAAIC,EAAU,SAClC,CAES,YAAAC,CAAaL,GACrBA,EAAEC,kBAKFP,KAAKS,cAAc,IAAIC,EAAU,UAClC,EAGH,OAvB+BE,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA4BjB,EAAAkB,UAAA,mBAAA,GAuB5ClB,CACT"}

package/lib/FormField-CMgEFZCK.js

@@ -0,0 +1,2 @@
+import{css as n}from"lit";const t=n`:host{--_n-label-color:var(--n-label-color,var(--n-color-text))}.n-caption,::slotted(.n-caption){font-size:var(--n-font-size-s);line-height:var(--n-line-height-caption)}.n-label-container{display:inline-block;margin-block-end:var(--n-space-s)}.n-label,::slotted(label),label{color:var(--_n-label-color);display:block!important;font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading);margin:0!important}.n-hint{color:var(--n-color-text-weaker);padding-block-start:var(--n-space-xs)}:host([hint-below]) .n-hint{margin-block-start:var(--n-space-s);padding-block-start:0}:host([hint-below]) .n-error:not([hidden])+.n-hint{margin-block-start:var(--n-space-xs)}:host([size=s]) ::slotted(label),:host([size=s]) :is(label,.n-label){font-size:var(--n-font-size-s)}.n-error{color:var(--n-color-text-error);margin-block-start:var(--n-space-s)}.n-required{color:var(--n-color-status-danger);margin-inline-start:var(--n-space-xs)}`;export{t as s};
+//# sourceMappingURL=FormField-CMgEFZCK.js.map

package/lib/FormField-CMgEFZCK.js.map

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

package/lib/Header.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as a,html as n}from"lit";import{property as o,customElement as d}from"lit/decorators.js";import{S as s}from"./SlotController-Z6eG7LSZ.js";import{s as t}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const i=r`:host{--_n-header-box-shadow:var(--n-box-shadow-header);--_n-header-block-size:var(--n-header-block-size, var(--n-space-xxl));--_n-header-padding-block:var(--n-space-m);--_n-header-padding-inline:var(--n-header-padding-inline, var(--n-space-l));--_n-header-background-color:var(--n-header-background-color, var(--n-color-surface));color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-end{display:flex;flex-flow:row;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--_n-header-padding-block) var(--_n-header-padding-inline);padding-inline-start:calc(var(--_n-header-padding-inline) + var(--_n-header-gutter,0px));background-color:var(--_n-header-background-color);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);block-size:var(--_n-header-block-size)}.n-header-end{margin-inline-start:auto;gap:var(--n-space-s)}:host([size='s']){--_n-header-block-size:var(--n-size-top-bar);--_n-header-padding-block:var(--n-space-s)}:host([size=xs]){--_n-header-block-size:45px;--_n-header-padding-block:var(--n-space-xs)}`;let l=class extends a{constructor(){super(...arguments),this.endSlot=new s(this,"end"),this.size="m"}render(){return n`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};l.styles=[t,i],e([o({reflect:!0})],l.prototype,"size",void 0),l=e([d("nord-header")],l);var c=l;export{c as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as a,html as n}from"lit";import{property as o,customElement as d}from"lit/decorators.js";import{S as s}from"./SlotController-Z6eG7LSZ.js";import{s as t}from"./Component-BJ5O5n8k.js";import"./EventController-BBOmvfLa.js";const i=r`:host{--_n-header-box-shadow:var(--n-box-shadow-header);--_n-header-block-size:var(--n-header-block-size,var(--n-space-xxl));--_n-header-padding-block:var(--n-space-m);--_n-header-padding-inline:var(--n-header-padding-inline,var(--n-space-l));--_n-header-background-color:var(--n-header-background-color,var(--n-color-surface));color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-end{align-items:center;display:flex;flex-flow:row;gap:var(--n-space-m)}.n-header{background-color:var(--_n-header-background-color);block-size:var(--_n-header-block-size);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);padding:var(--_n-header-padding-block) var(--_n-header-padding-inline);padding-inline-start:calc(var(--_n-header-padding-inline) + var(--_n-header-gutter, 0px))}.n-header-end{gap:var(--n-space-s);margin-inline-start:auto}:host([size=s]){--_n-header-block-size:var(--n-size-top-bar);--_n-header-padding-block:var(--n-space-s)}:host([size=xs]){--_n-header-block-size:45px;--_n-header-padding-block:var(--n-space-xs)}`;let l=class extends a{constructor(){super(...arguments),this.endSlot=new s(this,"end"),this.size="m"}render(){return n`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};l.styles=[t,i],e([o({reflect:!0})],l.prototype,"size",void 0),l=e([d("nord-header")],l);var c=l;export{c as default};
 //# sourceMappingURL=Header.js.map

package/lib/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Header.css'\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status ready\n * @category structure\n * @slot - The header content.\n * @slot end - Optional slot for buttons, toggles, etc.\n *\n * @cssprop [--n-header-background-color=var(--n-color-surface)] - Background color of the header.\n */\n@customElement('nord-header')\nexport default class Header extends LitElement {\n  static styles = [componentStyle, style]\n\n  private endSlot = new SlotController(this, 'end')\n\n  /**\n   * Controls the size of the header component.\n   */\n  @property({ reflect: true }) size: 'm' | 's' | 'xs' = 'm'\n\n  render() {\n    return html`\n      <header class=\"n-header\">\n        <slot></slot>\n        <div class=\"n-header-end\" ?hidden=${this.endSlot.isEmpty}>\n          <slot name=\"end\"></slot>\n        </div>\n      </header>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-header': Header\n  }\n}\n"],"names":["Header","LitElement","constructor","this","endSlot","SlotController","size","render","html","isEmpty","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"w9CAkBe,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAGLC,KAAOC,QAAG,IAAIC,EAAeF,KAAM,OAKdA,KAAIG,KAAqB,GAYvD,CAVC,MAAAC,GACE,OAAOC,CAAI,4EAG6BL,KAAKC,QAAQK,kDAKtD,GAlBMT,EAAAU,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAoCf,EAAAgB,UAAA,YAAA,GARtChB,EAAMa,EAAA,CAD1BI,EAAc,gBACMjB,SAAAA"}
+{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Header.css'\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status ready\n * @category structure\n * @slot - The header content.\n * @slot end - Optional slot for buttons, toggles, etc.\n *\n * @cssprop [--n-header-background-color=var(--n-color-surface)] - Background color of the header.\n */\n@customElement('nord-header')\nexport default class Header extends LitElement {\n  static styles = [componentStyle, style]\n\n  private endSlot = new SlotController(this, 'end')\n\n  /**\n   * Controls the size of the header component.\n   */\n  @property({ reflect: true }) size: 'm' | 's' | 'xs' = 'm'\n\n  render() {\n    return html`\n      <header class=\"n-header\">\n        <slot></slot>\n        <div class=\"n-header-end\" ?hidden=${this.endSlot.isEmpty}>\n          <slot name=\"end\"></slot>\n        </div>\n      </header>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-header': Header\n  }\n}\n"],"names":["Header","LitElement","constructor","this","endSlot","SlotController","size","render","html","isEmpty","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"o9CAkBe,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAGLC,KAAOC,QAAG,IAAIC,EAAeF,KAAM,OAKdA,KAAIG,KAAqB,GAYvD,CAVC,MAAAC,GACE,OAAOC,CAAI,4EAG6BL,KAAKC,QAAQK,kDAKtD,GAlBMT,EAAAU,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAoCf,EAAAgB,UAAA,YAAA,GARtChB,EAAMa,EAAA,CAD1BI,EAAc,gBACMjB,SAAAA"}

package/lib/Icon.js

@@ -1,2 +1,2 @@
-import{_ as i}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as s,html as o}from"lit";import{property as r,state as n,customElement as t}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{unsafeHTML as l}from"lit/directives/unsafe-html.js";import{o as c}from"./observe-D0n0zOfU.js";import{c as m}from"./cond-CI1KbneT.js";import{s as v}from"./Component-DSU3Qp0O.js";import{IconManager as d}from"./IconManager.js";const z=e`:host{--_n-icon-size:var(--n-icon-size, var(--n-size-icon-m));display:inline-block;block-size:var(--_n-icon-size);inline-size:var(--_n-icon-size);min-inline-size:var(--_n-icon-size)}:host([size=xxs]){--_n-icon-size:var(--n-size-icon-xxs)}:host([size=xs]){--_n-icon-size:var(--n-size-icon-xs)}:host([size='s']){--_n-icon-size:var(--n-size-icon-s)}:host([size='l']){--_n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--_n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-icon-size:var(--n-size-icon-xxl)}.n-icon{display:block}svg{display:block}`;var h;let p=h=class extends s{constructor(){super(...arguments),this.name="",this.svg=""}static registerResolver(i){this.manager.resolver=i}static registerIcon(i,e){return this.manager.registerIcon(i,e)}render(){return o`<div role="${m(this.label,"img")}" style="${m(this.color,`color:${this.color}`)}" aria-label="${a(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${l(this.svg)}</div></div>`}handleNameChange(){this.name?h.manager.resolve(this.name,(i=>{this.svg=i})):this.svg=""}};p.styles=[v,z],p.manager=new d,i([r({reflect:!0})],p.prototype,"name",void 0),i([r({reflect:!0})],p.prototype,"size",void 0),i([r({reflect:!0})],p.prototype,"color",void 0),i([r({reflect:!0})],p.prototype,"label",void 0),i([n()],p.prototype,"svg",void 0),i([c("name")],p.prototype,"handleNameChange",null),p=h=i([t("nord-icon")],p);var g=p;export{g as default};
+import{_ as i}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as s,html as o}from"lit";import{property as r,state as n,customElement as t}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{unsafeHTML as l}from"lit/directives/unsafe-html.js";import{o as c}from"./observe-D0n0zOfU.js";import{c as m}from"./cond-CI1KbneT.js";import{s as v}from"./Component-BJ5O5n8k.js";import{IconManager as z}from"./IconManager.js";const d=e`:host{--_n-icon-size:var(--n-icon-size,var(--n-size-icon-m));block-size:var(--_n-icon-size);display:inline-block;inline-size:var(--_n-icon-size);min-inline-size:var(--_n-icon-size)}:host([size=xxs]){--_n-icon-size:var(--n-size-icon-xxs)}:host([size=xs]){--_n-icon-size:var(--n-size-icon-xs)}:host([size=s]){--_n-icon-size:var(--n-size-icon-s)}:host([size=l]){--_n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--_n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-icon-size:var(--n-size-icon-xxl)}.n-icon,svg{display:block}`;var h;let p=h=class extends s{constructor(){super(...arguments),this.name="",this.svg=""}static registerResolver(i){this.manager.resolver=i}static registerIcon(i,e){return this.manager.registerIcon(i,e)}render(){return o`<div role="${m(this.label,"img")}" style="${m(this.color,`color:${this.color}`)}" aria-label="${a(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${l(this.svg)}</div></div>`}handleNameChange(){this.name?h.manager.resolve(this.name,(i=>{this.svg=i})):this.svg=""}};p.styles=[v,d],p.manager=new z,i([r({reflect:!0})],p.prototype,"name",void 0),i([r({reflect:!0})],p.prototype,"size",void 0),i([r({reflect:!0})],p.prototype,"color",void 0),i([r({reflect:!0})],p.prototype,"label",void 0),i([n()],p.prototype,"svg",void 0),i([c("name")],p.prototype,"handleNameChange",null),p=h=i([t("nord-icon")],p);var f=p;export{f as default};
 //# sourceMappingURL=Icon.js.map

package/lib/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../src/icon/Icon.ts"],"sourcesContent":["import type { IconResolver } from './IconManager.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\nimport { observe } from '../common/decorators/observe.js'\n\nimport { cond } from '../common/directives/cond.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Icon.css'\nimport { IconManager } from './IconManager.js'\n\n/**\n * Icons are used to provide additional meaning or in places where text label doesn’t fit.\n * Icon component allows you to display an icon from the Nordicons library.\n *\n * @status ready\n * @category image\n * @slot - The default slot used for placing a custom SVG icon.\n */\n@customElement('nord-icon')\nexport default class Icon extends LitElement {\n  static styles = [componentStyle, style]\n\n  private static manager = new IconManager()\n\n  /**\n   * Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\n   * Can return a string synchronously, or a promise of a string.\n   * By default, will load icons from the Nord CDN.\n   * @param resolver The resolver function to register.\n   */\n  static registerResolver(resolver: IconResolver) {\n    this.manager.resolver = resolver\n  }\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param icon An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n   * This is intended to be used in cases where you import an icon's entire ES module and register it directly.\n   */\n  static registerIcon(icon: { title: string, default: string }): void\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param name The name of the icon to be registered.\n   * @param icon The SVG string for the icon.\n   */\n  static registerIcon(name: string, icon: string): void\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param iconOrName The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n   * @param icon The SVG string for the icon.\n   */\n  static registerIcon(iconOrName: string | { title: string, default: string }, icon?: string) {\n    return this.manager.registerIcon(iconOrName, icon)\n  }\n\n  /**\n   * The name of the icon to display, as defined by [nordicons](/nordicons/).\n   */\n  @property({ reflect: true }) name: string = ''\n\n  /**\n   * The size of the icon.\n   * @default \"m\"\n   */\n  @property({ reflect: true }) size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'\n\n  /**\n   * The color of the icon.\n   * Can accept any valid CSS color value, including custom properties.\n   */\n  @property({ reflect: true }) color?: string\n\n  /**\n   * An accessible label for the icon.\n   * If no label is supplied, the icon is hidden from assistive technology.\n   */\n  @property({ reflect: true }) label?: string\n\n  @state() private svg: string = ''\n\n  render() {\n    // if a label is supplied, we give the div a role of img.\n    // without this we could not use aria-label, since it is only valid on elements of certain roles.\n    // we always hide the inner svg, since the svg does not have any text/title/label itself.\n    return html`\n      <div\n        role=${cond(this.label, 'img')}\n        style=${cond(this.color, `color:${this.color}`)}\n        aria-label=${ifDefined(this.label)}\n      >\n        <slot aria-hidden=\"true\"></slot>\n        <div aria-hidden=\"true\">${unsafeHTML(this.svg)}</div>\n      </div>\n    `\n  }\n\n  @observe('name')\n  protected handleNameChange() {\n    if (!this.name) {\n      this.svg = ''\n      return\n    }\n\n    Icon.manager.resolve(this.name, (svg) => {\n      this.svg = svg\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-icon': Icon\n  }\n}\n"],"names":["Icon","Icon_1","LitElement","constructor","this","name","svg","registerResolver","resolver","manager","registerIcon","iconOrName","icon","render","html","cond","label","color","ifDefined","unsafeHTML","handleNameChange","resolve","styles","componentStyle","style","IconManager","__decorate","property","reflect","prototype","state","observe","customElement"],"mappings":"mgCAqBe,IAAMA,EAAIC,EAAV,cAAmBC,EAAnB,WAAAC,uBAyCgBC,KAAIC,KAAW,GAoB3BD,KAAGE,IAAW,EA6BhC,CA/EC,uBAAOC,CAAiBC,GACtBJ,KAAKK,QAAQD,SAAWA,CACzB,CAqBD,mBAAOE,CAAaC,EAAyDC,GAC3E,OAAOR,KAAKK,QAAQC,aAAaC,EAAYC,EAC9C,CA2BD,MAAAC,GAIE,OAAOC,CAAI,cAEAC,EAAKX,KAAKY,MAAO,kBAChBD,EAAKX,KAAKa,MAAO,SAASb,KAAKa,yBAC1BC,EAAUd,KAAKY,mEAGFG,EAAWf,KAAKE,kBAG/C,CAGS,gBAAAc,GACHhB,KAAKC,KAKVJ,EAAKQ,QAAQY,QAAQjB,KAAKC,MAAOC,IAC/BF,KAAKE,IAAMA,CAAG,IALdF,KAAKE,IAAM,EAOd,GAxFMN,EAAAsB,OAAS,CAACC,EAAgBC,GAElBxB,EAAAS,QAAU,IAAIgB,EAsCAC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyB5B,EAAA6B,UAAA,YAAA,GAMjBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA4D5B,EAAA6B,UAAA,YAAA,GAMpDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsB5B,EAAA6B,UAAA,aAAA,GAMdH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsB5B,EAAA6B,UAAA,aAAA,GAE1BH,EAAA,CAAhBI,KAAgC9B,EAAA6B,UAAA,WAAA,GAmBvBH,EAAA,CADTK,EAAQ,SAUR/B,EAAA6B,UAAA,mBAAA,MAzFkB7B,EAAIC,EAAAyB,EAAA,CADxBM,EAAc,cACMhC,SAAAA"}
+{"version":3,"file":"Icon.js","sources":["../src/icon/Icon.ts"],"sourcesContent":["import type { IconResolver } from './IconManager.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\nimport { observe } from '../common/decorators/observe.js'\n\nimport { cond } from '../common/directives/cond.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Icon.css'\nimport { IconManager } from './IconManager.js'\n\n/**\n * Icons are used to provide additional meaning or in places where text label doesn’t fit.\n * Icon component allows you to display an icon from the Nordicons library.\n *\n * @status ready\n * @category image\n * @slot - The default slot used for placing a custom SVG icon.\n */\n@customElement('nord-icon')\nexport default class Icon extends LitElement {\n  static styles = [componentStyle, style]\n\n  private static manager = new IconManager()\n\n  /**\n   * Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\n   * Can return a string synchronously, or a promise of a string.\n   * By default, will load icons from the Nord CDN.\n   * @param resolver The resolver function to register.\n   */\n  static registerResolver(resolver: IconResolver) {\n    this.manager.resolver = resolver\n  }\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param icon An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n   * This is intended to be used in cases where you import an icon's entire ES module and register it directly.\n   */\n  static registerIcon(icon: { title: string, default: string }): void\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param name The name of the icon to be registered.\n   * @param icon The SVG string for the icon.\n   */\n  static registerIcon(name: string, icon: string): void\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param iconOrName The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n   * @param icon The SVG string for the icon.\n   */\n  static registerIcon(iconOrName: string | { title: string, default: string }, icon?: string) {\n    return this.manager.registerIcon(iconOrName, icon)\n  }\n\n  /**\n   * The name of the icon to display, as defined by [nordicons](/nordicons/).\n   */\n  @property({ reflect: true }) name: string = ''\n\n  /**\n   * The size of the icon.\n   * @default \"m\"\n   */\n  @property({ reflect: true }) size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'\n\n  /**\n   * The color of the icon.\n   * Can accept any valid CSS color value, including custom properties.\n   */\n  @property({ reflect: true }) color?: string\n\n  /**\n   * An accessible label for the icon.\n   * If no label is supplied, the icon is hidden from assistive technology.\n   */\n  @property({ reflect: true }) label?: string\n\n  @state() private svg: string = ''\n\n  render() {\n    // if a label is supplied, we give the div a role of img.\n    // without this we could not use aria-label, since it is only valid on elements of certain roles.\n    // we always hide the inner svg, since the svg does not have any text/title/label itself.\n    return html`\n      <div\n        role=${cond(this.label, 'img')}\n        style=${cond(this.color, `color:${this.color}`)}\n        aria-label=${ifDefined(this.label)}\n      >\n        <slot aria-hidden=\"true\"></slot>\n        <div aria-hidden=\"true\">${unsafeHTML(this.svg)}</div>\n      </div>\n    `\n  }\n\n  @observe('name')\n  protected handleNameChange() {\n    if (!this.name) {\n      this.svg = ''\n      return\n    }\n\n    Icon.manager.resolve(this.name, (svg) => {\n      this.svg = svg\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-icon': Icon\n  }\n}\n"],"names":["Icon","Icon_1","LitElement","constructor","this","name","svg","registerResolver","resolver","manager","registerIcon","iconOrName","icon","render","html","cond","label","color","ifDefined","unsafeHTML","handleNameChange","resolve","styles","componentStyle","style","IconManager","__decorate","property","reflect","prototype","state","observe","customElement"],"mappings":"g/BAqBe,IAAMA,EAAIC,EAAV,cAAmBC,EAAnB,WAAAC,uBAyCgBC,KAAIC,KAAW,GAoB3BD,KAAGE,IAAW,EA6BhC,CA/EC,uBAAOC,CAAiBC,GACtBJ,KAAKK,QAAQD,SAAWA,CACzB,CAqBD,mBAAOE,CAAaC,EAAyDC,GAC3E,OAAOR,KAAKK,QAAQC,aAAaC,EAAYC,EAC9C,CA2BD,MAAAC,GAIE,OAAOC,CAAI,cAEAC,EAAKX,KAAKY,MAAO,kBAChBD,EAAKX,KAAKa,MAAO,SAASb,KAAKa,yBAC1BC,EAAUd,KAAKY,mEAGFG,EAAWf,KAAKE,kBAG/C,CAGS,gBAAAc,GACHhB,KAAKC,KAKVJ,EAAKQ,QAAQY,QAAQjB,KAAKC,MAAOC,IAC/BF,KAAKE,IAAMA,CAAG,IALdF,KAAKE,IAAM,EAOd,GAxFMN,EAAAsB,OAAS,CAACC,EAAgBC,GAElBxB,EAAAS,QAAU,IAAIgB,EAsCAC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyB5B,EAAA6B,UAAA,YAAA,GAMjBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA4D5B,EAAA6B,UAAA,YAAA,GAMpDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsB5B,EAAA6B,UAAA,aAAA,GAMdH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsB5B,EAAA6B,UAAA,aAAA,GAE1BH,EAAA,CAAhBI,KAAgC9B,EAAA6B,UAAA,WAAA,GAmBvBH,EAAA,CADTK,EAAQ,SAUR/B,EAAA6B,UAAA,mBAAA,MAzFkB7B,EAAIC,EAAAyB,EAAA,CADxBM,EAAc,cACMhC,SAAAA"}

package/lib/Input.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{isServer as n,css as e,html as o,nothing as i,LitElement as r}from"lit";import{query as s,property as a,customElement as d}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{ifDefined as p}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{styleMap as u}from"lit/directives/style-map.js";import{D as m}from"./DirectionController-ChvNGESZ.js";import{c as h}from"./cond-CI1KbneT.js";import{N as v}from"./events-Bv6wNHwJ.js";import{A as b}from"./AutocompleteMixin-D8eiOxvO.js";import{F as f}from"./FocusableMixin-BlQLNPdJ.js";import{F as g}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as w}from"./InputMixin-LetXsCyv.js";import{R as y,s as x}from"./TextField-B955GOhe.js";import{S as z}from"./SizeMixin-CU9cLbLC.js";import{T as j}from"./TextSelectableMixin-Cfv__lHS.js";import{s as $}from"./Component-DSU3Qp0O.js";import{s as S}from"./FormField-BFaVzUjk.js";import _ from"./Icon.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./IconManager.js";var k=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z" fill="currentColor"/></svg>',tags:"nordicon navigation menu find search magnifying glass",title:"navigation-search"});class F{constructor(t,e){this.target=e,this.hadFirstUpdate=!1,t.addController(this),n||(this.observer=new ResizeObserver((([n])=>{const[e]=n.borderBoxSize;this.borderBoxSize=e,t.requestUpdate()})))}get inlineSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.inlineSize}get blockSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.blockSize}hostUpdated(){!this.hadFirstUpdate&&this.observer&&(this.observer.observe(this.target()),this.hadFirstUpdate=!0)}hostConnected(){this.hadFirstUpdate&&this.observer&&this.observer.observe(this.target())}hostDisconnected(){this.observer&&this.observer.disconnect()}}const C=e`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{appearance:none}.n-input-container{font-size:var(--n-font-size-m);display:grid;grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4;padding-inline-start:var(--_n-input-start-inline-size,var(--_n-input-padding-inline));padding-inline-end:var(--_n-input-end-inline-size,var(--_n-input-padding-inline))}slot[name=end],slot[name=start]{pointer-events:none;display:flex;align-items:center;color:var(--n-color-icon)}:host([disabled]) slot:is([name=start],[name=end]){color:var(--n-color-text-weakest)}:host([readonly]) slot:is([name=start],[name=end]){color:var(--n-color-text)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(*){font-size:var(--_n-input-font-size)}[name=start]::slotted(*),nord-icon{margin-inline-start:var(--_n-input-padding-inline)!important;margin-inline-end:calc(var(--_n-input-padding-inline)/ 2)!important}[name=end]::slotted(*){margin-inline-start:calc(var(--_n-input-padding-inline)/ 2)!important;margin-inline-end:var(--_n-input-padding-inline)!important}[name=start]::slotted(:is(nord-button, nord-dropdown)){margin-inline-start:0!important}[name=end]::slotted(:is(nord-button, nord-dropdown)){margin-inline-end:0!important}nord-icon{--_n-input-icon-color:var(--n-input-icon-color, var(--n-color-icon));color:var(--_n-input-icon-color)}::slotted(:is(nord-button:not([disabled]), nord-dropdown)){pointer-events:auto;position:relative}::slotted(nord-button:not([disabled],:focus)),::slotted(nord-dropdown:not(:focus-within)){--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-color:var(--n-color-text-weaker);-webkit-text-fill-color:var(--n-button-color);opacity:.8}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button:not([disabled]), nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)){--n-button-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color, var(--n-color-status-danger))}:host([size='s']) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s) * 1.4)}:host{--_n-input-icon-size:var(--n-size-icon-s)}:host([size='s']){--_n-input-icon-size:var(--n-size-icon-xs)}:host([size='l']){--_n-input-icon-size:var(--n-size-icon-m)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-input-icon-size)}:host([type=unit]) :is(.n-input-container,.n-input){--_n-input-text-align:var(--n-input-text-align, end);font-family:var(--n-font-family-code)!important}:host([type=button]) :is(.n-input-container,.n-input){cursor:pointer}`;_.registerIcon(k);const I=t=>t?`${t}px`:void 0,B={number:"numeric",email:"email",tel:"tel",url:"url",search:"search"};let M=class extends(z(g(b(y(j(w(f(r)))))))){constructor(){super(...arguments),this.startObserver=new F(this,(()=>this.startSlot)),this.endObserver=new F(this,(()=>this.endSlot)),this.direction=new m(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.inputmode=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,o=t.selectionStart,i=e.slice(0,o),r=e.slice(o,e.length),s=i.replace(n,""),a=s+r.replace(n,""),d=s.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const n="number"===this.type,e=this.inputmode||B[this.type];return o`${this.renderLabel()}<div class="${l({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${u({"--_n-input-start-inline-size":I(this.startObserver.inlineSize),"--_n-input-end-inline-size":I(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?o`<nord-icon name="navigation-search"></nord-icon>`:i}</slot><input ${c(this.textSelectableRef)} ${c(this.focusableRef)} id="${this.inputId}" class="n-input" type="${n||"unit"===this.type?"text":this.type}" inputmode="${p(e)}" pattern="${h(n,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${p(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${p(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" @select="${this.handleSelect}" aria-describedby="${p(this.getDescribedBy())}" aria-invalid="${p(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()} ${this.isHintBelow?this.renderHint():i}`}handleKeydown(t){if("Enter"!==t.key)return;const{form:n}=this;if(n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}handleSelect(t){t.stopPropagation(),this.dispatchEvent(new v("select"))}};M.styles=[$,S,x,C],t([s("slot[name='start']")],M.prototype,"startSlot",void 0),t([s("slot[name='end']")],M.prototype,"endSlot",void 0),t([a({reflect:!0})],M.prototype,"type",void 0),t([a({reflect:!0,type:Boolean})],M.prototype,"expand",void 0),t([a({reflect:!0,attribute:"disallow-pattern"})],M.prototype,"disallowPattern",void 0),t([a({reflect:!0})],M.prototype,"inputmode",void 0),M=t([d("nord-input")],M);var q=M;export{q as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{s as n}from"./navigation-search-CBbIGzo2.js";import{css as e,html as i,nothing as o,LitElement as r}from"lit";import{query as s,property as a,customElement as d}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{ifDefined as p}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{styleMap as u}from"lit/directives/style-map.js";import{D as m}from"./DirectionController-ChvNGESZ.js";import{R as h}from"./ResizeController-14PUwRQy.js";import{c as v}from"./cond-CI1KbneT.js";import{N as b}from"./events-Bv6wNHwJ.js";import{A as f}from"./AutocompleteMixin-D8eiOxvO.js";import{F as g}from"./FocusableMixin-BlQLNPdJ.js";import{F as y}from"./FormAssociatedMixin-D9aPREgv.js";import{I as w}from"./InputMixin-LetXsCyv.js";import{R as x}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as j}from"./SizeMixin-CU9cLbLC.js";import{T as $}from"./TextSelectableMixin-Cfv__lHS.js";import{s as z}from"./Component-BJ5O5n8k.js";import{s as _}from"./FormField-CMgEFZCK.js";import{s as k}from"./TextField-CSKvieoG.js";import S from"./Icon.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./IconManager.js";const I=e`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{appearance:none}.n-input-container{display:grid;font-size:var(--n-font-size-m);grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4;padding-inline-end:var(--_n-input-end-inline-size,var(--_n-input-padding-inline));padding-inline-start:var(--_n-input-start-inline-size,var(--_n-input-padding-inline))}slot[name=end],slot[name=start]{align-items:center;color:var(--n-color-icon);display:flex;pointer-events:none}:host([disabled]) slot:is([name=start],[name=end]){color:var(--n-color-text-weakest)}:host([readonly]) slot:is([name=start],[name=end]){color:var(--n-color-text)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(*){font-size:var(--_n-input-font-size)}[name=start]::slotted(*),nord-icon{margin-inline-end:calc(var(--_n-input-padding-inline)/2)!important;margin-inline-start:var(--_n-input-padding-inline)!important}[name=end]::slotted(*){margin-inline-end:var(--_n-input-padding-inline)!important;margin-inline-start:calc(var(--_n-input-padding-inline)/2)!important}[name=start]::slotted(:is(nord-button,nord-dropdown)){margin-inline-start:0!important}[name=end]::slotted(:is(nord-button,nord-dropdown)){margin-inline-end:0!important}nord-icon{--_n-input-icon-color:var(--n-input-icon-color,var(--n-color-icon));color:var(--_n-input-icon-color)}::slotted(:is(nord-button:not([disabled]),nord-dropdown)){pointer-events:auto;position:relative}::slotted(nord-button:not([disabled],:focus)),::slotted(nord-dropdown:not(:focus-within)){--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-color:var(--n-color-text-weaker);-webkit-text-fill-color:var(--n-button-color);opacity:.8}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)){--n-button-border-color:var(--n-input-border-color,var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color,var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color,var(--n-color-status-danger))}:host([size=s]) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s)*1.4)}:host{--_n-input-icon-size:var(--n-size-icon-s)}:host([size=s]){--_n-input-icon-size:var(--n-size-icon-xs)}:host([size=l]){--_n-input-icon-size:var(--n-size-icon-m)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-input-icon-size)}:host([type=unit]) :is(.n-input-container,.n-input){--_n-input-text-align:var(--n-input-text-align,end);font-family:var(--n-font-family-code)!important}:host([type=button]) :is(.n-input-container,.n-input){cursor:pointer}:host(:is([type=date],[type=time],[type=datetime-local])) .n-input{block-size:calc(var(--n-line-height-form) + var(--_n-input-padding-block)*2 + 2px)}.n-input::-webkit-calendar-picker-indicator{border-radius:var(--n-border-radius-s);cursor:pointer;display:var(--n-input-picker-indicator-display,revert)}.n-input::-webkit-calendar-picker-indicator:hover{background:var(--n-color-surface-lowered)}.n-input::-webkit-inner-spin-button{display:var(--n-input-picker-indicator-display,revert)}.n-input::-webkit-datetime-edit{color:var(--_n-input-color)}:host([type=file]) .n-input{cursor:pointer}.n-input::file-selector-button{background:#0000;border:0;color:var(--n-color-text);cursor:pointer;font:inherit;font-weight:var(--n-font-weight-active);margin-inline-end:var(--_n-input-padding-inline);padding:0}`;S.registerIcon(n);const C=t=>t?`${t}px`:void 0,M={number:"numeric",email:"email",tel:"tel",url:"url",search:"search"};let F=class extends(j(y(f(x($(w(g(r)))))))){constructor(){super(...arguments),this.startObserver=new h(this,(()=>this.startSlot)),this.endObserver=new h(this,(()=>this.endSlot)),this.direction=new m(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.inputmode=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,i=t.selectionStart,o=e.slice(0,i),r=e.slice(i,e.length),s=o.replace(n,""),a=s+r.replace(n,""),d=s.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const n="number"===this.type,e=this.inputmode||M[this.type];return i`${this.renderLabel()}<div class="${l({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${u({"--_n-input-start-inline-size":C(this.startObserver.inlineSize),"--_n-input-end-inline-size":C(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?i`<nord-icon name="navigation-search"></nord-icon>`:o}</slot><input ${c(this.textSelectableRef)} ${c(this.focusableRef)} id="${this.inputId}" class="n-input" type="${n||"unit"===this.type?"text":this.type}" inputmode="${p(e)}" pattern="${v(n,"[0-9]*")}" ?disabled="${this.effectiveDisabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${p(this.name)}" .value="${"file"===this.type?"":null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${p(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" @select="${this.handleSelect}" aria-label="${p(this.controlAriaLabel)}" aria-describedby="${p(this.controlAriaDescribedby)}" aria-invalid="${p(this.controlAriaInvalid)}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()} ${this.isHintBelow?this.renderHint():o}`}handleKeydown(t){if("Enter"!==t.key)return;const{form:n}=this;if(n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}handleSelect(t){t.stopPropagation(),this.dispatchEvent(new b("select"))}};F.styles=[z,_,k,I],t([s("slot[name='start']")],F.prototype,"startSlot",void 0),t([s("slot[name='end']")],F.prototype,"endSlot",void 0),t([a({reflect:!0})],F.prototype,"type",void 0),t([a({reflect:!0,type:Boolean})],F.prototype,"expand",void 0),t([a({reflect:!0,attribute:"disallow-pattern"})],F.prototype,"disallowPattern",void 0),t([a({reflect:!0})],F.prototype,"inputmode",void 0),F=t([d("nord-input")],F);var R=F;export{R as default};
 //# sourceMappingURL=Input.js.map