@nordhealth/components 4.12.0 → 4.12.1

package/lib/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../src/tab/Tab.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tab.css\"\n\n/**\n * The interactive tab button for use within the tab group component.\n *\n * @status ready\n * @category navigation\n * @slot - The tab button content.\n *\n * @cssprop [--n-tab-color=var(--n-color-text-weak)] - Controls the text color of the tab, using our [color tokens](/tokens/#color).\n * @cssprop [--n-tab-font-weight=var(--n-font-weight)] - Controls the font weight of the tab, using our [font tokens](/tokens/#font).\n */\n@customElement(\"nord-tab\")\nexport default class Tab extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n\n  /**\n   * Whether the tab item is selected\n   */\n  @property({ reflect: true, type: Boolean }) selected: boolean = false\n\n  render() {\n    return html`<div class=\"n-tab\" data-text=\"${this.defaultSlot.isEmpty ? this.textContent : \"\"}\">\n      <slot></slot>\n    </div>`\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab button.\n   * Observe the selected property if it changes\n   */\n  @observe(\"selected\")\n  protected handleSelectionChange() {\n    this.setAttribute(\"aria-selected\", `${this.selected}`)\n    this.setAttribute(\"tabindex\", this.selected ? \"0\" : \"-1\")\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute(\"role\", \"tab\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tab\": Tab\n  }\n}\n"],"names":["Tab","LitElement","constructor","this","defaultSlot","SlotController","selected","render","html","isEmpty","textContent","handleSelectionChange","setAttribute","connectedCallback","super","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","observe","customElement"],"mappings":"m9DAmBe,IAAMA,EAAN,cAAkBC,EAAlB,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MAKGA,KAAQG,UAAY,CAsBjE,CApBC,MAAAC,GACE,OAAOC,CAAI,iCAAiCL,KAAKC,YAAYK,QAAUN,KAAKO,YAAc,yBAG3F,CAOS,qBAAAC,GACRR,KAAKS,aAAa,gBAAiB,GAAGT,KAAKG,YAC3CH,KAAKS,aAAa,WAAYT,KAAKG,SAAW,IAAM,KACrD,CAED,iBAAAO,GACEC,MAAMD,oBACNV,KAAKS,aAAa,OAAQ,MAC3B,GA5BMZ,EAAAe,OAAS,CAACC,EAAgBC,GAOWC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAoCtB,EAAAuB,UAAA,gBAAA,GAa3DL,EAAA,CADTM,EAAQ,aAIRxB,EAAAuB,UAAA,wBAAA,MAxBkBvB,EAAGkB,EAAA,CADvBO,EAAc,aACMzB,SAAAA"}
+{"version":3,"file":"Tab.js","sources":["../src/tab/Tab.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Tab.css'\n\n/**\n * The interactive tab button for use within the tab group component.\n *\n * @status ready\n * @category navigation\n * @slot - The tab button content.\n *\n * @cssprop [--n-tab-color=var(--n-color-text-weak)] - Controls the text color of the tab, using our [color tokens](/tokens/#color).\n * @cssprop [--n-tab-font-weight=var(--n-font-weight)] - Controls the font weight of the tab, using our [font tokens](/tokens/#font).\n */\n@customElement('nord-tab')\nexport default class Tab extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n\n  /**\n   * Whether the tab item is selected\n   */\n  @property({ reflect: true, type: Boolean }) selected: boolean = false\n\n  render() {\n    return html`<div class=\"n-tab\" data-text=\"${this.defaultSlot.isEmpty ? this.textContent : ''}\">\n      <slot></slot>\n    </div>`\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab button.\n   * Observe the selected property if it changes\n   */\n  @observe('selected')\n  protected handleSelectionChange() {\n    this.setAttribute('aria-selected', `${this.selected}`)\n    this.setAttribute('tabindex', this.selected ? '0' : '-1')\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('role', 'tab')\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tab': Tab\n  }\n}\n"],"names":["Tab","LitElement","constructor","this","defaultSlot","SlotController","selected","render","html","isEmpty","textContent","handleSelectionChange","setAttribute","connectedCallback","super","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","observe","customElement"],"mappings":"07DAmBe,IAAMA,EAAN,cAAkBC,EAAlB,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MAKGA,KAAQG,UAAY,CAsBjE,CApBC,MAAAC,GACE,OAAOC,CAAI,iCAAiCL,KAAKC,YAAYK,QAAUN,KAAKO,YAAc,yBAG3F,CAOS,qBAAAC,GACRR,KAAKS,aAAa,gBAAiB,GAAGT,KAAKG,YAC3CH,KAAKS,aAAa,WAAYT,KAAKG,SAAW,IAAM,KACrD,CAED,iBAAAO,GACEC,MAAMD,oBACNV,KAAKS,aAAa,OAAQ,MAC3B,GA5BMZ,EAAAe,OAAS,CAACC,EAAgBC,GAOWC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAoCtB,EAAAuB,UAAA,gBAAA,GAa3DL,EAAA,CADTM,EAAQ,aAIRxB,EAAAuB,UAAA,wBAAA,MAxBkBvB,EAAGkB,EAAA,CADvBO,EAAc,aACMzB,SAAAA"}

package/lib/TabGroup.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as r,html as a,isServer as s}from"lit";import{property as o,state as i,customElement as n}from"lit/decorators.js";import{s as l}from"./Component-DSU3Qp0O.js";import{s as d}from"./Sticky-DqnqENYN.js";import b from"./Tab.js";import{D as c}from"./DirectionController-ChvNGESZ.js";import"./observe-D0n0zOfU.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";const p=e`:host{--_n-tab-group-padding:var(--n-tab-group-padding, 0);--_n-tab-group-list-background:var(--n-color-surface);--_n-tab-group-list-border:inset 0 -1px 0 0 var(--n-color-border);--_n-tab-group-list-shadow:var(--n-box-shadow-header);--_n-sticky-size:46px;border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}.n-tab-group-list{list-style:none;display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior:none;box-shadow:var(--_n-tab-group-list-border);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0;gap:var(--n-space-s);background-color:var(--_n-tab-group-list-background);background-image:radial-gradient(ellipse farthest-side at 0 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background)),radial-gradient(ellipse farthest-side at 100% 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background));background-repeat:no-repeat;background-position:0 var(--n-space-xs),100% var(--n-space-xs);background-size:var(--n-space-s) var(--n-space-xl),var(--n-space-s) var(--n-space-xl)}.n-tab-group-list::after,.n-tab-group-list::before{content:"";box-sizing:content-box;align-self:stretch;min-inline-size:var(--n-space-l);margin-block-end:1px}.n-tab-group-list::before{margin-inline-end:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-start:var(--_n-tab-group-padding)}.n-tab-group-list::after{margin-inline-start:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-end:var(--_n-tab-group-padding);flex:1}.n-tab-group-list::before,.n-tab-group.is-rtl .n-tab-group-list::after{box-shadow:inset var(--n-space-l) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}.n-tab-group-list::after,.n-tab-group.is-rtl .n-tab-group-list::before{box-shadow:inset calc(-1 * var(--n-space-l)) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}::slotted(nord-tab-panel){display:none;padding:var(--_n-tab-group-padding)}::slotted(nord-tab-panel[aria-hidden=false]){display:block}::slotted(nord-tab){z-index:var(--n-index-default)}:host([padding="m"]){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-m))}:host([padding="l"]){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-l))}:host([sticky]) .n-sticky{box-shadow:var(--_n-tab-group-list-border),var(--_n-tab-group-list-shadow);inset-inline:0;inset-block-end:auto}:host([sticky]),:host([sticky]) .n-tab-group-list{border-radius:0}`;var u;let h=1,v=u=class extends r{constructor(){super(...arguments),this.direction=new c(this),this.tabGroupId="nord-tab-group-"+h++,this.label="",this.padding="m",this.sticky=!1,this.selectedTab=this.initialSelectedTab,this.handleMutation=t=>{t.forEach((t=>{var e,r;if("selected"===t.attributeName&&null===t.oldValue){const a=t.target;null===(e=this.observer)||void 0===e||e.disconnect(),this.updateSelectedTab(a),null===(r=this.observer)||void 0===r||r.observe(this,u.observerOptions)}}))}}render(){return a`<div class="n-tab-group is-${this.direction.dir}"><div class="n-tab-group-list n-sticky" role="tablist" aria-label="${this.label}" @click="${this.handleTabChange}" @keydown="${this.handleKeydown}"><slot name="tab"></slot></div><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.updateSlots(),this.hasUpdated&&!this.observer&&this.setupObserver()}firstUpdated(){this.setupObserver()}updateSlots(){this.setupTabs(),this.setupPanels()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.observer)||void 0===t||t.disconnect(),this.observer=void 0}setupObserver(){this.observer||(this.observer=new MutationObserver(this.handleMutation),this.observer.observe(this,u.observerOptions))}get initialSelectedTab(){return s?null:this.querySelector("nord-tab[selected]")||this.querySelector("nord-tab")}setupTabs(){this.querySelectorAll("nord-tab").forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-controls",`${this.tabGroupId}-panel-${e+1}`),t.toggleAttribute("selected",t===this.selectedTab)}))}setupPanels(){var t;const e=this.querySelectorAll("nord-tab-panel"),r=null===(t=this.selectedTab)||void 0===t?void 0:t.getAttribute("aria-controls");e.forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-panel-${e+1}`),t.setAttribute("aria-labelledby",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-hidden",`${t.getAttribute("id")!==r}`)}))}handleTabChange(t){this.scrollTo({top:0}),t.target instanceof b&&t.target!==this.selectedTab&&this.updateSelectedTab(t.target)}previousTab(t){const e=[...this.querySelectorAll("nord-tab")],r=e.indexOf(t);return e[r-1]}handleKeydown(t){const e=t.target,r=this.querySelector("nord-tab:first-of-type"),a=this.querySelector("nord-tab:last-of-type"),s=this.querySelector(`#${e.getAttribute("id")} ~ nord-tab`)||r,o=this.previousTab(e)||a,i=(t,e)=>{e.preventDefault(),this.scrollTo({top:0}),this.updateSelectedTab(t)};switch(t.key){case"ArrowLeft":case"ArrowUp":i(this.direction.isLTR?o:s,t);break;case"ArrowRight":case"ArrowDown":i(this.direction.isLTR?s:o,t);break;case"Home":i(r,t);break;case"End":i(a,t)}}updateSelectedTab(t){const e=this.querySelector(`#${t.getAttribute("aria-controls")}`);t!==this.selectedTab&&(this.querySelectorAll("nord-tab").forEach((e=>{e.removeAttribute("selected"),e===t&&(e.setAttribute("selected",""),e.focus(),e.scrollIntoView({block:"nearest",inline:"nearest"}),this.selectedTab=e)})),this.querySelectorAll("nord-tab-panel").forEach((t=>{t.setAttribute("aria-hidden",`${t!==e}`)})))}};v.styles=[l,d,p],v.observerOptions={attributes:!0,subtree:!0,attributeFilter:["selected"],attributeOldValue:!0},t([o({reflect:!0})],v.prototype,"label",void 0),t([o({reflect:!0})],v.prototype,"padding",void 0),t([o({reflect:!0,type:Boolean})],v.prototype,"sticky",void 0),t([i()],v.prototype,"selectedTab",void 0),v=u=t([n("nord-tab-group")],v);var g=v;export{g as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as r,html as a,isServer as s}from"lit";import{property as o,state as i,customElement as n}from"lit/decorators.js";import{D as l}from"./DirectionController-ChvNGESZ.js";import{s as d}from"./Component-DSU3Qp0O.js";import{s as b}from"./Sticky-DqnqENYN.js";import c from"./Tab.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./observe-D0n0zOfU.js";const p=e`:host{--_n-tab-group-padding:var(--n-tab-group-padding, 0);--_n-tab-group-list-background:var(--n-color-surface);--_n-tab-group-list-border:inset 0 -1px 0 0 var(--n-color-border);--_n-tab-group-list-shadow:var(--n-box-shadow-header);--_n-sticky-size:46px;border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}.n-tab-group-list{list-style:none;display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior:none;box-shadow:var(--_n-tab-group-list-border);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0;gap:var(--n-space-s);background-color:var(--_n-tab-group-list-background);background-image:radial-gradient(ellipse farthest-side at 0 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background)),radial-gradient(ellipse farthest-side at 100% 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background));background-repeat:no-repeat;background-position:0 var(--n-space-xs),100% var(--n-space-xs);background-size:var(--n-space-s) var(--n-space-xl),var(--n-space-s) var(--n-space-xl)}.n-tab-group-list::after,.n-tab-group-list::before{content:'';box-sizing:content-box;align-self:stretch;min-inline-size:var(--n-space-l);margin-block-end:1px}.n-tab-group-list::before{margin-inline-end:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-start:var(--_n-tab-group-padding)}.n-tab-group-list::after{margin-inline-start:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-end:var(--_n-tab-group-padding);flex:1}.n-tab-group-list::before,.n-tab-group.is-rtl .n-tab-group-list::after{box-shadow:inset var(--n-space-l) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}.n-tab-group-list::after,.n-tab-group.is-rtl .n-tab-group-list::before{box-shadow:inset calc(-1 * var(--n-space-l)) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}::slotted(nord-tab-panel){display:none;padding:var(--_n-tab-group-padding)}::slotted(nord-tab-panel[aria-hidden=false]){display:block}::slotted(nord-tab){z-index:var(--n-index-default)}:host([padding='m']){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-m))}:host([padding='l']){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-l))}:host([sticky]) .n-sticky{box-shadow:var(--_n-tab-group-list-border),var(--_n-tab-group-list-shadow);inset-inline:0;inset-block-end:auto}:host([sticky]),:host([sticky]) .n-tab-group-list{border-radius:0}`;var u;let h=1,v=u=class extends r{constructor(){super(...arguments),this.direction=new l(this),this.tabGroupId="nord-tab-group-"+h++,this.label="",this.padding="m",this.sticky=!1,this.selectedTab=this.initialSelectedTab,this.handleMutation=t=>{t.forEach((t=>{var e,r;if("selected"===t.attributeName&&null===t.oldValue){const a=t.target;null===(e=this.observer)||void 0===e||e.disconnect(),this.updateSelectedTab(a),null===(r=this.observer)||void 0===r||r.observe(this,u.observerOptions)}}))}}render(){return a`<div class="n-tab-group is-${this.direction.dir}"><div class="n-tab-group-list n-sticky" role="tablist" aria-label="${this.label}" @click="${this.handleTabChange}" @keydown="${this.handleKeydown}"><slot name="tab"></slot></div><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.updateSlots(),this.hasUpdated&&!this.observer&&this.setupObserver()}firstUpdated(){this.setupObserver()}updateSlots(){this.setupTabs(),this.setupPanels()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.observer)||void 0===t||t.disconnect(),this.observer=void 0}setupObserver(){this.observer||(this.observer=new MutationObserver(this.handleMutation),this.observer.observe(this,u.observerOptions))}get initialSelectedTab(){return s?null:this.querySelector("nord-tab[selected]")||this.querySelector("nord-tab")}setupTabs(){this.querySelectorAll("nord-tab").forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-controls",`${this.tabGroupId}-panel-${e+1}`),t.toggleAttribute("selected",t===this.selectedTab)}))}setupPanels(){var t;const e=this.querySelectorAll("nord-tab-panel"),r=null===(t=this.selectedTab)||void 0===t?void 0:t.getAttribute("aria-controls");e.forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-panel-${e+1}`),t.setAttribute("aria-labelledby",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-hidden",`${t.getAttribute("id")!==r}`)}))}handleTabChange(t){this.scrollTo({top:0}),t.target instanceof c&&t.target!==this.selectedTab&&this.updateSelectedTab(t.target)}previousTab(t){const e=[...this.querySelectorAll("nord-tab")],r=e.indexOf(t);return e[r-1]}handleKeydown(t){const e=t.target,r=this.querySelector("nord-tab:first-of-type"),a=this.querySelector("nord-tab:last-of-type"),s=this.querySelector(`#${e.getAttribute("id")} ~ nord-tab`)||r,o=this.previousTab(e)||a,i=(t,e)=>{e.preventDefault(),this.scrollTo({top:0}),this.updateSelectedTab(t)};switch(t.key){case"ArrowLeft":case"ArrowUp":i(this.direction.isLTR?o:s,t);break;case"ArrowRight":case"ArrowDown":i(this.direction.isLTR?s:o,t);break;case"Home":i(r,t);break;case"End":i(a,t)}}updateSelectedTab(t){const e=this.querySelector(`#${t.getAttribute("aria-controls")}`);t!==this.selectedTab&&(this.querySelectorAll("nord-tab").forEach((e=>{e.removeAttribute("selected"),e===t&&(e.setAttribute("selected",""),e.focus(),e.scrollIntoView({block:"nearest",inline:"nearest"}),this.selectedTab=e)})),this.querySelectorAll("nord-tab-panel").forEach((t=>{t.setAttribute("aria-hidden",`${t!==e}`)})))}};v.styles=[d,b,p],v.observerOptions={attributes:!0,subtree:!0,attributeFilter:["selected"],attributeOldValue:!0},t([o({reflect:!0})],v.prototype,"label",void 0),t([o({reflect:!0})],v.prototype,"padding",void 0),t([o({reflect:!0,type:Boolean})],v.prototype,"sticky",void 0),t([i()],v.prototype,"selectedTab",void 0),v=u=t([n("nord-tab-group")],v);var g=v;export{g as default};
 //# sourceMappingURL=TabGroup.js.map

package/lib/TabGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabGroup.js","sources":["../src/tab-group/TabGroup.ts"],"sourcesContent":["import { LitElement, html, isServer } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./TabGroup.css\"\nimport Tab from \"../tab/Tab.js\"\n\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\n\nlet tabGroupCount = 1\n\n/**\n * Tab Group allows multiple panels to be contained within a single window,\n * using tabs as a navigational element.\n *\n * @status ready\n * @category navigation\n * @slot - The element which contains the content to be revealed.\n * @slot tab - The element which contains all tabs to reveal tabbed content.\n *\n * @cssprop [--n-tab-group-padding=0] - Controls the padding around the tab group (including the tab list), using our [spacing tokens](/tokens/#space).\n */\n@customElement(\"nord-tab-group\")\nexport default class TabGroup extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private direction = new DirectionController(this)\n\n  private observer?: MutationObserver\n\n  private static observerOptions = {\n    attributes: true,\n    subtree: true,\n    attributeFilter: [\"selected\"],\n    attributeOldValue: true,\n  }\n\n  /**\n   * Unique ID for each tab group component present.\n   */\n  private tabGroupId = `nord-tab-group-${tabGroupCount++}`\n\n  /**\n   * Adds an accessible label to the tab list container.\n   */\n  @property({ reflect: true }) label: string = \"\"\n\n  /**\n   * Controls the padding of the tab group component.\n   */\n  @property({ reflect: true }) padding?: \"m\" | \"l\" | \"none\" = \"m\"\n\n  /**\n   * Whether the tab list sticks to the top of the tab group as you scroll.\n   */\n  @property({ reflect: true, type: Boolean }) sticky: boolean = false\n\n  /**\n   * The current tab node selected in the tab group.\n   */\n  @state() private selectedTab = this.initialSelectedTab\n\n  render() {\n    return html`\n      <div class=\"n-tab-group is-${this.direction.dir}\">\n        <div\n          class=\"n-tab-group-list n-sticky\"\n          role=\"tablist\"\n          aria-label=\"${this.label}\"\n          @click=${this.handleTabChange}\n          @keydown=${this.handleKeydown}\n        >\n          <slot name=\"tab\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.updateSlots()\n    // Re-setup observer after reconnection (firstUpdated only runs once per instance)\n    if (this.hasUpdated && !this.observer) {\n      this.setupObserver()\n    }\n  }\n\n  firstUpdated() {\n    this.setupObserver()\n  }\n\n  private updateSlots() {\n    this.setupTabs()\n    this.setupPanels()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // Clean up observer to prevent memory leaks\n    this.observer?.disconnect()\n    this.observer = undefined\n  }\n\n  private setupObserver() {\n    // Avoid creating multiple observers\n    if (this.observer) {\n      return\n    }\n\n    this.observer = new MutationObserver(this.handleMutation)\n    this.observer.observe(this, TabGroup.observerOptions)\n  }\n\n  /**\n   * If the selected tab is selected programmatically update all the tabs.\n   */\n  private handleMutation = (mutations: MutationRecord[]) => {\n    mutations.forEach(mutation => {\n      if (mutation.attributeName === \"selected\" && mutation.oldValue === null) {\n        const selectedTab = <Tab>mutation.target\n        this.observer?.disconnect()\n        this.updateSelectedTab(selectedTab)\n        this.observer?.observe(this, TabGroup.observerOptions)\n      }\n    })\n  }\n\n  /**\n   * Get the selected tab button, or the first tab button.\n   */\n  private get initialSelectedTab() {\n    if (isServer) {\n      return null\n    }\n\n    return this.querySelector(\"nord-tab[selected]\") || this.querySelector(\"nord-tab\")\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab buttons.\n   */\n  private setupTabs() {\n    const tabs = this.querySelectorAll(\"nord-tab\")\n\n    tabs.forEach((tab, index) => {\n      tab.setAttribute(\"id\", `${this.tabGroupId}-tab-${index + 1}`)\n      tab.setAttribute(\"aria-controls\", `${this.tabGroupId}-panel-${index + 1}`)\n      tab.toggleAttribute(\"selected\", tab === this.selectedTab)\n    })\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab panels.\n   */\n  private setupPanels() {\n    const panels = this.querySelectorAll(\"nord-tab-panel\")\n    const selectedPanelId = this.selectedTab?.getAttribute(\"aria-controls\")\n\n    panels.forEach((panel, index) => {\n      panel.setAttribute(\"id\", `${this.tabGroupId}-panel-${index + 1}`)\n      panel.setAttribute(\"aria-labelledby\", `${this.tabGroupId}-tab-${index + 1}`)\n      panel.setAttribute(\"aria-hidden\", `${panel.getAttribute(\"id\") !== selectedPanelId}`)\n    })\n  }\n\n  private handleTabChange(event: Event) {\n    // Always reset the scroll when a tab is selected.\n    this.scrollTo({ top: 0 })\n\n    /**\n     * Return handler if it's not a tab or if it's already selected\n     */\n    if (!(event.target instanceof Tab) || event.target === this.selectedTab) return\n\n    this.updateSelectedTab(event.target)\n  }\n\n  /**\n   * Get the previous tab button in the tab group\n   */\n  private previousTab(tab: Tab) {\n    const tabs = [...this.querySelectorAll(\"nord-tab\")]\n    const selectedTabIndex = tabs.indexOf(tab)\n    return tabs[selectedTabIndex - 1]\n  }\n\n  /**\n   * Handle keyboard accessible controls.\n   */\n  private handleKeydown(event: KeyboardEvent) {\n    const tab = <Tab>event.target\n\n    const firstTab = <Tab>this.querySelector(\"nord-tab:first-of-type\")\n    const lastTab = <Tab>this.querySelector(\"nord-tab:last-of-type\")\n    const nextTab = <Tab>this.querySelector(`#${tab.getAttribute(\"id\")} ~ nord-tab`) || firstTab\n    const previousTab = <Tab>this.previousTab(tab) || lastTab\n\n    const updateTab = (selectedTab: Tab, keyEvent: Event) => {\n      keyEvent.preventDefault()\n\n      // Always reset the scroll when a tab is selected.\n      this.scrollTo({ top: 0 })\n      this.updateSelectedTab(selectedTab)\n    }\n\n    switch (event.key) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        updateTab(this.direction.isLTR ? previousTab : nextTab, event)\n        break\n\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        updateTab(this.direction.isLTR ? nextTab : previousTab, event)\n        break\n\n      case \"Home\":\n        updateTab(firstTab, event)\n        break\n\n      case \"End\":\n        updateTab(lastTab, event)\n        break\n\n      default:\n        break\n    }\n  }\n\n  /**\n   * Update the selected tab button with attributes and values.\n   * Update the tab group state.\n   */\n  private updateSelectedTab(selectedTab: Tab) {\n    const selectedPanel = this.querySelector(`#${selectedTab.getAttribute(\"aria-controls\")}`)\n\n    if (selectedTab === this.selectedTab) return\n\n    /**\n     * Reset all the selected state of the tabs, and select the clicked tab\n     */\n    this.querySelectorAll(\"nord-tab\").forEach(tab => {\n      tab.removeAttribute(\"selected\")\n      if (tab === selectedTab) {\n        tab.setAttribute(\"selected\", \"\")\n        tab.focus()\n        tab.scrollIntoView({ block: \"nearest\", inline: \"nearest\" })\n        this.selectedTab = tab\n      }\n    })\n\n    /**\n     * Reset all the visibility of the panels,\n     * and show the panel related to the selected tab\n     */\n    this.querySelectorAll(\"nord-tab-panel\").forEach(panel => {\n      panel.setAttribute(\"aria-hidden\", `${panel !== selectedPanel}`)\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tab-group\": TabGroup\n  }\n}\n"],"names":["tabGroupCount","TabGroup","TabGroup_1","LitElement","constructor","this","direction","DirectionController","tabGroupId","label","padding","sticky","selectedTab","initialSelectedTab","handleMutation","mutations","forEach","mutation","attributeName","oldValue","target","_a","observer","disconnect","updateSelectedTab","_b","observe","observerOptions","render","html","dir","handleTabChange","handleKeydown","connectedCallback","super","updateSlots","hasUpdated","setupObserver","firstUpdated","setupTabs","setupPanels","disconnectedCallback","undefined","MutationObserver","isServer","querySelector","querySelectorAll","tab","index","setAttribute","toggleAttribute","panels","selectedPanelId","getAttribute","panel","event","scrollTo","top","Tab","previousTab","tabs","selectedTabIndex","indexOf","firstTab","lastTab","nextTab","updateTab","keyEvent","preventDefault","key","isLTR","selectedPanel","removeAttribute","focus","scrollIntoView","block","inline","styles","componentStyle","stickyStyle","style","attributes","subtree","attributeFilter","attributeOldValue","__decorate","property","reflect","prototype","type","Boolean","state","customElement"],"mappings":"y1FAUA,IAAIA,EAAgB,EAcCC,EAAQC,EAAd,cAAuBC,EAAvB,WAAAC,uBAGLC,KAAAC,UAAY,IAAIC,EAAoBF,MAcpCA,KAAAG,WAAa,kBAAkBR,IAKVK,KAAKI,MAAW,GAKhBJ,KAAOK,QAAwB,IAKhBL,KAAMM,QAAY,EAK7CN,KAAAO,YAAcP,KAAKQ,mBAyD5BR,KAAAS,eAAkBC,IACxBA,EAAUC,SAAQC,YAChB,GAA+B,aAA3BA,EAASC,eAAsD,OAAtBD,EAASE,SAAmB,CACvE,MAAMP,EAAmBK,EAASG,OACnB,QAAfC,EAAAhB,KAAKiB,gBAAU,IAAAD,GAAAA,EAAAE,aACflB,KAAKmB,kBAAkBZ,GACV,QAAba,EAAApB,KAAKiB,gBAAQ,IAAAG,GAAAA,EAAEC,QAAQrB,KAAMH,EAASyB,gBACvC,IACD,CAuIL,CAtMC,MAAAC,GACE,OAAOC,CAAI,8BACoBxB,KAAKC,UAAUwB,0EAI1BzB,KAAKI,kBACVJ,KAAK0B,8BACH1B,KAAK2B,kEAOvB,CAED,iBAAAC,GACEC,MAAMD,oBACN5B,KAAK8B,cAED9B,KAAK+B,aAAe/B,KAAKiB,UAC3BjB,KAAKgC,eAER,CAED,YAAAC,GACEjC,KAAKgC,eACN,CAEO,WAAAF,GACN9B,KAAKkC,YACLlC,KAAKmC,aACN,CAED,oBAAAC,SACEP,MAAMO,uBAES,QAAfpB,EAAAhB,KAAKiB,gBAAU,IAAAD,GAAAA,EAAAE,aACflB,KAAKiB,cAAWoB,CACjB,CAEO,aAAAL,GAEFhC,KAAKiB,WAITjB,KAAKiB,SAAW,IAAIqB,iBAAiBtC,KAAKS,gBAC1CT,KAAKiB,SAASI,QAAQrB,KAAMH,EAASyB,iBACtC,CAmBD,sBAAYd,GACV,OAAI+B,EACK,KAGFvC,KAAKwC,cAAc,uBAAyBxC,KAAKwC,cAAc,WACvE,CAKO,SAAAN,GACOlC,KAAKyC,iBAAiB,YAE9B9B,SAAQ,CAAC+B,EAAKC,KACjBD,EAAIE,aAAa,KAAM,GAAG5C,KAAKG,kBAAkBwC,EAAQ,KACzDD,EAAIE,aAAa,gBAAiB,GAAG5C,KAAKG,oBAAoBwC,EAAQ,KACtED,EAAIG,gBAAgB,WAAYH,IAAQ1C,KAAKO,YAAY,GAE5D,CAKO,WAAA4B,SACN,MAAMW,EAAS9C,KAAKyC,iBAAiB,kBAC/BM,EAAkC,QAAhB/B,EAAAhB,KAAKO,mBAAW,IAAAS,OAAA,EAAAA,EAAEgC,aAAa,iBAEvDF,EAAOnC,SAAQ,CAACsC,EAAON,KACrBM,EAAML,aAAa,KAAM,GAAG5C,KAAKG,oBAAoBwC,EAAQ,KAC7DM,EAAML,aAAa,kBAAmB,GAAG5C,KAAKG,kBAAkBwC,EAAQ,KACxEM,EAAML,aAAa,cAAe,GAAGK,EAAMD,aAAa,QAAUD,IAAkB,GAEvF,CAEO,eAAArB,CAAgBwB,GAEtBlD,KAAKmD,SAAS,CAAEC,IAAK,IAKfF,EAAMnC,kBAAkBsC,GAAQH,EAAMnC,SAAWf,KAAKO,aAE5DP,KAAKmB,kBAAkB+B,EAAMnC,OAC9B,CAKO,WAAAuC,CAAYZ,GAClB,MAAMa,EAAO,IAAIvD,KAAKyC,iBAAiB,aACjCe,EAAmBD,EAAKE,QAAQf,GACtC,OAAOa,EAAKC,EAAmB,EAChC,CAKO,aAAA7B,CAAcuB,GACpB,MAAMR,EAAWQ,EAAMnC,OAEjB2C,EAAgB1D,KAAKwC,cAAc,0BACnCmB,EAAe3D,KAAKwC,cAAc,yBAClCoB,EAAe5D,KAAKwC,cAAc,IAAIE,EAAIM,aAAa,qBAAuBU,EAC9EJ,EAAmBtD,KAAKsD,YAAYZ,IAAQiB,EAE5CE,EAAY,CAACtD,EAAkBuD,KACnCA,EAASC,iBAGT/D,KAAKmD,SAAS,CAAEC,IAAK,IACrBpD,KAAKmB,kBAAkBZ,EAAY,EAGrC,OAAQ2C,EAAMc,KACZ,IAAK,YACL,IAAK,UACHH,EAAU7D,KAAKC,UAAUgE,MAAQX,EAAcM,EAASV,GACxD,MAEF,IAAK,aACL,IAAK,YACHW,EAAU7D,KAAKC,UAAUgE,MAAQL,EAAUN,EAAaJ,GACxD,MAEF,IAAK,OACHW,EAAUH,EAAUR,GACpB,MAEF,IAAK,MACHW,EAAUF,EAAST,GAMxB,CAMO,iBAAA/B,CAAkBZ,GACxB,MAAM2D,EAAgBlE,KAAKwC,cAAc,IAAIjC,EAAYyC,aAAa,oBAElEzC,IAAgBP,KAAKO,cAKzBP,KAAKyC,iBAAiB,YAAY9B,SAAQ+B,IACxCA,EAAIyB,gBAAgB,YAChBzB,IAAQnC,IACVmC,EAAIE,aAAa,WAAY,IAC7BF,EAAI0B,QACJ1B,EAAI2B,eAAe,CAAEC,MAAO,UAAWC,OAAQ,YAC/CvE,KAAKO,YAAcmC,EACpB,IAOH1C,KAAKyC,iBAAiB,kBAAkB9B,SAAQsC,IAC9CA,EAAML,aAAa,cAAe,GAAGK,IAAUiB,IAAgB,IAElE,GA3OMtE,EAAM4E,OAAG,CAACC,EAAgBC,EAAaC,GAM/B/E,EAAA0B,gBAAkB,CAC/BsD,YAAY,EACZC,SAAS,EACTC,gBAAiB,CAAC,YAClBC,mBAAmB,GAWQC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0BtF,EAAAuF,UAAA,aAAA,GAKlBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0CtF,EAAAuF,UAAA,eAAA,GAKnBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAkCzF,EAAAuF,UAAA,cAAA,GAKlDH,EAAA,CAAhBM,KAAqD1F,EAAAuF,UAAA,mBAAA,GArCnCvF,EAAQC,EAAAmF,EAAA,CAD5BO,EAAc,mBACM3F,SAAAA"}
+{"version":3,"file":"TabGroup.js","sources":["../src/tab-group/TabGroup.ts"],"sourcesContent":["import { html, isServer, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport stickyStyle from '../common/styles/Sticky.css'\nimport Tab from '../tab/Tab.js'\n\nimport style from './TabGroup.css'\n\nlet tabGroupCount = 1\n\n/**\n * Tab Group allows multiple panels to be contained within a single window,\n * using tabs as a navigational element.\n *\n * @status ready\n * @category navigation\n * @slot - The element which contains the content to be revealed.\n * @slot tab - The element which contains all tabs to reveal tabbed content.\n *\n * @cssprop [--n-tab-group-padding=0] - Controls the padding around the tab group (including the tab list), using our [spacing tokens](/tokens/#space).\n */\n@customElement('nord-tab-group')\nexport default class TabGroup extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private direction = new DirectionController(this)\n\n  private observer?: MutationObserver\n\n  private static observerOptions = {\n    attributes: true,\n    subtree: true,\n    attributeFilter: ['selected'],\n    attributeOldValue: true,\n  }\n\n  /**\n   * Unique ID for each tab group component present.\n   */\n  private tabGroupId = `nord-tab-group-${tabGroupCount++}`\n\n  /**\n   * Adds an accessible label to the tab list container.\n   */\n  @property({ reflect: true }) label: string = ''\n\n  /**\n   * Controls the padding of the tab group component.\n   */\n  @property({ reflect: true }) padding?: 'm' | 'l' | 'none' = 'm'\n\n  /**\n   * Whether the tab list sticks to the top of the tab group as you scroll.\n   */\n  @property({ reflect: true, type: Boolean }) sticky: boolean = false\n\n  /**\n   * The current tab node selected in the tab group.\n   */\n  @state() private selectedTab = this.initialSelectedTab\n\n  render() {\n    return html`\n      <div class=\"n-tab-group is-${this.direction.dir}\">\n        <div\n          class=\"n-tab-group-list n-sticky\"\n          role=\"tablist\"\n          aria-label=\"${this.label}\"\n          @click=${this.handleTabChange}\n          @keydown=${this.handleKeydown}\n        >\n          <slot name=\"tab\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.updateSlots()\n    // Re-setup observer after reconnection (firstUpdated only runs once per instance)\n    if (this.hasUpdated && !this.observer) {\n      this.setupObserver()\n    }\n  }\n\n  firstUpdated() {\n    this.setupObserver()\n  }\n\n  private updateSlots() {\n    this.setupTabs()\n    this.setupPanels()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // Clean up observer to prevent memory leaks\n    this.observer?.disconnect()\n    this.observer = undefined\n  }\n\n  private setupObserver() {\n    // Avoid creating multiple observers\n    if (this.observer) {\n      return\n    }\n\n    this.observer = new MutationObserver(this.handleMutation)\n    this.observer.observe(this, TabGroup.observerOptions)\n  }\n\n  /**\n   * If the selected tab is selected programmatically update all the tabs.\n   */\n  private handleMutation = (mutations: MutationRecord[]) => {\n    mutations.forEach((mutation) => {\n      if (mutation.attributeName === 'selected' && mutation.oldValue === null) {\n        const selectedTab = <Tab>mutation.target\n        this.observer?.disconnect()\n        this.updateSelectedTab(selectedTab)\n        this.observer?.observe(this, TabGroup.observerOptions)\n      }\n    })\n  }\n\n  /**\n   * Get the selected tab button, or the first tab button.\n   */\n  private get initialSelectedTab() {\n    if (isServer) {\n      return null\n    }\n\n    return this.querySelector('nord-tab[selected]') || this.querySelector('nord-tab')\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab buttons.\n   */\n  private setupTabs() {\n    const tabs = this.querySelectorAll('nord-tab')\n\n    tabs.forEach((tab, index) => {\n      tab.setAttribute('id', `${this.tabGroupId}-tab-${index + 1}`)\n      tab.setAttribute('aria-controls', `${this.tabGroupId}-panel-${index + 1}`)\n      tab.toggleAttribute('selected', tab === this.selectedTab)\n    })\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab panels.\n   */\n  private setupPanels() {\n    const panels = this.querySelectorAll('nord-tab-panel')\n    const selectedPanelId = this.selectedTab?.getAttribute('aria-controls')\n\n    panels.forEach((panel, index) => {\n      panel.setAttribute('id', `${this.tabGroupId}-panel-${index + 1}`)\n      panel.setAttribute('aria-labelledby', `${this.tabGroupId}-tab-${index + 1}`)\n      panel.setAttribute('aria-hidden', `${panel.getAttribute('id') !== selectedPanelId}`)\n    })\n  }\n\n  private handleTabChange(event: Event) {\n    // Always reset the scroll when a tab is selected.\n    this.scrollTo({ top: 0 })\n\n    /**\n     * Return handler if it's not a tab or if it's already selected\n     */\n    if (!(event.target instanceof Tab) || event.target === this.selectedTab)\n      return\n\n    this.updateSelectedTab(event.target)\n  }\n\n  /**\n   * Get the previous tab button in the tab group\n   */\n  private previousTab(tab: Tab) {\n    const tabs = [...this.querySelectorAll('nord-tab')]\n    const selectedTabIndex = tabs.indexOf(tab)\n    return tabs[selectedTabIndex - 1]\n  }\n\n  /**\n   * Handle keyboard accessible controls.\n   */\n  private handleKeydown(event: KeyboardEvent) {\n    const tab = <Tab>event.target\n\n    const firstTab = <Tab> this.querySelector('nord-tab:first-of-type')\n    const lastTab = <Tab> this.querySelector('nord-tab:last-of-type')\n    const nextTab = <Tab> this.querySelector(`#${tab.getAttribute('id')} ~ nord-tab`) || firstTab\n    const previousTab = <Tab> this.previousTab(tab) || lastTab\n\n    const updateTab = (selectedTab: Tab, keyEvent: Event) => {\n      keyEvent.preventDefault()\n\n      // Always reset the scroll when a tab is selected.\n      this.scrollTo({ top: 0 })\n      this.updateSelectedTab(selectedTab)\n    }\n\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        updateTab(this.direction.isLTR ? previousTab : nextTab, event)\n        break\n\n      case 'ArrowRight':\n      case 'ArrowDown':\n        updateTab(this.direction.isLTR ? nextTab : previousTab, event)\n        break\n\n      case 'Home':\n        updateTab(firstTab, event)\n        break\n\n      case 'End':\n        updateTab(lastTab, event)\n        break\n\n      default:\n        break\n    }\n  }\n\n  /**\n   * Update the selected tab button with attributes and values.\n   * Update the tab group state.\n   */\n  private updateSelectedTab(selectedTab: Tab) {\n    const selectedPanel = this.querySelector(`#${selectedTab.getAttribute('aria-controls')}`)\n\n    if (selectedTab === this.selectedTab)\n      return\n\n    /**\n     * Reset all the selected state of the tabs, and select the clicked tab\n     */\n    this.querySelectorAll('nord-tab').forEach((tab) => {\n      tab.removeAttribute('selected')\n      if (tab === selectedTab) {\n        tab.setAttribute('selected', '')\n        tab.focus()\n        tab.scrollIntoView({ block: 'nearest', inline: 'nearest' })\n        this.selectedTab = tab\n      }\n    })\n\n    /**\n     * Reset all the visibility of the panels,\n     * and show the panel related to the selected tab\n     */\n    this.querySelectorAll('nord-tab-panel').forEach((panel) => {\n      panel.setAttribute('aria-hidden', `${panel !== selectedPanel}`)\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tab-group': TabGroup\n  }\n}\n"],"names":["tabGroupCount","TabGroup","TabGroup_1","LitElement","constructor","this","direction","DirectionController","tabGroupId","label","padding","sticky","selectedTab","initialSelectedTab","handleMutation","mutations","forEach","mutation","attributeName","oldValue","target","_a","observer","disconnect","updateSelectedTab","_b","observe","observerOptions","render","html","dir","handleTabChange","handleKeydown","connectedCallback","super","updateSlots","hasUpdated","setupObserver","firstUpdated","setupTabs","setupPanels","disconnectedCallback","undefined","MutationObserver","isServer","querySelector","querySelectorAll","tab","index","setAttribute","toggleAttribute","panels","selectedPanelId","getAttribute","panel","event","scrollTo","top","Tab","previousTab","tabs","selectedTabIndex","indexOf","firstTab","lastTab","nextTab","updateTab","keyEvent","preventDefault","key","isLTR","selectedPanel","removeAttribute","focus","scrollIntoView","block","inline","styles","componentStyle","stickyStyle","style","attributes","subtree","attributeFilter","attributeOldValue","__decorate","property","reflect","prototype","type","Boolean","state","customElement"],"mappings":"y1FAUA,IAAIA,EAAgB,EAcCC,EAAQC,EAAd,cAAuBC,EAAvB,WAAAC,uBAGLC,KAAAC,UAAY,IAAIC,EAAoBF,MAcpCA,KAAAG,WAAa,kBAAkBR,IAKVK,KAAKI,MAAW,GAKhBJ,KAAOK,QAAwB,IAKhBL,KAAMM,QAAY,EAK7CN,KAAAO,YAAcP,KAAKQ,mBAyD5BR,KAAAS,eAAkBC,IACxBA,EAAUC,SAASC,YACjB,GAA+B,aAA3BA,EAASC,eAAsD,OAAtBD,EAASE,SAAmB,CACvE,MAAMP,EAAmBK,EAASG,OACnB,QAAfC,EAAAhB,KAAKiB,gBAAU,IAAAD,GAAAA,EAAAE,aACflB,KAAKmB,kBAAkBZ,GACV,QAAba,EAAApB,KAAKiB,gBAAQ,IAAAG,GAAAA,EAAEC,QAAQrB,KAAMH,EAASyB,gBACvC,IACD,CAyIL,CAxMC,MAAAC,GACE,OAAOC,CAAI,8BACoBxB,KAAKC,UAAUwB,0EAI1BzB,KAAKI,kBACVJ,KAAK0B,8BACH1B,KAAK2B,kEAOvB,CAED,iBAAAC,GACEC,MAAMD,oBACN5B,KAAK8B,cAED9B,KAAK+B,aAAe/B,KAAKiB,UAC3BjB,KAAKgC,eAER,CAED,YAAAC,GACEjC,KAAKgC,eACN,CAEO,WAAAF,GACN9B,KAAKkC,YACLlC,KAAKmC,aACN,CAED,oBAAAC,SACEP,MAAMO,uBAES,QAAfpB,EAAAhB,KAAKiB,gBAAU,IAAAD,GAAAA,EAAAE,aACflB,KAAKiB,cAAWoB,CACjB,CAEO,aAAAL,GAEFhC,KAAKiB,WAITjB,KAAKiB,SAAW,IAAIqB,iBAAiBtC,KAAKS,gBAC1CT,KAAKiB,SAASI,QAAQrB,KAAMH,EAASyB,iBACtC,CAmBD,sBAAYd,GACV,OAAI+B,EACK,KAGFvC,KAAKwC,cAAc,uBAAyBxC,KAAKwC,cAAc,WACvE,CAKO,SAAAN,GACOlC,KAAKyC,iBAAiB,YAE9B9B,SAAQ,CAAC+B,EAAKC,KACjBD,EAAIE,aAAa,KAAM,GAAG5C,KAAKG,kBAAkBwC,EAAQ,KACzDD,EAAIE,aAAa,gBAAiB,GAAG5C,KAAKG,oBAAoBwC,EAAQ,KACtED,EAAIG,gBAAgB,WAAYH,IAAQ1C,KAAKO,YAAY,GAE5D,CAKO,WAAA4B,SACN,MAAMW,EAAS9C,KAAKyC,iBAAiB,kBAC/BM,EAAkC,QAAhB/B,EAAAhB,KAAKO,mBAAW,IAAAS,OAAA,EAAAA,EAAEgC,aAAa,iBAEvDF,EAAOnC,SAAQ,CAACsC,EAAON,KACrBM,EAAML,aAAa,KAAM,GAAG5C,KAAKG,oBAAoBwC,EAAQ,KAC7DM,EAAML,aAAa,kBAAmB,GAAG5C,KAAKG,kBAAkBwC,EAAQ,KACxEM,EAAML,aAAa,cAAe,GAAGK,EAAMD,aAAa,QAAUD,IAAkB,GAEvF,CAEO,eAAArB,CAAgBwB,GAEtBlD,KAAKmD,SAAS,CAAEC,IAAK,IAKfF,EAAMnC,kBAAkBsC,GAAQH,EAAMnC,SAAWf,KAAKO,aAG5DP,KAAKmB,kBAAkB+B,EAAMnC,OAC9B,CAKO,WAAAuC,CAAYZ,GAClB,MAAMa,EAAO,IAAIvD,KAAKyC,iBAAiB,aACjCe,EAAmBD,EAAKE,QAAQf,GACtC,OAAOa,EAAKC,EAAmB,EAChC,CAKO,aAAA7B,CAAcuB,GACpB,MAAMR,EAAWQ,EAAMnC,OAEjB2C,EAAiB1D,KAAKwC,cAAc,0BACpCmB,EAAgB3D,KAAKwC,cAAc,yBACnCoB,EAAgB5D,KAAKwC,cAAc,IAAIE,EAAIM,aAAa,qBAAuBU,EAC/EJ,EAAoBtD,KAAKsD,YAAYZ,IAAQiB,EAE7CE,EAAY,CAACtD,EAAkBuD,KACnCA,EAASC,iBAGT/D,KAAKmD,SAAS,CAAEC,IAAK,IACrBpD,KAAKmB,kBAAkBZ,EAAY,EAGrC,OAAQ2C,EAAMc,KACZ,IAAK,YACL,IAAK,UACHH,EAAU7D,KAAKC,UAAUgE,MAAQX,EAAcM,EAASV,GACxD,MAEF,IAAK,aACL,IAAK,YACHW,EAAU7D,KAAKC,UAAUgE,MAAQL,EAAUN,EAAaJ,GACxD,MAEF,IAAK,OACHW,EAAUH,EAAUR,GACpB,MAEF,IAAK,MACHW,EAAUF,EAAST,GAMxB,CAMO,iBAAA/B,CAAkBZ,GACxB,MAAM2D,EAAgBlE,KAAKwC,cAAc,IAAIjC,EAAYyC,aAAa,oBAElEzC,IAAgBP,KAAKO,cAMzBP,KAAKyC,iBAAiB,YAAY9B,SAAS+B,IACzCA,EAAIyB,gBAAgB,YAChBzB,IAAQnC,IACVmC,EAAIE,aAAa,WAAY,IAC7BF,EAAI0B,QACJ1B,EAAI2B,eAAe,CAAEC,MAAO,UAAWC,OAAQ,YAC/CvE,KAAKO,YAAcmC,EACpB,IAOH1C,KAAKyC,iBAAiB,kBAAkB9B,SAASsC,IAC/CA,EAAML,aAAa,cAAe,GAAGK,IAAUiB,IAAgB,IAElE,GA7OMtE,EAAM4E,OAAG,CAACC,EAAgBC,EAAaC,GAM/B/E,EAAA0B,gBAAkB,CAC/BsD,YAAY,EACZC,SAAS,EACTC,gBAAiB,CAAC,YAClBC,mBAAmB,GAWQC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0BtF,EAAAuF,UAAA,aAAA,GAKlBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0CtF,EAAAuF,UAAA,eAAA,GAKnBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAkCzF,EAAAuF,UAAA,cAAA,GAKlDH,EAAA,CAAhBM,KAAqD1F,EAAAuF,UAAA,mBAAA,GArCnCvF,EAAQC,EAAAmF,EAAA,CAD5BO,EAAc,mBACM3F,SAAAA"}

package/lib/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../src/tab-panel/TabPanel.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TabPanel.css\"\n\n/**\n * The panel which contains content that can be revealed using a tab\n * in the tab group component.\n *\n * @status ready\n * @category navigation\n * @slot - The tab panel content.\n */\n@customElement(\"nord-tab-panel\")\nexport default class TabPanel extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`<div class=\"n-tab-panel\"><slot></slot></div>`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    /**\n     * Apply accessible attributes and values to the tab panel.\n     */\n    this.setAttribute(\"role\", \"tabpanel\")\n    this.setAttribute(\"tabindex\", \"0\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tab-panel\": TabPanel\n  }\n}\n"],"names":["TabPanel","LitElement","render","html","connectedCallback","super","this","setAttribute","styles","componentStyle","style","__decorate","customElement"],"mappings":"sSAee,IAAMA,EAAN,cAAuBC,EAGpC,MAAAC,GACE,OAAOC,CAAI,8CACZ,CAED,iBAAAC,GACEC,MAAMD,oBAKNE,KAAKC,aAAa,OAAQ,YAC1BD,KAAKC,aAAa,WAAY,IAC/B,GAdMP,EAAAQ,OAAS,CAACC,EAAgBC,GADdV,EAAQW,EAAA,CAD5BC,EAAc,mBACMZ,SAAAA"}
+{"version":3,"file":"TabPanel.js","sources":["../src/tab-panel/TabPanel.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './TabPanel.css'\n\n/**\n * The panel which contains content that can be revealed using a tab\n * in the tab group component.\n *\n * @status ready\n * @category navigation\n * @slot - The tab panel content.\n */\n@customElement('nord-tab-panel')\nexport default class TabPanel extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`<div class=\"n-tab-panel\"><slot></slot></div>`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    /**\n     * Apply accessible attributes and values to the tab panel.\n     */\n    this.setAttribute('role', 'tabpanel')\n    this.setAttribute('tabindex', '0')\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tab-panel': TabPanel\n  }\n}\n"],"names":["TabPanel","LitElement","render","html","connectedCallback","super","this","setAttribute","styles","componentStyle","style","__decorate","customElement"],"mappings":"sSAee,IAAMA,EAAN,cAAuBC,EAGpC,MAAAC,GACE,OAAOC,CAAI,8CACZ,CAED,iBAAAC,GACEC,MAAMD,oBAKNE,KAAKC,aAAa,OAAQ,YAC1BD,KAAKC,aAAa,WAAY,IAC/B,GAdMP,EAAAQ,OAAS,CAACC,EAAgBC,GADdV,EAAQW,EAAA,CAD5BC,EAAc,mBACMZ,SAAAA"}

package/lib/Table.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as e,render as a,html as o}from"lit";import{property as n,customElement as d}from"lit/decorators.js";const l=r`nord-table{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 0.8));--_n-table-border-radius:var(--n-table-border-radius, var(--n-border-radius));all:unset;color:var(--n-color-text);-webkit-user-select:inherit;user-select:inherit;display:block;max-inline-size:100%;overflow-x:auto}nord-table table{inline-size:100%;font-size:var(--n-font-size-m);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-tight);text-align:start;border-spacing:0;border-collapse:separate;color:var(--n-color-text);font-variant-numeric:tabular-nums}nord-table th{border-block-end:1px solid var(--n-color-border);font-weight:var(--n-font-weight-active);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker);text-align:start;background:var(--n-color-surface-raised)}nord-table td{border-block-end:1px solid var(--n-color-border);white-space:nowrap}nord-table :is(td, th){padding:var(--_n-table-td-padding) var(--n-space-s)}nord-table :is(td,th):first-child{padding-inline-start:var(--n-space-m)}nord-table :is(td,th):last-child{padding-inline-end:var(--n-space-m)}nord-table tbody tr:hover{background:var(--n-color-active)}nord-table tbody :is(.n-row-selected, .n-row-selected:hover){background:var(--n-color-active);color:var(--n-color-text);opacity:1;cursor:default}nord-table tbody :is(tr:hover,.n-row-selected) td{color:var(--n-color-text)}nord-table th[aria-sort]{cursor:pointer}nord-table th[aria-sort]:not([aria-sort=none]){color:var(--n-color-text)}nord-table[density=condensed]{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 0.5))}nord-table[density=relaxed]{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 1.1))}nord-card nord-table tbody tr:last-child td{border-block-end-color:transparent}nord-card nord-table th:first-child{border-start-start-radius:var(--_n-table-border-radius)}nord-card nord-table th:last-child{border-start-end-radius:var(--_n-table-border-radius)}nord-card [slot=header]~nord-table th:is(:first-child, :last-child){border-radius:0}nord-card nord-table tbody tr:last-child td:first-child{border-end-start-radius:var(--_n-table-border-radius)}nord-card nord-table tbody tr:last-child td:last-child{border-end-end-radius:var(--_n-table-border-radius)}nord-table[scroll-snap]{scroll-snap-type:inline mandatory;scroll-behavior:smooth}nord-table[scroll-snap] :is(th, td){scroll-snap-align:start}nord-table:where([striped]) tbody tr:where(:nth-child(even)){background:var(--n-color-surface-raised)}nord-table .n-table-ellipsis{max-inline-size:0;inline-size:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nord-table .n-table-align-right{text-align:end}nord-table .n-table-actions{display:flex;justify-content:center}nord-table .n-table-actions nord-button{margin-block:-10px}`;let s=class extends e{constructor(){super(...arguments),this.density="default",this.scrollSnap=!1,this.striped=!1}connectedCallback(){super.connectedCallback(),this.renderStyles()}renderStyles(){const t=this.getRootNode(),r=t.nodeType===Node.DOCUMENT_NODE?t.head:t;const e=this.localName;if(t.querySelector(`style[data-component=${e}]`))return;const n=document.createDocumentFragment();a(o`<style data-component="${e}">${l}</style>`,n),r.appendChild(n)}createRenderRoot(){return this}};t([n({reflect:!0})],s.prototype,"density",void 0),t([n({reflect:!0,type:Boolean,attribute:"scroll-snap"})],s.prototype,"scrollSnap",void 0),t([n({type:Boolean,reflect:!0})],s.prototype,"striped",void 0),s=t([d("nord-table")],s);var i=s;export{i as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as e,render as a,html as o}from"lit";import{property as n,customElement as d}from"lit/decorators.js";const l=r`nord-table{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 0.8));--_n-table-border-radius:var(--n-table-border-radius, var(--n-border-radius));all:unset;color:var(--n-color-text);user-select:inherit;display:block;max-inline-size:100%;overflow-x:auto}nord-table table{inline-size:100%;font-size:var(--n-font-size-m);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-tight);text-align:start;border-spacing:0;border-collapse:separate;color:var(--n-color-text);font-variant-numeric:tabular-nums}nord-table th{border-block-end:1px solid var(--n-color-border);font-weight:var(--n-font-weight-active);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker);text-align:start;background:var(--n-color-surface-raised)}nord-table td{border-block-end:1px solid var(--n-color-border);white-space:nowrap}nord-table :is(td, th){padding:var(--_n-table-td-padding) var(--n-space-s)}nord-table :is(td,th):first-child{padding-inline-start:var(--n-space-m)}nord-table :is(td,th):last-child{padding-inline-end:var(--n-space-m)}nord-table tbody tr:hover{background:var(--n-color-active)}nord-table tbody :is(.n-row-selected, .n-row-selected:hover){background:var(--n-color-active);color:var(--n-color-text);opacity:1;cursor:default}nord-table tbody :is(tr:hover,.n-row-selected) td{color:var(--n-color-text)}nord-table th[aria-sort]{cursor:pointer}nord-table th[aria-sort]:not([aria-sort=none]){color:var(--n-color-text)}nord-table[density=condensed]{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 0.5))}nord-table[density=relaxed]{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 1.1))}nord-card nord-table tbody tr:last-child td{border-block-end-color:transparent}nord-card nord-table th:first-child{border-start-start-radius:var(--_n-table-border-radius)}nord-card nord-table th:last-child{border-start-end-radius:var(--_n-table-border-radius)}nord-card [slot=header]~nord-table th:is(:first-child, :last-child){border-radius:0}nord-card nord-table tbody tr:last-child td:first-child{border-end-start-radius:var(--_n-table-border-radius)}nord-card nord-table tbody tr:last-child td:last-child{border-end-end-radius:var(--_n-table-border-radius)}nord-table[scroll-snap]{scroll-snap-type:inline mandatory;scroll-behavior:smooth}nord-table[scroll-snap] :is(th, td){scroll-snap-align:start}nord-table:where([striped]) tbody tr:where(:nth-child(even)){background:var(--n-color-surface-raised)}nord-table .n-table-ellipsis{max-inline-size:0;inline-size:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nord-table .n-table-align-right{text-align:end}nord-table .n-table-actions{display:flex;justify-content:center}nord-table .n-table-actions nord-button{margin-block:-10px}`;let s=class extends e{constructor(){super(...arguments),this.density="default",this.scrollSnap=!1,this.striped=!1}connectedCallback(){super.connectedCallback(),this.renderStyles()}renderStyles(){const t=this.getRootNode(),r=t.nodeType===Node.DOCUMENT_NODE?t.head:t;const e=this.localName;if(t.querySelector(`style[data-component=${e}]`))return;const n=document.createDocumentFragment();a(o`<style data-component="${e}">${l}</style>`,n),r.appendChild(n)}createRenderRoot(){return this}};t([n({reflect:!0})],s.prototype,"density",void 0),t([n({reflect:!0,type:Boolean,attribute:"scroll-snap"})],s.prototype,"scrollSnap",void 0),t([n({type:Boolean,reflect:!0})],s.prototype,"striped",void 0),s=t([d("nord-table")],s);var i=s;export{i as default};
 //# sourceMappingURL=Table.js.map

package/lib/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/table/Table.ts"],"sourcesContent":["import { LitElement, html, render } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport style from \"./Table.css\"\n\nfunction isDocument(node: Node): node is Document {\n  return node.nodeType === Node.DOCUMENT_NODE\n}\n\n/**\n * Table is used to organize and display information from a data set.\n * Provides table styles in addition to features like sticky\n * headers and support for narrow viewports.\n *\n * @status ready\n * @category list\n * @slot - Default slot which holds the HTML `<table>` element.\n *\n * @cssprop [--n-table-td-padding=calc(var(--n-space-m) * 0.95)] - Controls the padding around the table cells.\n * @cssprop [--n-table-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n *\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview - with react and tanstack table\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview - with react and ag grid\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview - with vue and tanstack table\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview - with vue and ag grid\n */\n@customElement(\"nord-table\")\nexport default class Table extends LitElement {\n  /**\n   * Controls the density of the table's rows and headers.\n   * Relaxed increases space, condensed reduces space.\n   */\n  @property({ reflect: true }) density: \"condensed\" | \"default\" | \"relaxed\" = \"default\"\n\n  /**\n   * Enables scroll-snapping, meaning the scroll position is always column-aligned.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"scroll-snap\" }) scrollSnap = false\n\n  /**\n   * Controls whether to use zebra striping on tables, which can improve readability.\n   */\n  @property({ type: Boolean, reflect: true }) striped = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.renderStyles()\n  }\n\n  /**\n   * renders table styles into nearest root.\n   * this is necessary since we do not use shadow dom.\n   */\n  private renderStyles() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const renderTarget = isDocument(rootNode) ? rootNode.head : rootNode\n    const tagName = this.localName\n\n    const componentStyles = rootNode.querySelector(`style[data-component=${tagName}]`)\n    if (componentStyles) {\n      return\n    }\n\n    const fragment = document.createDocumentFragment()\n    render(\n      html`\n        <style data-component=${tagName}>\n          ${style}\n        </style>\n      `,\n      fragment\n    )\n    renderTarget.appendChild(fragment)\n  }\n\n  /**\n   * opt out of shadow dom\n   */\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-table\": Table\n  }\n}\n"],"names":["Table","LitElement","constructor","this","density","scrollSnap","striped","connectedCallback","super","renderStyles","rootNode","getRootNode","renderTarget","nodeType","Node","DOCUMENT_NODE","head","tagName","localName","querySelector","fragment","document","createDocumentFragment","render","html","style","appendChild","createRenderRoot","__decorate","property","reflect","prototype","type","Boolean","attribute","customElement"],"mappings":"o8FA0Be,IAAMA,EAAN,cAAoBC,EAApB,WAAAC,uBAKgBC,KAAOC,QAAwC,UAKND,KAAUE,YAAG,EAKvCF,KAAOG,SAAG,CAuCvD,CArCC,iBAAAC,GACEC,MAAMD,oBACNJ,KAAKM,cACN,CAMO,YAAAA,GACN,MAAMC,EAAWP,KAAKQ,cAChBC,EAA0BF,EAjDtBG,WAAaC,KAAKC,cAiDgBL,EAASM,KAAON,EAC5D,MAAMO,EAAUd,KAAKe,UAGrB,GADwBR,EAASS,cAAc,wBAAwBF,MAErE,OAGF,MAAMG,EAAWC,SAASC,yBAC1BC,EACEC,CAAI,0BACsBP,MACpBQ,YAGNL,GAEFR,EAAac,YAAYN,EAC1B,CAKS,gBAAAO,GACR,OAAOxB,IACR,GAhD4ByB,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgE9B,EAAA+B,UAAA,eAAA,GAKfH,EAAA,CAArEC,EAAS,CAAEC,SAAS,EAAME,KAAMC,QAASC,UAAW,iBAAmClC,EAAA+B,UAAA,kBAAA,GAK5CH,EAAA,CAA3CC,EAAS,CAAEG,KAAMC,QAASH,SAAS,KAAuB9B,EAAA+B,UAAA,eAAA,GAfxC/B,EAAK4B,EAAA,CADzBO,EAAc,eACMnC,SAAAA"}
+{"version":3,"file":"Table.js","sources":["../src/table/Table.ts"],"sourcesContent":["import { html, LitElement, render } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport style from './Table.css'\n\nfunction isDocument(node: Node): node is Document {\n  return node.nodeType === Node.DOCUMENT_NODE\n}\n\n/**\n * Table is used to organize and display information from a data set.\n * Provides table styles in addition to features like sticky\n * headers and support for narrow viewports.\n *\n * @status ready\n * @category list\n * @slot - Default slot which holds the HTML `<table>` element.\n *\n * @cssprop [--n-table-td-padding=calc(var(--n-space-m) * 0.95)] - Controls the padding around the table cells.\n * @cssprop [--n-table-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n *\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview - with react and tanstack table\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview - with react and ag grid\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview - with vue and tanstack table\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview - with vue and ag grid\n */\n@customElement('nord-table')\nexport default class Table extends LitElement {\n  /**\n   * Controls the density of the table's rows and headers.\n   * Relaxed increases space, condensed reduces space.\n   */\n  @property({ reflect: true }) density: 'condensed' | 'default' | 'relaxed' = 'default'\n\n  /**\n   * Enables scroll-snapping, meaning the scroll position is always column-aligned.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'scroll-snap' }) scrollSnap = false\n\n  /**\n   * Controls whether to use zebra striping on tables, which can improve readability.\n   */\n  @property({ type: Boolean, reflect: true }) striped = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.renderStyles()\n  }\n\n  /**\n   * renders table styles into nearest root.\n   * this is necessary since we do not use shadow dom.\n   */\n  private renderStyles() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const renderTarget = isDocument(rootNode) ? rootNode.head : rootNode\n    const tagName = this.localName\n\n    const componentStyles = rootNode.querySelector(`style[data-component=${tagName}]`)\n    if (componentStyles) {\n      return\n    }\n\n    const fragment = document.createDocumentFragment()\n    render(\n      html`\n        <style data-component=${tagName}>\n          ${style}\n        </style>\n      `,\n      fragment,\n    )\n    renderTarget.appendChild(fragment)\n  }\n\n  /**\n   * opt out of shadow dom\n   */\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-table': Table\n  }\n}\n"],"names":["Table","LitElement","constructor","this","density","scrollSnap","striped","connectedCallback","super","renderStyles","rootNode","getRootNode","renderTarget","nodeType","Node","DOCUMENT_NODE","head","tagName","localName","querySelector","fragment","document","createDocumentFragment","render","html","style","appendChild","createRenderRoot","__decorate","property","reflect","prototype","type","Boolean","attribute","customElement"],"mappings":"w6FA0Be,IAAMA,EAAN,cAAoBC,EAApB,WAAAC,uBAKgBC,KAAOC,QAAwC,UAKND,KAAUE,YAAG,EAKvCF,KAAOG,SAAG,CAuCvD,CArCC,iBAAAC,GACEC,MAAMD,oBACNJ,KAAKM,cACN,CAMO,YAAAA,GACN,MAAMC,EAAWP,KAAKQ,cAChBC,EAA0BF,EAjDtBG,WAAaC,KAAKC,cAiDgBL,EAASM,KAAON,EAC5D,MAAMO,EAAUd,KAAKe,UAGrB,GADwBR,EAASS,cAAc,wBAAwBF,MAErE,OAGF,MAAMG,EAAWC,SAASC,yBAC1BC,EACEC,CAAI,0BACsBP,MACpBQ,YAGNL,GAEFR,EAAac,YAAYN,EAC1B,CAKS,gBAAAO,GACR,OAAOxB,IACR,GAhD4ByB,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgE9B,EAAA+B,UAAA,eAAA,GAKfH,EAAA,CAArEC,EAAS,CAAEC,SAAS,EAAME,KAAMC,QAASC,UAAW,iBAAmClC,EAAA+B,UAAA,kBAAA,GAK5CH,EAAA,CAA3CC,EAAS,CAAEG,KAAMC,QAASH,SAAS,KAAuB9B,EAAA+B,UAAA,eAAA,GAfxC/B,EAAK4B,EAAA,CADzBO,EAAc,eACMnC,SAAAA"}

package/lib/Tag.js

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as n,LitElement as r}from"lit";import{property as t,customElement as a}from"lit/decorators.js";import{ifDefined as i}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{c as s}from"./interface-checked-small-BtICPEsp.js";import{c as l}from"./interface-close-small-CnpAFMO3.js";import d from"./Icon.js";import{I as v}from"./InputMixin-LetXsCyv.js";import{F as b}from"./FocusableMixin-BlQLNPdJ.js";import{N as h}from"./events-Bv6wNHwJ.js";import{F as p}from"./FormDataController-OUt5L5uC.js";import{LocalizeController as u}from"./LocalizeController.js";import{s as g}from"./Component-DSU3Qp0O.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./observe-D0n0zOfU.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const m=e`:host{--_n-tag-box-shadow:var(--n-tag-box-shadow, none);--_n-tag-border-radius:var(--n-tag-border-radius, var(--n-border-radius-s));--_n-tag-background-color:var(--n-color-nav-hover);--_n-tag-border-color:var(--n-color-border-neutral);--_n-tag-checkbox-size:var(--n-size-icon-s);--_n-tag-checkbox-accent-color:var(--n-color-accent);--_n-tag-checkbox-border-color:var(--n-color-border-hover);--_n-tag-font-size:var(--n-font-size-m);--_n-tag-inline-size:fit-content;display:inline;vertical-align:middle}.n-tag{border-radius:var(--_n-tag-border-radius);border:1px solid var(--_n-tag-border-color);background:var(--_n-tag-background-color);font-size:var(--_n-tag-font-size);font-family:var(--n-font-family);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-tight);letter-spacing:0;min-block-size:1.75rem;padding:0 var(--n-space-s);color:var(--n-color-text);gap:calc(var(--n-space-xs) * 1.5);align-items:center;display:inline-flex;white-space:nowrap;position:relative;box-shadow:var(--_n-tag-box-shadow);inline-size:var(--_n-tag-inline-size)}.n-input-container{position:relative}input{appearance:none;background:var(--n-color-active);border:1px solid var(--_n-tag-checkbox-border-color);border-radius:var(--n-border-radius-s);display:block;inline-size:var(--_n-tag-checkbox-size);block-size:var(--_n-tag-checkbox-size);cursor:pointer}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}:host([expand]){--_n-tag-inline-size:100%;display:block}:host(:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-border-color:var(--n-color-border-strong);--_n-tag-box-shadow:var(--n-tag-box-shadow, var(--n-box-shadow))}:host([variant=selectable]) .n-tag:hover{--_n-tag-border-color:var(--n-color-border-hover)}.n-tag:has(input:checked){--_n-tag-background-color:var(--n-color-button)}input:checked{--_n-tag-checkbox-border-color:var(--n-color-accent);background:var(--_n-tag-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important}:host([variant=selectable]:focus-within) .n-tag{--_n-tag-border-color:var(--n-color-accent);--_n-tag-box-shadow:var(--n-tag-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow))}:host(:not([disabled])) label:active{opacity:.8;transform:translateY(1px);transition:none}nord-icon.icon-checked{--_n-icon-size:var(--n-size-icon-xxs);display:none;position:absolute;color:var(--n-color-text-on-accent);inset:calc(var(--n-space-xs)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked~nord-icon.icon-checked{display:block}label{-webkit-user-select:none;user-select:none;cursor:pointer}.n-remove-button{-webkit-appearance:none;appearance:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border:1px solid transparent;color:var(--n-color-text);border-radius:var(--_n-tag-border-radius);background:0 0;margin-block-start:calc(var(--n-space-xs) * -1);margin-block-end:calc(var(--n-space-xs) * -1);margin-inline-start:0;margin-inline-end:calc(var(--n-space-s) * -1);padding:var(--n-space-s)}.n-remove-button nord-icon{--_n-icon-size:var(--n-size-icon-xxs);color:var(--n-color-icon)}.n-remove-button:hover{background:var(--n-color-surface-lowered)}.n-remove-button:hover nord-icon{color:var(--n-color-icon-hover)}.n-remove-button:focus-visible{outline:0!important}.n-remove-button:focus{outline:0!important;border:1px solid var(--n-color-accent);box-shadow:0 0 0 1px var(--n-color-accent)}:host(:not([disabled])) .n-remove-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([disabled]:not([variant=default])) .n-tag{--_n-tag-background-color:var(--n-color-surface-lowered);--_n-tag-border-color:var(--_n-tag-background-color);color:var(--n-color-text-weaker);cursor:default;opacity:.5}:host([disabled]) input{background:var(--_n-tag-checkbox-accent-color);cursor:default;opacity:1}:host([disabled]) input:not(:checked){--_n-tag-checkbox-accent-color:var(--n-color-background);--_n-tag-checkbox-border-color:var(--n-color-border-hover)}:host([disabled]) .n-remove-button{cursor:default}:host([disabled]) .n-remove-button:hover{background:0 0}:host([disabled]) .n-remove-button:hover nord-icon{color:var(--n-color-icon)}:host([disabled]:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-box-shadow:var(--n-tag-box-shadow, none)}:host([size="s"]) .n-tag{--_n-tag-font-size:var(--n-font-size-s)}`;d.registerIcon(s),d.registerIcon(l);let f=class extends(v(b(r))){constructor(){super(...arguments),this.localize=new u(this),this.formData=new p(this,{value:()=>this.formValue}),this.inputId="input",this.variant="default",this.checked=!1,this.size="m",this.expand=!1}get formValue(){return"selectable"===this.variant&&this.checked?this.value||"on":void 0}handleChange(o){const e=o.target;this.checked=e.checked,o.stopPropagation(),this.dispatchEvent(new h("change"))}handleRemove(){this.dispatchEvent(new h("remove"))}render(){switch(this.variant){case"selectable":return this.renderSelectableTag();case"removable":return this.renderRemovableTag();default:return this.renderStaticTag()}}renderStaticTag(){return 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 ${c(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${i(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small"></nord-icon></div><div class="n-content"><slot></slot></div></label>`}};f.styles=[g,m],o([t({reflect:!0})],f.prototype,"variant",void 0),o([t({reflect:!0,type:Boolean})],f.prototype,"checked",void 0),o([t({reflect:!0})],f.prototype,"size",void 0),o([t({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),f=o([a("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-BtICPEsp.js";import{c as r}from"./interface-close-small-CnpAFMO3.js";import{css as n,html as t,LitElement as a}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 h}from"./InputMixin-LetXsCyv.js";import{s as p}from"./Component-DSU3Qp0O.js";import u 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";const m=n`:host{--_n-tag-box-shadow:var(--n-tag-box-shadow, none);--_n-tag-border-radius:var(--n-tag-border-radius, var(--n-border-radius-s));--_n-tag-background-color:var(--n-color-nav-hover);--_n-tag-border-color:var(--n-color-border-neutral);--_n-tag-checkbox-size:var(--n-size-icon-s);--_n-tag-checkbox-accent-color:var(--n-color-accent);--_n-tag-checkbox-border-color:var(--n-color-border-hover);--_n-tag-font-size:var(--n-font-size-m);--_n-tag-inline-size:fit-content;display:inline;vertical-align:middle}.n-tag{border-radius:var(--_n-tag-border-radius);border:1px solid var(--_n-tag-border-color);background:var(--_n-tag-background-color);font-size:var(--_n-tag-font-size);font-family:var(--n-font-family);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-tight);letter-spacing:0;min-block-size:1.75rem;padding:0 var(--n-space-s);color:var(--n-color-text);gap:calc(var(--n-space-xs) * 1.5);align-items:center;display:inline-flex;white-space:nowrap;position:relative;box-shadow:var(--_n-tag-box-shadow);inline-size:var(--_n-tag-inline-size)}.n-input-container{position:relative}input{appearance:none;background:var(--n-color-active);border:1px solid var(--_n-tag-checkbox-border-color);border-radius:var(--n-border-radius-s);display:block;inline-size:var(--_n-tag-checkbox-size);block-size:var(--_n-tag-checkbox-size);cursor:pointer}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}:host([expand]){--_n-tag-inline-size:100%;display:block}:host(:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-border-color:var(--n-color-border-strong);--_n-tag-box-shadow:var(--n-tag-box-shadow, var(--n-box-shadow))}:host([variant=selectable]) .n-tag:hover{--_n-tag-border-color:var(--n-color-border-hover)}.n-tag:has(input:checked){--_n-tag-background-color:var(--n-color-button)}input:checked{--_n-tag-checkbox-border-color:var(--n-color-accent);background:var(--_n-tag-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important}:host([variant=selectable]:focus-within) .n-tag{--_n-tag-border-color:var(--n-color-accent);--_n-tag-box-shadow:var(--n-tag-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow))}:host(:not([disabled])) label:active{opacity:.8;transform:translateY(1px);transition:none}nord-icon.icon-checked{--_n-icon-size:var(--n-size-icon-xxs);display:none;position:absolute;color:var(--n-color-text-on-accent);inset:calc(var(--n-space-xs)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked~nord-icon.icon-checked{display:block}label{user-select:none;cursor:pointer}.n-remove-button{appearance:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border:1px solid transparent;color:var(--n-color-text);border-radius:var(--_n-tag-border-radius);background:0 0;margin-block-start:calc(var(--n-space-xs) * -1);margin-block-end:calc(var(--n-space-xs) * -1);margin-inline-start:0;margin-inline-end:calc(var(--n-space-s) * -1);padding:var(--n-space-s)}.n-remove-button nord-icon{--_n-icon-size:var(--n-size-icon-xxs);color:var(--n-color-icon)}.n-remove-button:hover{background:var(--n-color-surface-lowered)}.n-remove-button:hover nord-icon{color:var(--n-color-icon-hover)}.n-remove-button:focus-visible{outline:0!important}.n-remove-button:focus{outline:0!important;border:1px solid var(--n-color-accent);box-shadow:0 0 0 1px var(--n-color-accent)}:host(:not([disabled])) .n-remove-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([disabled]:not([variant=default])) .n-tag{--_n-tag-background-color:var(--n-color-surface-lowered);--_n-tag-border-color:var(--_n-tag-background-color);color:var(--n-color-text-weaker);cursor:default;opacity:.5}:host([disabled]) input{background:var(--_n-tag-checkbox-accent-color);cursor:default;opacity:1}:host([disabled]) input:not(:checked){--_n-tag-checkbox-accent-color:var(--n-color-background);--_n-tag-checkbox-border-color:var(--n-color-border-hover)}:host([disabled]) .n-remove-button{cursor:default}:host([disabled]) .n-remove-button:hover{background:0 0}:host([disabled]) .n-remove-button:hover nord-icon{color:var(--n-color-icon)}:host([disabled]:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-box-shadow:var(--n-tag-box-shadow, none)}:host([size='s']) .n-tag{--_n-tag-font-size:var(--n-font-size-s)}`;u.registerIcon(e),u.registerIcon(r);let f=class extends(h(b(a))){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 t`<div class="n-tag"><div class="n-content"><slot></slot></div></div>`}renderRemovableTag(){return t`<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 t`<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=[p,m],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 { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport * as checkedIcon from \"@nordhealth/icons/lib/assets/interface-checked-small.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\nimport Icon from \"../icon/Icon.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FormDataController } from \"../common/controllers/FormDataController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tag.css\"\n\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(closeIcon)\n\n/**\n * Tags represent a set of keywords that help label, categorize,\n * and organize objects. Commonly used to signify the attributes of an object.\n *\n * @status 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  // eslint-disable-next-line class-methods-use-this\n  private renderStaticTag() {\n    return html`\n      <div class=\"n-tag\">\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n\n  private renderRemovableTag() {\n    return html`\n      <div class=\"n-tag\">\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n        <button class=\"n-remove-button\" @click=${this.handleRemove} ?disabled=${this.disabled}>\n          <nord-icon name=\"interface-close-small\" label=${this.localize.term(\"removeLabel\")}></nord-icon>\n        </button>\n      </div>\n    `\n  }\n\n  private renderSelectableTag() {\n    return html`\n      <label for=${this.inputId} class=\"n-tag\">\n        <div class=\"n-input-container\">\n          <input\n            ${ref(this.focusableRef)}\n            class=\"n-input\"\n            id=${this.inputId}\n            type=\"checkbox\"\n            name=${ifDefined(this.name)}\n            .value=${this.value}\n            .checked=${this.checked}\n            ?disabled=${this.disabled}\n            @change=${this.handleChange}\n          />\n          <nord-icon class=\"icon-checked\" name=\"interface-checked-small\"></nord-icon>\n        </div>\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n      </label>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tag\": Tag\n  }\n}\n"],"names":["Icon","registerIcon","checkedIcon","closeIcon","Tag","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":"s6KAgBAA,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,CAgFtD,CAxGC,aAAcL,GACZ,MAAwB,eAAjBN,KAAKQ,SAA4BR,KAAKS,QAAUT,KAAKK,OAAS,UAAOO,CAC7E,CAwBS,YAAAC,CAAaC,GACrB,MAAMC,EAASD,EAAEC,OACjBf,KAAKS,QAAUM,EAAON,QAEtBK,EAAEE,kBAKFhB,KAAKiB,cAAc,IAAIC,EAAU,UAClC,CAES,YAAAC,GAIRnB,KAAKiB,cAAc,IAAIC,EAAU,UAClC,CAED,MAAAE,GACE,OAAQpB,KAAKQ,SACX,IAAK,aACH,OAAOR,KAAKqB,sBACd,IAAK,YACH,OAAOrB,KAAKsB,qBAEd,QACE,OAAOtB,KAAKuB,kBAEjB,CAGO,eAAAA,GACN,OAAOC,CAAI,qEAOZ,CAEO,kBAAAF,GACN,OAAOE,CAAI,wGAKkCxB,KAAKmB,4BAA0BnB,KAAKyB,4DAC3BzB,KAAKC,SAASyB,KAAK,6CAI1E,CAEO,mBAAAL,GACN,OAAOG,CAAI,eACIxB,KAAKO,gEAGVoB,EAAI3B,KAAK4B,qCAEN5B,KAAKO,kCAEHsB,EAAU7B,KAAK8B,kBACb9B,KAAKK,oBACHL,KAAKS,uBACJT,KAAKyB,sBACPzB,KAAKa,mJASxB,GA7GMlB,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 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":"q3KAgBAA,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

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as a,html as o}from"lit";import{property as i,customElement as e}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{S as n}from"./SlotController-Z6eG7LSZ.js";import{D as l}from"./DirectionController-ChvNGESZ.js";import{s as d}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const u=r`:host{--_n-tag-group-border-radius:var(--n-tag-group-border-radius, var(--n-border-radius-s));--_n-tag-group-box-shadow:var(--n-tag-group-box-shadow, var(--n-box-shadow));--_n-tag-group-flex-direction:row;--_n-tag-group-max-inline-size:max-content}:host([variant=default]) .n-multiple-tags{--n-tag-border-radius:0;--n-tag-box-shadow:none}.n-tag-group{display:flex;flex-direction:var(--_n-tag-group-flex-direction);max-inline-size:var(--_n-tag-group-max-inline-size)}:host([variant=default]) .n-tag-group.n-multiple-tags{border-radius:var(--_n-tag-group-border-radius);box-shadow:var(--_n-tag-group-box-shadow)}:host([variant=spaced]) .n-tag-group{gap:var(--n-space-s)}:host([variant=default][direction=horizontal]) .n-multiple-tags ::slotted(*){margin-inline-end:-1px}:host([variant=default]) .n-multiple-tags ::slotted(:is(:hover,:focus,:focus-within)){z-index:var(--n-index-mask)}:host([variant=default]) ::slotted(:is(:focus,:focus-within)){--n-tag-box-shadow:var(--n-tag-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow))}:host([variant=default]) .n-multiple-tags ::slotted(*){border-radius:var(--n-tag-border-radius)}:host([variant=default]) .n-multiple-tags.n-rtl ::slotted(:last-child),:host([variant=default]) .n-multiple-tags:not(.n-rtl) ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) 0 0 var(--_n-tag-group-border-radius)}:host([variant=default]) .n-multiple-tags.n-rtl ::slotted(:first-child),:host([variant=default]) .n-multiple-tags:not(.n-rtl) ::slotted(:last-child){--n-tag-border-radius:0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0}:host([direction=vertical]) .n-tag-group{--_n-tag-group-flex-direction:column}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0 0}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(:last-child){--n-tag-border-radius:0 0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius)}:host([variant=spaced][wrap]) .n-tag-group{flex-wrap:wrap}`;let g=class extends a{constructor(){super(...arguments),this.defaultSlot=new n(this),this.dirController=new l(this),this.variant="default",this.direction="horizontal",this.wrap=!1,this.role="group"}render(){const t=this.defaultSlot.assigned.length>1;return o`<div class="${s({"n-tag-group":!0,"n-rtl":this.dirController.isRTL,"n-multiple-tags":t})}"><slot></slot></div>`}};g.styles=[d,u],t([i({reflect:!0})],g.prototype,"variant",void 0),t([i({reflect:!0})],g.prototype,"direction",void 0),t([i({reflect:!0,type:Boolean})],g.prototype,"wrap",void 0),t([i({reflect:!0})],g.prototype,"role",void 0),g=t([e("nord-tag-group")],g);var p=g;export{p as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as a,html as o}from"lit";import{property as i,customElement as e}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{D as n}from"./DirectionController-ChvNGESZ.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{s as d}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const u=r`:host{--_n-tag-group-border-radius:var(--n-tag-group-border-radius, var(--n-border-radius-s));--_n-tag-group-box-shadow:var(--n-tag-group-box-shadow, var(--n-box-shadow));--_n-tag-group-flex-direction:row;--_n-tag-group-max-inline-size:max-content}:host([variant=default]) .n-multiple-tags{--n-tag-border-radius:0;--n-tag-box-shadow:none}.n-tag-group{display:flex;flex-direction:var(--_n-tag-group-flex-direction);max-inline-size:var(--_n-tag-group-max-inline-size)}:host([variant=default]) .n-tag-group.n-multiple-tags{border-radius:var(--_n-tag-group-border-radius);box-shadow:var(--_n-tag-group-box-shadow)}:host([variant=spaced]) .n-tag-group{gap:var(--n-space-s)}:host([variant=default][direction=horizontal]) .n-multiple-tags ::slotted(*){margin-inline-end:-1px}:host([variant=default]) .n-multiple-tags ::slotted(:is(:hover,:focus,:focus-within)){z-index:var(--n-index-mask)}:host([variant=default]) ::slotted(:is(:focus,:focus-within)){--n-tag-box-shadow:var(--n-tag-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow))}:host([variant=default]) .n-multiple-tags ::slotted(*){border-radius:var(--n-tag-border-radius)}:host([variant=default]) .n-multiple-tags.n-rtl ::slotted(:last-child),:host([variant=default]) .n-multiple-tags:not(.n-rtl) ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) 0 0 var(--_n-tag-group-border-radius)}:host([variant=default]) .n-multiple-tags.n-rtl ::slotted(:first-child),:host([variant=default]) .n-multiple-tags:not(.n-rtl) ::slotted(:last-child){--n-tag-border-radius:0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0}:host([direction=vertical]) .n-tag-group{--_n-tag-group-flex-direction:column}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0 0}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(:last-child){--n-tag-border-radius:0 0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius)}:host([variant=spaced][wrap]) .n-tag-group{flex-wrap:wrap}`;let g=class extends a{constructor(){super(...arguments),this.defaultSlot=new l(this),this.dirController=new n(this),this.variant="default",this.direction="horizontal",this.wrap=!1,this.role="group"}render(){const t=this.defaultSlot.assigned.length>1;return o`<div class="${s({"n-tag-group":!0,"n-rtl":this.dirController.isRTL,"n-multiple-tags":t})}"><slot></slot></div>`}};g.styles=[d,u],t([i({reflect:!0})],g.prototype,"variant",void 0),t([i({reflect:!0})],g.prototype,"direction",void 0),t([i({reflect:!0,type:Boolean})],g.prototype,"wrap",void 0),t([i({reflect:!0})],g.prototype,"role",void 0),g=t([e("nord-tag-group")],g);var p=g;export{p as default};
 //# sourceMappingURL=TagGroup.js.map

package/lib/TagGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.js","sources":["../src/tag-group/TagGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TagGroup.css\"\n\n/**\n * Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.\n *\n * @status 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@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  // eslint-disable-next-line lit/no-native-attributes\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":"mkFAuBe,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 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@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":"mkFAuBe,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/{TextField-C5gYzfOp.js → TextField-BdEdZ0_b.js}

@@ -1,2 +1,2 @@
-import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{property as r}from"lit/decorators.js";import{css as o}from"lit";function i(o){class i extends o{constructor(){super(...arguments),this.readonly=!1}}return n([r({type:Boolean,reflect:!0})],i.prototype,"readonly",void 0),i}const t=o`:host{--_n-input-inline-size:var(--n-input-inline-size, 240px);--_n-input-background:var(--n-input-background, var(--n-color-active));--_n-input-color:var(--n-input-color, var(--n-color-text));--_n-input-font-size:var(--n-input-font-size, var(--n-font-size-m));--_n-input-border-color:var(--n-input-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-input-border-radius, var(--n-border-radius-s));--_n-input-text-align:var(--n-input-text-align, start);--_n-input-placeholder-color:var(--n-input-placeholder-color, var(--n-color-text-weakest));--_n-input-padding-block:calc(var(--n-space-s) - 1px);--_n-input-padding-inline:calc(var(--n-space-s) * 1.6)}.n-input-container{position:relative;inline-size:var(--_n-input-inline-size)}.n-input{background:var(--_n-input-background);color:var(--_n-input-color);padding:var(--_n-input-padding-block) var(--_n-input-padding-inline);border-radius:var(--_n-input-border-radius);border:1px solid var(--_n-input-border-color);font-family:var(--n-font-family);font-size:var(--_n-input-font-size);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-form);inline-size:100%;transition:border var(--n-transition-quickly),box-shadow var(--n-transition-quickly),background var(--n-transition-quickly);text-align:var(--_n-input-text-align)}@media (max-width:480px){:host{--_n-input-font-size:var(--n-input-font-size, var(--n-font-size-l))}}:host([expand]){--_n-input-inline-size:100%;inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container{--_n-input-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-input-border-color, var(--n-color-accent));--_n-input-background:var(--n-input-background, var(--n-color-surface));outline:0;box-shadow:0 0 0 1px var(--_n-input-border-color)}.n-input::placeholder{color:var(--_n-input-placeholder-color);opacity:1}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-input-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-border-color:var(--n-input-border-color, var(--n-color-active));--_n-input-color:var(--n-input-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-input-color, var(--n-color-text-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([size="s"]){--_n-input-font-size:var(--n-font-size-s);--_n-input-padding-block:calc(var(--n-space-xs) - 1px);--_n-input-padding-inline:calc(var(--n-space-xs) * 1.6)}:host([size="l"]){--_n-input-font-size:var(--n-font-size-l);--_n-input-padding-block:calc(var(--n-space-m) / 1.25)}`;export{i as R,t as s};
-//# sourceMappingURL=TextField-C5gYzfOp.js.map
+import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{property as r}from"lit/decorators.js";import{css as o}from"lit";function i(o){class i extends o{constructor(){super(...arguments),this.readonly=!1}}return n([r({type:Boolean,reflect:!0})],i.prototype,"readonly",void 0),i}const t=o`:host{--_n-input-inline-size:var(--n-input-inline-size, 240px);--_n-input-background:var(--n-input-background, var(--n-color-active));--_n-input-color:var(--n-input-color, var(--n-color-text));--_n-input-font-size:var(--n-input-font-size, var(--n-font-size-m));--_n-input-border-color:var(--n-input-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-input-border-radius, var(--n-border-radius-s));--_n-input-text-align:var(--n-input-text-align, start);--_n-input-placeholder-color:var(--n-input-placeholder-color, var(--n-color-text-weakest));--_n-input-padding-block:calc(var(--n-space-s) - 1px);--_n-input-padding-inline:calc(var(--n-space-s) * 1.6)}.n-input-container{position:relative;inline-size:var(--_n-input-inline-size)}.n-input{background:var(--_n-input-background);color:var(--_n-input-color);padding:var(--_n-input-padding-block) var(--_n-input-padding-inline);border-radius:var(--_n-input-border-radius);border:1px solid var(--_n-input-border-color);font-family:var(--n-font-family);font-size:var(--_n-input-font-size);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-form);inline-size:100%;transition:border var(--n-transition-quickly),box-shadow var(--n-transition-quickly),background var(--n-transition-quickly);text-align:var(--_n-input-text-align)}@media (max-width:480px){:host{--_n-input-font-size:var(--n-input-font-size, var(--n-font-size-l))}}:host([expand]){--_n-input-inline-size:100%;inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container{--_n-input-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-input-border-color, var(--n-color-accent));--_n-input-background:var(--n-input-background, var(--n-color-surface));outline:0;box-shadow:0 0 0 1px var(--_n-input-border-color)}.n-input::placeholder{color:var(--_n-input-placeholder-color);opacity:1}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-input-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-border-color:var(--n-input-border-color, var(--n-color-active));--_n-input-color:var(--n-input-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-input-color, var(--n-color-text-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([size='s']){--_n-input-font-size:var(--n-font-size-s);--_n-input-padding-block:calc(var(--n-space-xs) - 1px);--_n-input-padding-inline:calc(var(--n-space-xs) * 1.6)}:host([size='l']){--_n-input-font-size:var(--n-font-size-l);--_n-input-padding-block:calc(var(--n-space-m) / 1.25)}`;export{i as R,t as s};
+//# sourceMappingURL=TextField-BdEdZ0_b.js.map

package/lib/TextField-BdEdZ0_b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField-BdEdZ0_b.js","sources":["../src/common/mixins/ReadonlyMixin.ts"],"sourcesContent":["import type { LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class ReadonlyMixinInterface {\n  readonly: boolean\n}\n\nexport function ReadonlyMixin<T extends Constructor<LitElement>>(\n  superClass: T,\n): Constructor<ReadonlyMixinInterface> & T {\n  class ReadonlyElement extends superClass {\n    /**\n     * Makes the component readonly, so that it is not editable.\n     * Readonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.\n     */\n    @property({ type: Boolean, reflect: true }) readonly = false\n  }\n\n  return ReadonlyElement\n}\n"],"names":["ReadonlyMixin","superClass","ReadonlyElement","constructor","this","readonly","__decorate","property","type","Boolean","reflect","prototype"],"mappings":"mHASM,SAAUA,EACdC,GAEA,MAAMC,UAAwBD,EAA9B,WAAAE,uBAK8CC,KAAQC,UAAG,CACxD,EAED,OAH8CC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBR,EAAAS,UAAA,gBAAA,GAGvDT,CACT"}

package/lib/TextSelectableMixin-Cfv__lHS.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextSelectableMixin-Cfv__lHS.js","sources":["../src/common/mixins/TextSelectableMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\n\nimport { LitElement } from \"lit\"\nimport { createRef, Ref } from \"lit/directives/ref.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class TextSelectableMixinInterface {\n  protected textSelectableRef: Ref<HTMLInputElement | HTMLTextAreaElement>\n  set selectionStart(value: number | null)\n  get selectionStart(): number | null\n  set selectionEnd(value: number | null)\n  get selectionEnd(): number | null\n  select(): void\n  setSelectionRange(start: number | null, end: number | null, direction?: \"forward\" | \"backward\" | \"none\"): void\n  setRangeText(\n    replacement: string,\n    start?: number,\n    end?: number,\n    selectMode?: \"select\" | \"start\" | \"end\" | \"preserve\"\n  ): void\n}\n\nexport function TextSelectableMixin<T extends Constructable<InputMixinInterface & LitElement>>(superClass: T) {\n  class TextSelectableElement extends superClass {\n    protected textSelectableRef = createRef<HTMLInputElement | HTMLTextAreaElement>()\n\n    /**\n     * Gets or sets the starting position or offset of a text selection.\n     *\n     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionStart)\n     */\n    set selectionStart(value: number | null) {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.selectionStart = value\n      }\n    }\n\n    get selectionStart() {\n      return this.textSelectableRef.value?.selectionStart ?? null\n    }\n\n    /**\n     * Gets or sets the end position or offset of a text selection.\n     *\n     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionEnd)\n     */\n    set selectionEnd(value: number | null) {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.selectionEnd = value\n      }\n    }\n\n    get selectionEnd() {\n      return this.textSelectableRef.value?.selectionEnd ?? null\n    }\n\n    /**\n     * Gets or sets the direction in which selection occurred.\n     *\n     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/selectionDirection)\n     */\n    set selectionDirection(value: \"forward\" | \"backward\" | \"none\" | null) {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.selectionDirection = value\n      }\n    }\n\n    get selectionDirection() {\n      return this.textSelectableRef.value?.selectionDirection ?? null\n    }\n\n    /**\n     * Selects all the text in the text field.\n     *\n     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select)\n     */\n    select() {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.select()\n      }\n    }\n\n    /**\n     * Sets the start and end positions of a selection in the text field.\n     *\n     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange)\n     *\n     * @param start The offset into the text field for the start of the selection.\n     * @param end The offset into the text field for the end of the selection.\n     * @param direction The direction in which the selection is performed.\n     */\n    setSelectionRange(start: number | null, end: number | null, direction?: \"forward\" | \"backward\" | \"none\") {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.setSelectionRange(start, end, direction)\n      }\n    }\n\n    /**\n     * Replaces a range of text with a new string.\n     *\n     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText)\n     *\n     * @param replacement The string to insert.\n     * @param start The 0-based index of the first character to replace. Defaults to the current `selectionStart` value (the start of the user's current selection).\n     * @param end The 0-based index of the character after the last character to replace. Defaults to the current `selectionEnd` value (the end of the user's current selection).\n     * @param selectMode A string defining how the selection should be set after the text has been replaced.\n     */\n    setRangeText(\n      replacement: string,\n      start?: number,\n      end?: number,\n      selectMode: \"select\" | \"start\" | \"end\" | \"preserve\" = \"preserve\"\n    ) {\n      if (this.textSelectableRef.value) {\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        const selectionStart = start ?? this.textSelectableRef.value.selectionStart!\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        const selectionEnd = end ?? this.textSelectableRef.value.selectionEnd!\n\n        this.textSelectableRef.value.setRangeText(replacement, selectionStart, selectionEnd, selectMode)\n\n        if (this.value !== this.textSelectableRef.value.value) {\n          this.value = this.textSelectableRef.value.value\n        }\n      }\n    }\n\n    /**\n     * Returns the native `<input>` or `<textarea>` element used under the hood.\n     */\n    async getNativeElement() {\n      // wait for the element to be rendered\n      await this.updateComplete\n\n      return this.textSelectableRef.value\n    }\n  }\n\n  return TextSelectableElement as unknown as Constructable<TextSelectableMixinInterface> & T\n}\n"],"names":["TextSelectableMixin","superClass","constructor","this","textSelectableRef","createRef","selectionStart","value","_b","_a","selectionEnd","selectionDirection","select","setSelectionRange","start","end","direction","setRangeText","replacement","selectMode","getNativeElement","updateComplete"],"mappings":"kDAwBM,SAAUA,EAA+EC,GAoH7F,OAnHA,cAAoCA,EAApC,WAAAC,uBACYC,KAAiBC,kBAAGC,GAgH/B,CAzGC,kBAAIC,CAAeC,GACbJ,KAAKC,kBAAkBG,QACzBJ,KAAKC,kBAAkBG,MAAMD,eAAiBC,EAEjD,CAED,kBAAID,WACF,OAAuD,QAAhDE,EAA8B,QAA9BC,EAAAN,KAAKC,kBAAkBG,aAAO,IAAAE,OAAA,EAAAA,EAAAH,sBAAkB,IAAAE,EAAAA,EAAA,IACxD,CAOD,gBAAIE,CAAaH,GACXJ,KAAKC,kBAAkBG,QACzBJ,KAAKC,kBAAkBG,MAAMG,aAAeH,EAE/C,CAED,gBAAIG,WACF,OAAqD,QAA9CF,EAA8B,QAA9BC,EAAAN,KAAKC,kBAAkBG,aAAO,IAAAE,OAAA,EAAAA,EAAAC,oBAAgB,IAAAF,EAAAA,EAAA,IACtD,CAOD,sBAAIG,CAAmBJ,GACjBJ,KAAKC,kBAAkBG,QACzBJ,KAAKC,kBAAkBG,MAAMI,mBAAqBJ,EAErD,CAED,sBAAII,WACF,OAA2D,QAApDH,EAA8B,QAA9BC,EAAAN,KAAKC,kBAAkBG,aAAO,IAAAE,OAAA,EAAAA,EAAAE,0BAAsB,IAAAH,EAAAA,EAAA,IAC5D,CAOD,MAAAI,GACMT,KAAKC,kBAAkBG,OACzBJ,KAAKC,kBAAkBG,MAAMK,QAEhC,CAWD,iBAAAC,CAAkBC,EAAsBC,EAAoBC,GACtDb,KAAKC,kBAAkBG,OACzBJ,KAAKC,kBAAkBG,MAAMM,kBAAkBC,EAAOC,EAAKC,EAE9D,CAYD,YAAAC,CACEC,EACAJ,EACAC,EACAI,EAAsD,YAEtD,GAAIhB,KAAKC,kBAAkBG,MAAO,CAEhC,MAAMD,EAAiBQ,QAAAA,EAASX,KAAKC,kBAAkBG,MAAMD,eAEvDI,EAAeK,QAAAA,EAAOZ,KAAKC,kBAAkBG,MAAMG,aAEzDP,KAAKC,kBAAkBG,MAAMU,aAAaC,EAAaZ,EAAgBI,EAAcS,GAEjFhB,KAAKI,QAAUJ,KAAKC,kBAAkBG,MAAMA,QAC9CJ,KAAKI,MAAQJ,KAAKC,kBAAkBG,MAAMA,MAE7C,CACF,CAKD,sBAAMa,GAIJ,aAFMjB,KAAKkB,eAEJlB,KAAKC,kBAAkBG,KAC/B,EAIL"}
+{"version":3,"file":"TextSelectableMixin-Cfv__lHS.js","sources":["../src/common/mixins/TextSelectableMixin.ts"],"sourcesContent":["import type { LitElement } from 'lit'\nimport type { Ref } from 'lit/directives/ref.js'\nimport type { InputMixinInterface } from './InputMixin.js'\nimport { createRef } from 'lit/directives/ref.js'\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class TextSelectableMixinInterface {\n  protected textSelectableRef: Ref<HTMLInputElement | HTMLTextAreaElement>\n  set selectionStart(value: number | null)\n  get selectionStart(): number | null\n  set selectionEnd(value: number | null)\n  get selectionEnd(): number | null\n  select(): void\n  setSelectionRange(start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none'): void\n  setRangeText(\n    replacement: string,\n    start?: number,\n    end?: number,\n    selectMode?: 'select' | 'start' | 'end' | 'preserve'\n  ): void\n}\n\nexport function TextSelectableMixin<T extends Constructable<InputMixinInterface & LitElement>>(superClass: T) {\n  class TextSelectableElement extends superClass {\n    protected textSelectableRef = createRef<HTMLInputElement | HTMLTextAreaElement>()\n\n    /**\n     * Gets or sets the starting position or offset of a text selection.\n     *\n     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionStart)\n     */\n    set selectionStart(value: number | null) {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.selectionStart = value\n      }\n    }\n\n    get selectionStart() {\n      return this.textSelectableRef.value?.selectionStart ?? null\n    }\n\n    /**\n     * Gets or sets the end position or offset of a text selection.\n     *\n     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionEnd)\n     */\n    set selectionEnd(value: number | null) {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.selectionEnd = value\n      }\n    }\n\n    get selectionEnd() {\n      return this.textSelectableRef.value?.selectionEnd ?? null\n    }\n\n    /**\n     * Gets or sets the direction in which selection occurred.\n     *\n     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/selectionDirection)\n     */\n    set selectionDirection(value: 'forward' | 'backward' | 'none' | null) {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.selectionDirection = value\n      }\n    }\n\n    get selectionDirection() {\n      return this.textSelectableRef.value?.selectionDirection ?? null\n    }\n\n    /**\n     * Selects all the text in the text field.\n     *\n     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select)\n     */\n    select() {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.select()\n      }\n    }\n\n    /**\n     * Sets the start and end positions of a selection in the text field.\n     *\n     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange)\n     *\n     * @param start The offset into the text field for the start of the selection.\n     * @param end The offset into the text field for the end of the selection.\n     * @param direction The direction in which the selection is performed.\n     */\n    setSelectionRange(start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.setSelectionRange(start, end, direction)\n      }\n    }\n\n    /**\n     * Replaces a range of text with a new string.\n     *\n     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText)\n     *\n     * @param replacement The string to insert.\n     * @param start The 0-based index of the first character to replace. Defaults to the current `selectionStart` value (the start of the user's current selection).\n     * @param end The 0-based index of the character after the last character to replace. Defaults to the current `selectionEnd` value (the end of the user's current selection).\n     * @param selectMode A string defining how the selection should be set after the text has been replaced.\n     */\n    setRangeText(\n      replacement: string,\n      start?: number,\n      end?: number,\n      selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve',\n    ) {\n      if (this.textSelectableRef.value) {\n        const selectionStart = start ?? this.textSelectableRef.value.selectionStart!\n\n        const selectionEnd = end ?? this.textSelectableRef.value.selectionEnd!\n\n        this.textSelectableRef.value.setRangeText(replacement, selectionStart, selectionEnd, selectMode)\n\n        if (this.value !== this.textSelectableRef.value.value) {\n          this.value = this.textSelectableRef.value.value\n        }\n      }\n    }\n\n    /**\n     * Returns the native `<input>` or `<textarea>` element used under the hood.\n     */\n    async getNativeElement() {\n      // wait for the element to be rendered\n      await this.updateComplete\n\n      return this.textSelectableRef.value\n    }\n  }\n\n  return TextSelectableElement as unknown as Constructable<TextSelectableMixinInterface> & T\n}\n"],"names":["TextSelectableMixin","superClass","constructor","this","textSelectableRef","createRef","selectionStart","value","_b","_a","selectionEnd","selectionDirection","select","setSelectionRange","start","end","direction","setRangeText","replacement","selectMode","getNativeElement","updateComplete"],"mappings":"kDAuBM,SAAUA,EAA+EC,GAmH7F,OAlHA,cAAoCA,EAApC,WAAAC,uBACYC,KAAiBC,kBAAGC,GA+G/B,CAxGC,kBAAIC,CAAeC,GACbJ,KAAKC,kBAAkBG,QACzBJ,KAAKC,kBAAkBG,MAAMD,eAAiBC,EAEjD,CAED,kBAAID,WACF,OAAuD,QAAhDE,EAA8B,QAA9BC,EAAAN,KAAKC,kBAAkBG,aAAO,IAAAE,OAAA,EAAAA,EAAAH,sBAAkB,IAAAE,EAAAA,EAAA,IACxD,CAOD,gBAAIE,CAAaH,GACXJ,KAAKC,kBAAkBG,QACzBJ,KAAKC,kBAAkBG,MAAMG,aAAeH,EAE/C,CAED,gBAAIG,WACF,OAAqD,QAA9CF,EAA8B,QAA9BC,EAAAN,KAAKC,kBAAkBG,aAAO,IAAAE,OAAA,EAAAA,EAAAC,oBAAgB,IAAAF,EAAAA,EAAA,IACtD,CAOD,sBAAIG,CAAmBJ,GACjBJ,KAAKC,kBAAkBG,QACzBJ,KAAKC,kBAAkBG,MAAMI,mBAAqBJ,EAErD,CAED,sBAAII,WACF,OAA2D,QAApDH,EAA8B,QAA9BC,EAAAN,KAAKC,kBAAkBG,aAAO,IAAAE,OAAA,EAAAA,EAAAE,0BAAsB,IAAAH,EAAAA,EAAA,IAC5D,CAOD,MAAAI,GACMT,KAAKC,kBAAkBG,OACzBJ,KAAKC,kBAAkBG,MAAMK,QAEhC,CAWD,iBAAAC,CAAkBC,EAAsBC,EAAoBC,GACtDb,KAAKC,kBAAkBG,OACzBJ,KAAKC,kBAAkBG,MAAMM,kBAAkBC,EAAOC,EAAKC,EAE9D,CAYD,YAAAC,CACEC,EACAJ,EACAC,EACAI,EAAsD,YAEtD,GAAIhB,KAAKC,kBAAkBG,MAAO,CAChC,MAAMD,EAAiBQ,QAAAA,EAASX,KAAKC,kBAAkBG,MAAMD,eAEvDI,EAAeK,QAAAA,EAAOZ,KAAKC,kBAAkBG,MAAMG,aAEzDP,KAAKC,kBAAkBG,MAAMU,aAAaC,EAAaZ,EAAgBI,EAAcS,GAEjFhB,KAAKI,QAAUJ,KAAKC,kBAAkBG,MAAMA,QAC9CJ,KAAKI,MAAQJ,KAAKC,kBAAkBG,MAAMA,MAE7C,CACF,CAKD,sBAAMa,GAIJ,aAFMjB,KAAKkB,eAEJlB,KAAKC,kBAAkBG,KAC/B,EAIL"}

package/lib/Textarea.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,html as r,nothing as o,LitElement as n}from"lit";import{property as a,customElement as i}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{F as d}from"./FocusableMixin-BlQLNPdJ.js";import{F as p}from"./FormAssociatedMixin-DFL7yabe.js";import{I as u}from"./InputMixin-LetXsCyv.js";import{R as h,s as v}from"./TextField-C5gYzfOp.js";import{A as m}from"./AutocompleteMixin-D8eiOxvO.js";import{S as b}from"./SizeMixin-CU9cLbLC.js";import{T as x}from"./TextSelectableMixin-Cfv__lHS.js";import{s as f}from"./Component-DSU3Qp0O.js";import{s as g}from"./FormField-CUC_H-0e.js";import{LocalizeController as z}from"./LocalizeController.js";import{N as j}from"./events-Bv6wNHwJ.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.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";const y=t`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size, 240px);--_n-textarea-block-size:var(--n-textarea-block-size, 76px);--_n-input-background:var(--n-textarea-background, var(--n-color-active));--_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{position:relative;inline-size:var(--_n-textarea-inline-size)}.n-input{min-block-size:var(--_n-textarea-block-size);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}:host([expand]){--_n-textarea-inline-size:100%}.n-character-counter{margin-block-start:var(--n-space-xs);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker)}.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-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-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent))}`;let $=class extends(b(p(m(h(x(u(d(n)))))))){constructor(){super(...arguments),this.inputId="textarea",this.localize=new z(this,{onLangChange:()=>this.handleLangChange()}),this.resize="vertical",this.expand=!1,this.characterCounter=!1}render(){var e;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${s(this.textSelectableRef)} ${s(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${l(this.name)}" maxlength="${l(this.maxLength)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${l(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" @select="${this.handleSelect}" aria-describedby="${l(this.getDescribedBy())}" aria-invalid="${l(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea> ${this.characterCounter?this.renderCharacterCounter():o}</div>${this.renderError()}`}handleSelect(e){e.stopPropagation(),this.dispatchEvent(new j("select"))}renderCharacterCounter(){const{value:e,maxLength:t}=this,o="string"==typeof e?this.lengthMeasurer(e):0,n=t?t-o:null,a=t?`${o}/${t}`:o;return r`<nord-visually-hidden aria-live="polite" aria-atomic="true">${null!=n&&n<=10?this.localize.term("remainingCharacters",n):""}</nord-visually-hidden><div class="n-character-counter">${a}</div>`}handleLangChange(){const e=this.localize.resolvedLang;this.lengthMeasurer=function(e){if(Intl.Segmenter){const t=new Intl.Segmenter(e);return e=>[...t.segment(e)].length}return e=>e.length}(e)}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height="")}};$.styles=[f,g,v,y],e([a({reflect:!0})],$.prototype,"resize",void 0),e([a({reflect:!0,type:Boolean})],$.prototype,"expand",void 0),e([a({reflect:!0,attribute:"maxlength",type:Number})],$.prototype,"maxLength",void 0),e([a({reflect:!0,type:Boolean,attribute:"character-counter"})],$.prototype,"characterCounter",void 0),e([c("resize","updated"),c("value","updated")],$.prototype,"resizeToFitContent",null),$=e([i("nord-textarea")],$);var C=$;export{C as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,html as r,nothing as o,LitElement as n}from"lit";import{property as a,customElement as i}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 d}from"./events-Bv6wNHwJ.js";import{A as p}from"./AutocompleteMixin-D8eiOxvO.js";import{F as u}from"./FocusableMixin-BlQLNPdJ.js";import{F as h}from"./FormAssociatedMixin-DFL7yabe.js";import{I as v}from"./InputMixin-LetXsCyv.js";import{R as m,s as b}from"./TextField-BdEdZ0_b.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{T as f}from"./TextSelectableMixin-Cfv__lHS.js";import{s as g}from"./Component-DSU3Qp0O.js";import{s as z}from"./FormField--eLuhPue.js";import{LocalizeController as j}from"./LocalizeController.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.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";const y=t`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size, 240px);--_n-textarea-block-size:var(--n-textarea-block-size, 76px);--_n-input-background:var(--n-textarea-background, var(--n-color-active));--_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{position:relative;inline-size:var(--_n-textarea-inline-size)}.n-input{min-block-size:var(--_n-textarea-block-size);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}:host([expand]){--_n-textarea-inline-size:100%}.n-character-counter{margin-block-start:var(--n-space-xs);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker)}.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-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-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent))}`;let $=class extends(x(h(p(m(f(v(u(n)))))))){constructor(){super(...arguments),this.inputId="textarea",this.localize=new j(this,{onLangChange:()=>this.handleLangChange()}),this.resize="vertical",this.expand=!1,this.characterCounter=!1}render(){var e;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${s(this.textSelectableRef)} ${s(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${l(this.name)}" maxlength="${l(this.maxLength)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${l(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" @select="${this.handleSelect}" aria-describedby="${l(this.getDescribedBy())}" aria-invalid="${l(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea> ${this.characterCounter?this.renderCharacterCounter():o}</div>${this.renderError()}`}handleSelect(e){e.stopPropagation(),this.dispatchEvent(new d("select"))}renderCharacterCounter(){const{value:e,maxLength:t}=this,o="string"==typeof e?this.lengthMeasurer(e):0,n=t?t-o:null,a=t?`${o}/${t}`:o;return r`<nord-visually-hidden aria-live="polite" aria-atomic="true">${null!=n&&n<=10?this.localize.term("remainingCharacters",n):""}</nord-visually-hidden><div class="n-character-counter">${a}</div>`}handleLangChange(){const e=this.localize.resolvedLang;this.lengthMeasurer=function(e){if(Intl.Segmenter){const t=new Intl.Segmenter(e);return e=>[...t.segment(e)].length}return e=>e.length}(e)}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height="")}};$.styles=[g,z,b,y],e([a({reflect:!0})],$.prototype,"resize",void 0),e([a({reflect:!0,type:Boolean})],$.prototype,"expand",void 0),e([a({reflect:!0,attribute:"maxlength",type:Number})],$.prototype,"maxLength",void 0),e([a({reflect:!0,type:Boolean,attribute:"character-counter"})],$.prototype,"characterCounter",void 0),e([c("resize","updated"),c("value","updated")],$.prototype,"resizeToFitContent",null),$=e([i("nord-textarea")],$);var C=$;export{C 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 { LitElement, html, 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 { 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 { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\nimport { TextSelectableMixin } from \"../common/mixins/TextSelectableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Textarea.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { NordEvent } from \"../common/events.js\"\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 block size, or height, of the textarea.\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.disabled}\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-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          autocomplete=${this.autocomplete as any}\n        ></textarea>\n\n        ${this.characterCounter ? this.renderCharacterCounter() : nothing}\n      </div>\n\n      ${this.renderError()}\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      textarea.style.height = `${textarea.scrollHeight}px`\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","disabled","readonly","required","ifDefined","name","maxLength","_a","value","placeholder","handleChange","handleInput","handleSelect","getDescribedBy","getInvalid","autocomplete","renderCharacterCounter","nothing","renderError","e","stopPropagation","dispatchEvent","NordEvent","length","lengthMeasurer","remainder","counter","term","lang","resolvedLang","locale","Intl","Segmenter","segmenter","segment","createLengthMeasurer","resizeToFitContent","textarea","style","height","scrollHeight","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","attribute","Number","observe","customElement"],"mappings":"+qGAoDe,IAAMA,EAAN,cAAuBC,EACpCC,EAAoBC,EAAkBC,EAAcC,EAAoBC,EAAWC,EAAeC,UADrF,WAAAC,uBAKHC,KAAOC,QAAG,WAGZD,KAAAE,SAAW,IAAIC,EAAoCH,KAAM,CAC/DI,aAAc,IAAMJ,KAAKK,qBAQEL,KAAMM,OAAwB,WAKfN,KAAMO,QAAG,EAWuBP,KAAgBQ,kBAAG,CA+EhG,CA7EC,MAAAC,SACE,OAAOC,CAAI,GACPV,KAAKW,yDAIDC,EAAIZ,KAAKa,sBACTD,EAAIZ,KAAKc,qBACNd,KAAKC,uCAEED,KAAKe,wBACLf,KAAKgB,wBACLhB,KAAKiB,mBACVC,EAAUlB,KAAKmB,qBACVD,EAAUlB,KAAKoB,uBACR,QAAVC,EAAArB,KAAKsB,aAAK,IAAAD,EAAAA,EAAI,oBACTH,EAAUlB,KAAKuB,0BACnBvB,KAAKwB,yBACNxB,KAAKyB,yBACJzB,KAAK0B,mCACIR,EAAUlB,KAAK2B,oCACnBT,EAAUlB,KAAK4B,gCACf5B,KAAK6B,6BAGpB7B,KAAKQ,iBAAmBR,KAAK8B,yBAA2BC,UAG1D/B,KAAKgC,eAEV,CAES,YAAAN,CAAaO,GACrBA,EAAEC,kBAKFlC,KAAKmC,cAAc,IAAIC,EAAU,UAClC,CAEO,sBAAAN,GACN,MAAMR,MAAEA,EAAKF,UAAEA,GAAcpB,KACvBqC,EAA0B,iBAAVf,EAAqBtB,KAAKsC,eAAehB,GAAS,EAElEiB,EAAYnB,EAAYA,EAAYiB,EAAS,KAC7CG,EAAUpB,EAAY,GAAGiB,KAAUjB,IAAciB,EAEvD,OAAO3B,CAAI,+DAEQ,MAAb6B,GAAqBA,GAAa,GAAKvC,KAAKE,SAASuC,KAAK,sBAAuBF,GAAa,6DAE/DC,SAEtC,CAEO,gBAAAnC,GACN,MAAMqC,EAAO1C,KAAKE,SAASyC,aAC3B3C,KAAKsC,eA5HT,SAA8BM,GAC5B,GAAIC,KAAKC,UAAW,CAClB,MAAMC,EAAY,IAAIF,KAAKC,UAAUF,GACrC,OAAQtB,GAAkB,IAAIyB,EAAUC,QAAQ1B,IAAQe,MACzD,CAED,OAAQf,GAAkBA,EAAMe,MAClC,CAqH0BY,CAAqBP,EAC5C,CAIS,kBAAAQ,GACR,MAAMC,EAAWnD,KAAKc,aAAaQ,MAE9B6B,IAIe,SAAhBnD,KAAKM,QACP6C,EAASC,MAAMC,OAAS,OACxBF,EAASC,MAAMC,OAAS,GAAGF,EAASG,kBAEpCH,EAASC,MAAMC,OAAS,GAE3B,GA5GM/D,EAAMiE,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBN,GAcpCO,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgDvE,EAAAwE,UAAA,cAAA,GAKzBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyB1E,EAAAwE,UAAA,cAAA,GAKSH,EAAA,CAAlEC,EAAS,CAAEC,SAAS,EAAMI,UAAW,YAAaF,KAAMG,UAA4B5E,EAAAwE,UAAA,iBAAA,GAMTH,EAAA,CAA3EC,EAAS,CAAEC,SAAS,EAAME,KAAMC,QAASC,UAAW,uBAA+C3E,EAAAwE,UAAA,wBAAA,GAiE1FH,EAAA,CAFTQ,EAAQ,SAAU,WAClBA,EAAQ,QAAS,YAcjB7E,EAAAwE,UAAA,qBAAA,MA/GkBxE,EAAQqE,EAAA,CAD5BS,EAAc,kBACM9E,SAAAA"}
+{"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 block size, or height, of the textarea.\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.disabled}\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-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          autocomplete=${this.autocomplete as any}\n        ></textarea>\n\n        ${this.characterCounter ? this.renderCharacterCounter() : nothing}\n      </div>\n\n      ${this.renderError()}\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      textarea.style.height = `${textarea.scrollHeight}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","disabled","readonly","required","ifDefined","name","maxLength","_a","value","placeholder","handleChange","handleInput","handleSelect","getDescribedBy","getInvalid","autocomplete","renderCharacterCounter","nothing","renderError","e","stopPropagation","dispatchEvent","NordEvent","length","lengthMeasurer","remainder","counter","term","lang","resolvedLang","locale","Intl","Segmenter","segmenter","segment","createLengthMeasurer","resizeToFitContent","textarea","style","height","scrollHeight","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","attribute","Number","observe","customElement"],"mappings":"+qGAoDe,IAAMA,EAAN,cAAuBC,EACpCC,EAAoBC,EAAkBC,EAAcC,EAAoBC,EAAWC,EAAeC,UADrF,WAAAC,uBAKHC,KAAOC,QAAG,WAGZD,KAAAE,SAAW,IAAIC,EAAoCH,KAAM,CAC/DI,aAAc,IAAMJ,KAAKK,qBAQEL,KAAMM,OAAwB,WAKfN,KAAMO,QAAG,EAWuBP,KAAgBQ,kBAAG,CAgFhG,CA9EC,MAAAC,SACE,OAAOC,CAAI,GACPV,KAAKW,yDAIDC,EAAIZ,KAAKa,sBACTD,EAAIZ,KAAKc,qBACNd,KAAKC,uCAEED,KAAKe,wBACLf,KAAKgB,wBACLhB,KAAKiB,mBACVC,EAAUlB,KAAKmB,qBACVD,EAAUlB,KAAKoB,uBACR,QAAVC,EAAArB,KAAKsB,aAAK,IAAAD,EAAAA,EAAI,oBACTH,EAAUlB,KAAKuB,0BACnBvB,KAAKwB,yBACNxB,KAAKyB,yBACJzB,KAAK0B,mCACIR,EAAUlB,KAAK2B,oCACnBT,EAAUlB,KAAK4B,gCACf5B,KAAK6B,6BAGpB7B,KAAKQ,iBAAmBR,KAAK8B,yBAA2BC,UAG1D/B,KAAKgC,eAEV,CAES,YAAAN,CAAaO,GACrBA,EAAEC,kBAKFlC,KAAKmC,cAAc,IAAIC,EAAU,UAClC,CAEO,sBAAAN,GACN,MAAMR,MAAEA,EAAKF,UAAEA,GAAcpB,KACvBqC,EAA0B,iBAAVf,EAAqBtB,KAAKsC,eAAehB,GAAS,EAElEiB,EAAYnB,EAAYA,EAAYiB,EAAS,KAC7CG,EAAUpB,EAAY,GAAGiB,KAAUjB,IAAciB,EAEvD,OAAO3B,CAAI,+DAEQ,MAAb6B,GAAqBA,GAAa,GAAKvC,KAAKE,SAASuC,KAAK,sBAAuBF,GAAa,6DAE/DC,SAEtC,CAEO,gBAAAnC,GACN,MAAMqC,EAAO1C,KAAKE,SAASyC,aAC3B3C,KAAKsC,eA5HT,SAA8BM,GAC5B,GAAIC,KAAKC,UAAW,CAClB,MAAMC,EAAY,IAAIF,KAAKC,UAAUF,GACrC,OAAQtB,GAAkB,IAAIyB,EAAUC,QAAQ1B,IAAQe,MACzD,CAED,OAAQf,GAAkBA,EAAMe,MAClC,CAqH0BY,CAAqBP,EAC5C,CAIS,kBAAAQ,GACR,MAAMC,EAAWnD,KAAKc,aAAaQ,MAE9B6B,IAIe,SAAhBnD,KAAKM,QACP6C,EAASC,MAAMC,OAAS,OACxBF,EAASC,MAAMC,OAAS,GAAGF,EAASG,kBAGpCH,EAASC,MAAMC,OAAS,GAE3B,GA7GM/D,EAAMiE,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBN,GAcpCO,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgDvE,EAAAwE,UAAA,cAAA,GAKzBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyB1E,EAAAwE,UAAA,cAAA,GAKSH,EAAA,CAAlEC,EAAS,CAAEC,SAAS,EAAMI,UAAW,YAAaF,KAAMG,UAA4B5E,EAAAwE,UAAA,iBAAA,GAMTH,EAAA,CAA3EC,EAAS,CAAEC,SAAS,EAAME,KAAMC,QAASC,UAAW,uBAA+C3E,EAAAwE,UAAA,wBAAA,GAiE1FH,EAAA,CAFTQ,EAAQ,SAAU,WAClBA,EAAQ,QAAS,YAejB7E,EAAAwE,UAAA,qBAAA,MAhHkBxE,EAAQqE,EAAA,CAD5BS,EAAc,kBACM9E,SAAAA"}

package/lib/Toast.js

@@ -1,2 +1,2 @@
-import{_ as s}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as t,LitElement as i}from"lit";import{classMap as r}from"lit/directives/class-map.js";import{property as e,customElement as n}from"lit/decorators.js";import{ref as a}from"lit/directives/ref.js";import{N as c}from"./NotificationMixin-DOUQsx7N.js";import{o as d}from"./observe-D0n0zOfU.js";import l from"./Icon.js";import{s as m}from"./Component-DSU3Qp0O.js";import"./events-Bv6wNHwJ.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.41 10 8.29 8.29-1.41 1.41-8.29-8.29-8.28996 8.3-1.410001-1.41 8.290001-8.3-8.300001-8.28996 1.420001-1.420001 8.28996 8.300001 8.29-8.300001 1.41 1.410001z" fill="currentColor"/></svg>',tags:"nordicon interface close cross remove delete erase symbol",title:"interface-close"});const p=o`:host{--_n-toast-color:var(--n-color-surface);--_n-toast-background-color:var(--n-color-text)}.n-toast{display:flex;gap:var(--n-space-l);align-items:flex-start;background-color:var(--_n-toast-background-color);color:var(--_n-toast-color);border-radius:var(--n-border-radius);animation:n-enter var(--n-transition-slowly) forwards 1;z-index:var(--n-index-toast);box-shadow:var(--n-box-shadow-popout)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{from{transform:translateY(50%);opacity:0}}@keyframes n-exit{to{transform:scale(.97);opacity:0}}.n-toast-inner{padding:var(--n-space-m);flex:1}.n-dismiss{--_n-toast-focus-ring:0 0 0 2px var(--n-color-accent);border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);position:relative;inset-inline-end:var(--n-space-s);inset-block-start:var(--n-space-s);background-color:transparent;border-radius:var(--n-border-radius);cursor:pointer}.n-dismiss::after,.n-dismiss::before{content:"";position:absolute;display:block;border-radius:var(--n-border-radius)}.n-dismiss::before{inset:0;background:var(--_n-toast-color);transition:opacity var(--n-transition-quickly);opacity:0}.n-dismiss:is(:hover,:focus)::before{opacity:.06}.n-dismiss::after{inset:calc(var(--n-space-s) * -1)}.n-dismiss:active{transform:translateY(1px)}.n-dismiss:focus{outline:0;box-shadow:var(--_n-toast-focus-ring)}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--_n-toast-focus-ring)}}.n-dismiss nord-icon{opacity:.53;transition:opacity var(--n-transition-quickly);color:var(--_n-toast-color)}.n-dismiss:is(:hover,:focus) nord-icon{opacity:1}:host([variant=danger]){--_n-toast-background-color:var(--n-color-status-danger);--_n-toast-color:var(--n-color-text-on-accent)}`;l.registerIcon(u);let v=class extends(c(i)){constructor(){super(...arguments),this.variant="default",this.autoDismiss=1e4}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.timeoutId)}async dismiss(){return clearTimeout(this.timeoutId),super.dismiss()}render(){return t`<div ${a(this.notificationRef)} class="${r({"n-toast":!0,"n-dismissed":this.dismissed})}"><div class="n-toast-inner"><slot></slot></div><button class="n-dismiss" @click="${this.dismiss}" aria-hidden="true"><nord-icon name="interface-close" size="s"></nord-icon></button></div>`}handleAutoDismissChange(){clearTimeout(this.timeoutId),null!=this.autoDismiss&&this.autoDismiss>=0&&setTimeout((()=>this.dismiss()),this.autoDismiss)}};v.styles=[m,p],s([e({reflect:!0})],v.prototype,"variant",void 0),s([e({reflect:!0,type:Number,attribute:"auto-dismiss"})],v.prototype,"autoDismiss",void 0),s([d("autoDismiss")],v.prototype,"handleAutoDismissChange",null),v=s([n("nord-toast")],v);var f=v;export{f as default};
+import{_ as s}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as t,LitElement as i}from"lit";import{property as r,customElement as e}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{ref as a}from"lit/directives/ref.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as d}from"./NotificationMixin-DOUQsx7N.js";import{s as l}from"./Component-DSU3Qp0O.js";import m from"./Icon.js";import"./events-Bv6wNHwJ.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.41 10 8.29 8.29-1.41 1.41-8.29-8.29-8.28996 8.3-1.410001-1.41 8.290001-8.3-8.300001-8.28996 1.420001-1.420001 8.28996 8.300001 8.29-8.300001 1.41 1.410001z" fill="currentColor"/></svg>',tags:"nordicon interface close cross remove delete erase symbol",title:"interface-close"});const p=o`:host{--_n-toast-color:var(--n-color-surface);--_n-toast-background-color:var(--n-color-text)}.n-toast{display:flex;gap:var(--n-space-l);align-items:flex-start;background-color:var(--_n-toast-background-color);color:var(--_n-toast-color);border-radius:var(--n-border-radius);animation:n-enter var(--n-transition-slowly) forwards 1;z-index:var(--n-index-toast);box-shadow:var(--n-box-shadow-popout)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{from{transform:translateY(50%);opacity:0}}@keyframes n-exit{to{transform:scale(.97);opacity:0}}.n-toast-inner{padding:var(--n-space-m);flex:1}.n-dismiss{--_n-toast-focus-ring:0 0 0 2px var(--n-color-accent);border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);position:relative;inset-inline-end:var(--n-space-s);inset-block-start:var(--n-space-s);background-color:transparent;border-radius:var(--n-border-radius);cursor:pointer}.n-dismiss::after,.n-dismiss::before{content:'';position:absolute;display:block;border-radius:var(--n-border-radius)}.n-dismiss::before{inset:0;background:var(--_n-toast-color);transition:opacity var(--n-transition-quickly);opacity:0}.n-dismiss:is(:hover,:focus)::before{opacity:.06}.n-dismiss::after{inset:calc(var(--n-space-s) * -1)}.n-dismiss:active{transform:translateY(1px)}.n-dismiss:focus{outline:0;box-shadow:var(--_n-toast-focus-ring)}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--_n-toast-focus-ring)}}.n-dismiss nord-icon{opacity:.53;transition:opacity var(--n-transition-quickly);color:var(--_n-toast-color)}.n-dismiss:is(:hover,:focus) nord-icon{opacity:1}:host([variant=danger]){--_n-toast-background-color:var(--n-color-status-danger);--_n-toast-color:var(--n-color-text-on-accent)}`;m.registerIcon(u);let v=class extends(d(i)){constructor(){super(...arguments),this.variant="default",this.autoDismiss=1e4}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.timeoutId)}async dismiss(){return clearTimeout(this.timeoutId),super.dismiss()}render(){return t`<div ${a(this.notificationRef)} class="${n({"n-toast":!0,"n-dismissed":this.dismissed})}"><div class="n-toast-inner"><slot></slot></div><button class="n-dismiss" @click="${this.dismiss}" aria-hidden="true"><nord-icon name="interface-close" size="s"></nord-icon></button></div>`}handleAutoDismissChange(){clearTimeout(this.timeoutId),null!=this.autoDismiss&&this.autoDismiss>=0&&setTimeout((()=>this.dismiss()),this.autoDismiss)}};v.styles=[l,p],s([r({reflect:!0})],v.prototype,"variant",void 0),s([r({reflect:!0,type:Number,attribute:"auto-dismiss"})],v.prototype,"autoDismiss",void 0),s([c("autoDismiss")],v.prototype,"handleAutoDismissChange",null),v=s([e("nord-toast")],v);var f=v;export{f as default};
 //# sourceMappingURL=Toast.js.map

package/lib/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../icons/lib/assets/interface-close.js","../src/toast/Toast.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.41 10 8.29 8.29-1.41 1.41-8.29-8.29-8.28996 8.3-1.410001-1.41 8.290001-8.3-8.300001-8.28996 1.420001-1.420001 8.28996 8.300001 8.29-8.300001 1.41 1.410001z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-close\"\nexport const tags = \"nordicon interface close cross remove delete erase symbol\"\n","import { LitElement, html } from \"lit\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport { NotificationMixin } from \"../common/mixins/NotificationMixin.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport Icon from \"../icon/Icon.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Toast.css\"\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Toasts are non-disruptive messages that appear in the interface\n * to provide quick, at-a-glance feedback on the outcome of an action.\n *\n * @status ready\n * @category feedback\n * @slot - Default slot used for the toast text/message.\n * @fires dismiss - Fired when the toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.\n */\n@customElement(\"nord-toast\")\nexport default class Toast extends NotificationMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private timeoutId?: ReturnType<typeof setTimeout>\n\n  /**\n   * The style variant of the toast.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"danger\" = \"default\"\n\n  /**\n   * Timeout in milliseconds before the toast is automatically dismissed.\n   */\n  @property({ reflect: true, type: Number, attribute: \"auto-dismiss\" }) autoDismiss? = 10000\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    clearTimeout(this.timeoutId)\n  }\n\n  /**\n   * Programmatically dismiss the toast.\n   * The returned promise resolves when toast's exit animation is complete.\n   */\n  async dismiss() {\n    clearTimeout(this.timeoutId)\n    return super.dismiss()\n  }\n\n  render() {\n    return html`\n      <div ${ref(this.notificationRef)} class=${classMap({ \"n-toast\": true, \"n-dismissed\": this.dismissed })}>\n        <div class=\"n-toast-inner\">\n          <slot></slot>\n        </div>\n\n        <button class=\"n-dismiss\" @click=${this.dismiss} aria-hidden=\"true\">\n          <nord-icon name=\"interface-close\" size=\"s\"></nord-icon>\n        </button>\n      </div>\n    `\n  }\n\n  @observe(\"autoDismiss\")\n  protected handleAutoDismissChange() {\n    clearTimeout(this.timeoutId)\n\n    if (this.autoDismiss != null && this.autoDismiss >= 0) {\n      setTimeout(() => this.dismiss(), this.autoDismiss)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-toast\": Toast\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","Toast","NotificationMixin","LitElement","constructor","this","variant","autoDismiss","disconnectedCallback","super","clearTimeout","timeoutId","dismiss","render","html","ref","notificationRef","classMap","dismissed","handleAutoDismissChange","setTimeout","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Number","attribute","observe","customElement"],"mappings":"8mBAAe,yQAEK,kEADC,szDCWrBA,EAAKC,aAAaC,GAYH,IAAMC,EAAN,cAAoBC,EAAkBC,IAAtC,WAAAC,uBAQgBC,KAAOC,QAAyB,UAKSD,KAAWE,YAAI,GAsCtF,CApCC,oBAAAC,GACEC,MAAMD,uBACNE,aAAaL,KAAKM,UACnB,CAMD,aAAMC,GAEJ,OADAF,aAAaL,KAAKM,WACXF,MAAMG,SACd,CAED,MAAAC,GACE,OAAOC,CAAI,QACFC,EAAIV,KAAKW,2BAA0BC,EAAS,CAAE,WAAW,EAAM,cAAeZ,KAAKa,gGAKrDb,KAAKO,oGAK7C,CAGS,uBAAAO,GACRT,aAAaL,KAAKM,WAEM,MAApBN,KAAKE,aAAuBF,KAAKE,aAAe,GAClDa,YAAW,IAAMf,KAAKO,WAAWP,KAAKE,YAEzC,GAjDMN,EAAAoB,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiDzB,EAAA0B,UAAA,eAAA,GAKAH,EAAA,CAArEC,EAAS,CAAEC,SAAS,EAAME,KAAMC,OAAQC,UAAW,kBAAsC7B,EAAA0B,UAAA,mBAAA,GA+BhFH,EAAA,CADTO,EAAQ,gBAOR9B,EAAA0B,UAAA,0BAAA,MAlDkB1B,EAAKuB,EAAA,CADzBQ,EAAc,eACM/B,SAAAA"}
+{"version":3,"file":"Toast.js","sources":["../../icons/lib/assets/interface-close.js","../src/toast/Toast.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.41 10 8.29 8.29-1.41 1.41-8.29-8.29-8.28996 8.3-1.410001-1.41 8.290001-8.3-8.300001-8.28996 1.420001-1.420001 8.28996 8.300001 8.29-8.300001 1.41 1.410001z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-close\";\nexport const tags = \"nordicon interface close cross remove delete erase symbol\";\n","import * as closeIcon from '@nordhealth/icons/lib/assets/interface-close.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { observe } from '../common/decorators/observe.js'\nimport { NotificationMixin } from '../common/mixins/NotificationMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Toast.css'\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Toasts are non-disruptive messages that appear in the interface\n * to provide quick, at-a-glance feedback on the outcome of an action.\n *\n * @status ready\n * @category feedback\n * @slot - Default slot used for the toast text/message.\n * @fires dismiss - Fired when the toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.\n */\n@customElement('nord-toast')\nexport default class Toast extends NotificationMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private timeoutId?: ReturnType<typeof setTimeout>\n\n  /**\n   * The style variant of the toast.\n   */\n  @property({ reflect: true }) variant: 'default' | 'danger' = 'default'\n\n  /**\n   * Timeout in milliseconds before the toast is automatically dismissed.\n   */\n  @property({ reflect: true, type: Number, attribute: 'auto-dismiss' }) autoDismiss? = 10000\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    clearTimeout(this.timeoutId)\n  }\n\n  /**\n   * Programmatically dismiss the toast.\n   * The returned promise resolves when toast's exit animation is complete.\n   */\n  async dismiss() {\n    clearTimeout(this.timeoutId)\n    return super.dismiss()\n  }\n\n  render() {\n    return html`\n      <div ${ref(this.notificationRef)} class=${classMap({ 'n-toast': true, 'n-dismissed': this.dismissed })}>\n        <div class=\"n-toast-inner\">\n          <slot></slot>\n        </div>\n\n        <button class=\"n-dismiss\" @click=${this.dismiss} aria-hidden=\"true\">\n          <nord-icon name=\"interface-close\" size=\"s\"></nord-icon>\n        </button>\n      </div>\n    `\n  }\n\n  @observe('autoDismiss')\n  protected handleAutoDismissChange() {\n    clearTimeout(this.timeoutId)\n\n    if (this.autoDismiss != null && this.autoDismiss >= 0) {\n      setTimeout(() => this.dismiss(), this.autoDismiss)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-toast': Toast\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","Toast","NotificationMixin","LitElement","constructor","this","variant","autoDismiss","disconnectedCallback","super","clearTimeout","timeoutId","dismiss","render","html","ref","notificationRef","classMap","dismissed","handleAutoDismissChange","setTimeout","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Number","attribute","observe","customElement"],"mappings":"8mBAAe,yQAEK,kEADC,szDCWrBA,EAAKC,aAAaC,GAYH,IAAMC,EAAN,cAAoBC,EAAkBC,IAAtC,WAAAC,uBAQgBC,KAAOC,QAAyB,UAKSD,KAAWE,YAAI,GAsCtF,CApCC,oBAAAC,GACEC,MAAMD,uBACNE,aAAaL,KAAKM,UACnB,CAMD,aAAMC,GAEJ,OADAF,aAAaL,KAAKM,WACXF,MAAMG,SACd,CAED,MAAAC,GACE,OAAOC,CAAI,QACFC,EAAIV,KAAKW,2BAA0BC,EAAS,CAAE,WAAW,EAAM,cAAeZ,KAAKa,gGAKrDb,KAAKO,oGAK7C,CAGS,uBAAAO,GACRT,aAAaL,KAAKM,WAEM,MAApBN,KAAKE,aAAuBF,KAAKE,aAAe,GAClDa,YAAW,IAAMf,KAAKO,WAAWP,KAAKE,YAEzC,GAjDMN,EAAAoB,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiDzB,EAAA0B,UAAA,eAAA,GAKAH,EAAA,CAArEC,EAAS,CAAEC,SAAS,EAAME,KAAMC,OAAQC,UAAW,kBAAsC7B,EAAA0B,UAAA,mBAAA,GA+BhFH,EAAA,CADTO,EAAQ,gBAOR9B,EAAA0B,UAAA,0BAAA,MAlDkB1B,EAAKuB,EAAA,CADzBQ,EAAc,eACM/B,SAAAA"}

package/lib/ToastGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastGroup.js","sources":["../src/toast-group/ToastGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport Toast from \"../toast/Toast.js\"\nimport style from \"./ToastGroup.css\"\n\ntype ToastOptions = Partial<Pick<Toast, \"variant\" | \"autoDismiss\">>\n\n/**\n * Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.\n *\n * @status ready\n * @category feedback\n * @slot - Default slot in which to place toasts.\n *\n * @fires {NordEvent} dismiss - Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.\n */\n@customElement(\"nord-toast-group\")\nexport default class ToastGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`\n      <div class=\"n-toast-group\" role=\"log\" aria-relevant=\"additions\">\n        <slot></slot>\n      </div>\n    `\n  }\n\n  /**\n   * Convenience method for creating and adding a toast to the group.\n   * @param {string} text - The text/message of the toast.\n   * @param options - An optional object for configuring the toast's `variant` and `autoDismiss`.\n   * @returns {Toast} The toast instance.\n   */\n  addToast(text: string, options: ToastOptions = {}) {\n    const { variant, autoDismiss } = options\n    const toast = document.createElement(\"nord-toast\")\n\n    if (variant) {\n      toast.variant = variant\n    }\n\n    if (autoDismiss != null) {\n      toast.autoDismiss = autoDismiss\n    }\n\n    toast.textContent = text\n    this.appendChild(toast)\n\n    return toast\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-toast-group\": ToastGroup\n  }\n}\n"],"names":["ToastGroup","LitElement","render","html","addToast","text","options","variant","autoDismiss","toast","document","createElement","textContent","this","appendChild","styles","componentStyle","style","__decorate","customElement"],"mappings":"miBAmBe,IAAMA,EAAN,cAAyBC,EAGtC,MAAAC,GACE,OAAOC,CAAI,qFAKZ,CAQD,QAAAC,CAASC,EAAcC,EAAwB,IAC7C,MAAMC,QAAEA,EAAOC,YAAEA,GAAgBF,EAC3BG,EAAQC,SAASC,cAAc,cAarC,OAXIJ,IACFE,EAAMF,QAAUA,GAGC,MAAfC,IACFC,EAAMD,YAAcA,GAGtBC,EAAMG,YAAcP,EACpBQ,KAAKC,YAAYL,GAEVA,CACR,GAhCMT,EAAAe,OAAS,CAACC,EAAgBC,GADdjB,EAAUkB,EAAA,CAD9BC,EAAc,qBACMnB,SAAAA"}
+{"version":3,"file":"ToastGroup.js","sources":["../src/toast-group/ToastGroup.ts"],"sourcesContent":["import type Toast from '../toast/Toast.js'\nimport { html, LitElement } from 'lit'\n\nimport { customElement } from 'lit/decorators.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './ToastGroup.css'\n\ntype ToastOptions = Partial<Pick<Toast, 'variant' | 'autoDismiss'>>\n\n/**\n * Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.\n *\n * @status ready\n * @category feedback\n * @slot - Default slot in which to place toasts.\n *\n * @fires {NordEvent} dismiss - Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.\n */\n@customElement('nord-toast-group')\nexport default class ToastGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`\n      <div class=\"n-toast-group\" role=\"log\" aria-relevant=\"additions\">\n        <slot></slot>\n      </div>\n    `\n  }\n\n  /**\n   * Convenience method for creating and adding a toast to the group.\n   * @param {string} text - The text/message of the toast.\n   * @param options - An optional object for configuring the toast's `variant` and `autoDismiss`.\n   * @returns {Toast} The toast instance.\n   */\n  addToast(text: string, options: ToastOptions = {}) {\n    const { variant, autoDismiss } = options\n    const toast = document.createElement('nord-toast')\n\n    if (variant) {\n      toast.variant = variant\n    }\n\n    if (autoDismiss != null) {\n      toast.autoDismiss = autoDismiss\n    }\n\n    toast.textContent = text\n    this.appendChild(toast)\n\n    return toast\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-toast-group': ToastGroup\n  }\n}\n"],"names":["ToastGroup","LitElement","render","html","addToast","text","options","variant","autoDismiss","toast","document","createElement","textContent","this","appendChild","styles","componentStyle","style","__decorate","customElement"],"mappings":"miBAmBe,IAAMA,EAAN,cAAyBC,EAGtC,MAAAC,GACE,OAAOC,CAAI,qFAKZ,CAQD,QAAAC,CAASC,EAAcC,EAAwB,IAC7C,MAAMC,QAAEA,EAAOC,YAAEA,GAAgBF,EAC3BG,EAAQC,SAASC,cAAc,cAarC,OAXIJ,IACFE,EAAMF,QAAUA,GAGC,MAAfC,IACFC,EAAMD,YAAcA,GAGtBC,EAAMG,YAAcP,EACpBQ,KAAKC,YAAYL,GAEVA,CACR,GAhCMT,EAAAe,OAAS,CAACC,EAAgBC,GADdjB,EAAUkB,EAAA,CAD9BC,EAAc,qBACMnB,SAAAA"}