@nordhealth/components 5.0.0-alpha.0 → 5.0.1

package/lib/Tag.js

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-checked-small-BQmkNgCI.js";import{c as t}from"./interface-close-small-CnpAFMO3.js";import{css as a,html as n,LitElement as r}from"lit";import{property as i,customElement as c}from"lit/decorators.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{ref as l}from"lit/directives/ref.js";import{F as d}from"./FormDataController-OUt5L5uC.js";import{N as v}from"./events-Bv6wNHwJ.js";import{F as b}from"./FocusableMixin-BlQLNPdJ.js";import{I as p}from"./InputMixin-LetXsCyv.js";import{s as h}from"./Component-BJ5O5n8k.js";import m from"./Icon.js";import{LocalizeController as g}from"./LocalizeController.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";const u=a`: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-block-size:var(--n-tag-block-size,1.75rem);--_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{align-items:center;background:var(--_n-tag-background-color);border:1px solid var(--_n-tag-border-color);border-radius:var(--_n-tag-border-radius);box-shadow:var(--_n-tag-box-shadow);color:var(--n-color-text);display:inline-flex;font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-tag-font-size);font-weight:var(--n-font-weight);gap:calc(var(--n-space-xs)*1.5);inline-size:var(--_n-tag-inline-size);letter-spacing:0;line-height:var(--n-line-height-tight);min-block-size:var(--_n-tag-block-size);padding:0 var(--n-space-s);white-space:nowrap}.n-input-container,.n-tag{position:relative}input{appearance:none;background:var(--n-color-surface);block-size:var(--_n-tag-checkbox-size);border:1px solid var(--_n-tag-checkbox-border-color);border-radius:var(--n-border-radius-s);cursor:pointer;display:block;inline-size:var(--_n-tag-checkbox-size)}.n-content{flex:1;overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap}: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,input:focus-visible{outline:none!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);color:var(--n-color-text-on-accent);display:none;inset:calc(var(--n-space-xs)/2);pointer-events:none;position:absolute;z-index:var(--n-index-default)}input:checked~nord-icon.icon-checked{display:block}label{cursor:pointer;user-select:none}.n-remove-button{align-items:center;appearance:none;background:#0000;border:1px solid #0000;border-radius:var(--_n-tag-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;justify-content:center;margin-block-end:calc(var(--n-space-xs)*-1);margin-block-start:calc(var(--n-space-xs)*-1);margin-inline-end:calc(var(--n-space-s)*-1);margin-inline-start:0;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:none!important}.n-remove-button:focus{border:1px solid var(--n-color-accent);box-shadow:0 0 0 1px var(--n-color-accent);outline:none!important}: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:#0000}: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)}`;m.registerIcon(e),m.registerIcon(t);let f=class extends(p(b(r))){constructor(){super(...arguments),this.localize=new g(this),this.formData=new d(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 v("change"))}handleRemove(){this.dispatchEvent(new v("remove"))}render(){switch(this.variant){case"selectable":return this.renderSelectableTag();case"removable":return this.renderRemovableTag();default:return this.renderStaticTag()}}renderStaticTag(){return n`<div class="n-tag"><div class="n-content"><slot></slot></div></div>`}renderRemovableTag(){return n`<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 n`<label for="${this.inputId}" class="n-tag"><div class="n-input-container"><input ${l(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${s(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>`}};f.styles=[h,u],o([i({reflect:!0})],f.prototype,"variant",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"checked",void 0),o([i({reflect:!0})],f.prototype,"size",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),f=o([c("nord-tag")],f);var x=f;export{x as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-checked-small-BQmkNgCI.js";import{c as t}from"./interface-close-small-CnpAFMO3.js";import{css as a,html as n,LitElement as r}from"lit";import{property as i,customElement as c}from"lit/decorators.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{ref as l}from"lit/directives/ref.js";import{F as d}from"./FormDataController-OUt5L5uC.js";import{N as v}from"./events-Bv6wNHwJ.js";import{F as p}from"./FocusableMixin-BlQLNPdJ.js";import{I as b}from"./InputMixin-LetXsCyv.js";import{s as h}from"./Component-BJ5O5n8k.js";import m from"./Icon.js";import{LocalizeController as g}from"./LocalizeController.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";const u=a`: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-block-size:var(--n-tag-block-size,1.75rem);--_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{align-items:center;background:var(--_n-tag-background-color);border:1px solid var(--_n-tag-border-color);border-radius:var(--_n-tag-border-radius);box-shadow:var(--_n-tag-box-shadow);color:var(--n-color-text);display:inline-flex;font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-tag-font-size);font-weight:var(--n-font-weight);gap:calc(var(--n-space-xs)*1.5);inline-size:var(--_n-tag-inline-size);letter-spacing:0;line-height:var(--n-line-height-tight);min-block-size:var(--_n-tag-block-size);padding:0 var(--n-space-s);white-space:nowrap}.n-input-container,.n-tag{position:relative}input{appearance:none;background:var(--n-color-surface);block-size:var(--_n-tag-checkbox-size);border:1px solid var(--_n-tag-checkbox-border-color);border-radius:var(--n-border-radius-s);cursor:pointer;display:block;inline-size:var(--_n-tag-checkbox-size)}.n-content{flex:1;overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap}: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,input:focus-visible{outline:none!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);color:var(--n-color-text-on-accent);display:none;inset:calc(var(--n-space-xs)/2);pointer-events:none;position:absolute;z-index:var(--n-index-default)}input:checked~nord-icon.icon-checked{display:block}label{cursor:pointer;user-select:none}.n-remove-button{align-items:center;appearance:none;background:#0000;border:1px solid #0000;border-radius:var(--_n-tag-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;justify-content:center;margin-block-end:calc(var(--n-space-xs)*-1);margin-block-start:calc(var(--n-space-xs)*-1);margin-inline-end:calc(var(--n-space-s)*-1);margin-inline-start:0;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:none!important}.n-remove-button:focus{border:1px solid var(--n-color-accent);box-shadow:0 0 0 1px var(--n-color-accent);outline:none!important}: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:#0000}: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)}`;m.registerIcon(e),m.registerIcon(t);let f=class extends(b(p(r))){constructor(){super(...arguments),this.localize=new g(this),this.formData=new d(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 v("change"))}handleRemove(){this.dispatchEvent(new v("remove"))}render(){switch(this.variant){case"selectable":return this.renderSelectableTag();case"removable":return this.renderRemovableTag();default:return this.renderStaticTag()}}renderStaticTag(){return n`<div class="n-tag"><div class="n-content"><slot></slot></div></div>`}renderRemovableTag(){return n`<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 n`<label for="${this.inputId}" class="n-tag"><div class="n-input-container"><input ${l(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${s(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>`}};f.styles=[h,u],o([i({reflect:!0})],f.prototype,"variant",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"checked",void 0),o([i({reflect:!0})],f.prototype,"size",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),f=o([c("nord-tag")],f);var x=f;export{x as default};
 //# sourceMappingURL=Tag.js.map

package/lib/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../src/tag/Tag.ts"],"sourcesContent":["import * as checkedIcon from '@nordhealth/icons/lib/assets/interface-checked-small.js'\nimport * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport { html, LitElement } 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 { FormDataController } from '../common/controllers/FormDataController.js'\nimport { NordEvent } from '../common/events.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport Icon from '../icon/Icon.js'\n\nimport { LocalizeController } from '../localization/LocalizeController.js'\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 new\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 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 tag has been checked or unchecked 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  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","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":"8vLAgBAA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAaH,IAAMC,EAAN,cAAkBC,EAAWC,EAAeC,KAA5C,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,CA+EtD,CAvGC,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,CAEO,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,GA5GMlB,EAAAoC,OAAS,CAACC,EAAgBC,GAeJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmEzC,EAAA0C,UAAA,eAAA,GAK5CH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAmC5C,EAAA0C,UAAA,eAAA,GAKvCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6BzC,EAAA0C,UAAA,YAAA,GAKNH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyB5C,EAAA0C,UAAA,cAAA,GA/BvC1C,EAAGuC,EAAA,CADvBM,EAAc,aACM7C,SAAAA"}
+{"version":3,"file":"Tag.js","sources":["../src/tag/Tag.ts"],"sourcesContent":["import * as checkedIcon from '@nordhealth/icons/lib/assets/interface-checked-small.js'\nimport * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport { html, LitElement } 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 { FormDataController } from '../common/controllers/FormDataController.js'\nimport { NordEvent } from '../common/events.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport Icon from '../icon/Icon.js'\n\nimport { LocalizeController } from '../localization/LocalizeController.js'\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 new\n * @category content\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 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 tag has been checked or unchecked 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  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","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":"szLAgBAA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAaH,IAAMC,EAAN,cAAkBC,EAAWC,EAAeC,KAA5C,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,CA+EtD,CAvGC,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,CAEO,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,GA5GMlB,EAAAoC,OAAS,CAACC,EAAgBC,GAeJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmEzC,EAAA0C,UAAA,eAAA,GAK5CH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAmC5C,EAAA0C,UAAA,eAAA,GAKvCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6BzC,EAAA0C,UAAA,YAAA,GAKNH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyB5C,EAAA0C,UAAA,cAAA,GA/BvC1C,EAAGuC,EAAA,CADvBM,EAAc,aACM7C,SAAAA"}

package/lib/TagGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.js","sources":["../src/tag-group/TagGroup.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.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 new\n * @category structure\n * @slot - The tag group content\n *\n * @fires {NordEvent} change - Fired whenever a tag has been checked or unchecked via user interaction.\n * @fires {NordEvent} remove - Fired when the remove button is activated on a tag. This event should be used to remove the tag from the DOM.\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 * @parent Tag\n */\n@customElement('nord-tag-group')\nexport default class TagGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\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\n  @property({ reflect: true }) role: string = 'group'\n\n  render() {\n    const hasMultipleTags = this.defaultSlot.assigned.length > 1\n\n    return html`<div\n      class=${classMap({\n        'n-tag-group': true,\n        'n-rtl': this.dirController.isRTL,\n        'n-multiple-tags': hasMultipleTags,\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","LitElement","constructor","this","defaultSlot","SlotController","dirController","DirectionController","variant","direction","wrap","role","render","hasMultipleTags","assigned","length","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"opFAyBe,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAAG,cAAgB,IAAIC,EAAoBJ,MAKnBA,KAAOK,QAAyB,UAKhCL,KAASM,UAA8B,aAMxBN,KAAIO,MAAG,EAMtBP,KAAIQ,KAAW,OAe7C,CAbC,MAAAC,GACE,MAAMC,EAAkBV,KAAKC,YAAYU,SAASC,OAAS,EAE3D,OAAOC,CAAI,eACDC,EAAS,CACf,eAAe,EACf,QAASd,KAAKG,cAAcY,MAC5B,kBAAmBL,0BAKxB,GAvCMb,EAAAmB,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiDxB,EAAAyB,UAAA,eAAA,GAKzCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2DxB,EAAAyB,UAAA,iBAAA,GAMpCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAuB3B,EAAAyB,UAAA,YAAA,GAM3BH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8BxB,EAAAyB,UAAA,YAAA,GA1BhCzB,EAAQsB,EAAA,CAD5BM,EAAc,mBACM5B,SAAAA"}
+{"version":3,"file":"TagGroup.js","sources":["../src/tag-group/TagGroup.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.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 new\n * @category content\n * @slot - The tag group content\n *\n * @fires {NordEvent} change - Fired whenever a tag has been checked or unchecked via user interaction.\n * @fires {NordEvent} remove - Fired when the remove button is activated on a tag. This event should be used to remove the tag from the DOM.\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 * @parent Tag\n */\n@customElement('nord-tag-group')\nexport default class TagGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\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\n  @property({ reflect: true }) role: string = 'group'\n\n  render() {\n    const hasMultipleTags = this.defaultSlot.assigned.length > 1\n\n    return html`<div\n      class=${classMap({\n        'n-tag-group': true,\n        'n-rtl': this.dirController.isRTL,\n        'n-multiple-tags': hasMultipleTags,\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","LitElement","constructor","this","defaultSlot","SlotController","dirController","DirectionController","variant","direction","wrap","role","render","hasMultipleTags","assigned","length","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"opFAyBe,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAAG,cAAgB,IAAIC,EAAoBJ,MAKnBA,KAAOK,QAAyB,UAKhCL,KAASM,UAA8B,aAMxBN,KAAIO,MAAG,EAMtBP,KAAIQ,KAAW,OAe7C,CAbC,MAAAC,GACE,MAAMC,EAAkBV,KAAKC,YAAYU,SAASC,OAAS,EAE3D,OAAOC,CAAI,eACDC,EAAS,CACf,eAAe,EACf,QAASd,KAAKG,cAAcY,MAC5B,kBAAmBL,0BAKxB,GAvCMb,EAAAmB,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiDxB,EAAAyB,UAAA,eAAA,GAKzCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2DxB,EAAAyB,UAAA,iBAAA,GAMpCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAuB3B,EAAAyB,UAAA,YAAA,GAM3BH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8BxB,EAAAyB,UAAA,YAAA,GA1BhCzB,EAAQsB,EAAA,CAD5BM,EAAc,mBACM5B,SAAAA"}

package/lib/Textarea.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as r,nothing as o,LitElement as i}from"lit";import{property as a,customElement as n}from"lit/decorators.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{ref as s}from"lit/directives/ref.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as p}from"./events-Bv6wNHwJ.js";import{A as d}from"./AutocompleteMixin-D8eiOxvO.js";import{F as u}from"./FocusableMixin-BlQLNPdJ.js";import{F as m}from"./FormAssociatedMixin-D9aPREgv.js";import{I as h}from"./InputMixin-LetXsCyv.js";import{R as v}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{T as b}from"./TextSelectableMixin-Cfv__lHS.js";import{s as z}from"./Component-BJ5O5n8k.js";import{s as j}from"./FormField-CMgEFZCK.js";import{s as f}from"./TextField-CSKvieoG.js";import{LocalizeController as g}from"./LocalizeController.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";const y=e`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size,240px);--_n-textarea-block-size:var(--n-textarea-block-size,76px);--_n-textarea-max-block-size:var(--n-textarea-max-block-size,500px);--_n-input-background:var(--n-textarea-background,var(--n-color-surface));--_n-input-color:var(--n-textarea-color,var(--n-color-text));--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-border-strong));--_n-input-border-radius:var(--n-textarea-border-radius,var(--n-border-radius-s))}.n-input-container{inline-size:var(--_n-textarea-inline-size);position:relative}.n-input{display:block;max-block-size:var(--_n-textarea-max-block-size);min-block-size:var(--_n-textarea-block-size);resize:vertical;transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly)}:host([resize=auto]) .n-input{overflow:auto;resize:none}:host([expand]){--_n-textarea-inline-size:100%}.n-character-counter{color:var(--n-color-text-weaker);font-size:var(--n-font-size-s);margin-block-start:var(--n-space-xs)}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-accent));--_n-input-background:var(--n-textarea-background,var(--n-color-surface))}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-background:var(--n-textarea-background-inactive,var(--n-color-active));--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-active));--_n-input-color:var(--n-textarea-color,var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-textarea-color,var(--n-color-text))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-accent))}`;let $=class extends(x(m(d(v(b(h(u(i)))))))){constructor(){super(...arguments),this.inputId="textarea",this.localize=new g(this,{onLangChange:()=>this.handleLangChange()}),this.resize="vertical",this.expand=!1,this.characterCounter=!1}render(){var t;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${s(this.textSelectableRef)} ${s(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.effectiveDisabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${l(this.name)}" maxlength="${l(this.maxLength)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${l(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" @select="${this.handleSelect}" aria-label="${l(this.controlAriaLabel)}" aria-describedby="${l(this.controlAriaDescribedby)}" aria-invalid="${l(this.controlAriaInvalid)}" autocomplete="${this.autocomplete}"></textarea> ${this.characterCounter?this.renderCharacterCounter():o}</div>${this.renderError()} ${this.isHintBelow?this.renderHint():o}`}handleSelect(t){t.stopPropagation(),this.dispatchEvent(new p("select"))}renderCharacterCounter(){const{value:t,maxLength:e}=this,o="string"==typeof t?this.lengthMeasurer(t):0,i=e?e-o:null,a=e?`${o}/${e}`:o;return r`<nord-visually-hidden aria-live="polite" aria-atomic="true">${null!=i&&i<=10?this.localize.term("remainingCharacters",i):""}</nord-visually-hidden><div class="n-character-counter">${a}</div>`}handleLangChange(){const t=this.localize.resolvedLang;this.lengthMeasurer=function(t){if(Intl.Segmenter){const e=new Intl.Segmenter(t);return t=>[...e.segment(t)].length}return t=>t.length}(t)}resizeToFitContent(){const t=this.focusableRef.value;if(t)if("auto"===this.resize){t.style.height="auto";const e=getComputedStyle(t),r=t.offsetHeight-t.clientHeight,o=Number.parseFloat(e.minBlockSize)||0,i=Number.parseFloat(e.maxBlockSize)||Number.POSITIVE_INFINITY,a=t.scrollHeight+r;t.style.height=`${Math.min(Math.max(a,o),i)}px`}else t.style.height=""}};$.styles=[z,j,f,y],t([a({reflect:!0})],$.prototype,"resize",void 0),t([a({reflect:!0,type:Boolean})],$.prototype,"expand",void 0),t([a({reflect:!0,attribute:"maxlength",type:Number})],$.prototype,"maxLength",void 0),t([a({reflect:!0,type:Boolean,attribute:"character-counter"})],$.prototype,"characterCounter",void 0),t([c("resize","updated"),c("value","updated")],$.prototype,"resizeToFitContent",null),$=t([n("nord-textarea")],$);var _=$;export{_ as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as r,nothing as o,LitElement as i}from"lit";import{property as a,customElement as n}from"lit/decorators.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{ref as s}from"lit/directives/ref.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as p}from"./events-Bv6wNHwJ.js";import{A as d}from"./AutocompleteMixin-D8eiOxvO.js";import{F as m}from"./FocusableMixin-BlQLNPdJ.js";import{F as u}from"./FormAssociatedMixin-D9aPREgv.js";import{I as h}from"./InputMixin-LetXsCyv.js";import{R as v}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{T as b}from"./TextSelectableMixin-Cfv__lHS.js";import{s as z}from"./Component-BJ5O5n8k.js";import{s as j}from"./FormField-CMgEFZCK.js";import{s as f}from"./TextField-CSKvieoG.js";import{LocalizeController as g}from"./LocalizeController.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";const y=e`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size,240px);--_n-textarea-block-size:var(--n-textarea-block-size,76px);--_n-textarea-max-block-size:var(--n-textarea-max-block-size,500px);--_n-input-background:var(--n-textarea-background,var(--n-color-surface));--_n-input-color:var(--n-textarea-color,var(--n-color-text));--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-border-strong));--_n-input-border-radius:var(--n-textarea-border-radius,var(--n-border-radius-s))}.n-input-container{inline-size:var(--_n-textarea-inline-size);position:relative}.n-input{display:block;max-block-size:var(--_n-textarea-max-block-size);min-block-size:var(--_n-textarea-block-size);resize:vertical;transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly)}:host([resize=auto]) .n-input{overflow:auto;resize:none}:host([expand]){--_n-textarea-inline-size:100%}.n-character-counter{color:var(--n-color-text-weaker);font-size:var(--n-font-size-s);margin-block-start:var(--n-space-xs)}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-accent));--_n-input-background:var(--n-textarea-background,var(--n-color-surface))}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-background:var(--n-textarea-background-inactive,var(--n-color-active));--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-active));--_n-input-color:var(--n-textarea-color,var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-textarea-color,var(--n-color-text))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-accent))}`;let $=class extends(x(u(d(v(b(h(m(i)))))))){constructor(){super(...arguments),this.inputId="textarea",this.localize=new g(this,{onLangChange:()=>this.handleLangChange()}),this.resize="vertical",this.expand=!1,this.characterCounter=!1}render(){var t;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${s(this.textSelectableRef)} ${s(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.effectiveDisabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${l(this.name)}" maxlength="${l(this.maxLength)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${l(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" @select="${this.handleSelect}" aria-label="${l(this.controlAriaLabel)}" aria-describedby="${l(this.controlAriaDescribedby)}" aria-invalid="${l(this.controlAriaInvalid)}" autocomplete="${this.autocomplete}"></textarea> ${this.characterCounter?this.renderCharacterCounter():o}</div>${this.renderError()} ${this.isHintBelow?this.renderHint():o}`}handleSelect(t){t.stopPropagation(),this.dispatchEvent(new p("select"))}renderCharacterCounter(){const{value:t,maxLength:e}=this,o="string"==typeof t?this.lengthMeasurer(t):0,i=e?e-o:null,a=e?`${o}/${e}`:o;return r`<nord-visually-hidden aria-live="polite" aria-atomic="true">${null!=i&&i<=10?this.localize.term("remainingCharacters",i):""}</nord-visually-hidden><div class="n-character-counter">${a}</div>`}handleLangChange(){const t=this.localize.resolvedLang;this.lengthMeasurer=function(t){if(Intl.Segmenter){const e=new Intl.Segmenter(t);return t=>[...e.segment(t)].length}return t=>t.length}(t)}resizeToFitContent(){const t=this.focusableRef.value;if(t)if("auto"===this.resize){t.style.height="auto";const e=getComputedStyle(t),r=t.offsetHeight-t.clientHeight,o=Number.parseFloat(e.minBlockSize)||0,i=Number.parseFloat(e.maxBlockSize)||Number.POSITIVE_INFINITY,a=t.scrollHeight+r;t.style.height=`${Math.min(Math.max(a,o),i)}px`}else t.style.height=""}};$.styles=[z,j,f,y],t([a({reflect:!0})],$.prototype,"resize",void 0),t([a({reflect:!0,type:Boolean})],$.prototype,"expand",void 0),t([a({reflect:!0,attribute:"maxlength",type:Number})],$.prototype,"maxLength",void 0),t([a({reflect:!0,type:Boolean,attribute:"character-counter"})],$.prototype,"characterCounter",void 0),t([c("resize","updated"),c("value","updated")],$.prototype,"resizeToFitContent",null),$=t([n("nord-textarea")],$);var _=$;export{_ as default};
 //# sourceMappingURL=Textarea.js.map

package/lib/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { html, LitElement, nothing } 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 { observe } from '../common/decorators/observe.js'\n\nimport { NordEvent } from '../common/events.js'\nimport { AutocompleteMixin } from '../common/mixins/AutocompleteMixin.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { ReadonlyMixin } from '../common/mixins/ReadonlyMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\n\nimport { TextSelectableMixin } from '../common/mixins/TextSelectableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport formFieldStyle from '../common/styles/FormField.css'\nimport textFieldStyle from '../common/styles/TextField.css'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Textarea.css'\n\nfunction createLengthMeasurer(locale: string) {\n  if (Intl.Segmenter) {\n    const segmenter = new Intl.Segmenter(locale)\n    return (value: string) => [...segmenter.segment(value)].length\n  }\n\n  return (value: string) => value.length\n}\n\n/**\n * Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\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 textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n *\n * @cssprop [--n-textarea-inline-size=240px] - Controls the inline size, or width, of the textarea.\n * @cssprop [--n-textarea-block-size=76px] - Controls the minimum block size, or height, of the textarea. When `resize=\"auto\"`, the textarea grows from this height as content is added.\n * @cssprop [--n-textarea-max-block-size=500px] - Controls the maximum block size, or height, of the textarea. When `resize=\"auto\"`, the textarea stops growing at this height and a scrollbar appears.\n * @cssprop [--n-textarea-background=var(--n-color-active)] - Controls the background of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-color=var(--n-color-text)] - Controls the text color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-color=var(--n-color-border-strong)] - Controls the border color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n *\n * @localization remainingCharacters - A function which receives the number of remaining characters and returns a string to be used as the aria-live message.\n */\n@customElement('nord-textarea')\nexport default class Textarea extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(TextSelectableMixin(InputMixin(FocusableMixin(LitElement)))))),\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  protected inputId = 'textarea'\n\n  private lengthMeasurer!: (value: string) => number\n  private localize = new LocalizeController<'nord-textarea'>(this, {\n    onLangChange: () => this.handleLangChange(),\n  })\n\n  /**\n   * Controls whether the textarea is resizable.\n   * By default is manually resizable vertically.\n   * Set to \"auto\" to enable auto-resizing as content grows.\n   */\n  @property({ reflect: true }) resize: 'vertical' | 'auto' = 'vertical'\n\n  /**\n   * Controls whether the textarea expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * Controls the max allowed length for the textarea.\n   */\n  @property({ reflect: true, attribute: 'maxlength', type: Number }) maxLength?: number\n\n  /**\n   * Controls whether to show a count of the number of characters in the textarea.\n   * When combined with `maxlength`, both the count and the max length are shown.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'character-counter' }) characterCounter = false\n\n  render() {\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <textarea\n          ${ref(this.textSelectableRef)}\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          ?disabled=${this.effectiveDisabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          maxlength=${ifDefined(this.maxLength)}\n          .value=${this.value ?? ''}\n          placeholder=${ifDefined(this.placeholder)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          @select=${this.handleSelect}\n          aria-label=${ifDefined(this.controlAriaLabel)}\n          aria-describedby=${ifDefined(this.controlAriaDescribedby)}\n          aria-invalid=${ifDefined(this.controlAriaInvalid)}\n          autocomplete=${this.autocomplete as any}\n        ></textarea>\n\n        ${this.characterCounter ? this.renderCharacterCounter() : nothing}\n      </div>\n\n      ${this.renderError()}\n      ${this.isHintBelow ? this.renderHint() : nothing}\n    `\n  }\n\n  protected handleSelect(e: Event) {\n    e.stopPropagation()\n\n    /**\n     * Fired when some text has been selected.\n     */\n    this.dispatchEvent(new NordEvent('select'))\n  }\n\n  private renderCharacterCounter() {\n    const { value, maxLength } = this\n    const length = typeof value === 'string' ? this.lengthMeasurer(value) : 0\n\n    const remainder = maxLength ? maxLength - length : null\n    const counter = maxLength ? `${length}/${maxLength}` : length\n\n    return html`\n      <nord-visually-hidden aria-live=\"polite\" aria-atomic=\"true\">\n        ${remainder != null && remainder <= 10 ? this.localize.term('remainingCharacters', remainder) : ''}\n      </nord-visually-hidden>\n      <div class=\"n-character-counter\">${counter}</div>\n    `\n  }\n\n  private handleLangChange() {\n    const lang = this.localize.resolvedLang\n    this.lengthMeasurer = createLengthMeasurer(lang)\n  }\n\n  @observe('resize', 'updated')\n  @observe('value', 'updated')\n  protected resizeToFitContent() {\n    const textarea = this.focusableRef.value\n\n    if (!textarea) {\n      return\n    }\n\n    if (this.resize === 'auto') {\n      textarea.style.height = 'auto'\n      // scrollHeight includes padding but not border. With box-sizing: border-box,\n      // setting height directly to scrollHeight would shrink the content area by the\n      // border width and clip the last line. Add the border so padding-block is preserved,\n      // then clamp the result to the resolved min/max so the inline height never\n      // overshoots the cap.\n      const computed = getComputedStyle(textarea)\n      const borderSize = textarea.offsetHeight - textarea.clientHeight\n      const minHeight = Number.parseFloat(computed.minBlockSize) || 0\n      const maxHeight = Number.parseFloat(computed.maxBlockSize) || Number.POSITIVE_INFINITY\n      const desired = textarea.scrollHeight + borderSize\n\n      textarea.style.height = `${Math.min(Math.max(desired, minHeight), maxHeight)}px`\n    }\n    else {\n      textarea.style.height = ''\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-textarea': Textarea\n  }\n}\n"],"names":["Textarea","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","localize","LocalizeController","onLangChange","handleLangChange","resize","expand","characterCounter","render","html","renderLabel","ref","textSelectableRef","focusableRef","effectiveDisabled","readonly","required","ifDefined","name","maxLength","_a","value","placeholder","handleChange","handleInput","handleSelect","controlAriaLabel","controlAriaDescribedby","controlAriaInvalid","autocomplete","renderCharacterCounter","nothing","renderError","isHintBelow","renderHint","e","stopPropagation","dispatchEvent","NordEvent","length","lengthMeasurer","remainder","counter","term","lang","resolvedLang","locale","Intl","Segmenter","segmenter","segment","createLengthMeasurer","resizeToFitContent","textarea","style","height","computed","getComputedStyle","borderSize","offsetHeight","clientHeight","minHeight","Number","parseFloat","minBlockSize","maxHeight","maxBlockSize","POSITIVE_INFINITY","desired","scrollHeight","Math","min","max","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { html, LitElement, nothing } 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 { observe } from '../common/decorators/observe.js'\n\nimport { NordEvent } from '../common/events.js'\nimport { AutocompleteMixin } from '../common/mixins/AutocompleteMixin.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { ReadonlyMixin } from '../common/mixins/ReadonlyMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\n\nimport { TextSelectableMixin } from '../common/mixins/TextSelectableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport formFieldStyle from '../common/styles/FormField.css'\nimport textFieldStyle from '../common/styles/TextField.css'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Textarea.css'\n\nfunction createLengthMeasurer(locale: string) {\n  if (Intl.Segmenter) {\n    const segmenter = new Intl.Segmenter(locale)\n    return (value: string) => [...segmenter.segment(value)].length\n  }\n\n  return (value: string) => value.length\n}\n\n/**\n * Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\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 textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n *\n * @cssprop [--n-textarea-inline-size=240px] - Controls the inline size, or width, of the textarea.\n * @cssprop [--n-textarea-block-size=76px] - Controls the minimum block size, or height, of the textarea. When `resize=\"auto\"`, the textarea grows from this height as content is added.\n * @cssprop [--n-textarea-max-block-size=500px] - Controls the maximum block size, or height, of the textarea. When `resize=\"auto\"`, the textarea stops growing at this height and a scrollbar appears.\n * @cssprop [--n-textarea-background=var(--n-color-active)] - Controls the background of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-color=var(--n-color-text)] - Controls the text color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-color=var(--n-color-border-strong)] - Controls the border color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n *\n * @localization remainingCharacters - A function which receives the number of remaining characters and returns a string to be used as the aria-live message.\n */\n@customElement('nord-textarea')\nexport default class Textarea extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(TextSelectableMixin(InputMixin(FocusableMixin(LitElement)))))),\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  protected inputId = 'textarea'\n\n  private lengthMeasurer!: (value: string) => number\n  private localize = new LocalizeController<'nord-textarea'>(this, {\n    onLangChange: () => this.handleLangChange(),\n  })\n\n  /**\n   * Controls whether the textarea is resizable.\n   * By default is manually resizable vertically.\n   * Set to \"auto\" to enable auto-resizing as content grows.\n   */\n  @property({ reflect: true }) resize: 'vertical' | 'auto' = 'vertical'\n\n  /**\n   * Controls whether the textarea expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * Controls the max allowed length for the textarea.\n   */\n  @property({ reflect: true, attribute: 'maxlength', type: Number }) maxLength?: number\n\n  /**\n   * Controls whether to show a count of the number of characters in the textarea.\n   * When combined with `maxlength`, both the count and the max length are shown.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'character-counter' }) characterCounter = false\n\n  render() {\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <textarea\n          ${ref(this.textSelectableRef)}\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          ?disabled=${this.effectiveDisabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          maxlength=${ifDefined(this.maxLength)}\n          .value=${this.value ?? ''}\n          placeholder=${ifDefined(this.placeholder)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          @select=${this.handleSelect}\n          aria-label=${ifDefined(this.controlAriaLabel)}\n          aria-describedby=${ifDefined(this.controlAriaDescribedby)}\n          aria-invalid=${ifDefined(this.controlAriaInvalid)}\n          autocomplete=${this.autocomplete as any}\n        ></textarea>\n\n        ${this.characterCounter ? this.renderCharacterCounter() : nothing}\n      </div>\n\n      ${this.renderError()}\n      ${this.isHintBelow ? this.renderHint() : nothing}\n    `\n  }\n\n  protected handleSelect(e: Event) {\n    e.stopPropagation()\n\n    /**\n     * Fired when some text has been selected.\n     */\n    this.dispatchEvent(new NordEvent('select'))\n  }\n\n  private renderCharacterCounter() {\n    const { value, maxLength } = this\n    const length = typeof value === 'string' ? this.lengthMeasurer(value) : 0\n\n    const remainder = maxLength ? maxLength - length : null\n    const counter = maxLength ? `${length}/${maxLength}` : length\n\n    return html`\n      <nord-visually-hidden aria-live=\"polite\" aria-atomic=\"true\">\n        ${remainder != null && remainder <= 10 ? this.localize.term('remainingCharacters', remainder) : ''}\n      </nord-visually-hidden>\n      <div class=\"n-character-counter\">${counter}</div>\n    `\n  }\n\n  private handleLangChange() {\n    const lang = this.localize.resolvedLang\n    this.lengthMeasurer = createLengthMeasurer(lang)\n  }\n\n  @observe('resize', 'updated')\n  @observe('value', 'updated')\n  protected resizeToFitContent() {\n    const textarea = this.focusableRef.value\n\n    if (!textarea) {\n      return\n    }\n\n    if (this.resize === 'auto') {\n      textarea.style.height = 'auto'\n      // scrollHeight includes padding but not border. With box-sizing: border-box,\n      // setting height directly to scrollHeight would shrink the content area by the\n      // border width and clip the last line. Add the border so padding-block is preserved,\n      // then clamp the result to the resolved min/max so the inline height never\n      // overshoots the cap.\n      const computed = getComputedStyle(textarea)\n      const borderSize = textarea.offsetHeight - textarea.clientHeight\n      const minHeight = Number.parseFloat(computed.minBlockSize) || 0\n      const maxHeight = Number.parseFloat(computed.maxBlockSize) || Number.POSITIVE_INFINITY\n      const desired = textarea.scrollHeight + borderSize\n\n      textarea.style.height = `${Math.min(Math.max(desired, minHeight), maxHeight)}px`\n    }\n    else {\n      textarea.style.height = ''\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-textarea': Textarea\n  }\n}\n"],"names":["Textarea","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","localize","LocalizeController","onLangChange","handleLangChange","resize","expand","characterCounter","render","html","renderLabel","ref","textSelectableRef","focusableRef","effectiveDisabled","readonly","required","ifDefined","name","maxLength","_a","value","placeholder","handleChange","handleInput","handleSelect","controlAriaLabel","controlAriaDescribedby","controlAriaInvalid","autocomplete","renderCharacterCounter","nothing","renderError","isHintBelow","renderHint","e","stopPropagation","dispatchEvent","NordEvent","length","lengthMeasurer","remainder","counter","term","lang","resolvedLang","locale","Intl","Segmenter","segmenter","segment","createLengthMeasurer","resizeToFitContent","textarea","style","height","computed","getComputedStyle","borderSize","offsetHeight","clientHeight","minHeight","Number","parseFloat","minBlockSize","maxHeight","maxBlockSize","POSITIVE_INFINITY","desired","scrollHeight","Math","min","max","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","attribute","observe","customElement"],"mappings":"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"}

package/lib/TimePicker.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as i,html as o,nothing as e,LitElement as r}from"lit";import{property as l,query as n,customElement as s}from"lit/decorators.js";import{repeat as a}from"lit/directives/repeat.js";import{N as d}from"./events-Bv6wNHwJ.js";import{D as p}from"./DraftComponentMixin-4qug5Rky.js";import{s as m}from"./Component-BJ5O5n8k.js";import{LocalizeController as h}from"./LocalizeController.js";import"./Input.js";import"./Dropdown.js";import"./DropdownItem.js";import"./Button.js";import"./Icon.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./navigation-search-CBbIGzo2.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/directives/ref.js";import"lit/directives/style-map.js";import"./DirectionController-ChvNGESZ.js";import"./ResizeController-14PUwRQy.js";import"./cond-CI1KbneT.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./FocusableMixin-BlQLNPdJ.js";import"./FormAssociatedMixin-D9aPREgv.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";import"./InputMixin-LetXsCyv.js";import"./ReadonlyMixin-BdJPGtQ3.js";import"./SizeMixin-CU9cLbLC.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./FormField-CMgEFZCK.js";import"./TextField-CSKvieoG.js";import"./observe-D0n0zOfU.js";import"./Popout-DpN7PP9h.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./DropdownItem-BYbOLth6.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";const u=i`:host{display:inline-block}nord-input{--n-input-picker-indicator-display:none}:host([expand]){display:block}`;function c(t){const i=t.match(/^(\d{2}):(\d{2})$/);return i?60*Number(i[1])+Number(i[2]):null}function v(t){const i=Math.floor(t/60)%24;return`${String(i).padStart(2,"0")}:${String(t%60).padStart(2,"0")}`}let j=class extends(p(r)){constructor(){super(...arguments),this.localize=new h(this),this.start="09:00",this.end="17:00",this.interval=30,this.roundToInterval=!1,this.size="m",this.expand=!1,this.disabled=!1,this.readonly=!1,this.required=!1,this.hideLabel=!1,this.hintBelow=!1,this.hideRequired=!1,this.handleFieldChange=t=>{const i=t.target.value;this.setValue(this.roundToInterval?this.roundToNearestInterval(i):i)}}connectedCallback(){var t;super.connectedCallback(),null!==(t=this.ariaObserver)&&void 0!==t||(this.ariaObserver=new MutationObserver((()=>this.requestUpdate()))),this.ariaObserver.observe(this,{attributes:!0,attributeFilter:["aria-label","aria-labelledby"]})}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.ariaObserver)||void 0===t||t.disconnect(),this.ariaObserver=void 0}focus(){var t;null===(t=this.input)||void 0===t||t.focus()}get clampedInterval(){return this.interval>1&&this.interval<360?this.interval:30}get hostAccessibleName(){const t=this.getAttribute("aria-label");if(t)return t;const i=this.getAttribute("aria-labelledby");if(!i)return"";const o=this.getRootNode();return i.split(/\s+/).map((t=>{var i,e,r,l;return null!==(l=null===(r=null===(e=null===(i=o.getElementById)||void 0===i?void 0:i.call(o,t))||void 0===e?void 0:e.textContent)||void 0===r?void 0:r.trim())&&void 0!==l?l:""})).filter(Boolean).join(" ")}formatLabel(t){const i=c(t);if(null===i)return t;const o=new Date(2e3,0,1,Math.floor(i/60),i%60);try{return new Intl.DateTimeFormat(void 0,{hour:"numeric",minute:"2-digit",...this.hourFormat?{hour12:"12h"===this.hourFormat}:{}}).format(o)}catch(i){return t}}get options(){var t,i;const o=null!==(t=c(this.start))&&void 0!==t?t:540,e=null!==(i=c(this.end))&&void 0!==i?i:1020;if(e<o)return[];const r=[];for(let t=o;t<=e;t+=this.clampedInterval){const i=v(t);r.push({value:i,label:this.formatLabel(i)})}return r}roundToNearestInterval(t){var i,o;const e=c(t),r=null!==(i=c(this.start))&&void 0!==i?i:540,l=null!==(o=c(this.end))&&void 0!==o?o:1020;if(null===e||l<r)return t;const n=this.clampedInterval,s=r+Math.round((e-r)/n)*n;return v(Math.min(Math.max(s,r),l))}setValue(t){this.value!==t&&(this.value=t,this.dispatchEvent(new d("change")))}handleSelect(t){var i;this.setValue(t),null===(i=this.dropdown)||void 0===i||i.hide()}render(){var t,i,r,l,n,s,d;return o`<nord-input type="time" label="${null!==(t=this.label)&&void 0!==t?t:e}" hint="${null!==(i=this.hint)&&void 0!==i?i:e}" error="${null!==(r=this.error)&&void 0!==r?r:e}" ?hide-label="${this.hideLabel}" ?hint-below="${this.hintBelow}" ?hide-required="${this.hideRequired}" aria-label="${this.hostAccessibleName||e}" name="${null!==(l=this.name)&&void 0!==l?l:e}" size="${this.size}" min="${null!==(n=this.min)&&void 0!==n?n:e}" max="${null!==(s=this.max)&&void 0!==s?s:e}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" .value="${null!==(d=this.value)&&void 0!==d?d:""}" @change="${this.handleFieldChange}"><nord-dropdown slot="end" align="end" size="s"><nord-button slot="toggle" size="${this.size}" square ?disabled="${this.disabled||this.readonly}"><nord-icon name="interface-time" label="${this.localize.term("chooseTime")}"></nord-icon></nord-button>${a(this.options,(t=>t.value),(t=>o`<nord-dropdown-item ?active="${t.value===this.value}" @click="${()=>this.handleSelect(t.value)}">${t.label}</nord-dropdown-item>`))}</nord-dropdown></nord-input>`}};j.styles=[m,u],t([l()],j.prototype,"value",void 0),t([l()],j.prototype,"name",void 0),t([l()],j.prototype,"start",void 0),t([l()],j.prototype,"end",void 0),t([l({type:Number})],j.prototype,"interval",void 0),t([l({type:Boolean,reflect:!0,attribute:"round-to-interval"})],j.prototype,"roundToInterval",void 0),t([l({reflect:!0,attribute:"hour-format"})],j.prototype,"hourFormat",void 0),t([l()],j.prototype,"min",void 0),t([l()],j.prototype,"max",void 0),t([l({reflect:!0})],j.prototype,"size",void 0),t([l({type:Boolean})],j.prototype,"expand",void 0),t([l({type:Boolean})],j.prototype,"disabled",void 0),t([l({type:Boolean})],j.prototype,"readonly",void 0),t([l({type:Boolean})],j.prototype,"required",void 0),t([l()],j.prototype,"label",void 0),t([l()],j.prototype,"hint",void 0),t([l()],j.prototype,"error",void 0),t([l({type:Boolean,attribute:"hide-label"})],j.prototype,"hideLabel",void 0),t([l({type:Boolean,attribute:"hint-below"})],j.prototype,"hintBelow",void 0),t([l({type:Boolean,attribute:"hide-required"})],j.prototype,"hideRequired",void 0),t([n("nord-input")],j.prototype,"input",void 0),t([n("nord-dropdown")],j.prototype,"dropdown",void 0),j=t([s("nord-time-picker")],j);var b=j;export{b as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as i,html as o,nothing as e,LitElement as r}from"lit";import{property as l,query as n,customElement as s}from"lit/decorators.js";import{repeat as a}from"lit/directives/repeat.js";import{N as d}from"./events-Bv6wNHwJ.js";import{D as p}from"./DraftComponentMixin-4qug5Rky.js";import{s as m}from"./Component-BJ5O5n8k.js";import{LocalizeController as h}from"./LocalizeController.js";import"./Input.js";import"./Dropdown.js";import"./DropdownItem.js";import"./Button.js";import"./Icon.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";import"./navigation-search-CBbIGzo2.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/directives/ref.js";import"lit/directives/style-map.js";import"./DirectionController-ChvNGESZ.js";import"./ResizeController-14PUwRQy.js";import"./cond-CI1KbneT.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./FocusableMixin-BlQLNPdJ.js";import"./FormAssociatedMixin-D9aPREgv.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";import"./InputMixin-LetXsCyv.js";import"./ReadonlyMixin-BdJPGtQ3.js";import"./SizeMixin-CU9cLbLC.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./FormField-CMgEFZCK.js";import"./TextField-CSKvieoG.js";import"./observe-D0n0zOfU.js";import"./Popout-B6Hirj3y.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-wcL1ziJa.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.js";import"./ScrollbarController-BFC67Y2x.js";import"./DropdownItem-BYbOLth6.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";const u=i`:host{display:inline-block}nord-input{--n-input-picker-indicator-display:none}:host([expand]){display:block}`;function c(t){const i=t.match(/^(\d{2}):(\d{2})$/);return i?60*Number(i[1])+Number(i[2]):null}function v(t){const i=Math.floor(t/60)%24;return`${String(i).padStart(2,"0")}:${String(t%60).padStart(2,"0")}`}let j=class extends(p(r)){constructor(){super(...arguments),this.localize=new h(this),this.start="09:00",this.end="17:00",this.interval=30,this.roundToInterval=!1,this.size="m",this.expand=!1,this.disabled=!1,this.readonly=!1,this.required=!1,this.hideLabel=!1,this.hintBelow=!1,this.hideRequired=!1,this.handleFieldChange=t=>{const i=t.target.value;this.setValue(this.roundToInterval?this.roundToNearestInterval(i):i)}}connectedCallback(){var t;super.connectedCallback(),null!==(t=this.ariaObserver)&&void 0!==t||(this.ariaObserver=new MutationObserver((()=>this.requestUpdate()))),this.ariaObserver.observe(this,{attributes:!0,attributeFilter:["aria-label","aria-labelledby"]})}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.ariaObserver)||void 0===t||t.disconnect(),this.ariaObserver=void 0}focus(){var t;null===(t=this.input)||void 0===t||t.focus()}get clampedInterval(){return this.interval>1&&this.interval<360?this.interval:30}get hostAccessibleName(){const t=this.getAttribute("aria-label");if(t)return t;const i=this.getAttribute("aria-labelledby");if(!i)return"";const o=this.getRootNode();return i.split(/\s+/).map((t=>{var i,e,r,l;return null!==(l=null===(r=null===(e=null===(i=o.getElementById)||void 0===i?void 0:i.call(o,t))||void 0===e?void 0:e.textContent)||void 0===r?void 0:r.trim())&&void 0!==l?l:""})).filter(Boolean).join(" ")}formatLabel(t){const i=c(t);if(null===i)return t;const o=new Date(2e3,0,1,Math.floor(i/60),i%60);try{return new Intl.DateTimeFormat(void 0,{hour:"numeric",minute:"2-digit",...this.hourFormat?{hour12:"12h"===this.hourFormat}:{}}).format(o)}catch(i){return t}}get options(){var t,i;const o=null!==(t=c(this.start))&&void 0!==t?t:540,e=null!==(i=c(this.end))&&void 0!==i?i:1020;if(e<o)return[];const r=[];for(let t=o;t<=e;t+=this.clampedInterval){const i=v(t);r.push({value:i,label:this.formatLabel(i)})}return r}roundToNearestInterval(t){var i,o;const e=c(t),r=null!==(i=c(this.start))&&void 0!==i?i:540,l=null!==(o=c(this.end))&&void 0!==o?o:1020;if(null===e||l<r)return t;const n=this.clampedInterval,s=r+Math.round((e-r)/n)*n;return v(Math.min(Math.max(s,r),l))}setValue(t){this.value!==t&&(this.value=t,this.dispatchEvent(new d("change")))}handleSelect(t){var i;this.setValue(t),null===(i=this.dropdown)||void 0===i||i.hide()}render(){var t,i,r,l,n,s,d;return o`<nord-input type="time" label="${null!==(t=this.label)&&void 0!==t?t:e}" hint="${null!==(i=this.hint)&&void 0!==i?i:e}" error="${null!==(r=this.error)&&void 0!==r?r:e}" ?hide-label="${this.hideLabel}" ?hint-below="${this.hintBelow}" ?hide-required="${this.hideRequired}" aria-label="${this.hostAccessibleName||e}" name="${null!==(l=this.name)&&void 0!==l?l:e}" size="${this.size}" min="${null!==(n=this.min)&&void 0!==n?n:e}" max="${null!==(s=this.max)&&void 0!==s?s:e}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" .value="${null!==(d=this.value)&&void 0!==d?d:""}" @change="${this.handleFieldChange}"><nord-dropdown slot="end" align="end" size="s"><nord-button slot="toggle" hide-dropdown-icon size="${this.size}" square ?disabled="${this.disabled||this.readonly}"><nord-icon name="interface-time" label="${this.localize.term("chooseTime")}"></nord-icon></nord-button>${a(this.options,(t=>t.value),(t=>o`<nord-dropdown-item ?active="${t.value===this.value}" @click="${()=>this.handleSelect(t.value)}">${t.label}</nord-dropdown-item>`))}</nord-dropdown></nord-input>`}};j.styles=[m,u],t([l()],j.prototype,"value",void 0),t([l()],j.prototype,"name",void 0),t([l()],j.prototype,"start",void 0),t([l()],j.prototype,"end",void 0),t([l({type:Number})],j.prototype,"interval",void 0),t([l({type:Boolean,reflect:!0,attribute:"round-to-interval"})],j.prototype,"roundToInterval",void 0),t([l({reflect:!0,attribute:"hour-format"})],j.prototype,"hourFormat",void 0),t([l()],j.prototype,"min",void 0),t([l()],j.prototype,"max",void 0),t([l({reflect:!0})],j.prototype,"size",void 0),t([l({type:Boolean})],j.prototype,"expand",void 0),t([l({type:Boolean})],j.prototype,"disabled",void 0),t([l({type:Boolean})],j.prototype,"readonly",void 0),t([l({type:Boolean})],j.prototype,"required",void 0),t([l()],j.prototype,"label",void 0),t([l()],j.prototype,"hint",void 0),t([l()],j.prototype,"error",void 0),t([l({type:Boolean,attribute:"hide-label"})],j.prototype,"hideLabel",void 0),t([l({type:Boolean,attribute:"hint-below"})],j.prototype,"hintBelow",void 0),t([l({type:Boolean,attribute:"hide-required"})],j.prototype,"hideRequired",void 0),t([n("nord-input")],j.prototype,"input",void 0),t([n("nord-dropdown")],j.prototype,"dropdown",void 0),j=t([s("nord-time-picker")],j);var b=j;export{b as default};
 //# sourceMappingURL=TimePicker.js.map

package/lib/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","sources":["../src/time-picker/TimePicker.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\n\nimport { NordEvent } from '../common/events.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './TimePicker.css'\nimport '../input/Input.js'\nimport '../dropdown/Dropdown.js'\nimport '../dropdown-item/DropdownItem.js'\nimport '../button/Button.js'\nimport '../icon/Icon.js'\n\ninterface TimeOption {\n  value: string\n  label: string\n}\n\n/** Minutes since midnight from an ISO `HH:mm` value, or null. */\nfunction isoToMinutes(value: string): number | null {\n  const match = value.match(/^(\\d{2}):(\\d{2})$/)\n  return match ? Number(match[1]) * 60 + Number(match[2]) : null\n}\n\n/** ISO `HH:mm` from minutes since midnight. */\nfunction minutesToIso(total: number): string {\n  const hours = Math.floor(total / 60) % 24\n  return `${String(hours).padStart(2, '0')}:${String(total % 60).padStart(2, '0')}`\n}\n\n/**\n * Time Picker pairs the browser's native time field with a dropdown of quick\n * options, generated at a configurable `interval` between `start` and `end`.\n * The native field handles typing, locale-aware display and validation; the\n * dropdown is a shortcut for common times.\n *\n * The value is held in ISO `HH:mm` format.\n *\n * Like a native input, Time Picker is a control only — it has no built-in\n * label, hint or error. Compose it inside a [Field](/components/field/) (with a\n * [Field Label](/components/field-label/), [Field Description](/components/field-description/)\n * and [Field Error](/components/field-error/)) to label it and add help or error text.\n *\n * @status draft\n * @category form\n *\n * @fires change - Fired when the selected time changes.\n *\n * @localization chooseTime - Accessible label for the dropdown toggle button.\n */\n@customElement('nord-time-picker')\nexport default class TimePicker extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private localize = new LocalizeController<'nord-time-picker'>(this)\n\n  private ariaObserver?: MutationObserver\n\n  /** The selected time, in ISO `HH:mm` format. */\n  @property() value?: string\n\n  /** Name submitted with the form. */\n  @property() name?: string\n\n  /** Earliest time offered in the dropdown, ISO `HH:mm`. @default \"09:00\" */\n  @property() start = '09:00'\n\n  /** Latest time offered in the dropdown, ISO `HH:mm`. @default \"17:00\" */\n  @property() end = '17:00'\n\n  /** Minutes between each option in the dropdown. @default 30 */\n  @property({ type: Number }) interval = 30\n\n  /** When set, a typed time is rounded to the nearest interval option; otherwise any time is accepted. */\n  @property({ type: Boolean, reflect: true, attribute: 'round-to-interval' }) roundToInterval = false\n\n  /** Display dropdown times in 12-hour (AM/PM) or 24-hour format; omit to use the locale default. */\n  @property({ reflect: true, attribute: 'hour-format' }) hourFormat?: '12h' | '24h'\n\n  /** Earliest time the field will accept, ISO `HH:mm`. */\n  @property() min?: string\n\n  /** Latest time the field will accept, ISO `HH:mm`. */\n  @property() max?: string\n\n  /** Size of the field. @default \"m\" */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 'm'\n\n  /** Whether the field expands to fill its container. */\n  @property({ type: Boolean }) expand = false\n\n  /** Whether the field is disabled. */\n  @property({ type: Boolean }) disabled = false\n\n  /** Whether the field is read-only. */\n  @property({ type: Boolean }) readonly = false\n\n  /** Whether a value is required when submitting a form. */\n  @property({ type: Boolean }) required = false\n\n  /**\n   * Label for the control. Rendered by the inner input when used standalone;\n   * ignored when wrapped in a `<nord-field>` (the Field provides the label).\n   */\n  @property() label?: string\n\n  /** Optional hint text. Ignored inside a `<nord-field>`. */\n  @property() hint?: string\n\n  /** Optional error text. Ignored inside a `<nord-field>`. */\n  @property() error?: string\n\n  /** Visually hide the label, but keep it for assistive technology. */\n  @property({ type: Boolean, attribute: 'hide-label' }) hideLabel = false\n\n  /** Render the hint below the control instead of below the label. */\n  @property({ type: Boolean, attribute: 'hint-below' }) hintBelow = false\n\n  /** Visually hide the required indicator, but keep the required state for AT. */\n  @property({ type: Boolean, attribute: 'hide-required' }) hideRequired = false\n\n  @query('nord-input') private input?: HTMLElement & { focus: () => void, value: string }\n\n  @query('nord-dropdown') private dropdown?: HTMLElement & { hide: () => void }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // Inside a <nord-field> the inner nord-input consumes the field context\n    // directly (the request event crosses this shadow boundary), so it names and\n    // describes itself. Standalone, it renders the forwarded label/hint/error.\n    // We still re-render when a consumer sets aria-label on the host so it forwards.\n    this.ariaObserver ??= new MutationObserver(() => this.requestUpdate())\n    this.ariaObserver.observe(this, {\n      attributes: true,\n      attributeFilter: ['aria-label', 'aria-labelledby'],\n    })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.ariaObserver?.disconnect()\n    this.ariaObserver = undefined\n  }\n\n  /** Move focus to the field, so a Field Label's click-to-focus works. */\n  override focus(): void {\n    this.input?.focus()\n  }\n\n  private get clampedInterval(): number {\n    return this.interval > 1 && this.interval < 360 ? this.interval : 30\n  }\n\n  /**\n   * Accessible name from a consumer-set host `aria-label` / `aria-labelledby`,\n   * forwarded to the inner input as `aria-label` (an external `aria-labelledby`\n   * can't cross the shadow boundary). Inside a `<nord-field>` the inner input\n   * takes its name from the field context instead.\n   */\n  private get hostAccessibleName(): string {\n    const ariaLabel = this.getAttribute('aria-label')\n    if (ariaLabel) {\n      return ariaLabel\n    }\n    const labelledby = this.getAttribute('aria-labelledby')\n    if (!labelledby) {\n      return ''\n    }\n    const root = this.getRootNode() as Document | ShadowRoot\n    return labelledby\n      .split(/\\s+/)\n      .map(id => root.getElementById?.(id)?.textContent?.trim() ?? '')\n      .filter(Boolean)\n      .join(' ')\n  }\n\n  /** Locale-aware label for a `HH:mm` value (matches how the native field reads). */\n  private formatLabel(iso: string): string {\n    const minutes = isoToMinutes(iso)\n    if (minutes === null) {\n      return iso\n    }\n    const date = new Date(2000, 0, 1, Math.floor(minutes / 60), minutes % 60)\n    try {\n      return new Intl.DateTimeFormat(undefined, {\n        hour: 'numeric',\n        minute: '2-digit',\n        ...(this.hourFormat ? { hour12: this.hourFormat === '12h' } : {}),\n      }).format(date)\n    }\n    catch {\n      return iso\n    }\n  }\n\n  /** Generated dropdown options between `start` and `end`. */\n  private get options(): TimeOption[] {\n    const startMin = isoToMinutes(this.start) ?? 540\n    const endMin = isoToMinutes(this.end) ?? 1020\n    if (endMin < startMin) {\n      return []\n    }\n    const out: TimeOption[] = []\n    for (let m = startMin; m <= endMin; m += this.clampedInterval) {\n      const iso = minutesToIso(m)\n      out.push({ value: iso, label: this.formatLabel(iso) })\n    }\n    return out\n  }\n\n  /** Round a `HH:mm` value to the nearest interval option, clamped within `start`/`end`. */\n  private roundToNearestInterval(iso: string): string {\n    const minutes = isoToMinutes(iso)\n    const startMin = isoToMinutes(this.start) ?? 540\n    const endMin = isoToMinutes(this.end) ?? 1020\n    if (minutes === null || endMin < startMin) {\n      return iso\n    }\n    const step = this.clampedInterval\n    const rounded = startMin + Math.round((minutes - startMin) / step) * step\n    const clamped = Math.min(Math.max(rounded, startMin), endMin)\n    return minutesToIso(clamped)\n  }\n\n  private setValue(iso: string): void {\n    if (this.value === iso) {\n      return\n    }\n    this.value = iso\n    this.dispatchEvent(new NordEvent('change'))\n  }\n\n  private handleFieldChange = (event: Event): void => {\n    const value = (event.target as HTMLInputElement).value\n    this.setValue(this.roundToInterval ? this.roundToNearestInterval(value) : value)\n  }\n\n  private handleSelect(iso: string): void {\n    this.setValue(iso)\n    this.dropdown?.hide()\n  }\n\n  render() {\n    return html`\n      <nord-input\n        type=\"time\"\n        label=${this.label ?? nothing}\n        hint=${this.hint ?? nothing}\n        error=${this.error ?? nothing}\n        ?hide-label=${this.hideLabel}\n        ?hint-below=${this.hintBelow}\n        ?hide-required=${this.hideRequired}\n        aria-label=${this.hostAccessibleName || nothing}\n        name=${this.name ?? nothing}\n        size=${this.size}\n        min=${this.min ?? nothing}\n        max=${this.max ?? nothing}\n        ?expand=${this.expand}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        .value=${this.value ?? ''}\n        @change=${this.handleFieldChange}\n      >\n        <nord-dropdown slot=\"end\" align=\"end\" size=\"s\">\n          <nord-button slot=\"toggle\" size=${this.size} square ?disabled=${this.disabled || this.readonly}>\n            <nord-icon name=\"interface-time\" label=${this.localize.term('chooseTime')}></nord-icon>\n          </nord-button>\n          ${repeat(\n            this.options,\n            option => option.value,\n            option => html`\n              <nord-dropdown-item\n                ?active=${option.value === this.value}\n                @click=${() => this.handleSelect(option.value)}\n              >\n                ${option.label}\n              </nord-dropdown-item>\n            `,\n          )}\n        </nord-dropdown>\n      </nord-input>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-time-picker': TimePicker\n  }\n}\n"],"names":["isoToMinutes","value","match","Number","minutesToIso","total","hours","Math","floor","String","padStart","TimePicker","DraftComponentMixin","LitElement","constructor","this","localize","LocalizeController","start","end","interval","roundToInterval","size","expand","disabled","readonly","required","hideLabel","hintBelow","hideRequired","handleFieldChange","event","target","setValue","roundToNearestInterval","connectedCallback","super","_a","ariaObserver","MutationObserver","requestUpdate","observe","attributes","attributeFilter","disconnectedCallback","disconnect","undefined","focus","input","clampedInterval","hostAccessibleName","ariaLabel","getAttribute","labelledby","root","getRootNode","split","map","id","_b","_c","_d","getElementById","call","textContent","trim","filter","Boolean","join","formatLabel","iso","minutes","date","Date","Intl","DateTimeFormat","hour","minute","hourFormat","hour12","format","options","startMin","endMin","out","m","push","label","step","rounded","round","min","max","dispatchEvent","NordEvent","handleSelect","dropdown","hide","render","html","nothing","hint","error","name","_e","_f","_g","term","repeat","option","styles","componentStyle","style","__decorate","property","prototype","type","reflect","attribute","query","customElement"],"mappings":"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"}
+{"version":3,"file":"TimePicker.js","sources":["../src/time-picker/TimePicker.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\n\nimport { NordEvent } from '../common/events.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './TimePicker.css'\nimport '../input/Input.js'\nimport '../dropdown/Dropdown.js'\nimport '../dropdown-item/DropdownItem.js'\nimport '../button/Button.js'\nimport '../icon/Icon.js'\n\ninterface TimeOption {\n  value: string\n  label: string\n}\n\n/** Minutes since midnight from an ISO `HH:mm` value, or null. */\nfunction isoToMinutes(value: string): number | null {\n  const match = value.match(/^(\\d{2}):(\\d{2})$/)\n  return match ? Number(match[1]) * 60 + Number(match[2]) : null\n}\n\n/** ISO `HH:mm` from minutes since midnight. */\nfunction minutesToIso(total: number): string {\n  const hours = Math.floor(total / 60) % 24\n  return `${String(hours).padStart(2, '0')}:${String(total % 60).padStart(2, '0')}`\n}\n\n/**\n * Time Picker pairs the browser's native time field with a dropdown of quick\n * options, generated at a configurable `interval` between `start` and `end`.\n * The native field handles typing, locale-aware display and validation; the\n * dropdown is a shortcut for common times.\n *\n * The value is held in ISO `HH:mm` format.\n *\n * Like a native input, Time Picker is a control only — it has no built-in\n * label, hint or error. Compose it inside a [Field](/components/field/) (with a\n * [Field Label](/components/field-label/), [Field Description](/components/field-description/)\n * and [Field Error](/components/field-error/)) to label it and add help or error text.\n *\n * @status draft\n * @category form\n *\n * @fires change - Fired when the selected time changes.\n *\n * @localization chooseTime - Accessible label for the dropdown toggle button.\n */\n@customElement('nord-time-picker')\nexport default class TimePicker extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private localize = new LocalizeController<'nord-time-picker'>(this)\n\n  private ariaObserver?: MutationObserver\n\n  /** The selected time, in ISO `HH:mm` format. */\n  @property() value?: string\n\n  /** Name submitted with the form. */\n  @property() name?: string\n\n  /** Earliest time offered in the dropdown, ISO `HH:mm`. @default \"09:00\" */\n  @property() start = '09:00'\n\n  /** Latest time offered in the dropdown, ISO `HH:mm`. @default \"17:00\" */\n  @property() end = '17:00'\n\n  /** Minutes between each option in the dropdown. @default 30 */\n  @property({ type: Number }) interval = 30\n\n  /** When set, a typed time is rounded to the nearest interval option; otherwise any time is accepted. */\n  @property({ type: Boolean, reflect: true, attribute: 'round-to-interval' }) roundToInterval = false\n\n  /** Display dropdown times in 12-hour (AM/PM) or 24-hour format; omit to use the locale default. */\n  @property({ reflect: true, attribute: 'hour-format' }) hourFormat?: '12h' | '24h'\n\n  /** Earliest time the field will accept, ISO `HH:mm`. */\n  @property() min?: string\n\n  /** Latest time the field will accept, ISO `HH:mm`. */\n  @property() max?: string\n\n  /** Size of the field. @default \"m\" */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 'm'\n\n  /** Whether the field expands to fill its container. */\n  @property({ type: Boolean }) expand = false\n\n  /** Whether the field is disabled. */\n  @property({ type: Boolean }) disabled = false\n\n  /** Whether the field is read-only. */\n  @property({ type: Boolean }) readonly = false\n\n  /** Whether a value is required when submitting a form. */\n  @property({ type: Boolean }) required = false\n\n  /**\n   * Label for the control. Rendered by the inner input when used standalone;\n   * ignored when wrapped in a `<nord-field>` (the Field provides the label).\n   */\n  @property() label?: string\n\n  /** Optional hint text. Ignored inside a `<nord-field>`. */\n  @property() hint?: string\n\n  /** Optional error text. Ignored inside a `<nord-field>`. */\n  @property() error?: string\n\n  /** Visually hide the label, but keep it for assistive technology. */\n  @property({ type: Boolean, attribute: 'hide-label' }) hideLabel = false\n\n  /** Render the hint below the control instead of below the label. */\n  @property({ type: Boolean, attribute: 'hint-below' }) hintBelow = false\n\n  /** Visually hide the required indicator, but keep the required state for AT. */\n  @property({ type: Boolean, attribute: 'hide-required' }) hideRequired = false\n\n  @query('nord-input') private input?: HTMLElement & { focus: () => void, value: string }\n\n  @query('nord-dropdown') private dropdown?: HTMLElement & { hide: () => void }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // Inside a <nord-field> the inner nord-input consumes the field context\n    // directly (the request event crosses this shadow boundary), so it names and\n    // describes itself. Standalone, it renders the forwarded label/hint/error.\n    // We still re-render when a consumer sets aria-label on the host so it forwards.\n    this.ariaObserver ??= new MutationObserver(() => this.requestUpdate())\n    this.ariaObserver.observe(this, {\n      attributes: true,\n      attributeFilter: ['aria-label', 'aria-labelledby'],\n    })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.ariaObserver?.disconnect()\n    this.ariaObserver = undefined\n  }\n\n  /** Move focus to the field, so a Field Label's click-to-focus works. */\n  override focus(): void {\n    this.input?.focus()\n  }\n\n  private get clampedInterval(): number {\n    return this.interval > 1 && this.interval < 360 ? this.interval : 30\n  }\n\n  /**\n   * Accessible name from a consumer-set host `aria-label` / `aria-labelledby`,\n   * forwarded to the inner input as `aria-label` (an external `aria-labelledby`\n   * can't cross the shadow boundary). Inside a `<nord-field>` the inner input\n   * takes its name from the field context instead.\n   */\n  private get hostAccessibleName(): string {\n    const ariaLabel = this.getAttribute('aria-label')\n    if (ariaLabel) {\n      return ariaLabel\n    }\n    const labelledby = this.getAttribute('aria-labelledby')\n    if (!labelledby) {\n      return ''\n    }\n    const root = this.getRootNode() as Document | ShadowRoot\n    return labelledby\n      .split(/\\s+/)\n      .map(id => root.getElementById?.(id)?.textContent?.trim() ?? '')\n      .filter(Boolean)\n      .join(' ')\n  }\n\n  /** Locale-aware label for a `HH:mm` value (matches how the native field reads). */\n  private formatLabel(iso: string): string {\n    const minutes = isoToMinutes(iso)\n    if (minutes === null) {\n      return iso\n    }\n    const date = new Date(2000, 0, 1, Math.floor(minutes / 60), minutes % 60)\n    try {\n      return new Intl.DateTimeFormat(undefined, {\n        hour: 'numeric',\n        minute: '2-digit',\n        ...(this.hourFormat ? { hour12: this.hourFormat === '12h' } : {}),\n      }).format(date)\n    }\n    catch {\n      return iso\n    }\n  }\n\n  /** Generated dropdown options between `start` and `end`. */\n  private get options(): TimeOption[] {\n    const startMin = isoToMinutes(this.start) ?? 540\n    const endMin = isoToMinutes(this.end) ?? 1020\n    if (endMin < startMin) {\n      return []\n    }\n    const out: TimeOption[] = []\n    for (let m = startMin; m <= endMin; m += this.clampedInterval) {\n      const iso = minutesToIso(m)\n      out.push({ value: iso, label: this.formatLabel(iso) })\n    }\n    return out\n  }\n\n  /** Round a `HH:mm` value to the nearest interval option, clamped within `start`/`end`. */\n  private roundToNearestInterval(iso: string): string {\n    const minutes = isoToMinutes(iso)\n    const startMin = isoToMinutes(this.start) ?? 540\n    const endMin = isoToMinutes(this.end) ?? 1020\n    if (minutes === null || endMin < startMin) {\n      return iso\n    }\n    const step = this.clampedInterval\n    const rounded = startMin + Math.round((minutes - startMin) / step) * step\n    const clamped = Math.min(Math.max(rounded, startMin), endMin)\n    return minutesToIso(clamped)\n  }\n\n  private setValue(iso: string): void {\n    if (this.value === iso) {\n      return\n    }\n    this.value = iso\n    this.dispatchEvent(new NordEvent('change'))\n  }\n\n  private handleFieldChange = (event: Event): void => {\n    const value = (event.target as HTMLInputElement).value\n    this.setValue(this.roundToInterval ? this.roundToNearestInterval(value) : value)\n  }\n\n  private handleSelect(iso: string): void {\n    this.setValue(iso)\n    this.dropdown?.hide()\n  }\n\n  render() {\n    return html`\n      <nord-input\n        type=\"time\"\n        label=${this.label ?? nothing}\n        hint=${this.hint ?? nothing}\n        error=${this.error ?? nothing}\n        ?hide-label=${this.hideLabel}\n        ?hint-below=${this.hintBelow}\n        ?hide-required=${this.hideRequired}\n        aria-label=${this.hostAccessibleName || nothing}\n        name=${this.name ?? nothing}\n        size=${this.size}\n        min=${this.min ?? nothing}\n        max=${this.max ?? nothing}\n        ?expand=${this.expand}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        .value=${this.value ?? ''}\n        @change=${this.handleFieldChange}\n      >\n        <nord-dropdown slot=\"end\" align=\"end\" size=\"s\">\n          <nord-button slot=\"toggle\" hide-dropdown-icon size=${this.size} square ?disabled=${this.disabled || this.readonly}>\n            <nord-icon name=\"interface-time\" label=${this.localize.term('chooseTime')}></nord-icon>\n          </nord-button>\n          ${repeat(\n            this.options,\n            option => option.value,\n            option => html`\n              <nord-dropdown-item\n                ?active=${option.value === this.value}\n                @click=${() => this.handleSelect(option.value)}\n              >\n                ${option.label}\n              </nord-dropdown-item>\n            `,\n          )}\n        </nord-dropdown>\n      </nord-input>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-time-picker': TimePicker\n  }\n}\n"],"names":["isoToMinutes","value","match","Number","minutesToIso","total","hours","Math","floor","String","padStart","TimePicker","DraftComponentMixin","LitElement","constructor","this","localize","LocalizeController","start","end","interval","roundToInterval","size","expand","disabled","readonly","required","hideLabel","hintBelow","hideRequired","handleFieldChange","event","target","setValue","roundToNearestInterval","connectedCallback","super","_a","ariaObserver","MutationObserver","requestUpdate","observe","attributes","attributeFilter","disconnectedCallback","disconnect","undefined","focus","input","clampedInterval","hostAccessibleName","ariaLabel","getAttribute","labelledby","root","getRootNode","split","map","id","_b","_c","_d","getElementById","call","textContent","trim","filter","Boolean","join","formatLabel","iso","minutes","date","Date","Intl","DateTimeFormat","hour","minute","hourFormat","hour12","format","options","startMin","endMin","out","m","push","label","step","rounded","round","min","max","dispatchEvent","NordEvent","handleSelect","dropdown","hide","render","html","nothing","hint","error","name","_e","_f","_g","term","repeat","option","styles","componentStyle","style","__decorate","property","prototype","type","reflect","attribute","query","customElement"],"mappings":"wsFAqBA,SAASA,EAAaC,GACpB,MAAMC,EAAQD,EAAMC,MAAM,qBAC1B,OAAOA,EAA2B,GAAnBC,OAAOD,EAAM,IAAWC,OAAOD,EAAM,IAAM,IAC5D,CAGA,SAASE,EAAaC,GACpB,MAAMC,EAAQC,KAAKC,MAAMH,EAAQ,IAAM,GACvC,MAAO,GAAGI,OAAOH,GAAOI,SAAS,EAAG,QAAQD,OAAOJ,EAAQ,IAAIK,SAAS,EAAG,MAC7E,CAuBe,IAAMC,EAAN,cAAyBC,EAAoBC,IAA7C,WAAAC,uBAGLC,KAAAC,SAAW,IAAIC,EAAuCF,MAWlDA,KAAKG,MAAG,QAGRH,KAAGI,IAAG,QAGUJ,KAAQK,SAAG,GAGqCL,KAAeM,iBAAG,EAYjEN,KAAIO,KAAoB,IAGxBP,KAAMQ,QAAG,EAGTR,KAAQS,UAAG,EAGXT,KAAQU,UAAG,EAGXV,KAAQW,UAAG,EAecX,KAASY,WAAG,EAGZZ,KAASa,WAAG,EAGTb,KAAYc,cAAG,EAkHhEd,KAAAe,kBAAqBC,IAC3B,MAAM9B,EAAS8B,EAAMC,OAA4B/B,MACjDc,KAAKkB,SAASlB,KAAKM,gBAAkBN,KAAKmB,uBAAuBjC,GAASA,EAAM,CAkDnF,CAhKC,iBAAAkC,SACEC,MAAMD,4BAMNE,EAAAtB,KAAKuB,4BAALvB,KAAKuB,aAAiB,IAAIC,kBAAiB,IAAMxB,KAAKyB,mBACtDzB,KAAKuB,aAAaG,QAAQ1B,KAAM,CAC9B2B,YAAY,EACZC,gBAAiB,CAAC,aAAc,oBAEnC,CAED,oBAAAC,SACER,MAAMQ,uBACa,QAAnBP,EAAAtB,KAAKuB,oBAAc,IAAAD,GAAAA,EAAAQ,aACnB9B,KAAKuB,kBAAeQ,CACrB,CAGQ,KAAAC,SACK,QAAZV,EAAAtB,KAAKiC,aAAO,IAAAX,GAAAA,EAAAU,OACb,CAED,mBAAYE,GACV,OAAOlC,KAAKK,SAAW,GAAKL,KAAKK,SAAW,IAAML,KAAKK,SAAW,EACnE,CAQD,sBAAY8B,GACV,MAAMC,EAAYpC,KAAKqC,aAAa,cACpC,GAAID,EACF,OAAOA,EAET,MAAME,EAAatC,KAAKqC,aAAa,mBACrC,IAAKC,EACH,MAAO,GAET,MAAMC,EAAOvC,KAAKwC,cAClB,OAAOF,EACJG,MAAM,OACNC,KAAIC,IAAK,IAAArB,EAAAsB,EAAAC,EAAAC,EAAC,OAAkD,QAAlDA,EAAsC,QAAtCD,EAAyB,QAAzBD,EAAsB,QAAtBtB,EAAAiB,EAAKQ,sBAAiB,IAAAzB,OAAA,EAAAA,EAAA0B,KAAAT,EAAAI,UAAG,IAAAC,OAAA,EAAAA,EAAEK,mBAAW,IAAAJ,OAAA,EAAAA,EAAEK,cAAU,IAAAJ,EAAAA,EAAA,EAAE,IAC9DK,OAAOC,SACPC,KAAK,IACT,CAGO,WAAAC,CAAYC,GAClB,MAAMC,EAAUvE,EAAasE,GAC7B,GAAgB,OAAZC,EACF,OAAOD,EAET,MAAME,EAAO,IAAIC,KAAK,IAAM,EAAG,EAAGlE,KAAKC,MAAM+D,EAAU,IAAKA,EAAU,IACtE,IACE,OAAO,IAAIG,KAAKC,oBAAe7B,EAAW,CACxC8B,KAAM,UACNC,OAAQ,aACJ9D,KAAK+D,WAAa,CAAEC,OAA4B,QAApBhE,KAAK+D,YAAyB,KAC7DE,OAAOR,EACX,CACD,MAAAnC,GACE,OAAOiC,CACR,CACF,CAGD,WAAYW,WACV,MAAMC,EAAuC,QAA5B7C,EAAArC,EAAae,KAAKG,cAAU,IAAAmB,EAAAA,EAAA,IACvC8C,EAAmC,QAA1BxB,EAAA3D,EAAae,KAAKI,YAAQ,IAAAwC,EAAAA,EAAA,KACzC,GAAIwB,EAASD,EACX,MAAO,GAET,MAAME,EAAoB,GAC1B,IAAK,IAAIC,EAAIH,EAAUG,GAAKF,EAAQE,GAAKtE,KAAKkC,gBAAiB,CAC7D,MAAMqB,EAAMlE,EAAaiF,GACzBD,EAAIE,KAAK,CAAErF,MAAOqE,EAAKiB,MAAOxE,KAAKsD,YAAYC,IAChD,CACD,OAAOc,CACR,CAGO,sBAAAlD,CAAuBoC,WAC7B,MAAMC,EAAUvE,EAAasE,GACvBY,EAAuC,QAA5B7C,EAAArC,EAAae,KAAKG,cAAU,IAAAmB,EAAAA,EAAA,IACvC8C,EAAmC,QAA1BxB,EAAA3D,EAAae,KAAKI,YAAQ,IAAAwC,EAAAA,EAAA,KACzC,GAAgB,OAAZY,GAAoBY,EAASD,EAC/B,OAAOZ,EAET,MAAMkB,EAAOzE,KAAKkC,gBACZwC,EAAUP,EAAW3E,KAAKmF,OAAOnB,EAAUW,GAAYM,GAAQA,EAErE,OAAOpF,EADSG,KAAKoF,IAAIpF,KAAKqF,IAAIH,EAASP,GAAWC,GAEvD,CAEO,QAAAlD,CAASqC,GACXvD,KAAKd,QAAUqE,IAGnBvD,KAAKd,MAAQqE,EACbvD,KAAK8E,cAAc,IAAIC,EAAU,WAClC,CAOO,YAAAC,CAAazB,SACnBvD,KAAKkB,SAASqC,GACC,QAAfjC,EAAAtB,KAAKiF,gBAAU,IAAA3D,GAAAA,EAAA4D,MAChB,CAED,MAAAC,qBACE,OAAOC,CAAI,kCAGW,QAAV9D,EAAAtB,KAAKwE,aAAK,IAAAlD,EAAAA,EAAI+D,YACN,QAATzC,EAAA5C,KAAKsF,YAAI,IAAA1C,EAAAA,EAAIyC,aACF,QAAVxC,EAAA7C,KAAKuF,aAAK,IAAA1C,EAAAA,EAAIwC,mBACRrF,KAAKY,2BACLZ,KAAKa,8BACFb,KAAKc,6BACTd,KAAKmC,oBAAsBkD,YACxB,QAATvC,EAAA9C,KAAKwF,YAAI,IAAA1C,EAAAA,EAAIuC,YACbrF,KAAKO,cACE,QAARkF,EAAAzF,KAAK4E,WAAG,IAAAa,EAAAA,EAAIJ,WACJ,QAARK,EAAA1F,KAAK6E,WAAG,IAAAa,EAAAA,EAAIL,eACRrF,KAAKQ,sBACHR,KAAKS,wBACLT,KAAKU,wBACLV,KAAKW,qBACE,QAAVgF,EAAA3F,KAAKd,aAAK,IAAAyG,EAAAA,EAAI,gBACb3F,KAAKe,yHAGwCf,KAAKO,2BAAyBP,KAAKS,UAAYT,KAAKU,qDAC9DV,KAAKC,SAAS2F,KAAK,4CAE5DC,EACA7F,KAAKkE,SACL4B,GAAUA,EAAO5G,QACjB4G,GAAUV,CAAI,gCAEAU,EAAO5G,QAAUc,KAAKd,kBACvB,IAAMc,KAAKgF,aAAac,EAAO5G,WAEtC4G,EAAOtB,6DAOtB,GAxOM5E,EAAAmG,OAAS,CAACC,EAAgBC,GAOrBC,EAAA,CAAXC,KAAyBvG,EAAAwG,UAAA,aAAA,GAGdF,EAAA,CAAXC,KAAwBvG,EAAAwG,UAAA,YAAA,GAGbF,EAAA,CAAXC,KAA0BvG,EAAAwG,UAAA,aAAA,GAGfF,EAAA,CAAXC,KAAwBvG,EAAAwG,UAAA,WAAA,GAGGF,EAAA,CAA3BC,EAAS,CAAEE,KAAMjH,UAAuBQ,EAAAwG,UAAA,gBAAA,GAGmCF,EAAA,CAA3EC,EAAS,CAAEE,KAAMjD,QAASkD,SAAS,EAAMC,UAAW,uBAA8C3G,EAAAwG,UAAA,uBAAA,GAG5CF,EAAA,CAAtDC,EAAS,CAAEG,SAAS,EAAMC,UAAW,iBAA2C3G,EAAAwG,UAAA,kBAAA,GAGrEF,EAAA,CAAXC,KAAuBvG,EAAAwG,UAAA,WAAA,GAGZF,EAAA,CAAXC,KAAuBvG,EAAAwG,UAAA,WAAA,GAGKF,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAmC1G,EAAAwG,UAAA,YAAA,GAG3BF,EAAA,CAA5BC,EAAS,CAAEE,KAAMjD,WAAyBxD,EAAAwG,UAAA,cAAA,GAGdF,EAAA,CAA5BC,EAAS,CAAEE,KAAMjD,WAA2BxD,EAAAwG,UAAA,gBAAA,GAGhBF,EAAA,CAA5BC,EAAS,CAAEE,KAAMjD,WAA2BxD,EAAAwG,UAAA,gBAAA,GAGhBF,EAAA,CAA5BC,EAAS,CAAEE,KAAMjD,WAA2BxD,EAAAwG,UAAA,gBAAA,GAMjCF,EAAA,CAAXC,KAAyBvG,EAAAwG,UAAA,aAAA,GAGdF,EAAA,CAAXC,KAAwBvG,EAAAwG,UAAA,YAAA,GAGbF,EAAA,CAAXC,KAAyBvG,EAAAwG,UAAA,aAAA,GAG4BF,EAAA,CAArDC,EAAS,CAAEE,KAAMjD,QAASmD,UAAW,gBAAiC3G,EAAAwG,UAAA,iBAAA,GAGjBF,EAAA,CAArDC,EAAS,CAAEE,KAAMjD,QAASmD,UAAW,gBAAiC3G,EAAAwG,UAAA,iBAAA,GAGdF,EAAA,CAAxDC,EAAS,CAAEE,KAAMjD,QAASmD,UAAW,mBAAuC3G,EAAAwG,UAAA,oBAAA,GAEhDF,EAAA,CAA5BM,EAAM,eAAgF5G,EAAAwG,UAAA,aAAA,GAEvDF,EAAA,CAA/BM,EAAM,kBAAsE5G,EAAAwG,UAAA,gBAAA,GAxE1DxG,EAAUsG,EAAA,CAD9BO,EAAc,qBACM7G,SAAAA"}

package/lib/TopBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopBar.js","sources":["../src/top-bar/TopBar.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './TopBar.css'\n\n/**\n * Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.\n *\n * @status ready\n * @category structure\n * @slot - Used for the main content of the top bar. We recommend placing your application’s global search functionality into this slot.\n * @slot end - Optional slot for menus, buttons, toggles, etc.\n */\n@customElement('nord-top-bar')\nexport default class TopBar extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`\n      <slot></slot>\n      <slot name=\"end\"></slot>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-top-bar': TopBar\n  }\n}\n"],"names":["TopBar","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"ugEAee,IAAMA,EAAN,cAAqBC,EAGlC,MAAAC,GACE,OAAOC,CAAI,uCAIZ,GAPMH,EAAAI,OAAS,CAACC,EAAgBC,GADdN,EAAMO,EAAA,CAD1BC,EAAc,iBACMR,SAAAA"}
+{"version":3,"file":"TopBar.js","sources":["../src/top-bar/TopBar.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './TopBar.css'\n\n/**\n * Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.\n *\n * @status ready\n * @category layout\n * @slot - Used for the main content of the top bar. We recommend placing your application’s global search functionality into this slot.\n * @slot end - Optional slot for menus, buttons, toggles, etc.\n */\n@customElement('nord-top-bar')\nexport default class TopBar extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`\n      <slot></slot>\n      <slot name=\"end\"></slot>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-top-bar': TopBar\n  }\n}\n"],"names":["TopBar","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"ugEAee,IAAMA,EAAN,cAAqBC,EAGlC,MAAAC,GACE,OAAOC,CAAI,uCAIZ,GAPMH,EAAAI,OAAS,CAACC,EAAgBC,GADdN,EAAMO,EAAA,CAD1BC,EAAc,iBACMR,SAAAA"}

package/lib/Truncate.js.map

@@ -1 +1 @@
-{"version":3,"file":"Truncate.js","sources":["../src/truncate/Truncate.ts"],"sourcesContent":["import type { PropertyValues } from 'lit'\nimport { html, isServer, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport style from './Truncate.css'\nimport '../tooltip/Tooltip.js'\n\nlet counter = 0\n\nconst ELLIPSIS = '…'\n\n/**\n * Truncate clips text with a single- or multi-line ellipsis and reveals a tooltip with the full text when the content overflows.\n *\n * @status ready\n * @category text\n * @slot - The full text content. Plain text is recommended; rich markup is\n *   not supported (only `textContent` is read for truncation).\n */\n@customElement('nord-truncate')\nexport default class Truncate extends LitElement {\n  static styles = style\n\n  private spanRef = createRef<HTMLSpanElement>()\n  private observer?: ResizeObserver\n  private contentObserver?: MutationObserver\n  private tooltipId = `n-truncate-${++counter}`\n  // The tooltip lives in document.body (not in shadow DOM) so its\n  // root-level mouseover listener can see hovers on the trigger element,\n  // and so aria-describedby can resolve across the same document tree.\n  private tooltipElement?: HTMLElement\n  // The element that actually receives pointer events (often this host, but\n  // when slotted into nord-button — which sets `::slotted(*) { pointer-events:\n  // none }` — it resolves to the nord-button itself). aria-describedby is set\n  // on this element so the tooltip's `closest()` lookup succeeds.\n  private currentTrigger: Element | null = null\n\n  @state() private isTruncated = false\n  @state() private text = ''\n\n  /**\n   * Position of the tooltip relative to the truncated text. Mirrors `nord-tooltip`.\n   */\n  @property({ reflect: true })\n  position: 'block-end' | 'block-start' | 'inline-start' | 'inline-end' = 'block-start'\n\n  /**\n   * Delay in milliseconds before the tooltip opens.\n   */\n  @property({ reflect: true, type: Number })\n  delay = 500\n\n  /**\n   * Distance in pixels between the tooltip and the trigger along the main axis.\n   * Mirrors `nord-tooltip`'s `side-offset` and is forwarded to the portaled\n   * tooltip. Defaults to `8`.\n   */\n  @property({ reflect: true, type: Number, attribute: 'side-offset' })\n  sideOffset = 8\n\n  /**\n   * Offset in pixels along the tooltip's alignment axis. Mirrors\n   * `nord-tooltip`'s `align-offset` and is forwarded to the portaled tooltip.\n   * Defaults to `0`.\n   */\n  @property({ reflect: true, type: Number, attribute: 'align-offset' })\n  alignOffset = 0\n\n  /**\n   * Maximum number of lines before truncating. Defaults to `1` (single line).\n   * Values `>= 2` allow the text to wrap up to that many lines before the\n   * ellipsis kicks in.\n   */\n  @property({ type: Number, attribute: 'line-clamp' })\n  lineClamp = 1\n\n  /**\n   * When set, the component still truncates the text but does not render\n   * a hover tooltip with the full content. The `truncated` attribute is\n   * still reflected so consumers can style it.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-tooltip' })\n  noTooltip = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    if (isServer)\n      return\n\n    this.observer = new ResizeObserver(() => {\n      // Defer to next frame so the browser has finished the layout pass\n      // triggered by the resize before we read geometry.\n      requestAnimationFrame(() => this.measure())\n    })\n    // Catch content changes the ResizeObserver can't see: text-only mutations\n    // via reactive bindings (Lit/Vue/React often mutate characterData), or\n    // children being replaced. Without this, swapping the label to a\n    // longer/shorter string after first render would never re-evaluate\n    // truncation.\n    this.contentObserver = new MutationObserver(() => {\n      this.captureText()\n      this.measure()\n    })\n    this.contentObserver.observe(this, {\n      characterData: true,\n      childList: true,\n      subtree: true,\n    })\n    this.captureText()\n  }\n\n  protected firstUpdated() {\n    const span = this.spanRef.value\n    if (span && this.observer) {\n      this.observer.observe(span)\n    }\n  }\n\n  protected updated() {\n    this.syncTooltip()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.observer?.disconnect()\n    this.observer = undefined\n    this.contentObserver?.disconnect()\n    this.contentObserver = undefined\n    this.tooltipElement?.remove()\n    this.tooltipElement = undefined\n    this.clearTrigger()\n  }\n\n  private captureText() {\n    const next = (this.textContent ?? '').trim()\n    if (next !== this.text) {\n      this.text = next\n    }\n  }\n\n  /**\n   * Measure overflow and, if needed, binary-search the longest prefix of the\n   * full text that fits in the available space, then commit `<prefix>…` as\n   * the visible text. Same algorithm as Ant Design Pro's `Ellipsis`.\n   */\n  private measure() {\n    const span = this.spanRef.value\n    if (!span)\n      return\n\n    const fullText = this.text\n    if (!fullText) {\n      span.textContent = ''\n      this.isTruncated = false\n      return\n    }\n\n    // Reset to full text and check whether it already fits.\n    span.textContent = fullText\n    if (this.fits(span)) {\n      this.isTruncated = false\n      return\n    }\n\n    // Binary search: largest prefix length such that `prefix + …` fits.\n    let lo = 0\n    let hi = fullText.length\n    while (lo < hi) {\n      const mid = Math.ceil((lo + hi) / 2)\n      span.textContent = trimEnd(fullText.slice(0, mid)) + ELLIPSIS\n      if (this.fits(span)) {\n        lo = mid\n      }\n      else {\n        hi = mid - 1\n      }\n    }\n\n    span.textContent = trimEnd(fullText.slice(0, lo)) + ELLIPSIS\n    this.isTruncated = true\n  }\n\n  private fits(span: HTMLElement): boolean {\n    if (this.lineClamp > 1) {\n      return span.scrollHeight <= span.clientHeight\n    }\n    return span.scrollWidth <= span.clientWidth\n  }\n\n  /**\n   * Walk up the DOM until we find an ancestor that actually receives pointer\n   * events. Needed because `nord-button` (and similar) set\n   * `::slotted(*) { pointer-events: none }`, so this host can never see hover.\n   * Falls back to this host if no such ancestor is found.\n   */\n  private findTriggerElement(): Element {\n    // pointer-events walk from the host itself so a standalone truncate\n    // (default pointer-events: auto) is correctly returned as the trigger.\n    // eslint-disable-next-line ts/no-this-alias -- intentional: start the\n    let element: Element | null = this\n    while (element && element !== document.body && element !== document.documentElement) {\n      if (getComputedStyle(element).pointerEvents !== 'none') {\n        return element\n      }\n      element = element.parentElement\n    }\n    return this\n  }\n\n  private addDescribedById(element: Element, id: string) {\n    const existing = element.getAttribute('aria-describedby')\n    const ids = existing ? existing.split(/\\s+/).filter(Boolean) : []\n    if (!ids.includes(id)) {\n      ids.push(id)\n      element.setAttribute('aria-describedby', ids.join(' '))\n    }\n  }\n\n  private removeDescribedById(element: Element, id: string) {\n    const existing = element.getAttribute('aria-describedby')\n    if (!existing)\n      return\n    const ids = existing.split(/\\s+/).filter(Boolean).filter(x => x !== id)\n    if (ids.length) {\n      element.setAttribute('aria-describedby', ids.join(' '))\n    }\n    else {\n      element.removeAttribute('aria-describedby')\n    }\n  }\n\n  private clearTrigger() {\n    if (this.currentTrigger) {\n      this.removeDescribedById(this.currentTrigger, this.tooltipId)\n      this.currentTrigger = null\n    }\n  }\n\n  private syncTooltip() {\n    if (!this.isTruncated || !this.text) {\n      this.removeAttribute('truncated')\n      this.tooltipElement?.remove()\n      this.tooltipElement = undefined\n      this.clearTrigger()\n      return\n    }\n\n    this.setAttribute('truncated', '')\n\n    if (this.noTooltip) {\n      this.tooltipElement?.remove()\n      this.tooltipElement = undefined\n      this.clearTrigger()\n      return\n    }\n\n    if (!this.tooltipElement) {\n      this.tooltipElement = document.createElement('nord-tooltip')\n      this.tooltipElement.id = this.tooltipId\n      document.body.appendChild(this.tooltipElement)\n    }\n    this.tooltipElement.setAttribute('position', this.position)\n    this.tooltipElement.setAttribute('delay', String(this.delay))\n    // The tooltip is portaled to document.body, so forward the offsets onto it\n    // directly rather than relying on inheritance from this host.\n    this.tooltipElement.setAttribute('side-offset', String(this.sideOffset))\n    this.tooltipElement.setAttribute('align-offset', String(this.alignOffset))\n    this.tooltipElement.textContent = this.text\n\n    const trigger = this.findTriggerElement()\n    if (trigger !== this.currentTrigger) {\n      if (this.currentTrigger) {\n        this.removeDescribedById(this.currentTrigger, this.tooltipId)\n      }\n      this.currentTrigger = trigger\n    }\n    this.addDescribedById(trigger, this.tooltipId)\n  }\n\n  protected willUpdate(changed: PropertyValues) {\n    if (changed.has('lineClamp')) {\n      if (this.lineClamp > 1) {\n        this.setAttribute('line-clamp', String(this.lineClamp))\n        this.style.setProperty('--_n-truncate-line-clamp', String(this.lineClamp))\n      }\n      else {\n        this.removeAttribute('line-clamp')\n        this.style.removeProperty('--_n-truncate-line-clamp')\n      }\n    }\n  }\n\n  render() {\n    // The visible truncated text lives in a dedicated shadow-DOM span whose\n    // `textContent` is managed imperatively in `measure()` (binary-search\n    // updates would otherwise destroy Lit's ChildPart markers). The slot,\n    // hidden visually, keeps the full text in light DOM so that assistive\n    // tech and copy/paste of the host element still see the complete content.\n    return html`\n      <span ${ref(this.spanRef)} class=\"n-truncate\"></span>\n      <slot class=\"n-truncate-source\" aria-hidden=\"true\"></slot>\n    `\n  }\n}\n\nfunction trimEnd(input: string): string {\n  return input.replace(/[\\s.,;:!?-]+$/u, '')\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-truncate': Truncate\n  }\n}\n"],"names":["counter","Truncate","LitElement","constructor","this","spanRef","createRef","tooltipId","currentTrigger","isTruncated","text","position","delay","sideOffset","alignOffset","lineClamp","noTooltip","connectedCallback","super","isServer","observer","ResizeObserver","requestAnimationFrame","measure","contentObserver","MutationObserver","captureText","observe","characterData","childList","subtree","firstUpdated","span","value","updated","syncTooltip","disconnectedCallback","_a","disconnect","undefined","_b","_c","tooltipElement","remove","clearTrigger","next","textContent","trim","fullText","fits","lo","hi","length","mid","Math","ceil","trimEnd","slice","scrollHeight","clientHeight","scrollWidth","clientWidth","findTriggerElement","element","document","body","documentElement","getComputedStyle","pointerEvents","parentElement","addDescribedById","id","existing","getAttribute","ids","split","filter","Boolean","includes","push","setAttribute","join","removeDescribedById","x","removeAttribute","createElement","appendChild","String","trigger","willUpdate","changed","has","style","setProperty","removeProperty","render","html","ref","styles","__decorate","state","prototype","property","reflect","type","Number","attribute","customElement","input","replace"],"mappings":"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"}
+{"version":3,"file":"Truncate.js","sources":["../src/truncate/Truncate.ts"],"sourcesContent":["import type { PropertyValues } from 'lit'\nimport { html, isServer, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport style from './Truncate.css'\nimport '../tooltip/Tooltip.js'\n\nlet counter = 0\n\nconst ELLIPSIS = '…'\n\n/**\n * Truncate clips text with a single- or multi-line ellipsis and reveals a tooltip with the full text when the content overflows.\n *\n * @status ready\n * @category content\n * @slot - The full text content. Plain text is recommended; rich markup is\n *   not supported (only `textContent` is read for truncation).\n */\n@customElement('nord-truncate')\nexport default class Truncate extends LitElement {\n  static styles = style\n\n  private spanRef = createRef<HTMLSpanElement>()\n  private observer?: ResizeObserver\n  private contentObserver?: MutationObserver\n  private tooltipId = `n-truncate-${++counter}`\n  // The tooltip lives in document.body (not in shadow DOM) so its\n  // root-level mouseover listener can see hovers on the trigger element,\n  // and so aria-describedby can resolve across the same document tree.\n  private tooltipElement?: HTMLElement\n  // The element that actually receives pointer events (often this host, but\n  // when slotted into nord-button — which sets `::slotted(*) { pointer-events:\n  // none }` — it resolves to the nord-button itself). aria-describedby is set\n  // on this element so the tooltip's `closest()` lookup succeeds.\n  private currentTrigger: Element | null = null\n\n  @state() private isTruncated = false\n  @state() private text = ''\n\n  /**\n   * Position of the tooltip relative to the truncated text. Mirrors `nord-tooltip`.\n   */\n  @property({ reflect: true })\n  position: 'block-end' | 'block-start' | 'inline-start' | 'inline-end' = 'block-start'\n\n  /**\n   * Delay in milliseconds before the tooltip opens.\n   */\n  @property({ reflect: true, type: Number })\n  delay = 500\n\n  /**\n   * Distance in pixels between the tooltip and the trigger along the main axis.\n   * Mirrors `nord-tooltip`'s `side-offset` and is forwarded to the portaled\n   * tooltip. Defaults to `8`.\n   */\n  @property({ reflect: true, type: Number, attribute: 'side-offset' })\n  sideOffset = 8\n\n  /**\n   * Offset in pixels along the tooltip's alignment axis. Mirrors\n   * `nord-tooltip`'s `align-offset` and is forwarded to the portaled tooltip.\n   * Defaults to `0`.\n   */\n  @property({ reflect: true, type: Number, attribute: 'align-offset' })\n  alignOffset = 0\n\n  /**\n   * Maximum number of lines before truncating. Defaults to `1` (single line).\n   * Values `>= 2` allow the text to wrap up to that many lines before the\n   * ellipsis kicks in.\n   */\n  @property({ type: Number, attribute: 'line-clamp' })\n  lineClamp = 1\n\n  /**\n   * When set, the component still truncates the text but does not render\n   * a hover tooltip with the full content. The `truncated` attribute is\n   * still reflected so consumers can style it.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-tooltip' })\n  noTooltip = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    if (isServer)\n      return\n\n    this.observer = new ResizeObserver(() => {\n      // Defer to next frame so the browser has finished the layout pass\n      // triggered by the resize before we read geometry.\n      requestAnimationFrame(() => this.measure())\n    })\n    // Catch content changes the ResizeObserver can't see: text-only mutations\n    // via reactive bindings (Lit/Vue/React often mutate characterData), or\n    // children being replaced. Without this, swapping the label to a\n    // longer/shorter string after first render would never re-evaluate\n    // truncation.\n    this.contentObserver = new MutationObserver(() => {\n      this.captureText()\n      this.measure()\n    })\n    this.contentObserver.observe(this, {\n      characterData: true,\n      childList: true,\n      subtree: true,\n    })\n    this.captureText()\n  }\n\n  protected firstUpdated() {\n    const span = this.spanRef.value\n    if (span && this.observer) {\n      this.observer.observe(span)\n    }\n  }\n\n  protected updated() {\n    this.syncTooltip()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.observer?.disconnect()\n    this.observer = undefined\n    this.contentObserver?.disconnect()\n    this.contentObserver = undefined\n    this.tooltipElement?.remove()\n    this.tooltipElement = undefined\n    this.clearTrigger()\n  }\n\n  private captureText() {\n    const next = (this.textContent ?? '').trim()\n    if (next !== this.text) {\n      this.text = next\n    }\n  }\n\n  /**\n   * Measure overflow and, if needed, binary-search the longest prefix of the\n   * full text that fits in the available space, then commit `<prefix>…` as\n   * the visible text. Same algorithm as Ant Design Pro's `Ellipsis`.\n   */\n  private measure() {\n    const span = this.spanRef.value\n    if (!span)\n      return\n\n    const fullText = this.text\n    if (!fullText) {\n      span.textContent = ''\n      this.isTruncated = false\n      return\n    }\n\n    // Reset to full text and check whether it already fits.\n    span.textContent = fullText\n    if (this.fits(span)) {\n      this.isTruncated = false\n      return\n    }\n\n    // Binary search: largest prefix length such that `prefix + …` fits.\n    let lo = 0\n    let hi = fullText.length\n    while (lo < hi) {\n      const mid = Math.ceil((lo + hi) / 2)\n      span.textContent = trimEnd(fullText.slice(0, mid)) + ELLIPSIS\n      if (this.fits(span)) {\n        lo = mid\n      }\n      else {\n        hi = mid - 1\n      }\n    }\n\n    span.textContent = trimEnd(fullText.slice(0, lo)) + ELLIPSIS\n    this.isTruncated = true\n  }\n\n  private fits(span: HTMLElement): boolean {\n    if (this.lineClamp > 1) {\n      return span.scrollHeight <= span.clientHeight\n    }\n    return span.scrollWidth <= span.clientWidth\n  }\n\n  /**\n   * Walk up the DOM until we find an ancestor that actually receives pointer\n   * events. Needed because `nord-button` (and similar) set\n   * `::slotted(*) { pointer-events: none }`, so this host can never see hover.\n   * Falls back to this host if no such ancestor is found.\n   */\n  private findTriggerElement(): Element {\n    // pointer-events walk from the host itself so a standalone truncate\n    // (default pointer-events: auto) is correctly returned as the trigger.\n    // eslint-disable-next-line ts/no-this-alias -- intentional: start the\n    let element: Element | null = this\n    while (element && element !== document.body && element !== document.documentElement) {\n      if (getComputedStyle(element).pointerEvents !== 'none') {\n        return element\n      }\n      element = element.parentElement\n    }\n    return this\n  }\n\n  private addDescribedById(element: Element, id: string) {\n    const existing = element.getAttribute('aria-describedby')\n    const ids = existing ? existing.split(/\\s+/).filter(Boolean) : []\n    if (!ids.includes(id)) {\n      ids.push(id)\n      element.setAttribute('aria-describedby', ids.join(' '))\n    }\n  }\n\n  private removeDescribedById(element: Element, id: string) {\n    const existing = element.getAttribute('aria-describedby')\n    if (!existing)\n      return\n    const ids = existing.split(/\\s+/).filter(Boolean).filter(x => x !== id)\n    if (ids.length) {\n      element.setAttribute('aria-describedby', ids.join(' '))\n    }\n    else {\n      element.removeAttribute('aria-describedby')\n    }\n  }\n\n  private clearTrigger() {\n    if (this.currentTrigger) {\n      this.removeDescribedById(this.currentTrigger, this.tooltipId)\n      this.currentTrigger = null\n    }\n  }\n\n  private syncTooltip() {\n    if (!this.isTruncated || !this.text) {\n      this.removeAttribute('truncated')\n      this.tooltipElement?.remove()\n      this.tooltipElement = undefined\n      this.clearTrigger()\n      return\n    }\n\n    this.setAttribute('truncated', '')\n\n    if (this.noTooltip) {\n      this.tooltipElement?.remove()\n      this.tooltipElement = undefined\n      this.clearTrigger()\n      return\n    }\n\n    if (!this.tooltipElement) {\n      this.tooltipElement = document.createElement('nord-tooltip')\n      this.tooltipElement.id = this.tooltipId\n      document.body.appendChild(this.tooltipElement)\n    }\n    this.tooltipElement.setAttribute('position', this.position)\n    this.tooltipElement.setAttribute('delay', String(this.delay))\n    // The tooltip is portaled to document.body, so forward the offsets onto it\n    // directly rather than relying on inheritance from this host.\n    this.tooltipElement.setAttribute('side-offset', String(this.sideOffset))\n    this.tooltipElement.setAttribute('align-offset', String(this.alignOffset))\n    this.tooltipElement.textContent = this.text\n\n    const trigger = this.findTriggerElement()\n    if (trigger !== this.currentTrigger) {\n      if (this.currentTrigger) {\n        this.removeDescribedById(this.currentTrigger, this.tooltipId)\n      }\n      this.currentTrigger = trigger\n    }\n    this.addDescribedById(trigger, this.tooltipId)\n  }\n\n  protected willUpdate(changed: PropertyValues) {\n    if (changed.has('lineClamp')) {\n      if (this.lineClamp > 1) {\n        this.setAttribute('line-clamp', String(this.lineClamp))\n        this.style.setProperty('--_n-truncate-line-clamp', String(this.lineClamp))\n      }\n      else {\n        this.removeAttribute('line-clamp')\n        this.style.removeProperty('--_n-truncate-line-clamp')\n      }\n    }\n  }\n\n  render() {\n    // The visible truncated text lives in a dedicated shadow-DOM span whose\n    // `textContent` is managed imperatively in `measure()` (binary-search\n    // updates would otherwise destroy Lit's ChildPart markers). The slot,\n    // hidden visually, keeps the full text in light DOM so that assistive\n    // tech and copy/paste of the host element still see the complete content.\n    return html`\n      <span ${ref(this.spanRef)} class=\"n-truncate\"></span>\n      <slot class=\"n-truncate-source\" aria-hidden=\"true\"></slot>\n    `\n  }\n}\n\nfunction trimEnd(input: string): string {\n  return input.replace(/[\\s.,;:!?-]+$/u, '')\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-truncate': Truncate\n  }\n}\n"],"names":["counter","Truncate","LitElement","constructor","this","spanRef","createRef","tooltipId","currentTrigger","isTruncated","text","position","delay","sideOffset","alignOffset","lineClamp","noTooltip","connectedCallback","super","isServer","observer","ResizeObserver","requestAnimationFrame","measure","contentObserver","MutationObserver","captureText","observe","characterData","childList","subtree","firstUpdated","span","value","updated","syncTooltip","disconnectedCallback","_a","disconnect","undefined","_b","_c","tooltipElement","remove","clearTrigger","next","textContent","trim","fullText","fits","lo","hi","length","mid","Math","ceil","trimEnd","slice","scrollHeight","clientHeight","scrollWidth","clientWidth","findTriggerElement","element","document","body","documentElement","getComputedStyle","pointerEvents","parentElement","addDescribedById","id","existing","getAttribute","ids","split","filter","Boolean","includes","push","setAttribute","join","removeDescribedById","x","removeAttribute","createElement","appendChild","String","trigger","willUpdate","changed","has","style","setProperty","removeProperty","render","html","ref","styles","__decorate","state","prototype","property","reflect","type","Number","attribute","customElement","input","replace"],"mappings":"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"}

package/lib/VisuallyHidden.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.js","sources":["../src/visually-hidden/VisuallyHidden.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport style from './VisuallyHidden.css'\n\n/**\n * Visually hidden is used when an element needs to be available\n * to assistive technologies like screen readers, but be otherwise\n * hidden.\n *\n * @status ready\n * @category text\n * @slot - The visually hidden content.\n */\n@customElement('nord-visually-hidden')\nexport default class VisuallyHidden extends LitElement {\n  static styles = style\n\n  render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-visually-hidden': VisuallyHidden\n  }\n}\n"],"names":["VisuallyHidden","LitElement","render","html","styles","style","__decorate","customElement"],"mappings":"yXAce,IAAMA,EAAN,cAA6BC,EAG1C,MAAAC,GACE,OAAOC,CAAI,eACZ,GAJMH,EAAMI,OAAGC,EADGL,EAAcM,EAAA,CADlCC,EAAc,yBACMP,SAAAA"}
+{"version":3,"file":"VisuallyHidden.js","sources":["../src/visually-hidden/VisuallyHidden.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport style from './VisuallyHidden.css'\n\n/**\n * Visually hidden is used when an element needs to be available\n * to assistive technologies like screen readers, but be otherwise\n * hidden.\n *\n * @status ready\n * @category content\n * @slot - The visually hidden content.\n */\n@customElement('nord-visually-hidden')\nexport default class VisuallyHidden extends LitElement {\n  static styles = style\n\n  render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-visually-hidden': VisuallyHidden\n  }\n}\n"],"names":["VisuallyHidden","LitElement","render","html","styles","style","__decorate","customElement"],"mappings":"yXAce,IAAMA,EAAN,cAA6BC,EAG1C,MAAAC,GACE,OAAOC,CAAI,eACZ,GAJMH,EAAMI,OAAGC,EADGL,EAAcM,EAAA,CADlCC,EAAc,yBACMP,SAAAA"}