@nordhealth/components 3.11.1 → 3.13.0

package/lib/{NavToggle-b54db654.js.map → NavToggle-6b13700e.js.map}

@@ -1 +1 @@
-{"version":3,"file":"NavToggle-b54db654.js","sources":["../../icons/lib/assets/navigation-toggle-lock.js","../../icons/lib/assets/navigation-toggle.js","../src/nav-toggle/NavToggle.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-toggle-lock\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-toggle\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation three lines\"\n","import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as unlockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle.js\"\nimport * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.js\"\n\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./NavToggle.css\"\n\nIcon.registerIcon(unlockIcon)\nIcon.registerIcon(lockIcon)\n\n/**\n * Nav toggle is meant for hiding and showing the primary navigation.\n * This component is used internally in the Layout component, but can also be\n * used separate to further customize the behavior.\n *\n * @status new\n * @category action\n *\n * @localization label - Accessible label for the nav toggle button.\n */\n@customElement(\"nord-nav-toggle\")\nexport default class NavToggle extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private direction = new DirectionController(this)\n  private localization = new LocalizeController<\"nord-nav-toggle\">(this)\n\n  render() {\n    return html`\n      <nord-button variant=\"plain\" ${ref(this.focusableRef)} class=${classMap({ \"is-rtl\": this.direction.isRTL })}>\n        <nord-visually-hidden>${this.localization.term(\"label\")}</nord-visually-hidden>\n        <nord-icon size=\"m\" name=${unlockIcon.title}></nord-icon>\n        <nord-icon size=\"m\" name=${lockIcon.title}></nord-icon>\n      </nord-button>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-toggle\": NavToggle\n  }\n}\n"],"names":["title","Icon","registerIcon","unlockIcon","lockIcon","NavToggle","FocusableMixin","LitElement","constructor","this","direction","DirectionController","localization","LocalizeController","render","html","ref","focusableRef","classMap","isRTL","term","unlockIcon.title","lockIcon.title","styles","componentStyle","style","__decorate","customElement"],"mappings":"icACO,MAAMA,EAAQ,qEADN,4TAEK,kGCDb,MAAMA,EAAQ,gEADN,0MAEK,ijBCgBpBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAaH,IAAMC,EAAN,cAAwBC,EAAeC,IAAvC,WAAAC,uBAGLC,KAAAC,UAAY,IAAIC,EAAoBF,MACpCA,KAAAG,aAAe,IAAIC,EAAsCJ,KAWlE,CATC,MAAAK,GACE,OAAOC,CAAI,gCACsBC,EAAIP,KAAKQ,wBAAuBC,EAAS,CAAE,SAAUT,KAAKC,UAAUS,kCACzEV,KAAKG,aAAaQ,KAAK,4DACpBC,4CACAC,+BAGhC,GAbMjB,EAAAkB,OAAS,CAACC,EAAgBC,GADdpB,EAASqB,EAAA,CAD7BC,EAAc,oBACMtB,SAAAA"}
+{"version":3,"file":"NavToggle-6b13700e.js","sources":["../../icons/lib/assets/navigation-toggle-lock.js","../../icons/lib/assets/navigation-toggle.js","../src/nav-toggle/NavToggle.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-toggle-lock\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-toggle\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation three lines\"\n","import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as unlockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle.js\"\nimport * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.js\"\n\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./NavToggle.css\"\n\nIcon.registerIcon(unlockIcon)\nIcon.registerIcon(lockIcon)\n\n/**\n * Nav toggle is meant for hiding and showing the primary navigation.\n * This component is used internally in the Layout component, but can also be\n * used separate to further customize the behavior.\n *\n * @status new\n * @category action\n *\n * @localization label - Accessible label for the nav toggle button.\n */\n@customElement(\"nord-nav-toggle\")\nexport default class NavToggle extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private direction = new DirectionController(this)\n  private localization = new LocalizeController<\"nord-nav-toggle\">(this)\n\n  render() {\n    return html`\n      <nord-button variant=\"plain\" ${ref(this.focusableRef)} class=${classMap({ \"is-rtl\": this.direction.isRTL })}>\n        <nord-visually-hidden>${this.localization.term(\"label\")}</nord-visually-hidden>\n        <nord-icon size=\"m\" name=${unlockIcon.title}></nord-icon>\n        <nord-icon size=\"m\" name=${lockIcon.title}></nord-icon>\n      </nord-button>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-toggle\": NavToggle\n  }\n}\n"],"names":["title","Icon","registerIcon","unlockIcon","lockIcon","NavToggle","FocusableMixin","LitElement","constructor","this","direction","DirectionController","localization","LocalizeController","render","html","ref","focusableRef","classMap","isRTL","term","unlockIcon.title","lockIcon.title","styles","componentStyle","style","__decorate","customElement"],"mappings":"icACO,MAAMA,EAAQ,qEADN,4TAEK,kGCDb,MAAMA,EAAQ,gEADN,0MAEK,ijBCgBpBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAaH,IAAMC,EAAN,cAAwBC,EAAeC,IAAvC,WAAAC,uBAGLC,KAAAC,UAAY,IAAIC,EAAoBF,MACpCA,KAAAG,aAAe,IAAIC,EAAsCJ,KAWlE,CATC,MAAAK,GACE,OAAOC,CAAI,gCACsBC,EAAIP,KAAKQ,wBAAuBC,EAAS,CAAE,SAAUT,KAAKC,UAAUS,kCACzEV,KAAKG,aAAaQ,KAAK,4DACpBC,4CACAC,+BAGhC,GAbMjB,EAAAkB,OAAS,CAACC,EAAgBC,GADdpB,EAASqB,EAAA,CAD7BC,EAAc,oBACMtB,SAAAA"}

package/lib/NavToggle.js

@@ -1,2 +1,2 @@
-import"./query-assigned-elements-92ce7494.js";import"./ref-99418ab4.js";import"./class-map-512f0bc1.js";export{N as default}from"./NavToggle-b54db654.js";import"./LocalizeController.js";import"./DirectionController-f35f5476.js";import"./FocusableMixin-d30213b4.js";import"./Button.js";import"./Icon.js";import"./VisuallyHidden.js";import"./Component-2253424f.js";import"./directive-e9ce14b4.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"./property-c78323b1.js";import"./EventController-d99ebeef.js";import"./LightDomController-5388d84c.js";import"./cond-bb9ee891.js";import"./Spinner.js";import"./if-defined-cccde88f.js";import"./InputMixin-83b5bd46.js";import"./SlotController-d733c575.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";
+import"./query-assigned-elements-92ce7494.js";import"./ref-99418ab4.js";import"./class-map-512f0bc1.js";export{N as default}from"./NavToggle-6b13700e.js";import"./LocalizeController.js";import"./DirectionController-f35f5476.js";import"./FocusableMixin-d30213b4.js";import"./Button.js";import"./Icon.js";import"./VisuallyHidden.js";import"./Component-2253424f.js";import"./directive-e9ce14b4.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"./property-c78323b1.js";import"./EventController-d99ebeef.js";import"./LightDomController-5388d84c.js";import"./cond-bb9ee891.js";import"./Spinner.js";import"./if-defined-cccde88f.js";import"./InputMixin-83b5bd46.js";import"./SlotController-d733c575.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";
 //# sourceMappingURL=NavToggle.js.map

package/lib/Radio.js

@@ -1,2 +1,2 @@
-import{A as e,i as t,x as o,_ as n,e as i,s as r}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{n as a}from"./ref-99418ab4.js";import{L as l}from"./LightDomController-5388d84c.js";import{S as d}from"./SlotController-d733c575.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as h}from"./cond-bb9ee891.js";import{F as p}from"./FocusableMixin-d30213b4.js";import{F as m}from"./FormAssociatedMixin-3fa55d53.js";import{I as u}from"./InputMixin-83b5bd46.js";import{s as b}from"./Component-2253424f.js";import{s as v}from"./FormField-87551be2.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";import"./FormDataController-592ff3dd.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";class f extends d{constructor(t,o){super(t,o.slotName),this.options=o,this.onChange=()=>{this.syncLightDom()},this.renderHook=document.createComment(this.slotName),this.lightDom=new l(t,{render:()=>this.hasContent?e:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}syncLightDom(){const e=this.content;e&&this.options.syncLightDom(e)}}const g=t`:host{--_n-radio-size:calc(var(--n-space-m) * 1.25);display:inline-block;line-height:var(--n-line-height)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--_n-radio-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0!important;padding:0!important;border:1px solid var(--_n-radio-border-color,var(--n-color-border-hover))!important;border-radius:var(--n-border-radius-circle)!important;transition:none!important;display:block!important;inline-size:var(--_n-radio-size)!important;block-size:var(--_n-radio-size)!important;cursor:pointer}::slotted(input:checked){--_n-radio-border-color:var(--n-color-accent);background:var(--_n-radio-accent-color)!important}::slotted(input[aria-invalid]){--_n-radio-accent-color:var(--n-color-status-danger);--_n-radio-border-color:var(--_n-radio-accent-color)}::slotted(input:active){opacity:.8}::slotted(input:focus-visible){outline:0!important}::slotted(input:focus){outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)!important}:host([disabled]) ::slotted(label){color:var(--n-color-text-weaker);cursor:default}:host([disabled]) ::slotted(input){background:var(--_n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(input:not(:checked)){--_n-radio-accent-color:var(--n-color-active);--_n-radio-border-color:var(--n-color-border-neutral)}:host([disabled]) ::slotted(input:checked){opacity:.3}.n-dot{--_n-radio-dot-size:var(--n-space-s);--_n-radio-dot-inset:calc((var(--_n-radio-size) - var(--_n-radio-dot-size)) / 2);position:absolute;border-radius:var(--n-border-radius-circle);inline-size:var(--_n-radio-dot-size);block-size:var(--_n-radio-dot-size);background-color:var(--n-color-text-on-accent);inset-inline-start:var(--_n-radio-dot-inset);inset-block-start:var(--_n-radio-dot-inset);z-index:var(--n-index-default);pointer-events:none}.n-label-container{margin-block-end:0}::slotted(label){-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l)!important;padding-inline-start:var(--n-space-s)!important;cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}`;let k=0;const y=e=>`nord-radio-${e}-${k++}`;let $=class extends(m(u(p(r)))){constructor(){super(...arguments),this.inputId=y("input"),this.hintId=y("hint"),this.errorId=y("error"),this.hintSlot=new f(this,{slotName:"hint",render:()=>this.hint?o`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:e,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new f(this,{slotName:"label",render:()=>this.label?o`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:e,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):e.htmlFor=this.inputId}}),this.errorSlot=new f(this,{slotName:"error",render:()=>this.error?o`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:e,syncLightDom:e=>{e.id=this.hintId}}),this.inputSlot=new l(this,{render:()=>o`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${a(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" name="${h(this.name)}" .value="${h(this.value)}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${h(this.getDescribedBy())}" aria-invalid="${h(this.getInvalid())}" form="${h(this._formId)}">`}),this.checked=!1,this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}render(){return o`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?o`<div class="n-dot"></div>`:e}</div><div class="n-expand"><div class="n-label-container">${t=this.hideLabel,n=()=>o`<slot name="label"></slot><slot name="label-internal"></slot>`,i=e=>o`<nord-visually-hidden>${e}</nord-visually-hidden>`,t?i(n()):n()}<div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint"></slot><slot name="hint-internal"></slot></div></div><div class="n-caption n-error" role="alert" ?hidden="${!this.hasError}"><slot name="error"></slot><slot name="error-internal"></slot></div></div></div>`;var t,n,i}handleCheckedChange(e){!e&&this.checked&&this.uncheckSiblings()}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){e.stopPropagation();const t=e.target;this.checked=t.checked,super.handleChange(e)}};$.styles=[b,v,g],n([s({type:Boolean,reflect:!0})],$.prototype,"checked",void 0),n([c("checked")],$.prototype,"handleCheckedChange",null),$=n([i("nord-radio")],$);var _=$;export{_ as default};
+import{i as e,x as t,A as i,_ as o,e as r,s as n}from"./query-assigned-elements-92ce7494.js";import{n as a}from"./property-c78323b1.js";import{n as s}from"./ref-99418ab4.js";import{L as l}from"./LightDomController-5388d84c.js";import{L as d}from"./LightSlotController-c51e9cf5.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as h}from"./cond-bb9ee891.js";import{F as p}from"./FocusableMixin-d30213b4.js";import{F as b}from"./FormAssociatedMixin-3fa55d53.js";import{I as m}from"./InputMixin-83b5bd46.js";import{s as u}from"./Component-2253424f.js";import{s as v}from"./FormField-87551be2.js";import"./directive-e9ce14b4.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./FormDataController-592ff3dd.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";const f=e`:host{--_n-radio-size:calc(var(--n-space-m) * 1.25);display:inline-block;line-height:var(--n-line-height)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--_n-radio-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0!important;padding:0!important;border:1px solid var(--_n-radio-border-color,var(--n-color-border-hover))!important;border-radius:var(--n-border-radius-circle)!important;transition:none!important;display:block!important;inline-size:var(--_n-radio-size)!important;block-size:var(--_n-radio-size)!important;cursor:pointer}::slotted(input:checked){--_n-radio-border-color:var(--n-color-accent);background:var(--_n-radio-accent-color)!important}::slotted(input[aria-invalid]){--_n-radio-accent-color:var(--n-color-status-danger);--_n-radio-border-color:var(--_n-radio-accent-color)}::slotted(input:active){opacity:.8}::slotted(input:focus-visible){outline:0!important}::slotted(input:focus){outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)!important}:host([disabled]) ::slotted(label){color:var(--n-color-text-weaker);cursor:default}:host([disabled]) ::slotted(input){background:var(--_n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(input:not(:checked)){--_n-radio-accent-color:var(--n-color-active);--_n-radio-border-color:var(--n-color-border-neutral)}:host([disabled]) ::slotted(input:checked){opacity:.3}.n-dot{--_n-radio-dot-size:var(--n-space-s);--_n-radio-dot-inset:calc((var(--_n-radio-size) - var(--_n-radio-dot-size)) / 2);position:absolute;border-radius:var(--n-border-radius-circle);inline-size:var(--_n-radio-dot-size);block-size:var(--_n-radio-dot-size);background-color:var(--n-color-text-on-accent);inset-inline-start:var(--_n-radio-dot-inset);inset-block-start:var(--_n-radio-dot-inset);z-index:var(--n-index-default);pointer-events:none}.n-label-container{margin-block-end:0}::slotted(label){-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l)!important;padding-inline-start:var(--n-space-s)!important;cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}`;let g=0;const k=e=>`nord-radio-${e}-${g++}`;let $=class extends(b(m(p(n)))){constructor(){super(...arguments),this.inputId=k("input"),this.hintId=k("hint"),this.errorId=k("error"),this.hintSlot=new d(this,{slotName:"hint",render:()=>this.hint?t`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:i,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new d(this,{slotName:"label",render:()=>this.label?t`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:i,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):e.htmlFor=this.inputId}}),this.errorSlot=new d(this,{slotName:"error",render:()=>this.error?t`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:i,syncLightDom:e=>{e.id=this.hintId}}),this.inputSlot=new l(this,{render:()=>t`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${s(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" name="${h(this.name)}" .value="${h(this.value)}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${h(this.getDescribedBy())}" aria-invalid="${h(this.getInvalid())}" form="${h(this._formId)}">`}),this.checked=!1,this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}render(){return t`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?t`<div class="n-dot"></div>`:i}</div><div class="n-expand"><div class="n-label-container">${e=this.hideLabel,o=()=>t`<slot name="label"></slot><slot name="label-internal"></slot>`,r=e=>t`<nord-visually-hidden>${e}</nord-visually-hidden>`,e?r(o()):o()}<div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint"></slot><slot name="hint-internal"></slot></div></div><div class="n-caption n-error" role="alert" ?hidden="${!this.hasError}"><slot name="error"></slot><slot name="error-internal"></slot></div></div></div>`;var e,o,r}handleCheckedChange(e){!e&&this.checked&&this.uncheckSiblings()}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){e.stopPropagation();const t=e.target;this.checked=t.checked,super.handleChange(e)}};$.styles=[u,v,f],o([a({type:Boolean,reflect:!0})],$.prototype,"checked",void 0),o([c("checked")],$.prototype,"handleCheckedChange",null),$=o([r("nord-radio")],$);var y=$;export{y as default};
 //# sourceMappingURL=Radio.js.map

package/lib/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../src/common/controllers/LightSlotController.ts","../src/radio/Radio.ts","../src/common/directives/wrapIf.ts"],"sourcesContent":["import { nothing, ReactiveControllerHost } from \"lit\"\nimport { LightDomController } from \"./LightDomController.js\"\nimport { SlotController } from \"./SlotController.js\"\n\ntype LightSlotOptions = {\n  slotName: string\n  render: () => unknown\n  syncLightDom: (element: Element) => void\n}\n\n/**\n * Handles cases where a component needs to render to light DOM,\n * and potentially sync component properties to user-supplied content.\n */\nexport class LightSlotController extends SlotController {\n  private renderHook: Comment\n  private lightDom: LightDomController\n\n  constructor(host: ReactiveControllerHost & HTMLElement, private options: LightSlotOptions) {\n    super(host, options.slotName)\n\n    // we need a node to hook onto for rendering\n    // without this, multiple controllers rendering to the light DOM\n    // will overwrite each others' content\n    this.renderHook = document.createComment(this.slotName)\n\n    this.lightDom = new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })\n  }\n\n  hostConnected() {\n    super.hostConnected()\n    this.host.appendChild(this.renderHook)\n    this.syncLightDom()\n  }\n\n  protected override onChange = () => {\n    this.syncLightDom()\n  }\n\n  private syncLightDom() {\n    const node = this.content\n\n    if (node) {\n      this.options.syncLightDom(node)\n    }\n  }\n}\n","import { html, LitElement, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { LightSlotController } from \"../common/controllers/LightSlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { wrapIf } from \"../common/directives/wrapIf.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Radio.css\"\n\nlet id = 0\nconst createId = (suffix: string) => `nord-radio-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n  return element.localName === \"label\"\n}\n\n/**\n * Radio buttons are graphical user interface elements that allow user to choose only one option from\n * a predefined set of mutually exclusive options.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-radio\")\nexport default class Radio extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override inputId = createId(\"input\")\n  protected override hintId = createId(\"hint\")\n  protected override errorId = createId(\"error\")\n\n  /**\n   * For accessibility reasons, we render some parts of the component to the light DOM.\n   */\n  protected override hintSlot = new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected override labelSlot = new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })\n\n  protected override errorSlot = new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected inputSlot = new LightDomController(this, {\n    render: () =>\n      html`\n        <input\n          slot=\"input\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          ${ref(this.focusableRef)}\n          class=\"n-input\"\n          id=${this.inputId}\n          type=\"radio\"\n          name=${cond(this.name)}\n          .value=${cond(this.value)}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-describedby=${cond(this.getDescribedBy())}\n          aria-invalid=${cond(this.getInvalid())}\n          form=${cond(this._formId)}\n        />\n      `,\n  })\n\n  // eslint-disable-next-line class-methods-use-this\n  protected override get formValue() {\n    // opt out of formdata event, since radio button is in light dom\n    return undefined\n  }\n\n  /**\n   * Controls whether the checkbox is checked or not.\n   */\n  @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n  render() {\n    return html`\n      <div class=\"n-flex\">\n        <div class=\"n-input-container\" @change=${this.handleChange}>\n          <slot name=\"input\"></slot>\n          ${this.checked ? html`<div class=\"n-dot\"></div>` : nothing}\n        </div>\n        <div class=\"n-expand\">\n          <div class=\"n-label-container\">\n            ${wrapIf(\n              this.hideLabel,\n              () => html`\n                <slot name=\"label\"></slot>\n                <slot name=\"label-internal\"></slot>\n              `,\n              content => html`<nord-visually-hidden>${content}</nord-visually-hidden>`\n            )}\n            <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n              <slot name=\"hint\"></slot>\n              <slot name=\"hint-internal\"></slot>\n            </div>\n          </div>\n          <div class=\"n-caption n-error\" role=\"alert\" ?hidden=${!this.hasError}>\n            <slot name=\"error\"></slot>\n            <slot name=\"error-internal\"></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"checked\")\n  protected handleCheckedChange(previousChecked: boolean) {\n    // if this component was previous unchecked but is now checked,\n    // then we need to uncheck any radios in the same group\n    if (!previousChecked && this.checked) {\n      this.uncheckSiblings()\n    }\n  }\n\n  private uncheckSiblings() {\n    const root = this.getRootNode() as Document | ShadowRoot\n\n    root.querySelectorAll<Radio>(`nord-radio[name=\"${this.name}\"]`).forEach(radio => {\n      if (radio !== this) {\n        radio.checked = false\n      }\n    })\n  }\n\n  protected handleChange(e: Event): void {\n    e.stopPropagation()\n    const target = e.target as HTMLInputElement\n\n    this.checked = target.checked\n    super.handleChange(e)\n  }\n\n  private handleBlur = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"blur\", { bubbles: false, cancelable: true }))\n  }\n\n  private handleFocus = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"focus\", { bubbles: false, cancelable: true }))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-radio\": Radio\n  }\n}\n","// some clever typing so that TS knows what happens if you pass true/false values\nexport function wrapIf<TInner, TWrapper>(\n  condition: false,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner\nexport function wrapIf<TInner, TWrapper>(\n  condition: true,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TWrapper\nexport function wrapIf<TInner, TWrapper>(\n  condition: unknown,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner | TWrapper\n\n/**\n * @returns if condition is truthy, return result of wrapper, passing result of inner as arg. if falsy, return result of inner\n */\nexport function wrapIf<TInner, TWrapper>(condition: any, inner: () => TInner, wrapper: (innards: TInner) => TWrapper) {\n  return condition ? wrapper(inner()) : inner()\n}\n"],"names":["LightSlotController","SlotController","constructor","host","options","super","slotName","this","onChange","syncLightDom","renderHook","document","createComment","lightDom","LightDomController","render","hasContent","nothing","renderOptions","renderBefore","hostConnected","appendChild","node","content","id","createId","suffix","Radio","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","inputId","hintId","errorId","hintSlot","hint","html","element","labelSlot","label","localName","isLabel","console","warn","htmlFor","errorSlot","error","inputSlot","handleBlur","handleFocus","ref","focusableRef","cond","name","value","checked","disabled","required","getDescribedBy","getInvalid","_formId","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","formValue","handleChange","condition","hideLabel","inner","wrapper","hasHint","hasError","handleCheckedChange","previousChecked","uncheckSiblings","getRootNode","querySelectorAll","forEach","radio","target","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"yvBAcM,MAAOA,UAA4BC,EAIvC,WAAAC,CAAYC,EAAoDC,GAC9DC,MAAMF,EAAMC,EAAQE,UAD0CC,KAAOH,QAAPA,EAoB7CG,KAAQC,SAAG,KAC5BD,KAAKE,cAAc,EAfnBF,KAAKG,WAAaC,SAASC,cAAcL,KAAKD,UAE9CC,KAAKM,SAAW,IAAIC,EAAmBX,EAAM,CAC3CY,OAAQ,IAAOR,KAAKS,WAAaC,EAAUV,KAAKH,QAAQW,SACxDG,cAAe,CAAEC,aAAcZ,KAAKG,aAEvC,CAED,aAAAU,GACEf,MAAMe,gBACNb,KAAKJ,KAAKkB,YAAYd,KAAKG,YAC3BH,KAAKE,cACN,CAMO,YAAAA,GACN,MAAMa,EAAOf,KAAKgB,QAEdD,GACFf,KAAKH,QAAQK,aAAaa,EAE7B,0xEC/BH,IAAIE,EAAK,EACT,MAAMC,EAAYC,GAAmB,cAAcA,KAAUF,MAiB9C,IAAMG,EAAN,cAAoBC,EAAoBC,EAAWC,EAAeC,MAAlE,WAAA7B,uBAGMK,KAAAyB,QAAUP,EAAS,SACnBlB,KAAA0B,OAASR,EAAS,QAClBlB,KAAA2B,QAAUT,EAAS,SAKnBlB,KAAA4B,SAAW,IAAInC,EAAoBO,KAAM,CAC1DD,SAAU,OACVS,OAAQ,IAAOR,KAAK6B,KAAOC,CAAI,iCAAgC9B,KAAK0B,WAAU1B,KAAK6B,aAAenB,EAClGR,aAAc6B,IACZA,EAAQd,GAAKjB,KAAK0B,MAAM,IAIT1B,KAAAgC,UAAY,IAAIvC,EAAoBO,KAAM,CAC3DD,SAAU,QACVS,OAAQ,IAAOR,KAAKiC,MAAQH,CAAI,qCAAoC9B,KAAKyB,YAAWzB,KAAKiC,gBAAkBvB,EAC3GR,aAAc6B,KApClB,SAAiBA,GACf,MAA6B,UAAtBA,EAAQG,SACjB,CAmCWC,CAAQJ,GAEXK,QAAQC,KAAK,yEAEbN,EAAQO,QAAUtC,KAAKyB,OACxB,IAIczB,KAAAuC,UAAY,IAAI9C,EAAoBO,KAAM,CAC3DD,SAAU,QACVS,OAAQ,IAAOR,KAAKwC,MAAQV,CAAI,kCAAiC9B,KAAK2B,YAAW3B,KAAKwC,cAAgB9B,EACtGR,aAAc6B,IACZA,EAAQd,GAAKjB,KAAK0B,MAAM,IAIlB1B,KAAAyC,UAAY,IAAIlC,EAAmBP,KAAM,CACjDQ,OAAQ,IACNsB,CAAI,8BAGQ9B,KAAK0C,uBACJ1C,KAAK2C,gBACZC,EAAI5C,KAAK6C,qCAEN7C,KAAKyB,+BAEHqB,EAAK9C,KAAK+C,kBACRD,EAAK9C,KAAKgD,qBACRhD,KAAKiD,uBACJjD,KAAKkD,wBACLlD,KAAKmD,+BACEL,EAAK9C,KAAKoD,oCACdN,EAAK9C,KAAKqD,wBAClBP,EAAK9C,KAAKsD,eAcmBtD,KAAOiD,SAAY,EA4DvDjD,KAAA0C,WAAca,IACpBA,EAAEC,kBACFxD,KAAKyD,cAAc,IAAIC,MAAM,OAAQ,CAAEC,SAAS,EAAOC,YAAY,IAAQ,EAGrE5D,KAAA2C,YAAeY,IACrBA,EAAEC,kBACFxD,KAAKyD,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAOC,YAAY,IAAQ,CAE/E,CA7EC,aAAuBC,GAGtB,CAOD,MAAArD,GACE,OAAOsB,CAAI,+DAEkC9B,KAAK8D,2CAE1C9D,KAAKiD,QAAUnB,CAAI,4BAA8BpB,+DC7FpBqD,EDkG3B/D,KAAKgE,UClGsCC,EDmG3C,IAAMnC,CAAI,gECnGsDoC,EDuGhElD,GAAWc,CAAI,yBAAyBd,2BCtG7C+C,EAAYG,EAAQD,KAAWA,8CDwGajE,KAAKmE,yIAKOnE,KAAKoE,gGC9G7BL,EAAgBE,EAAqBC,CDqH3E,CAGS,mBAAAG,CAAoBC,IAGvBA,GAAmBtE,KAAKiD,SAC3BjD,KAAKuE,iBAER,CAEO,eAAAA,GACOvE,KAAKwE,cAEbC,iBAAwB,oBAAoBzE,KAAK+C,UAAU2B,SAAQC,IAClEA,IAAU3E,OACZ2E,EAAM1B,SAAU,EACjB,GAEJ,CAES,YAAAa,CAAaP,GACrBA,EAAEC,kBACF,MAAMoB,EAASrB,EAAEqB,OAEjB5E,KAAKiD,QAAU2B,EAAO3B,QACtBnD,MAAMgE,aAAaP,EACpB,GAhIMnC,EAAMyD,OAAG,CAACC,EAAgBC,EAAgBC,GAsELC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAgCjE,EAAAkE,UAAA,eAAA,GAkC1DL,EAAA,CADTM,EAAQ,YAORnE,EAAAkE,UAAA,sBAAA,MA/GkBlE,EAAK6D,EAAA,CADzBO,EAAc,eACMpE,SAAAA"}
+{"version":3,"file":"Radio.js","sources":["../src/radio/Radio.ts","../src/common/directives/wrapIf.ts"],"sourcesContent":["import { html, LitElement, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { LightSlotController } from \"../common/controllers/LightSlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { wrapIf } from \"../common/directives/wrapIf.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Radio.css\"\n\nlet id = 0\nconst createId = (suffix: string) => `nord-radio-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n  return element.localName === \"label\"\n}\n\n/**\n * Radio buttons are graphical user interface elements that allow user to choose only one option from\n * a predefined set of mutually exclusive options.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-radio\")\nexport default class Radio extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override inputId = createId(\"input\")\n  protected override hintId = createId(\"hint\")\n  protected override errorId = createId(\"error\")\n\n  /**\n   * For accessibility reasons, we render some parts of the component to the light DOM.\n   */\n  protected override hintSlot = new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected override labelSlot = new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })\n\n  protected override errorSlot = new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected inputSlot = new LightDomController(this, {\n    render: () =>\n      html`\n        <input\n          slot=\"input\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          ${ref(this.focusableRef)}\n          class=\"n-input\"\n          id=${this.inputId}\n          type=\"radio\"\n          name=${cond(this.name)}\n          .value=${cond(this.value)}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-describedby=${cond(this.getDescribedBy())}\n          aria-invalid=${cond(this.getInvalid())}\n          form=${cond(this._formId)}\n        />\n      `,\n  })\n\n  // eslint-disable-next-line class-methods-use-this\n  protected override get formValue() {\n    // opt out of formdata event, since radio button is in light dom\n    return undefined\n  }\n\n  /**\n   * Controls whether the checkbox is checked or not.\n   */\n  @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n  render() {\n    return html`\n      <div class=\"n-flex\">\n        <div class=\"n-input-container\" @change=${this.handleChange}>\n          <slot name=\"input\"></slot>\n          ${this.checked ? html`<div class=\"n-dot\"></div>` : nothing}\n        </div>\n        <div class=\"n-expand\">\n          <div class=\"n-label-container\">\n            ${wrapIf(\n              this.hideLabel,\n              () => html`\n                <slot name=\"label\"></slot>\n                <slot name=\"label-internal\"></slot>\n              `,\n              content => html`<nord-visually-hidden>${content}</nord-visually-hidden>`\n            )}\n            <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n              <slot name=\"hint\"></slot>\n              <slot name=\"hint-internal\"></slot>\n            </div>\n          </div>\n          <div class=\"n-caption n-error\" role=\"alert\" ?hidden=${!this.hasError}>\n            <slot name=\"error\"></slot>\n            <slot name=\"error-internal\"></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"checked\")\n  protected handleCheckedChange(previousChecked: boolean) {\n    // if this component was previous unchecked but is now checked,\n    // then we need to uncheck any radios in the same group\n    if (!previousChecked && this.checked) {\n      this.uncheckSiblings()\n    }\n  }\n\n  private uncheckSiblings() {\n    const root = this.getRootNode() as Document | ShadowRoot\n\n    root.querySelectorAll<Radio>(`nord-radio[name=\"${this.name}\"]`).forEach(radio => {\n      if (radio !== this) {\n        radio.checked = false\n      }\n    })\n  }\n\n  protected handleChange(e: Event): void {\n    e.stopPropagation()\n    const target = e.target as HTMLInputElement\n\n    this.checked = target.checked\n    super.handleChange(e)\n  }\n\n  private handleBlur = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"blur\", { bubbles: false, cancelable: true }))\n  }\n\n  private handleFocus = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"focus\", { bubbles: false, cancelable: true }))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-radio\": Radio\n  }\n}\n","// some clever typing so that TS knows what happens if you pass true/false values\nexport function wrapIf<TInner, TWrapper>(\n  condition: false,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner\nexport function wrapIf<TInner, TWrapper>(\n  condition: true,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TWrapper\nexport function wrapIf<TInner, TWrapper>(\n  condition: unknown,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner | TWrapper\n\n/**\n * @returns if condition is truthy, return result of wrapper, passing result of inner as arg. if falsy, return result of inner\n */\nexport function wrapIf<TInner, TWrapper>(condition: any, inner: () => TInner, wrapper: (innards: TInner) => TWrapper) {\n  return condition ? wrapper(inner()) : inner()\n}\n"],"names":["id","createId","suffix","Radio","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","hintId","errorId","hintSlot","LightSlotController","slotName","render","hint","html","nothing","syncLightDom","element","labelSlot","label","localName","isLabel","console","warn","htmlFor","errorSlot","error","inputSlot","LightDomController","handleBlur","handleFocus","ref","focusableRef","cond","name","value","checked","disabled","required","getDescribedBy","getInvalid","_formId","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","formValue","handleChange","condition","hideLabel","inner","wrapper","content","hasHint","hasError","handleCheckedChange","previousChecked","uncheckSiblings","getRootNode","querySelectorAll","forEach","radio","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"2jGAiBA,IAAIA,EAAK,EACT,MAAMC,EAAYC,GAAmB,cAAcA,KAAUF,MAiB9C,IAAMG,EAAN,cAAoBC,EAAoBC,EAAWC,EAAeC,MAAlE,WAAAC,uBAGMC,KAAAC,QAAUT,EAAS,SACnBQ,KAAAE,OAASV,EAAS,QAClBQ,KAAAG,QAAUX,EAAS,SAKnBQ,KAAAI,SAAW,IAAIC,EAAoBL,KAAM,CAC1DM,SAAU,OACVC,OAAQ,IAAOP,KAAKQ,KAAOC,CAAI,iCAAgCT,KAAKE,WAAUF,KAAKQ,aAAeE,EAClGC,aAAcC,IACZA,EAAQrB,GAAKS,KAAKE,MAAM,IAITF,KAAAa,UAAY,IAAIR,EAAoBL,KAAM,CAC3DM,SAAU,QACVC,OAAQ,IAAOP,KAAKc,MAAQL,CAAI,qCAAoCT,KAAKC,YAAWD,KAAKc,gBAAkBJ,EAC3GC,aAAcC,KApClB,SAAiBA,GACf,MAA6B,UAAtBA,EAAQG,SACjB,CAmCWC,CAAQJ,GAEXK,QAAQC,KAAK,yEAEbN,EAAQO,QAAUnB,KAAKC,OACxB,IAIcD,KAAAoB,UAAY,IAAIf,EAAoBL,KAAM,CAC3DM,SAAU,QACVC,OAAQ,IAAOP,KAAKqB,MAAQZ,CAAI,kCAAiCT,KAAKG,YAAWH,KAAKqB,cAAgBX,EACtGC,aAAcC,IACZA,EAAQrB,GAAKS,KAAKE,MAAM,IAIlBF,KAAAsB,UAAY,IAAIC,EAAmBvB,KAAM,CACjDO,OAAQ,IACNE,CAAI,8BAGQT,KAAKwB,uBACJxB,KAAKyB,gBACZC,EAAI1B,KAAK2B,qCAEN3B,KAAKC,+BAEH2B,EAAK5B,KAAK6B,kBACRD,EAAK5B,KAAK8B,qBACR9B,KAAK+B,uBACJ/B,KAAKgC,wBACLhC,KAAKiC,+BACEL,EAAK5B,KAAKkC,oCACdN,EAAK5B,KAAKmC,wBAClBP,EAAK5B,KAAKoC,eAcmBpC,KAAO+B,SAAY,EA4DvD/B,KAAAwB,WAAca,IACpBA,EAAEC,kBACFtC,KAAKuC,cAAc,IAAIC,MAAM,OAAQ,CAAEC,SAAS,EAAOC,YAAY,IAAQ,EAGrE1C,KAAAyB,YAAeY,IACrBA,EAAEC,kBACFtC,KAAKuC,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAOC,YAAY,IAAQ,CAE/E,CA7EC,aAAuBC,GAGtB,CAOD,MAAApC,GACE,OAAOE,CAAI,+DAEkCT,KAAK4C,2CAE1C5C,KAAK+B,QAAUtB,CAAI,4BAA8BC,+DC7FpBmC,EDkG3B7C,KAAK8C,UClGsCC,EDmG3C,IAAMtC,CAAI,gECnGsDuC,EDuGhEC,GAAWxC,CAAI,yBAAyBwC,2BCtG7CJ,EAAYG,EAAQD,KAAWA,8CDwGa/C,KAAKkD,yIAKOlD,KAAKmD,gGC9G7BN,EAAgBE,EAAqBC,CDqH3E,CAGS,mBAAAI,CAAoBC,IAGvBA,GAAmBrD,KAAK+B,SAC3B/B,KAAKsD,iBAER,CAEO,eAAAA,GACOtD,KAAKuD,cAEbC,iBAAwB,oBAAoBxD,KAAK6B,UAAU4B,SAAQC,IAClEA,IAAU1D,OACZ0D,EAAM3B,SAAU,EACjB,GAEJ,CAES,YAAAa,CAAaP,GACrBA,EAAEC,kBACF,MAAMqB,EAAStB,EAAEsB,OAEjB3D,KAAK+B,QAAU4B,EAAO5B,QACtB6B,MAAMhB,aAAaP,EACpB,GAhIM3C,EAAMmE,OAAG,CAACC,EAAgBC,EAAgBC,GAsELC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAgC3E,EAAA4E,UAAA,eAAA,GAkC1DL,EAAA,CADTM,EAAQ,YAOR7E,EAAA4E,UAAA,sBAAA,MA/GkB5E,EAAKuE,EAAA,CADzBO,EAAc,eACM9E,SAAAA"}

package/lib/SegmentedControl.js

@@ -0,0 +1,2 @@
+import{i as e,x as o,_ as r,e as t,s as n}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{o as d}from"./class-map-512f0bc1.js";import{S as l}from"./SlotController-d733c575.js";import{D as i}from"./DraftComponentMixin-9e4b7b34.js";import{s as a}from"./Component-2253424f.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";const c=e`:host{display:inline-block}:host([expand]){display:block}.n-segmented-control{border:1px solid var(--n-color-border);border-radius:var(--n-border-radius-s);background-color:var(--n-color-nav-hover);display:inline-flex;gap:1px}.n-disabled{opacity:.5;border-color:var(--n-color-border);background-color:var(--n-color-border)}::slotted(nord-segmented-control-item){inline-size:100%}::slotted(nord-segmented-control-item:not([checked]):first-of-type){--n-segmented-control-item-border-radius:calc(var(--n-border-radius-s) - 1px) 0 0 calc(var(--n-border-radius-s) - 1px)}::slotted(nord-segmented-control-item:not([checked]):last-of-type){--n-segmented-control-item-border-radius:0 calc(var(--n-border-radius-s) - 1px) calc(var(--n-border-radius-s) - 1px) 0}::slotted(nord-segmented-control-item)::after{content:"";background:var(--n-color-border);position:absolute;inline-size:1.5px;inset-block-start:27.5%;inset-inline-end:-1px;block-size:45%;z-index:var(--n-index-masked)}::slotted(nord-segmented-control-item:last-of-type)::after,::slotted(nord-segmented-control-item[checked])::after{display:none}:host([expand]) .n-segmented-control{--n-segmented-control-item-inline-size:100%;display:flex;flex-direction:row;align-items:stretch;gap:0}`;let m=class extends(i(n)){constructor(){super(...arguments),this.defaultSlot=new l(this),this.expand=!1}render(){const e=this.defaultSlot.assigned.every((e=>!!e.hasAttribute("disabled")));return o`<div class="${d({"n-segmented-control":!0,"n-disabled":e})}"><slot></slot></div>`}};m.styles=[a,c],r([s({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),m=r([t("nord-segmented-control")],m);var p=m;export{p as default};
+//# sourceMappingURL=SegmentedControl.js.map

package/lib/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sources":["../src/segmented-control/SegmentedControl.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./SegmentedControl.css\"\n\n/**\n * Segmented control is used to pick one choice from a set of\n * closely related choices, and immediately apply that selection.\n *\n * @status draft\n * @category action\n * @slot - Default slot.\n *\n */\n@customElement(\"nord-segmented-control\")\nexport default class SegmentedControl extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n\n  /**\n   * Controls whether the segmented control expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const isDisabled = this.defaultSlot.assigned.every(node => {\n      if (node.hasAttribute(\"disabled\")) {\n        return true\n      }\n      return false\n    })\n\n    return html`<div\n      class=${classMap({\n        \"n-segmented-control\": true,\n        \"n-disabled\": isDisabled,\n      })}\n    >\n      <slot></slot>\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-segmented-control\": SegmentedControl\n  }\n}\n"],"names":["SegmentedControl","DraftComponentMixin","LitElement","constructor","this","defaultSlot","SlotController","expand","render","isDisabled","assigned","every","node","hasAttribute","html","classMap","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"qmDAmBe,IAAMA,EAAN,cAA+BC,EAAoBC,IAAnD,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MAKGA,KAAMG,QAAG,CAmBtD,CAjBC,MAAAC,GACE,MAAMC,EAAaL,KAAKC,YAAYK,SAASC,OAAMC,KAC7CA,EAAKC,aAAa,cAMxB,OAAOC,CAAI,eACDC,EAAS,CACf,uBAAuB,EACvB,aAAcN,0BAKnB,GAzBMT,EAAAgB,OAAS,CAACC,EAAgBC,GAOWC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBvB,EAAAwB,UAAA,cAAA,GARvCxB,EAAgBmB,EAAA,CADpCM,EAAc,2BACMzB,SAAAA"}

package/lib/SegmentedControlItem.js

@@ -0,0 +1,2 @@
+import{i as e,x as t,A as n,_ as o,e as r,s as i}from"./query-assigned-elements-92ce7494.js";import{n as a}from"./property-c78323b1.js";import{n as s}from"./ref-99418ab4.js";import{o as l}from"./observe-a9c6dfb6.js";import{c}from"./cond-bb9ee891.js";import{L as m}from"./LightDomController-5388d84c.js";import{L as d}from"./LightSlotController-c51e9cf5.js";import{N as g}from"./events-d9666e88.js";import{D as p}from"./DraftComponentMixin-9e4b7b34.js";import{F as v}from"./FocusableMixin-d30213b4.js";import{I as b}from"./InputMixin-83b5bd46.js";import{s as h}from"./Component-2253424f.js";import"./directive-e9ce14b4.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";const u=e`:host{--_n-segmented-control-item-gap:var(--n-segmented-control-item-gap, var(--n-space-xs));--_n-segmented-control-item-padding-inline:var(--n-segmented-control-item-padding-inline, calc(var(--n-space-m) / 1.2));--_n-segmented-control-item-min-block-size:var(--n-segmented-control-item-min-block-size, calc(var(--n-space-xl) - 2px));--_n-segmented-control-item-font-size:var(--n-segmented-control-item-font-size, var(--n-font-size-m));--_n-segmented-control-item-font-weight:var(--n-segmented-control-item-font-weight, var(--n-font-weight));--_n-segmented-control-item-gradient:var(--n-segmented-control-item-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%));--_n-segmented-control-item-background-color:var(--n-segmented-control-item-background-color, var(--n-color-nav-hover));--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text-weaker));--_n-segmented-control-item-border-radius:var(--n-segmented-control-item-border-radius, 0);--_n-segmented-control-item-inline-size:var(--n-segmented-control-item-inline-size, auto);--_n-segmented-control-item-box-shadow:var(--n-segmented-control-item-box-shadow, none);--_n-segmented-control-item-icon-size:var(--n-size-icon-s);--_n-segmented-control-item-opacity:1;position:relative;flex:1}::slotted(label){--n-icon-size:var(--_n-segmented-control-item-icon-size);display:flex!important;align-items:center;justify-content:center;border-radius:var(--_n-segmented-control-item-border-radius)!important;transition:var(--n-transition-quickly)!important;transition-property:background-color,color,border-color!important;font-family:var(--n-font-family)!important;font-size:var(--_n-segmented-control-item-font-size)!important;font-feature-settings:var(--n-font-features);font-weight:var(--_n-segmented-control-item-font-weight)!important;line-height:var(--n-line-height-form)!important;color:var(--_n-segmented-control-item-color)!important;padding:calc(var(--n-space-xs) - 1px) var(--_n-segmented-control-item-padding-inline)!important;background-color:var(--_n-segmented-control-item-background-color)!important;box-shadow:var(--_n-segmented-control-item-box-shadow)!important;cursor:pointer;position:relative!important;gap:var(--_n-segmented-control-item-gap);white-space:nowrap!important;inline-size:var(--_n-segmented-control-item-inline-size);-webkit-user-select:none;user-select:none;border:0!important;opacity:var(--_n-segmented-control-item-opacity);min-block-size:var(--_n-segmented-control-item-min-block-size)!important}::slotted(input){position:absolute!important;appearance:none!important;background:0 0!important;border:0!important;transition:var(--n-transition-quickly)!important;transition-property:background-color,color,border-color,box-shadow!important;border-radius:var(--n-border-radius-s)!important;inset-block-start:0!important;inset-inline-start:0!important;inline-size:100%!important;block-size:100%!important;padding:0!important;margin:0!important}::slotted(input:focus-visible),:host([checked]){z-index:var(--n-index-mask)}:host([checked]) ::slotted(label){--_n-segmented-control-item-background-color:var(--n-segmented-control-item-background-color, var(--n-color-surface));--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text));--_n-segmented-control-item-border-radius:var(--n-segmented-control-item-border-radius, var(--n-border-radius-s));--_n-segmented-control-item-box-shadow:var(--n-segmented-control-item-box-shadow, 0 0 0 1px var(--n-color-border-strong), var(--n-box-shadow), var(--n-box-shadow));z-index:var(--n-index-mask)}:host([checked]) ::slotted(label)::after{content:"";position:absolute;background:0 0;background-image:var(--_n-segmented-control-item-gradient);border-radius:var(--n-border-radius-s);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([checked]) ::slotted(label:hover){--_n-segmented-control-item-background-color:var(--n-segmented-control-item-background-color, var(--n-color-button-hover));--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text));--_n-segmented-control-item-box-shadow:var(--n-segmented-control-item-box-shadow, 0 0 0 1px var(--n-color-border-hover), var(--n-box-shadow), var(--n-box-shadow))}:host([disabled]){--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text-weak));pointer-events:none}:host([disabled]:not([checked])){--_n-segmented-control-item-background-color:var(--n-segmented-control-item-background-color, transparent)}::slotted(label:hover){--_n-segmented-control-item-background-color:var(--n-segmented-control-item-background-color, var(--n-color-surface-lowered));--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text))}::slotted(input:focus){outline:0}::slotted(input:focus-visible){box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)!important;z-index:calc(var(--n-index-mask) + 1)!important}::slotted(label:active){opacity:.8;transition:none}:host([size="s"]){--_n-segmented-control-item-gap:var(--n-segmented-control-item-gap, var(--n-space-xs));--_n-segmented-control-item-padding-inline:var(--n-segmented-control-item-padding-inline, calc(var(--n-space-s) + 1px));--_n-segmented-control-item-min-block-size:var(--n-segmented-control-item-min-block-size, calc(var(--n-space-l) + var(--n-space-xs) - 2px));--_n-segmented-control-item-font-size:var(--n-segmented-control-item-font-size, var(--n-font-size-s));--_n-segmented-control-item-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-segmented-control-item-gap:var(--n-segmented-control-item-gap, var(--n-space-s));--_n-segmented-control-item-padding-inline:var(--n-segmented-control-item-padding-inline, calc(var(--n-space-l) / 1.3));--_n-segmented-control-item-min-block-size:var(--n-segmented-control-item-min-block-size, calc(var(--n-space-xxl) - var(--n-space-l) - 2px));--_n-segmented-control-item-font-size:var(--n-segmented-control-item-font-size, var(--n-font-size-l));--_n-segmented-control-item-font-weight:var(--n-segmented-control-item-font-weight, var(--n-font-weight-active));--_n-segmented-control-item-icon-size:var(--n-size-icon-m)}`;let f=0;let k=class extends(p(b(v(i)))){constructor(){super(...arguments),this.inputId=`nord-segmented-control-item-${"input"}-${f++}`,this.inputSlot=new m(this,{render:()=>t`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${s(this.focusableRef)} id="${this.inputId}" type="radio" class="n-input" name="${c(this.name)}" .value="${c(this.value)}" .checked="${this.checked}" ?disabled="${this.disabled}" form="${c(this._formId)}">`}),this.labelSlot=new d(this,{slotName:"label",render:()=>this.label?t`<label slot="label-internal" for="${this.inputId}" class="n-segmented-control-item">${this.label}</label>`:n,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in Segmented Control\'s "label" slot'):e.htmlFor=this.inputId}}),this.checked=!1,this.size="m",this.label="",this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}render(){return t`<div class="n-segmented-control-item" @change="${this.handleChange}"><slot name="input"></slot><slot name="label"></slot><slot name="label-internal"></slot></div>`}handleCheckedChange(e){!e&&this.checked&&this.uncheckSiblings()}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-segmented-control-item[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){const t=e.target;this.checked=t.checked,e.stopPropagation(),this.dispatchEvent(new g("change"))}handleInput(e){e.stopPropagation();const t=e.target;this.value=t.value,this.dispatchEvent(new g("input"))}};k.styles=[h,u],o([a({type:Boolean,reflect:!0})],k.prototype,"checked",void 0),o([a({reflect:!0})],k.prototype,"size",void 0),o([a({reflect:!0})],k.prototype,"label",void 0),o([l("checked")],k.prototype,"handleCheckedChange",null),k=o([r("nord-segmented-control-item")],k);var x=k;export{x as default};
+//# sourceMappingURL=SegmentedControlItem.js.map

package/lib/SegmentedControlItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlItem.js","sources":["../src/segmented-control-item/SegmentedControlItem.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { LightSlotController } from \"../common/controllers/LightSlotController.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./SegmentedControlItem.css\"\n\nlet id = 0\nconst createId = (suffix: string) => `nord-segmented-control-item-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n  return element.localName === \"label\"\n}\n\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\n/**\n * Segmented control items populate a segmented control with options.\n * Every item should be placed inside a segmented control.\n *\n * @status draft\n * @category action\n * @slot label - Use when a label requires more than plain text.\n *\n * @cssprop [--n-segmented-control-item-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the item, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-segmented-control-item-gap=var(--n-space-xs)] - Controls the spacing between elements within the item, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-segmented-control-item-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the item.\n * @cssprop [--n-segmented-control-item-background-color=var(--n-color-nav-hover)] - Controls the background color of the item, using our [color tokens](/tokens/#color).\n * @cssprop [--n-segmented-control-item-color=var(--n-color-text-weaker)] - Controls the color of the text within the item, using our [color tokens](/tokens/#color).\n * @cssprop [--n-segmented-control-item-padding-inline=calc(var(--n-space-m) / 1.2)] - Controls the inline, or left and right, padding of the item.\n * @cssprop [--n-segmented-control-item-box-shadow=none] - Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-segmented-control-item-font-size=var(--n-font-size-m)] - Controls the size of the text within the item, using our [font tokens](/tokens/#font).\n * @cssprop [--n-segmented-control-item-font-weight=var(--n-font-weight)] - Controls the weight of the text within the item, using our [font tokens](/tokens/#font).\n * @cssprop [--n-segmented-control-item-min-block-size=calc(var(--n-space-xl) - 2px)] - Controls the minimum block size, or height, of the item using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-segmented-control-item-inline-size=auto] - Controls the inline size of the item.\n */\n@customElement(\"nord-segmented-control-item\")\nexport default class SegmentedControlItem extends DraftComponentMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, style]\n\n  protected inputId = createId(\"input\")\n\n  /**\n   * For accessibility reasons, we render the form parts of the component to the light DOM.\n   */\n  protected inputSlot = new LightDomController(this, {\n    render: () =>\n      html`\n        <input\n          slot=\"input\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          type=\"radio\"\n          class=\"n-input\"\n          name=${cond(this.name)}\n          .value=${cond(this.value)}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          form=${cond(this._formId)}\n        />\n      `,\n  })\n\n  protected labelSlot = new LightSlotController(this, {\n    slotName: \"label\",\n    render: () =>\n      this.label\n        ? html`<label slot=\"label-internal\" for=${this.inputId} class=\"n-segmented-control-item\">${this.label}</label>`\n        : nothing,\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in Segmented Control's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })\n\n  /**\n   * Controls whether the segmented control item is checked or not.\n   */\n  @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n  /**\n   * The size of the segmented control item.\n   * This affects font-size and padding.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n  /**\n   * Label for the segmented control item.\n   */\n  @property({ reflect: true }) label: string = \"\"\n\n  render() {\n    return html`<div class=\"n-segmented-control-item\" @change=${this.handleChange}>\n      <slot name=\"input\"></slot>\n      <slot name=\"label\"></slot>\n      <slot name=\"label-internal\"></slot>\n    </div>`\n  }\n\n  @observe(\"checked\")\n  protected handleCheckedChange(previousChecked: boolean) {\n    // if this component was previous unchecked but is now checked,\n    // then we need to uncheck any items in the same group\n    if (!previousChecked && this.checked) {\n      this.uncheckSiblings()\n    }\n  }\n\n  private uncheckSiblings() {\n    const root = this.getRootNode() as Document | ShadowRoot\n\n    root\n      .querySelectorAll<SegmentedControlItem>(`nord-segmented-control-item[name=\"${this.name}\"]`)\n      .forEach(segmentedControlItem => {\n        if (segmentedControlItem !== this) {\n          segmentedControlItem.checked = false\n        }\n      })\n  }\n\n  protected handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n\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  private handleBlur = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"blur\", { bubbles: false, cancelable: true }))\n  }\n\n  private handleFocus = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"focus\", { bubbles: false, cancelable: true }))\n  }\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\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-segmented-control-item\": SegmentedControlItem\n  }\n}\n"],"names":["id","SegmentedControlItem","DraftComponentMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","inputSlot","LightDomController","render","html","handleBlur","handleFocus","ref","focusableRef","cond","name","value","checked","disabled","_formId","labelSlot","LightSlotController","slotName","label","nothing","syncLightDom","element","localName","isLabel","console","warn","htmlFor","size","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","handleChange","handleCheckedChange","previousChecked","uncheckSiblings","getRootNode","querySelectorAll","forEach","segmentedControlItem","target","NordEvent","handleInput","styles","componentStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"6xNAgBA,IAAIA,EAAK,EA8BM,IAAMC,EAAN,cAAmCC,EAAoBC,EAAWC,EAAeC,MAAjF,WAAAC,uBAGHC,KAAAC,QAhCyB,+BAgCN,WAhC+CR,MAqClEO,KAAAE,UAAY,IAAIC,EAAmBH,KAAM,CACjDI,OAAQ,IACNC,CAAI,8BAGQL,KAAKM,uBACJN,KAAKO,gBACZC,EAAIR,KAAKS,qBACNT,KAAKC,+CAGHS,EAAKV,KAAKW,kBACRD,EAAKV,KAAKY,qBACRZ,KAAKa,uBACJb,KAAKc,mBACVJ,EAAKV,KAAKe,eAKff,KAAAgB,UAAY,IAAIC,EAAoBjB,KAAM,CAClDkB,SAAU,QACVd,OAAQ,IACNJ,KAAKmB,MACDd,CAAI,qCAAoCL,KAAKC,6CAA4CD,KAAKmB,gBAC9FC,EACNC,aAAcC,KA7DlB,SAAiBA,GACf,MAA6B,UAAtBA,EAAQC,SACjB,CA4DWC,CAAQF,GAEXG,QAAQC,KAAK,qFAEbJ,EAAQK,QAAU3B,KAAKC,OACxB,IAOuCD,KAAOa,SAAY,EAMlCb,KAAI4B,KAAoB,IAKxB5B,KAAKmB,MAAW,GA2CrCnB,KAAAM,WAAcuB,IACpBA,EAAEC,kBACF9B,KAAK+B,cAAc,IAAIC,MAAM,OAAQ,CAAEC,SAAS,EAAOC,YAAY,IAAQ,EAGrElC,KAAAO,YAAesB,IACrBA,EAAEC,kBACF9B,KAAK+B,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAOC,YAAY,IAAQ,CAa/E,CA7DC,MAAA9B,GACE,OAAOC,CAAI,kDAAiDL,KAAKmC,6GAKlE,CAGS,mBAAAC,CAAoBC,IAGvBA,GAAmBrC,KAAKa,SAC3Bb,KAAKsC,iBAER,CAEO,eAAAA,GACOtC,KAAKuC,cAGfC,iBAAuC,qCAAqCxC,KAAKW,UACjF8B,SAAQC,IACHA,IAAyB1C,OAC3B0C,EAAqB7B,SAAU,EAChC,GAEN,CAES,YAAAsB,CAAaN,GACrB,MAAMc,EAASd,EAAEc,OACjB3C,KAAKa,QAAU8B,EAAO9B,QAEtBgB,EAAEC,kBAKF9B,KAAK+B,cAAc,IAAIa,EAAU,UAClC,CAYS,WAAAC,CAAYhB,GACpBA,EAAEC,kBACF,MAAMa,EAASd,EAAEc,OACjB3C,KAAKY,MAAQ+B,EAAO/B,MAKpBZ,KAAK+B,cAAc,IAAIa,EAAU,SAClC,GAvHMlD,EAAAoD,OAAS,CAACC,EAAgBC,GA8CWC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAgC3D,EAAA4D,UAAA,eAAA,GAMvCL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAmC3D,EAAA4D,UAAA,YAAA,GAK3BL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAA0B3D,EAAA4D,UAAA,aAAA,GAWrCL,EAAA,CADTM,EAAQ,YAOR7D,EAAA4D,UAAA,sBAAA,MA3EkB5D,EAAoBuD,EAAA,CADxCO,EAAc,gCACM9D,SAAAA"}

package/lib/Select.js

@@ -1,2 +1,2 @@
-import{i as o,x as t,_ as e,e as n,s as r}from"./query-assigned-elements-92ce7494.js";import{n as i}from"./property-c78323b1.js";import{l as s}from"./if-defined-cccde88f.js";import{n as a}from"./ref-99418ab4.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-83b5bd46.js";import{F as c}from"./FocusableMixin-d30213b4.js";import{F as p}from"./FormAssociatedMixin-3fa55d53.js";import{A as b}from"./AutocompleteMixin-5a7e10b2.js";import{S as u}from"./SizeMixin-ab074eff.js";import{s as m}from"./Component-2253424f.js";import{s as h}from"./FormField-87551be2.js";import{S as v}from"./SlotController-d733c575.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";import"./LightDomController-5388d84c.js";import"./cond-bb9ee891.js";import"./Spinner.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./FormDataController-592ff3dd.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";var f=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z" fill="currentColor"/></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const x=o`:host{--_n-select-block-size:var(--n-select-block-size, var(--n-space-xl))}.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--_n-select-block-size);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}option{color:initial}nord-button{--n-button-text-align:start}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}.n-label-container:hover+.n-select-container nord-button nord-icon,select:hover+nord-button nord-icon{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;l.registerIcon(f);let g=class extends(u(p(b(d(c(r)))))){constructor(){super(...arguments),this.defaultSlot=new v(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const o=this.options,e=this.getButtonText(o);return t`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&t`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${o.map((o=>this.renderOption(o)))}</select><nord-button size="${this.size}" tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="icon"></slot>${e}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(o){const t=o.find((o=>o.value===this.value.toString()));return t?t.text:this.placeholder?this.placeholder:o[0]?o[0].text:""}renderOption(o){return t`<option value="${s(o.value)}" ?disabled="${o.disabled}" .selected="${o.value===this.value.toString()}">${o.text}</option>`}};g.styles=[m,h,x],e([i({reflect:!0,type:Boolean})],g.prototype,"expand",void 0),g=e([n("nord-select")],g);var j=g;export{j as default};
+import{i as t,x as o,_ as e,e as r,s as n}from"./query-assigned-elements-92ce7494.js";import{n as i}from"./property-c78323b1.js";import{l as s}from"./if-defined-cccde88f.js";import{n as a}from"./ref-99418ab4.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-83b5bd46.js";import{F as c}from"./FocusableMixin-d30213b4.js";import{F as p}from"./FormAssociatedMixin-3fa55d53.js";import{A as u}from"./AutocompleteMixin-5a7e10b2.js";import{S as b}from"./SizeMixin-ab074eff.js";import{s as m}from"./Component-2253424f.js";import{s as h}from"./FormField-87551be2.js";import{S as v}from"./SlotController-d733c575.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";import"./LightDomController-5388d84c.js";import"./cond-bb9ee891.js";import"./Spinner.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./FormDataController-592ff3dd.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";var f=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z" fill="currentColor"/></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const x=t`:host{--_n-select-block-size:var(--n-select-block-size, var(--n-space-xl))}.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--_n-select-block-size);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}option{color:initial}nord-button{--n-button-text-align:start}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;l.registerIcon(f);let g=class extends(b(p(u(d(c(n)))))){constructor(){super(...arguments),this.defaultSlot=new v(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const t=this.options,e=this.getButtonText(t);return o`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&o`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${t.map((t=>this.renderOption(t)))}</select><nord-button size="${this.size}" tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="icon"></slot>${e}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(t){const o=t.find((t=>t.value===this.value.toString()));return o?o.text:this.placeholder?this.placeholder:t[0]?t[0].text:""}renderOption(t){return o`<option value="${s(t.value)}" ?disabled="${t.disabled}" .selected="${t.value===this.value.toString()}">${t.text}</option>`}};g.styles=[m,h,x],e([i({reflect:!0,type:Boolean})],g.prototype,"expand",void 0),g=e([r("nord-select")],g);var j=g;export{j as default};
 //# sourceMappingURL=Select.js.map

package/lib/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../icons/lib/assets/interface-dropdown-small.js","../src/select/Select.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n","/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport * as dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nIcon.registerIcon(dropdownIcon)\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n * @slot icon - Used to place an icon at the start of select.\n *\n * @cssprop [--n-select-block-size=var(--n-space-xl)] - Controls the block size, or height, of the select using our [spacing tokens](/tokens/#space).\n */\n@customElement(\"nord-select\")\nexport default class Select extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.value || undefined\n  }\n\n  private defaultSlot = new SlotController(this)\n\n  protected inputId = \"select\"\n\n  /**\n   * Controls whether the select expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const slottedOptions = this.options\n    const buttonText = this.getButtonText(slottedOptions)\n\n    return html`\n      <slot></slot>\n      ${this.renderLabel()}\n\n      <div class=\"n-select-container\">\n        <select\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          autocomplete=${this.autocomplete as any}\n        >\n          ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n          ${slottedOptions.map(option => this.renderOption(option))}\n        </select>\n\n        <nord-button\n          size=${this.size}\n          tabindex=\"-1\"\n          ?disabled=${this.disabled}\n          ?expand=${this.expand}\n          aria-hidden=\"true\"\n          type=\"button\"\n        >\n          <slot slot=\"start\" name=\"icon\"></slot>\n          ${buttonText}\n          <nord-icon slot=\"end\" name=\"interface-dropdown-small\"></nord-icon>\n        </nord-button>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private get options() {\n    return Array.from(this.querySelectorAll(\"option\"))\n  }\n\n  private getButtonText(options: HTMLOptionElement[]): string {\n    const selected = options.find(option => option.value === this.value.toString())\n\n    if (selected) {\n      return selected.text\n    }\n\n    if (this.placeholder) {\n      return this.placeholder\n    }\n\n    if (options[0]) {\n      return options[0].text\n    }\n\n    return \"\"\n  }\n\n  private renderOption(option: HTMLOptionElement) {\n    return html`\n      <option\n        value=${ifDefined(option.value)}\n        ?disabled=${option.disabled}\n        .selected=${option.value === this.value.toString()}\n      >\n        ${option.text}\n      </option>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-select\": Select\n  }\n}\n"],"names":["Icon","registerIcon","dropdownIcon","Select","SizeMixin","FormAssociatedMixin","AutocompleteMixin","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","inputId","expand","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","placeholder","map","option","renderOption","size","renderError","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"8/BAAe,waACM,gCACD,wqDCmBpBA,EAAKC,aAAaC,GAiBH,IAAMC,EAAN,cAAqBC,EAClCC,EAAoBC,EAAkBC,EAAWC,EAAeC,QADnD,WAAAC,uBASLC,KAAAC,YAAc,IAAIC,EAAeF,MAE/BA,KAAOG,QAAG,SAKwBH,KAAMI,QAAG,CA8EtD,CAzFC,aAAuBC,GACrB,OAAOL,KAAKM,YAASC,CACtB,CAWD,MAAAC,GACE,MAAMC,EAAiBT,KAAKU,QACtBC,EAAaX,KAAKY,cAAcH,GAEtC,OAAOI,CAAI,gBAEPb,KAAKc,wDAIDC,EAAIf,KAAKgB,qBACNhB,KAAKG,uBACEH,KAAKiB,wBACLjB,KAAKkB,mBACVC,EAAUnB,KAAKoB,mBACZpB,KAAKqB,yBACNrB,KAAKsB,kCACKH,EAAUnB,KAAKuB,oCACnBJ,EAAUnB,KAAKwB,gCACfxB,KAAKyB,iBAElBzB,KAAK0B,aAAeb,CAAI,oDAAwCb,KAAKM,UAASN,KAAK0B,0BACnFjB,EAAekB,KAAIC,GAAU5B,KAAK6B,aAAaD,mCAI1C5B,KAAK8B,kCAEA9B,KAAKiB,sBACPjB,KAAKI,kFAKbO,0FAKJX,KAAK+B,eAEV,CAED,WAAYrB,GACV,OAAOsB,MAAMC,KAAKjC,KAAKkC,iBAAiB,UACzC,CAEO,aAAAtB,CAAcF,GACpB,MAAMyB,EAAWzB,EAAQ0B,MAAKR,GAAUA,EAAOtB,QAAUN,KAAKM,MAAM+B,aAEpE,OAAIF,EACKA,EAASG,KAGdtC,KAAK0B,YACA1B,KAAK0B,YAGVhB,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,EACR,CAEO,YAAAT,CAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,EAAOtB,sBACbsB,EAAOX,wBACPW,EAAOtB,QAAUN,KAAKM,MAAM+B,eAEtCT,EAAOU,eAGd,GA1FM9C,EAAM+C,OAAG,CAACC,EAAgBC,EAAgBC,GAaLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBvD,EAAAwD,UAAA,cAAA,GAhBvCxD,EAAMmD,EAAA,CAD1BM,EAAc,gBACMzD,SAAAA"}
+{"version":3,"file":"Select.js","sources":["../../icons/lib/assets/interface-dropdown-small.js","../src/select/Select.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n","/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport * as dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nIcon.registerIcon(dropdownIcon)\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n * @slot icon - Used to place an icon at the start of select.\n *\n * @cssprop [--n-select-block-size=var(--n-space-xl)] - Controls the block size, or height, of the select using our [spacing tokens](/tokens/#space).\n */\n@customElement(\"nord-select\")\nexport default class Select extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.value || undefined\n  }\n\n  private defaultSlot = new SlotController(this)\n\n  protected inputId = \"select\"\n\n  /**\n   * Controls whether the select expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const slottedOptions = this.options\n    const buttonText = this.getButtonText(slottedOptions)\n\n    return html`\n      <slot></slot>\n      ${this.renderLabel()}\n\n      <div class=\"n-select-container\">\n        <select\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          autocomplete=${this.autocomplete as any}\n        >\n          ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n          ${slottedOptions.map(option => this.renderOption(option))}\n        </select>\n\n        <nord-button\n          size=${this.size}\n          tabindex=\"-1\"\n          ?disabled=${this.disabled}\n          ?expand=${this.expand}\n          aria-hidden=\"true\"\n          type=\"button\"\n        >\n          <slot slot=\"start\" name=\"icon\"></slot>\n          ${buttonText}\n          <nord-icon slot=\"end\" name=\"interface-dropdown-small\"></nord-icon>\n        </nord-button>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private get options() {\n    return Array.from(this.querySelectorAll(\"option\"))\n  }\n\n  private getButtonText(options: HTMLOptionElement[]): string {\n    const selected = options.find(option => option.value === this.value.toString())\n\n    if (selected) {\n      return selected.text\n    }\n\n    if (this.placeholder) {\n      return this.placeholder\n    }\n\n    if (options[0]) {\n      return options[0].text\n    }\n\n    return \"\"\n  }\n\n  private renderOption(option: HTMLOptionElement) {\n    return html`\n      <option\n        value=${ifDefined(option.value)}\n        ?disabled=${option.disabled}\n        .selected=${option.value === this.value.toString()}\n      >\n        ${option.text}\n      </option>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-select\": Select\n  }\n}\n"],"names":["Icon","registerIcon","dropdownIcon","Select","SizeMixin","FormAssociatedMixin","AutocompleteMixin","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","inputId","expand","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","placeholder","map","option","renderOption","size","renderError","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"8/BAAe,waACM,gCACD,kiDCmBpBA,EAAKC,aAAaC,GAiBH,IAAMC,EAAN,cAAqBC,EAClCC,EAAoBC,EAAkBC,EAAWC,EAAeC,QADnD,WAAAC,uBASLC,KAAAC,YAAc,IAAIC,EAAeF,MAE/BA,KAAOG,QAAG,SAKwBH,KAAMI,QAAG,CA8EtD,CAzFC,aAAuBC,GACrB,OAAOL,KAAKM,YAASC,CACtB,CAWD,MAAAC,GACE,MAAMC,EAAiBT,KAAKU,QACtBC,EAAaX,KAAKY,cAAcH,GAEtC,OAAOI,CAAI,gBAEPb,KAAKc,wDAIDC,EAAIf,KAAKgB,qBACNhB,KAAKG,uBACEH,KAAKiB,wBACLjB,KAAKkB,mBACVC,EAAUnB,KAAKoB,mBACZpB,KAAKqB,yBACNrB,KAAKsB,kCACKH,EAAUnB,KAAKuB,oCACnBJ,EAAUnB,KAAKwB,gCACfxB,KAAKyB,iBAElBzB,KAAK0B,aAAeb,CAAI,oDAAwCb,KAAKM,UAASN,KAAK0B,0BACnFjB,EAAekB,KAAIC,GAAU5B,KAAK6B,aAAaD,mCAI1C5B,KAAK8B,kCAEA9B,KAAKiB,sBACPjB,KAAKI,kFAKbO,0FAKJX,KAAK+B,eAEV,CAED,WAAYrB,GACV,OAAOsB,MAAMC,KAAKjC,KAAKkC,iBAAiB,UACzC,CAEO,aAAAtB,CAAcF,GACpB,MAAMyB,EAAWzB,EAAQ0B,MAAKR,GAAUA,EAAOtB,QAAUN,KAAKM,MAAM+B,aAEpE,OAAIF,EACKA,EAASG,KAGdtC,KAAK0B,YACA1B,KAAK0B,YAGVhB,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,EACR,CAEO,YAAAT,CAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,EAAOtB,sBACbsB,EAAOX,wBACPW,EAAOtB,QAAUN,KAAKM,MAAM+B,eAEtCT,EAAOU,eAGd,GA1FM9C,EAAM+C,OAAG,CAACC,EAAgBC,EAAgBC,GAaLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBvD,EAAAwD,UAAA,cAAA,GAhBvCxD,EAAMmD,EAAA,CAD1BM,EAAc,gBACMzD,SAAAA"}

package/lib/Stack.js

@@ -1,2 +1,2 @@
-import{i as t,_ as e,s,x as n,e as a}from"./query-assigned-elements-92ce7494.js";import{n as o}from"./property-c78323b1.js";import{s as i}from"./Component-2253424f.js";const r=t`:host{--_n-stack-gap:var(--n-stack-gap, var(--n-space-m));display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;color:var(--n-color-text);gap:var(--_n-stack-gap);max-inline-size:100%;inline-size:100%}:host([direction=horizontal]){flex-direction:row}:host([wrap]){flex-wrap:wrap}:host([align-items=center]){align-items:center}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([justify-content=center]){justify-content:center}:host([justify-content=start]){justify-content:flex-start}:host([justify-content=end]){justify-content:flex-end}:host([justify-content=space-between]){justify-content:space-between}:host([justify-content=space-evenly]){justify-content:space-evenly}:host([justify-content=space-around]){justify-content:space-around}::slotted(*){margin:0!important;min-inline-size:0;max-inline-size:100%}:host([gap=none]){--_n-stack-gap:var(--n-stack-gap, 0)}:host([gap="s"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-s))}:host([gap="m"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-m))}:host([gap="l"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-l))}:host([gap=xl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xl))}:host([gap=xxl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xxl))}`;let c=class extends s{constructor(){super(...arguments),this.gap="m",this.direction="vertical",this.alignItems="stretch",this.wrap=!1}render(){return n`<slot></slot>`}};c.styles=[i,r],e([o({reflect:!0})],c.prototype,"gap",void 0),e([o({reflect:!0})],c.prototype,"direction",void 0),e([o({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),e([o({reflect:!0,type:Boolean})],c.prototype,"wrap",void 0),e([o({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=e([a("nord-stack")],c);var p=c;export{p as default};
+import{i as t,_ as e,s,x as a,e as n}from"./query-assigned-elements-92ce7494.js";import{n as o}from"./property-c78323b1.js";import{s as r}from"./Component-2253424f.js";const i=t`:host{--_n-stack-gap:var(--n-stack-gap, var(--n-space-m));display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;color:var(--n-color-text);gap:var(--_n-stack-gap);max-inline-size:100%;inline-size:100%}:host([direction=horizontal]){flex-direction:row}:host([wrap]){flex-wrap:wrap}:host([align-items=center]){align-items:center}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([justify-content=center]){justify-content:center}:host([justify-content=start]){justify-content:flex-start}:host([justify-content=end]){justify-content:flex-end}:host([justify-content=space-between]){justify-content:space-between}:host([justify-content=space-evenly]){justify-content:space-evenly}:host([justify-content=space-around]){justify-content:space-around}::slotted(*){margin:0!important;min-inline-size:0;max-inline-size:100%}:host([gap=none]){--_n-stack-gap:var(--n-stack-gap, 0)}:host([gap=xs]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xs))}:host([gap="s"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-s))}:host([gap="m"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-m))}:host([gap="l"]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-l))}:host([gap=xl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xl))}:host([gap=xxl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xxl))}`;let c=class extends s{constructor(){super(...arguments),this.gap="m",this.direction="vertical",this.alignItems="stretch",this.wrap=!1}render(){return a`<slot></slot>`}};c.styles=[r,i],e([o({reflect:!0})],c.prototype,"gap",void 0),e([o({reflect:!0})],c.prototype,"direction",void 0),e([o({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),e([o({reflect:!0,type:Boolean})],c.prototype,"wrap",void 0),e([o({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=e([n("nord-stack")],c);var p=c;export{p as default};
 //# sourceMappingURL=Stack.js.map

package/lib/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sources":["../src/stack/Stack.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Stack.css\"\n\n/**\n * Stack component manages layout of immediate children along the\n * vertical or horizontal axis with optional spacing between each child.\n *\n * @status ready\n * @category structure\n * @slot - The stack content.\n *\n * @cssprop [--n-stack-gap=var(--n-space-m)] - Controls the spacing between items, using our [spacing tokens](/tokens/#space).\n */\n@customElement(\"nord-stack\")\nexport default class Stack extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The space injected between components.\n   */\n  @property({ reflect: true }) gap: \"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n  /**\n   * The direction of the stack.\n   */\n  @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\"\n\n  /**\n   * How to align the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: \"align-items\" }) alignItems?: \"center\" | \"start\" | \"end\" | \"stretch\" = \"stretch\"\n\n  /**\n   * Defines whether the Stack items are forced in a single line\n   * or can be flowed into multiple lines.\n   */\n  @property({ reflect: true, type: Boolean }) wrap = false\n\n  /**\n   * How to justify the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: \"justify-content\" }) justifyContent?:\n    | \"center\"\n    | \"start\"\n    | \"end\"\n    | \"baseline\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\"\n\n  render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-stack\": Stack\n  }\n}\n"],"names":["Stack","LitElement","constructor","this","gap","direction","alignItems","wrap","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","type","Boolean","customElement"],"mappings":"g8CAgBe,IAAMA,EAAN,cAAoBC,EAApB,WAAAC,uBAMgBC,KAAGC,IAA4C,IAK/CD,KAASE,UAA8B,WAKbF,KAAUG,WAA4C,UAMjEH,KAAII,MAAG,CAiBpD,CAHC,MAAAC,GACE,OAAOC,CAAI,eACZ,GArCMT,EAAAU,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0Df,EAAAgB,UAAA,WAAA,GAKlDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDf,EAAAgB,UAAA,iBAAA,GAKvBH,EAAA,CAAtDC,EAAS,CAAEC,SAAS,EAAME,UAAW,iBAAgFjB,EAAAgB,UAAA,kBAAA,GAM1EH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMG,KAAMC,WAAuBnB,EAAAgB,UAAA,YAAA,GAKGH,EAAA,CAA1DC,EAAS,CAAEC,SAAS,EAAME,UAAW,qBAOpBjB,EAAAgB,UAAA,sBAAA,GAlCChB,EAAKa,EAAA,CADzBO,EAAc,eACMpB,SAAAA"}
+{"version":3,"file":"Stack.js","sources":["../src/stack/Stack.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Stack.css\"\n\n/**\n * Stack component manages layout of immediate children along the\n * vertical or horizontal axis with optional spacing between each child.\n *\n * @status ready\n * @category structure\n * @slot - The stack content.\n *\n * @cssprop [--n-stack-gap=var(--n-space-m)] - Controls the spacing between items, using our [spacing tokens](/tokens/#space).\n */\n@customElement(\"nord-stack\")\nexport default class Stack extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The space injected between components.\n   */\n  @property({ reflect: true }) gap: \"none\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n  /**\n   * The direction of the stack.\n   */\n  @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\"\n\n  /**\n   * How to align the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: \"align-items\" }) alignItems?: \"center\" | \"start\" | \"end\" | \"stretch\" = \"stretch\"\n\n  /**\n   * Defines whether the Stack items are forced in a single line\n   * or can be flowed into multiple lines.\n   */\n  @property({ reflect: true, type: Boolean }) wrap = false\n\n  /**\n   * How to justify the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: \"justify-content\" }) justifyContent?:\n    | \"center\"\n    | \"start\"\n    | \"end\"\n    | \"baseline\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\"\n\n  render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-stack\": Stack\n  }\n}\n"],"names":["Stack","LitElement","constructor","this","gap","direction","alignItems","wrap","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","type","Boolean","customElement"],"mappings":"qgDAgBe,IAAMA,EAAN,cAAoBC,EAApB,WAAAC,uBAMgBC,KAAGC,IAAmD,IAKtDD,KAASE,UAA8B,WAKbF,KAAUG,WAA4C,UAMjEH,KAAII,MAAG,CAiBpD,CAHC,MAAAC,GACE,OAAOC,CAAI,eACZ,GArCMT,EAAAU,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiEf,EAAAgB,UAAA,WAAA,GAKzDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDf,EAAAgB,UAAA,iBAAA,GAKvBH,EAAA,CAAtDC,EAAS,CAAEC,SAAS,EAAME,UAAW,iBAAgFjB,EAAAgB,UAAA,kBAAA,GAM1EH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMG,KAAMC,WAAuBnB,EAAAgB,UAAA,YAAA,GAKGH,EAAA,CAA1DC,EAAS,CAAEC,SAAS,EAAME,UAAW,qBAOpBjB,EAAAgB,UAAA,sBAAA,GAlCChB,EAAKa,EAAA,CADzBO,EAAc,eACMpB,SAAAA"}

package/lib/Tag.js

@@ -1,2 +1,2 @@
-import{i as o,x as e,_ as n,e as r,s as t}from"./query-assigned-elements-92ce7494.js";import{n as a}from"./property-c78323b1.js";import{l as i}from"./if-defined-cccde88f.js";import{n as c}from"./ref-99418ab4.js";import{c as s}from"./interface-checked-small-07292940.js";import{c as l}from"./interface-close-small-f26b0299.js";import d from"./Icon.js";import{I as b}from"./InputMixin-83b5bd46.js";import{F as v}from"./FocusableMixin-d30213b4.js";import{N as p}from"./events-d9666e88.js";import{F as h}from"./FormDataController-592ff3dd.js";import{LocalizeController as u}from"./LocalizeController.js";import{s as m}from"./Component-2253424f.js";import"./directive-e9ce14b4.js";import"./state-d31c6912.js";import"./cond-bb9ee891.js";import"./IconManager.js";import"./observe-a9c6dfb6.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";const g=o`:host{--_n-tag-background-color:var(--n-color-nav-hover);--_n-tag-border-color:var(--n-color-border-neutral);--_n-tag-checkbox-size:var(--n-size-icon-s);--_n-tag-checkbox-accent-color:var(--n-color-accent);--_n-tag-checkbox-border-color:var(--n-color-border-hover);--_n-tag-font-size:var(--n-font-size-m);display:inline;vertical-align:middle}.n-expand{flex:1}.n-tag{border-radius:var(--n-border-radius-s);border:1px solid var(--_n-tag-border-color);background:var(--_n-tag-background-color);font-size:var(--_n-tag-font-size);font-family:var(--n-font-family);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-tight);letter-spacing:0;min-block-size:1.75rem;padding:0 var(--n-space-s);color:var(--n-color-text);gap:calc(var(--n-space-xs) * 1.5);align-items:center;display:inline-flex;white-space:nowrap;position:relative}.n-input-container{position:relative}input{appearance:none;background:var(--n-color-active);border:1px solid var(--_n-tag-checkbox-border-color);border-radius:var(--n-border-radius-s);display:block;inline-size:var(--_n-tag-checkbox-size);block-size:var(--_n-tag-checkbox-size);cursor:pointer}:host(:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-border-color:var(--n-color-border-strong);box-shadow:var(--n-box-shadow)}:host([variant=selectable]) .n-tag:hover{--_n-tag-border-color:var(--n-color-border-hover)}.n-tag:has(input:checked){--_n-tag-background-color:var(--n-color-button)}input:checked{--_n-tag-checkbox-border-color:var(--n-color-accent);background:var(--_n-tag-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important}:host([variant=selectable]:focus-within) .n-tag{box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host(:not([disabled])) label:active{opacity:.8;transform:translateY(1px);transition:none}nord-icon.icon-checked{--_n-icon-size:var(--n-size-icon-xxs);display:none;position:absolute;color:var(--n-color-text-on-accent);inset:calc(var(--n-space-xs)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked~nord-icon.icon-checked{display:block}label{-webkit-user-select:none;user-select:none;cursor:pointer}.n-remove-button{-webkit-appearance:none;appearance:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border:0;color:var(--n-color-text);border-radius:calc(var(--n-border-radius-s) - 1px);background:0 0;margin-block-start:calc(var(--n-space-xs) * -1);margin-block-end:calc(var(--n-space-xs) * -1);margin-inline-start:0;margin-inline-end:calc(var(--n-space-s) * -1);padding:calc(var(--n-space-s) + 1px)}.n-remove-button nord-icon{--_n-icon-size:var(--n-size-icon-xxs);color:var(--n-color-icon)}.n-remove-button:hover{background:var(--n-color-surface-lowered)}.n-remove-button:hover nord-icon{color:var(--n-color-icon-hover)}.n-remove-button:focus-visible{outline:0!important}.n-remove-button:focus{outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host(:not([disabled])) .n-remove-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([disabled]:not([variant=default])) .n-tag{--_n-tag-background-color:var(--n-color-surface-lowered);--_n-tag-border-color:var(--_n-tag-background-color);color:var(--n-color-text-weaker);cursor:default;opacity:.5}:host([disabled]) input{background:var(--_n-tag-checkbox-accent-color);cursor:default;opacity:1}:host([disabled]) input:not(:checked){--_n-tag-checkbox-accent-color:var(--n-color-background);--_n-tag-checkbox-border-color:var(--n-color-border-hover)}:host([disabled]) .n-remove-button{cursor:default}:host([disabled]) .n-remove-button:hover{background:0 0}:host([disabled]) .n-remove-button:hover nord-icon{color:var(--n-color-icon)}:host([disabled]:is([variant=selectable],[variant=removable])) .n-tag{box-shadow:none}:host([size="s"]) .n-tag{--_n-tag-font-size:var(--n-font-size-s)}`;d.registerIcon(s),d.registerIcon(l);let f=class extends(function(o){class e extends o{connectedCallback(){super.connectedCallback(),e._warningLogged||(console.warn(`NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,"font-weight:bold","font-weight:normal"),e._warningLogged=!0)}}return e._warningLogged=!1,e}(b(v(t)))){constructor(){super(...arguments),this.localize=new u(this),this.formData=new h(this,{value:()=>this.formValue}),this.inputId="input",this.variant="default",this.checked=!1,this.size="m"}get formValue(){return"selectable"===this.variant&&this.checked?this.value||"on":void 0}handleChange(o){const e=o.target;this.checked=e.checked,o.stopPropagation(),this.dispatchEvent(new p("change"))}handleRemove(){this.dispatchEvent(new p("remove"))}render(){switch(this.variant){case"selectable":return this.renderSelectableTag();case"removable":return this.renderRemovableTag();default:return this.renderStaticTag()}}renderStaticTag(){return e`<div class="n-tag"><slot></slot></div>`}renderRemovableTag(){return e`<div class="n-tag"><slot></slot><button class="n-remove-button" @click="${this.handleRemove}" ?disabled="${this.disabled}"><nord-icon name="interface-close-small" label="${this.localize.term("removeLabel")}"></nord-icon></button></div>`}renderSelectableTag(){return e`<label for="${this.inputId}" class="n-tag"><div class="n-input-container"><input ${c(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${i(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small"></nord-icon></div><div class="n-expand"><slot></slot></div></label>`}};f.styles=[m,g],n([a({reflect:!0})],f.prototype,"variant",void 0),n([a({reflect:!0,type:Boolean})],f.prototype,"checked",void 0),n([a({reflect:!0})],f.prototype,"size",void 0),f=n([r("nord-tag")],f);var k=f;export{k as default};
+import{i as o,x as e,_ as n,e as r,s as a}from"./query-assigned-elements-92ce7494.js";import{n as t}from"./property-c78323b1.js";import{l as i}from"./if-defined-cccde88f.js";import{n as c}from"./ref-99418ab4.js";import{c as s}from"./interface-checked-small-07292940.js";import{c as l}from"./interface-close-small-f26b0299.js";import d from"./Icon.js";import{D as v}from"./DraftComponentMixin-9e4b7b34.js";import{I as b}from"./InputMixin-83b5bd46.js";import{F as p}from"./FocusableMixin-d30213b4.js";import{N as h}from"./events-d9666e88.js";import{F as u}from"./FormDataController-592ff3dd.js";import{LocalizeController as g}from"./LocalizeController.js";import{s as m}from"./Component-2253424f.js";import"./directive-e9ce14b4.js";import"./state-d31c6912.js";import"./cond-bb9ee891.js";import"./IconManager.js";import"./observe-a9c6dfb6.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";const f=o`:host{--_n-tag-box-shadow:var(--n-tag-box-shadow, none);--_n-tag-border-radius:var(--n-tag-border-radius, var(--n-border-radius-s));--_n-tag-background-color:var(--n-color-nav-hover);--_n-tag-border-color:var(--n-color-border-neutral);--_n-tag-checkbox-size:var(--n-size-icon-s);--_n-tag-checkbox-accent-color:var(--n-color-accent);--_n-tag-checkbox-border-color:var(--n-color-border-hover);--_n-tag-font-size:var(--n-font-size-m);--_n-tag-inline-size:fit-content;display:inline;vertical-align:middle}.n-tag{border-radius:var(--_n-tag-border-radius);border:1px solid var(--_n-tag-border-color);background:var(--_n-tag-background-color);font-size:var(--_n-tag-font-size);font-family:var(--n-font-family);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-tight);letter-spacing:0;min-block-size:1.75rem;padding:0 var(--n-space-s);color:var(--n-color-text);gap:calc(var(--n-space-xs) * 1.5);align-items:center;display:inline-flex;white-space:nowrap;position:relative;box-shadow:var(--_n-tag-box-shadow);inline-size:var(--_n-tag-inline-size)}.n-input-container{position:relative}input{appearance:none;background:var(--n-color-active);border:1px solid var(--_n-tag-checkbox-border-color);border-radius:var(--n-border-radius-s);display:block;inline-size:var(--_n-tag-checkbox-size);block-size:var(--_n-tag-checkbox-size);cursor:pointer}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}:host([expand]){--_n-tag-inline-size:100%;display:block}:host(:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-border-color:var(--n-color-border-strong);--_n-tag-box-shadow:var(--n-tag-box-shadow, var(--n-box-shadow))}:host([variant=selectable]) .n-tag:hover{--_n-tag-border-color:var(--n-color-border-hover)}.n-tag:has(input:checked){--_n-tag-background-color:var(--n-color-button)}input:checked{--_n-tag-checkbox-border-color:var(--n-color-accent);background:var(--_n-tag-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important}:host([variant=selectable]:focus-within) .n-tag{--_n-tag-border-color:var(--n-color-accent);--_n-tag-box-shadow:var(--n-tag-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow))}:host(:not([disabled])) label:active{opacity:.8;transform:translateY(1px);transition:none}nord-icon.icon-checked{--_n-icon-size:var(--n-size-icon-xxs);display:none;position:absolute;color:var(--n-color-text-on-accent);inset:calc(var(--n-space-xs)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked~nord-icon.icon-checked{display:block}label{-webkit-user-select:none;user-select:none;cursor:pointer}.n-remove-button{-webkit-appearance:none;appearance:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border:1px solid transparent;color:var(--n-color-text);border-radius:var(--_n-tag-border-radius);background:0 0;margin-block-start:calc(var(--n-space-xs) * -1);margin-block-end:calc(var(--n-space-xs) * -1);margin-inline-start:0;margin-inline-end:calc(var(--n-space-s) * -1);padding:var(--n-space-s)}.n-remove-button nord-icon{--_n-icon-size:var(--n-size-icon-xxs);color:var(--n-color-icon)}.n-remove-button:hover{background:var(--n-color-surface-lowered)}.n-remove-button:hover nord-icon{color:var(--n-color-icon-hover)}.n-remove-button:focus-visible{outline:0!important}.n-remove-button:focus{outline:0!important;border:1px solid var(--n-color-accent);box-shadow:0 0 0 1px var(--n-color-accent)}:host(:not([disabled])) .n-remove-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([disabled]:not([variant=default])) .n-tag{--_n-tag-background-color:var(--n-color-surface-lowered);--_n-tag-border-color:var(--_n-tag-background-color);color:var(--n-color-text-weaker);cursor:default;opacity:.5}:host([disabled]) input{background:var(--_n-tag-checkbox-accent-color);cursor:default;opacity:1}:host([disabled]) input:not(:checked){--_n-tag-checkbox-accent-color:var(--n-color-background);--_n-tag-checkbox-border-color:var(--n-color-border-hover)}:host([disabled]) .n-remove-button{cursor:default}:host([disabled]) .n-remove-button:hover{background:0 0}:host([disabled]) .n-remove-button:hover nord-icon{color:var(--n-color-icon)}:host([disabled]:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-box-shadow:var(--n-tag-box-shadow, none)}:host([size="s"]) .n-tag{--_n-tag-font-size:var(--n-font-size-s)}`;d.registerIcon(s),d.registerIcon(l);let x=class extends(v(b(p(a)))){constructor(){super(...arguments),this.localize=new g(this),this.formData=new u(this,{value:()=>this.formValue}),this.inputId="input",this.variant="default",this.checked=!1,this.size="m",this.expand=!1}get formValue(){return"selectable"===this.variant&&this.checked?this.value||"on":void 0}handleChange(o){const e=o.target;this.checked=e.checked,o.stopPropagation(),this.dispatchEvent(new h("change"))}handleRemove(){this.dispatchEvent(new h("remove"))}render(){switch(this.variant){case"selectable":return this.renderSelectableTag();case"removable":return this.renderRemovableTag();default:return this.renderStaticTag()}}renderStaticTag(){return e`<div class="n-tag"><div class="n-content"><slot></slot></div></div>`}renderRemovableTag(){return e`<div class="n-tag"><div class="n-content"><slot></slot></div><button class="n-remove-button" @click="${this.handleRemove}" ?disabled="${this.disabled}"><nord-icon name="interface-close-small" label="${this.localize.term("removeLabel")}"></nord-icon></button></div>`}renderSelectableTag(){return e`<label for="${this.inputId}" class="n-tag"><div class="n-input-container"><input ${c(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${i(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small"></nord-icon></div><div class="n-content"><slot></slot></div></label>`}};x.styles=[m,f],n([t({reflect:!0})],x.prototype,"variant",void 0),n([t({reflect:!0,type:Boolean})],x.prototype,"checked",void 0),n([t({reflect:!0})],x.prototype,"size",void 0),n([t({reflect:!0,type:Boolean})],x.prototype,"expand",void 0),x=n([r("nord-tag")],x);var k=x;export{k as default};
 //# sourceMappingURL=Tag.js.map

package/lib/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../src/tag/Tag.ts","../src/common/mixins/DraftComponentMixin.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport * as checkedIcon from \"@nordhealth/icons/lib/assets/interface-checked-small.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\nimport Icon from \"../icon/Icon.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FormDataController } from \"../common/controllers/FormDataController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tag.css\"\n\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(closeIcon)\n\n/**\n * Tags represent a set of keywords that help label, categorize,\n * and organize objects. Commonly used to signify the attributes of an object.\n *\n * @status draft\n * @category text\n * @slot - The tag content.\n *\n * @localization removeLabel - Accessible label for the remove button.\n */\n@customElement(\"nord-tag\")\nexport default class Tag extends DraftComponentMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, style]\n\n  private localize = new LocalizeController<\"nord-tag\">(this)\n\n  protected formData = new FormDataController(this, { value: () => this.formValue })\n\n  protected get formValue() {\n    return this.variant === \"selectable\" && this.checked ? this.value || \"on\" : undefined\n  }\n\n  protected inputId = \"input\"\n\n  /**\n   * The behavioral variant of the tag.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"removable\" | \"selectable\" = \"default\"\n\n  /**\n   * Controls whether the tag is checked or not (only relevant when variant is set to `selectable`).\n   */\n  @property({ reflect: true, type: Boolean }) checked: boolean = false\n\n  /**\n   * The size of the tag. This affects the font-size.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" = \"m\"\n\n  protected handleChange(e: Event) {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n\n    e.stopPropagation()\n\n    /**\n     * Fired whenever the input's value is changed via user interaction.\n     */\n    this.dispatchEvent(new NordEvent(\"change\"))\n  }\n\n  protected handleRemove() {\n    /**\n     * Fired when the remove button is activated. This event should be used to remove the tag from the DOM.\n     */\n    this.dispatchEvent(new NordEvent(\"remove\"))\n  }\n\n  render() {\n    switch (this.variant) {\n      case \"selectable\":\n        return this.renderSelectableTag()\n      case \"removable\":\n        return this.renderRemovableTag()\n      case \"default\":\n      default:\n        return this.renderStaticTag()\n    }\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  private renderStaticTag() {\n    return html`\n      <div class=\"n-tag\">\n        <slot></slot>\n      </div>\n    `\n  }\n\n  private renderRemovableTag() {\n    return html`\n      <div class=\"n-tag\">\n        <slot></slot>\n        <button class=\"n-remove-button\" @click=${this.handleRemove} ?disabled=${this.disabled}>\n          <nord-icon name=\"interface-close-small\" label=${this.localize.term(\"removeLabel\")}></nord-icon>\n        </button>\n      </div>\n    `\n  }\n\n  private renderSelectableTag() {\n    return html`\n      <label for=${this.inputId} class=\"n-tag\">\n        <div class=\"n-input-container\">\n          <input\n            ${ref(this.focusableRef)}\n            class=\"n-input\"\n            id=${this.inputId}\n            type=\"checkbox\"\n            name=${ifDefined(this.name)}\n            .value=${this.value}\n            .checked=${this.checked}\n            ?disabled=${this.disabled}\n            @change=${this.handleChange}\n          />\n          <nord-icon class=\"icon-checked\" name=\"interface-checked-small\"></nord-icon>\n        </div>\n        <div class=\"n-expand\">\n          <slot></slot>\n        </div>\n      </label>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tag\": Tag\n  }\n}\n","import { LitElement } from \"lit\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport function DraftComponentMixin<T extends Constructable<LitElement>>(superClass: T): T {\n  class DraftComponent extends superClass {\n    private static _warningLogged = false\n\n    connectedCallback() {\n      super.connectedCallback()\n\n      if (process.env.NODE_ENV !== \"development\" && !DraftComponent._warningLogged) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,\n          \"font-weight:bold\",\n          \"font-weight:normal\"\n        )\n        DraftComponent._warningLogged = true\n      }\n    }\n  }\n\n  return DraftComponent\n}\n"],"names":["Icon","registerIcon","checkedIcon","closeIcon","Tag","superClass","DraftComponent","connectedCallback","super","_warningLogged","console","warn","this","localName","DraftComponentMixin","InputMixin","FocusableMixin","LitElement","constructor","localize","LocalizeController","formData","FormDataController","value","formValue","inputId","variant","checked","size","undefined","handleChange","e","target","stopPropagation","dispatchEvent","NordEvent","handleRemove","render","renderSelectableTag","renderRemovableTag","renderStaticTag","html","disabled","term","ref","focusableRef","ifDefined","name","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"+4JAiBAA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAaH,IAAMC,EAAN,cC3BT,SAAmEC,GACvE,MAAMC,UAAuBD,EAG3B,iBAAAE,GACEC,MAAMD,oBAEyCD,EAAeG,iBAE5DC,QAAQC,KACN,WAAWC,KAAKC,0EAChB,mBACA,sBAEFP,EAAeG,gBAAiB,EAEnC,EAGH,OAjBiBH,EAAcG,gBAAG,EAiB3BH,CACT,CDOiCQ,CAAoBC,EAAWC,EAAeC,MAAhE,WAAAC,uBAGLN,KAAAO,SAAW,IAAIC,EAA+BR,MAE5CA,KAAAS,SAAW,IAAIC,EAAmBV,KAAM,CAAEW,MAAO,IAAMX,KAAKY,YAM5DZ,KAAOa,QAAG,QAKSb,KAAOc,QAA2C,UAKnCd,KAAOe,SAAY,EAKlCf,KAAIgB,KAAc,GA4EhD,CA/FC,aAAcJ,GACZ,MAAwB,eAAjBZ,KAAKc,SAA4Bd,KAAKe,QAAUf,KAAKW,OAAS,UAAOM,CAC7E,CAmBS,YAAAC,CAAaC,GACrB,MAAMC,EAASD,EAAEC,OACjBpB,KAAKe,QAAUK,EAAOL,QAEtBI,EAAEE,kBAKFrB,KAAKsB,cAAc,IAAIC,EAAU,UAClC,CAES,YAAAC,GAIRxB,KAAKsB,cAAc,IAAIC,EAAU,UAClC,CAED,MAAAE,GACE,OAAQzB,KAAKc,SACX,IAAK,aACH,OAAOd,KAAK0B,sBACd,IAAK,YACH,OAAO1B,KAAK2B,qBAEd,QACE,OAAO3B,KAAK4B,kBAEjB,CAGO,eAAAA,GACN,OAAOC,CAAI,wCAKZ,CAEO,kBAAAF,GACN,OAAOE,CAAI,2EAGkC7B,KAAKwB,4BAA0BxB,KAAK8B,4DAC3B9B,KAAKO,SAASwB,KAAK,6CAI1E,CAEO,mBAAAL,GACN,OAAOG,CAAI,eACI7B,KAAKa,gEAGVmB,EAAIhC,KAAKiC,qCAENjC,KAAKa,kCAEHqB,EAAUlC,KAAKmC,kBACbnC,KAAKW,oBACHX,KAAKe,uBACJf,KAAK8B,sBACP9B,KAAKkB,kJASxB,GApGM1B,EAAA4C,OAAS,CAACC,EAAgBC,GAeJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmEjD,EAAAkD,UAAA,eAAA,GAK5CH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAmCpD,EAAAkD,UAAA,eAAA,GAKvCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6BjD,EAAAkD,UAAA,YAAA,GA1B/BlD,EAAG+C,EAAA,CADvBM,EAAc,aACMrD,SAAAA"}
+{"version":3,"file":"Tag.js","sources":["../src/tag/Tag.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport * as checkedIcon from \"@nordhealth/icons/lib/assets/interface-checked-small.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\nimport Icon from \"../icon/Icon.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FormDataController } from \"../common/controllers/FormDataController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tag.css\"\n\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(closeIcon)\n\n/**\n * Tags represent a set of keywords that help label, categorize,\n * and organize objects. Commonly used to signify the attributes of an object.\n *\n * @status draft\n * @category text\n * @slot - The tag content.\n *\n * @localization removeLabel - Accessible label for the remove button.\n */\n@customElement(\"nord-tag\")\nexport default class Tag extends DraftComponentMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, style]\n\n  private localize = new LocalizeController<\"nord-tag\">(this)\n\n  protected formData = new FormDataController(this, { value: () => this.formValue })\n\n  protected get formValue() {\n    return this.variant === \"selectable\" && this.checked ? this.value || \"on\" : undefined\n  }\n\n  protected inputId = \"input\"\n\n  /**\n   * The behavioral variant of the tag.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"removable\" | \"selectable\" = \"default\"\n\n  /**\n   * Controls whether the tag is checked or not (only relevant when variant is set to `selectable`).\n   */\n  @property({ reflect: true, type: Boolean }) checked: boolean = false\n\n  /**\n   * The size of the tag. This affects the font-size.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" = \"m\"\n\n  /**\n   * Controls whether the tag expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  protected handleChange(e: Event) {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n\n    e.stopPropagation()\n\n    /**\n     * Fired whenever the input's value is changed via user interaction.\n     */\n    this.dispatchEvent(new NordEvent(\"change\"))\n  }\n\n  protected handleRemove() {\n    /**\n     * Fired when the remove button is activated. This event should be used to remove the tag from the DOM.\n     */\n    this.dispatchEvent(new NordEvent(\"remove\"))\n  }\n\n  render() {\n    switch (this.variant) {\n      case \"selectable\":\n        return this.renderSelectableTag()\n      case \"removable\":\n        return this.renderRemovableTag()\n      case \"default\":\n      default:\n        return this.renderStaticTag()\n    }\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  private renderStaticTag() {\n    return html`\n      <div class=\"n-tag\">\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n\n  private renderRemovableTag() {\n    return html`\n      <div class=\"n-tag\">\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n        <button class=\"n-remove-button\" @click=${this.handleRemove} ?disabled=${this.disabled}>\n          <nord-icon name=\"interface-close-small\" label=${this.localize.term(\"removeLabel\")}></nord-icon>\n        </button>\n      </div>\n    `\n  }\n\n  private renderSelectableTag() {\n    return html`\n      <label for=${this.inputId} class=\"n-tag\">\n        <div class=\"n-input-container\">\n          <input\n            ${ref(this.focusableRef)}\n            class=\"n-input\"\n            id=${this.inputId}\n            type=\"checkbox\"\n            name=${ifDefined(this.name)}\n            .value=${this.value}\n            .checked=${this.checked}\n            ?disabled=${this.disabled}\n            @change=${this.handleChange}\n          />\n          <nord-icon class=\"icon-checked\" name=\"interface-checked-small\"></nord-icon>\n        </div>\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n      </label>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tag\": Tag\n  }\n}\n"],"names":["Icon","registerIcon","checkedIcon","closeIcon","Tag","DraftComponentMixin","InputMixin","FocusableMixin","LitElement","constructor","this","localize","LocalizeController","formData","FormDataController","value","formValue","inputId","variant","checked","size","expand","undefined","handleChange","e","target","stopPropagation","dispatchEvent","NordEvent","handleRemove","render","renderSelectableTag","renderRemovableTag","renderStaticTag","html","disabled","term","ref","focusableRef","ifDefined","name","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"i8KAiBAA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAaH,IAAMC,EAAN,cAAkBC,EAAoBC,EAAWC,EAAeC,MAAhE,WAAAC,uBAGLC,KAAAC,SAAW,IAAIC,EAA+BF,MAE5CA,KAAAG,SAAW,IAAIC,EAAmBJ,KAAM,CAAEK,MAAO,IAAML,KAAKM,YAM5DN,KAAOO,QAAG,QAKSP,KAAOQ,QAA2C,UAKnCR,KAAOS,SAAY,EAKlCT,KAAIU,KAAc,IAKHV,KAAMW,QAAG,CAgFtD,CAxGC,aAAcL,GACZ,MAAwB,eAAjBN,KAAKQ,SAA4BR,KAAKS,QAAUT,KAAKK,OAAS,UAAOO,CAC7E,CAwBS,YAAAC,CAAaC,GACrB,MAAMC,EAASD,EAAEC,OACjBf,KAAKS,QAAUM,EAAON,QAEtBK,EAAEE,kBAKFhB,KAAKiB,cAAc,IAAIC,EAAU,UAClC,CAES,YAAAC,GAIRnB,KAAKiB,cAAc,IAAIC,EAAU,UAClC,CAED,MAAAE,GACE,OAAQpB,KAAKQ,SACX,IAAK,aACH,OAAOR,KAAKqB,sBACd,IAAK,YACH,OAAOrB,KAAKsB,qBAEd,QACE,OAAOtB,KAAKuB,kBAEjB,CAGO,eAAAA,GACN,OAAOC,CAAI,qEAOZ,CAEO,kBAAAF,GACN,OAAOE,CAAI,wGAKkCxB,KAAKmB,4BAA0BnB,KAAKyB,4DAC3BzB,KAAKC,SAASyB,KAAK,6CAI1E,CAEO,mBAAAL,GACN,OAAOG,CAAI,eACIxB,KAAKO,gEAGVoB,EAAI3B,KAAK4B,qCAEN5B,KAAKO,kCAEHsB,EAAU7B,KAAK8B,kBACb9B,KAAKK,oBACHL,KAAKS,uBACJT,KAAKyB,sBACPzB,KAAKa,mJASxB,GA7GMnB,EAAAqC,OAAS,CAACC,EAAgBC,GAeJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmE1C,EAAA2C,UAAA,eAAA,GAK5CH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAmC7C,EAAA2C,UAAA,eAAA,GAKvCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6B1C,EAAA2C,UAAA,YAAA,GAKNH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyB7C,EAAA2C,UAAA,cAAA,GA/BvC3C,EAAGwC,EAAA,CADvBM,EAAc,aACM9C,SAAAA"}

package/lib/TagGroup.js

@@ -0,0 +1,2 @@
+import{i as r,x as t,_ as a,e as o,s as e}from"./query-assigned-elements-92ce7494.js";import{n as i}from"./property-c78323b1.js";import{o as n}from"./class-map-512f0bc1.js";import{D as s}from"./DraftComponentMixin-9e4b7b34.js";import{D as d}from"./DirectionController-f35f5476.js";import{s as l}from"./Component-2253424f.js";import"./directive-e9ce14b4.js";const u=r`:host{--_n-tag-group-border-radius:var(--n-tag-group-border-radius, var(--n-border-radius-s));--_n-tag-group-box-shadow:var(--n-tag-group-box-shadow, var(--n-box-shadow));--_n-tag-group-flex-direction:row;--_n-tag-group-max-inline-size:max-content}:host([variant=default]){--n-tag-border-radius:0;--n-tag-box-shadow:none}.n-tag-group{display:flex;flex-direction:var(--_n-tag-group-flex-direction);max-inline-size:var(--_n-tag-group-max-inline-size)}:host([variant=default]) .n-tag-group{border-radius:var(--_n-tag-group-border-radius);box-shadow:var(--_n-tag-group-box-shadow)}:host([variant=spaced]) .n-tag-group{gap:var(--n-space-s)}:host([variant=default][direction=horizontal]) ::slotted(*){margin-inline-end:-1px}:host([variant=default]) ::slotted(:is(:hover,:focus,:focus-within)){z-index:var(--n-index-mask)}:host([variant=default]) ::slotted(:is(:focus,:focus-within)){--n-tag-box-shadow:var(--n-tag-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow))}:host([variant=default]) ::slotted(*){border-radius:var(--n-tag-border-radius)}:host([variant=default]) .n-rtl ::slotted(:last-child),:host([variant=default]) :not(.n-rtl) ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) 0 0 var(--_n-tag-group-border-radius)}:host([variant=default]) .n-rtl ::slotted(:first-child),:host([variant=default]) :not(.n-rtl) ::slotted(:last-child){--n-tag-border-radius:0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0}:host([direction=vertical]) .n-tag-group{--_n-tag-group-flex-direction:column}:host([variant=default][direction=vertical]) ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0 0}:host([variant=default][direction=vertical]) ::slotted(:last-child){--n-tag-border-radius:0 0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius)}:host([variant=spaced][wrap]) .n-tag-group{flex-wrap:wrap}`;let g=class extends(s(e)){constructor(){super(...arguments),this.dirController=new d(this),this.variant="default",this.direction="horizontal",this.wrap=!1,this.role="group"}render(){return t`<div class="${n({"n-tag-group":!0,"n-rtl":this.dirController.isRTL})}"><slot></slot></div>`}};g.styles=[l,u],a([i({reflect:!0})],g.prototype,"variant",void 0),a([i({reflect:!0})],g.prototype,"direction",void 0),a([i({reflect:!0,type:Boolean})],g.prototype,"wrap",void 0),a([i({reflect:!0})],g.prototype,"role",void 0),g=a([o("nord-tag-group")],g);var p=g;export{p as default};
+//# sourceMappingURL=TagGroup.js.map

package/lib/TagGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagGroup.js","sources":["../src/tag-group/TagGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TagGroup.css\"\n\n/**\n * Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.\n *\n * @status draft\n * @category structure\n * @slot - The tag group content\n *\n * @cssprop [--n-tag-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the tag group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.\n * @cssprop [--n-tag-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.\n */\n@customElement(\"nord-tag-group\")\nexport default class TagGroup extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private dirController = new DirectionController(this)\n\n  /**\n   * The style variant of the tag group.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"spaced\" = \"default\"\n\n  /**\n   * The direction of the tag group.\n   */\n  @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"horizontal\"\n\n  /**\n   * Defines whether the tags are forced in a single line\n   * or can be flowed into multiple lines (only applied when variant is set to `spaced`).\n   */\n  @property({ reflect: true, type: Boolean }) wrap = false\n\n  /**\n   * The appropriate role for the containing element.\n   */\n  // eslint-disable-next-line lit/no-native-attributes\n  @property({ reflect: true }) role: string = \"group\"\n\n  render() {\n    return html`<div\n      class=${classMap({\n        \"n-tag-group\": true,\n        \"n-rtl\": this.dirController.isRTL,\n      })}\n    >\n      <slot></slot>\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tag-group\": TagGroup\n  }\n}\n"],"names":["TagGroup","DraftComponentMixin","LitElement","constructor","this","dirController","DirectionController","variant","direction","wrap","role","render","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"i1EAoBe,IAAMA,EAAN,cAAuBC,EAAoBC,IAA3C,WAAAC,uBAGLC,KAAAC,cAAgB,IAAIC,EAAoBF,MAKnBA,KAAOG,QAAyB,UAKhCH,KAASI,UAA8B,aAMxBJ,KAAIK,MAAG,EAMtBL,KAAIM,KAAW,OAY7C,CAVC,MAAAC,GACE,OAAOC,CAAI,eACDC,EAAS,CACf,eAAe,EACf,QAAST,KAAKC,cAAcS,8BAKjC,GAnCMd,EAAAe,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiDpB,EAAAqB,UAAA,eAAA,GAKzCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2DpB,EAAAqB,UAAA,iBAAA,GAMpCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAuBvB,EAAAqB,UAAA,YAAA,GAM3BH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8BpB,EAAAqB,UAAA,YAAA,GAzBhCrB,EAAQkB,EAAA,CAD5BM,EAAc,mBACMxB,SAAAA"}