@nordhealth/components 4.26.2 → 5.0.0

package/lib/StateAttributesController-BIh96sXZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateAttributesController-BIh96sXZ.js","sources":["../src/common/controllers/StateAttributesController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\n\n/**\n * Maps a single state value to the `data-*` attributes it should set, or `null`\n * to set none. Mirrors Base UI's per-key entries in `stateAttributesMapping`\n * (e.g. a tri-state `valid` that resolves to `data-valid` or `data-invalid`).\n */\nexport type StateAttributeMapper = (value: unknown) => Record<string, string> | null\n\nexport type StateAttributesMapping = Record<string, StateAttributeMapper>\n\nexport interface StateAttributesOptions {\n  /**\n   * Track focus-within on the host and reflect it as `data-focused`. The host\n   * keeps the attribute while it or any descendant (including across a shadow\n   * boundary) holds focus. Saves each component from wiring its own\n   * focusin/focusout listeners.\n   */\n  trackFocus?: boolean\n  /** Custom per-key mapping; keys not listed fall back to the boolean default. */\n  mapping?: StateAttributesMapping\n}\n\n/** Default mapping for a boolean state key `foo`: present `data-foo` when truthy. */\nfunction defaultBooleanMapper(key: string): StateAttributeMapper {\n  const attribute = `data-${key}`\n  return value => (value ? { [attribute]: '' } : null)\n}\n\n/**\n * Reflects a host's state onto `data-*` attributes after every update — the Lit\n * equivalent of Base UI's `stateAttributesMapping` applied by `useRenderElement`.\n * Each state key toggles `data-<key>` by default; pass `mapping` to customise\n * specific keys. With `trackFocus`, it also tracks focus-within and reflects\n * `data-focused`. The controller only ever touches the attributes it sets itself,\n * so it never clobbers consumer- or Lit-managed ones.\n *\n * @example\n * ```ts\n * // data-invalid from a property, data-focused tracked automatically\n * new StateAttributesController(this, () => ({ invalid: this.invalid }), { trackFocus: true })\n * ```\n */\nexport class StateAttributesController implements ReactiveController {\n  private owned = new Set<string>()\n  private hasFocus = false\n\n  constructor(\n    private host: ReactiveControllerHost & HTMLElement,\n    private getState: () => Record<string, unknown> = () => ({}),\n    private options: StateAttributesOptions = {},\n  ) {\n    host.addController(this)\n  }\n\n  hostConnected() {\n    if (this.options.trackFocus) {\n      this.host.addEventListener('focusin', this.handleFocusIn)\n      this.host.addEventListener('focusout', this.handleFocusOut)\n    }\n  }\n\n  hostDisconnected() {\n    this.host.removeEventListener('focusin', this.handleFocusIn)\n    this.host.removeEventListener('focusout', this.handleFocusOut)\n  }\n\n  hostUpdated() {\n    this.apply()\n  }\n\n  private handleFocusIn = () => {\n    if (!this.hasFocus) {\n      this.hasFocus = true\n      this.host.requestUpdate()\n    }\n  }\n\n  private handleFocusOut = (e: FocusEvent) => {\n    // Keep focus while it moves between the host's own descendants; only clear\n    // when it leaves the host entirely.\n    if (this.host.contains(e.relatedTarget as Node | null)) {\n      return\n    }\n    if (this.hasFocus) {\n      this.hasFocus = false\n      this.host.requestUpdate()\n    }\n  }\n\n  private apply() {\n    const state: Record<string, unknown> = { ...this.getState() }\n    if (this.options.trackFocus) {\n      state.focused = this.hasFocus\n    }\n\n    const mapping = this.options.mapping ?? {}\n    const next = new Set<string>()\n\n    for (const [key, value] of Object.entries(state)) {\n      const mapper = mapping[key] ?? defaultBooleanMapper(key)\n      const attributes = mapper(value)\n      if (!attributes) {\n        continue\n      }\n      for (const [attribute, attributeValue] of Object.entries(attributes)) {\n        if (this.host.getAttribute(attribute) !== attributeValue) {\n          this.host.setAttribute(attribute, attributeValue)\n        }\n        next.add(attribute)\n      }\n    }\n\n    // Drop attributes we set on a previous run that no longer apply.\n    for (const attribute of this.owned) {\n      if (!next.has(attribute)) {\n        this.host.removeAttribute(attribute)\n      }\n    }\n    this.owned = next\n  }\n}\n"],"names":["defaultBooleanMapper","key","attribute","value","StateAttributesController","constructor","host","getState","options","this","owned","Set","hasFocus","handleFocusIn","requestUpdate","handleFocusOut","e","contains","relatedTarget","addController","hostConnected","trackFocus","addEventListener","hostDisconnected","removeEventListener","hostUpdated","apply","state","focused","mapping","_a","next","Object","entries","attributes","_b","attributeValue","getAttribute","setAttribute","add","has","removeAttribute"],"mappings":"AAwBA,SAASA,EAAqBC,GAC5B,MAAMC,EAAY,QAAQD,IAC1B,OAAOE,GAAUA,EAAQ,CAAED,CAACA,GAAY,IAAO,IACjD,OAgBaE,EAIX,WAAAC,CACUC,EACAC,EAA0C,KAAO,CAAE,GACnDC,EAAkC,IAFlCC,KAAIH,KAAJA,EACAG,KAAQF,SAARA,EACAE,KAAOD,QAAPA,EANFC,KAAAC,MAAQ,IAAIC,IACZF,KAAQG,UAAG,EA0BXH,KAAaI,cAAG,KACjBJ,KAAKG,WACRH,KAAKG,UAAW,EAChBH,KAAKH,KAAKQ,gBACX,EAGKL,KAAAM,eAAkBC,IAGpBP,KAAKH,KAAKW,SAASD,EAAEE,gBAGrBT,KAAKG,WACPH,KAAKG,UAAW,EAChBH,KAAKH,KAAKQ,gBACX,EAnCDR,EAAKa,cAAcV,KACpB,CAED,aAAAW,GACMX,KAAKD,QAAQa,aACfZ,KAAKH,KAAKgB,iBAAiB,UAAWb,KAAKI,eAC3CJ,KAAKH,KAAKgB,iBAAiB,WAAYb,KAAKM,gBAE/C,CAED,gBAAAQ,GACEd,KAAKH,KAAKkB,oBAAoB,UAAWf,KAAKI,eAC9CJ,KAAKH,KAAKkB,oBAAoB,WAAYf,KAAKM,eAChD,CAED,WAAAU,GACEhB,KAAKiB,OACN,CAqBO,KAAAA,WACN,MAAMC,EAAiC,IAAKlB,KAAKF,YAC7CE,KAAKD,QAAQa,aACfM,EAAMC,QAAUnB,KAAKG,UAGvB,MAAMiB,EAAkC,QAAxBC,EAAArB,KAAKD,QAAQqB,eAAW,IAAAC,EAAAA,EAAA,CAAA,EAClCC,EAAO,IAAIpB,IAEjB,IAAK,MAAOV,EAAKE,KAAU6B,OAAOC,QAAQN,GAAQ,CAChD,MACMO,GADqB,QAAZC,EAAAN,EAAQ5B,UAAI,IAAAkC,EAAAA,EAAInC,EAAqBC,IAC1BE,GAC1B,GAAK+B,EAGL,IAAK,MAAOhC,EAAWkC,KAAmBJ,OAAOC,QAAQC,GACnDzB,KAAKH,KAAK+B,aAAanC,KAAekC,GACxC3B,KAAKH,KAAKgC,aAAapC,EAAWkC,GAEpCL,EAAKQ,IAAIrC,EAEZ,CAGD,IAAK,MAAMA,KAAaO,KAAKC,MACtBqB,EAAKS,IAAItC,IACZO,KAAKH,KAAKmC,gBAAgBvC,GAG9BO,KAAKC,MAAQqB,CACd"}

package/lib/Sticky-CZImMrGj.js

@@ -0,0 +1,2 @@
+import{css as t}from"lit";const i=t`:host{--_n-sticky-size:0px;--_n-sticky-top:var(--n-sticky-top,0px);--_n-sticky-index:var(--n-sticky-index,var(--n-index-sticky))}:host([sticky]) .n-sticky{inset-block-start:var(--_n-sticky-top);position:sticky;z-index:var(--_n-sticky-index)}:host>*{--n-sticky-top:calc(var(--_n-sticky-top) + var(--_n-sticky-size));--n-sticky-index:calc(var(--_n-sticky-index) - 1)}`;export{i as s};
+//# sourceMappingURL=Sticky-CZImMrGj.js.map

package/lib/Sticky-CZImMrGj.js.map

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

package/lib/Tab.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as o,html as a}from"lit";import{property as r,customElement as n}from"lit/decorators.js";import{S as s}from"./SlotController-Z6eG7LSZ.js";import{o as i}from"./observe-D0n0zOfU.js";import{s as l}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const c=e`:host{--_n-tab-color:var(--n-tab-color, var(--n-color-text-weak));--_n-tab-font-weight:var(--n-tab-font-weight, var(--n-font-weight));--_n-tab-border:1px solid transparent;user-select:none;cursor:pointer;padding:calc(var(--n-space-l)/ 2) var(--n-space-xs);border-block-end:var(--_n-tab-border);transition:border var(--n-transition-quickly) ease}.n-tab{color:var(--_n-tab-color);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-font-size-m);font-weight:var(--_n-tab-font-weight);line-height:var(--n-line-height-form);border-radius:var(--n-border-radius-sharp);white-space:nowrap}.n-tab,.n-tab[data-text]:not([data-text=''])::before{font-weight:var(--_n-tab-font-weight)}.n-tab[data-text='']{display:flex;gap:var(--n-space-s);align-items:center}.n-tab[data-text]:not([data-text='']){text-align:center}.n-tab[data-text]:not([data-text=''])::before{content:attr(data-text);display:block;block-size:0;visibility:hidden}:host(:hover){--_n-tab-color:var(--n-tab-color, var(--n-color-text))}.n-tab[data-text]:not([data-text=''])::before,:host([aria-selected=true]){--_n-tab-color:var(--n-tab-color, var(--n-color-text-link));--_n-tab-font-weight:var(--n-tab-font-weight, var(--n-font-weight-active));--_n-tab-border:2px solid var(--n-color-text-link)}:host(:active){opacity:.8;transform:translateY(1px)}:host(:focus) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-accent);outline:0}@supports selector(:focus-visible){:host(:focus) .n-tab{box-shadow:none}:host(:focus-visible) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-accent)}}`;let b=class extends o{constructor(){super(...arguments),this.defaultSlot=new s(this),this.selected=!1}render(){return a`<div class="n-tab" data-text="${this.defaultSlot.isEmpty?this.textContent:""}"><slot></slot></div>`}handleSelectionChange(){this.setAttribute("aria-selected",`${this.selected}`),this.setAttribute("tabindex",this.selected?"0":"-1")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab")}};b.styles=[l,c],t([r({reflect:!0,type:Boolean})],b.prototype,"selected",void 0),t([i("selected")],b.prototype,"handleSelectionChange",null),b=t([n("nord-tab")],b);var d=b;export{d as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as o,html as a}from"lit";import{property as r,customElement as n}from"lit/decorators.js";import{S as s}from"./SlotController-Z6eG7LSZ.js";import{o as i}from"./observe-D0n0zOfU.js";import{s as l}from"./Component-BJ5O5n8k.js";import"./EventController-BBOmvfLa.js";const c=e`:host{--_n-tab-color:var(--n-tab-color,var(--n-color-text-weak));--_n-tab-font-weight:var(--n-tab-font-weight,var(--n-font-weight));--_n-tab-border:1px solid #0000;border-block-end:var(--_n-tab-border);cursor:pointer;padding:calc(var(--n-space-l)/2) var(--n-space-xs);transition:border var(--n-transition-quickly) ease;user-select:none}.n-tab{border-radius:var(--n-border-radius-sharp);color:var(--_n-tab-color);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-font-size-m);line-height:var(--n-line-height-form);white-space:nowrap}.n-tab,.n-tab[data-text]:not([data-text=""]):before{font-weight:var(--_n-tab-font-weight)}.n-tab[data-text=""]{align-items:center;display:flex;gap:var(--n-space-s)}.n-tab[data-text]:not([data-text=""]){text-align:center}.n-tab[data-text]:not([data-text=""]):before{block-size:0;content:attr(data-text);display:block;visibility:hidden}:host(:hover){--_n-tab-color:var(--n-tab-color,var(--n-color-text))}.n-tab[data-text]:not([data-text=""]):before,:host([aria-selected=true]){--_n-tab-color:var(--n-tab-color,var(--n-color-text-link));--_n-tab-font-weight:var(--n-tab-font-weight,var(--n-font-weight-active));--_n-tab-border:2px solid var(--n-color-text-link)}:host(:active){opacity:.8;transform:translateY(1px)}:host(:focus) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-accent);outline:none}@supports selector(:focus-visible){:host(:focus) .n-tab{box-shadow:none}:host(:focus-visible) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-accent)}}`;let b=class extends o{constructor(){super(...arguments),this.defaultSlot=new s(this),this.selected=!1}render(){return a`<div class="n-tab" data-text="${this.defaultSlot.isEmpty?this.textContent:""}"><slot></slot></div>`}handleSelectionChange(){this.setAttribute("aria-selected",`${this.selected}`),this.setAttribute("tabindex",this.selected?"0":"-1")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab")}};b.styles=[l,c],t([r({reflect:!0,type:Boolean})],b.prototype,"selected",void 0),t([i("selected")],b.prototype,"handleSelectionChange",null),b=t([n("nord-tab")],b);var d=b;export{d as default};
 //# sourceMappingURL=Tab.js.map

package/lib/Tab.js.map

@@ -1 +1 @@
-{"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"}
+{"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":"w4DAmBe,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{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};
+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-BJ5O5n8k.js";import{s as b}from"./Sticky-CZImMrGj.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{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-position:0 var(--n-space-xs),100% var(--n-space-xs);background-repeat:no-repeat;background-size:var(--n-space-s) var(--n-space-xl),var(--n-space-s) var(--n-space-xl);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0;box-shadow:var(--_n-tab-group-list-border);display:flex;gap:var(--n-space-s);list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior:none}.n-tab-group-list:after,.n-tab-group-list:before{align-self:stretch;box-sizing:initial;content:"";margin-block-end:1px;min-inline-size:var(--n-space-l)}.n-tab-group-list:before{margin-inline-end:calc((var(--n-space-l) + var(--n-space-s))*-1);padding-inline-start:var(--_n-tab-group-padding)}.n-tab-group-list:after{flex:1;margin-inline-start:calc((var(--n-space-l) + var(--n-space-s))*-1);padding-inline-end:var(--_n-tab-group-padding)}.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(var(--n-space-s)*-1) 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(var(--n-space-l)*-1) 0 var(--n-space-s) calc(var(--n-space-s)*-1) 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-block-end:auto;inset-inline:0}:host([sticky]),:host([sticky]) .n-tab-group-list{border-radius:0}`;var u;let h=1,g=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.selectedTab||(this.selectedTab=this.initialSelectedTab),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}`)})))}};g.styles=[d,b,p],g.observerOptions={attributes:!0,subtree:!0,attributeFilter:["selected"],attributeOldValue:!0},t([o({reflect:!0})],g.prototype,"label",void 0),t([o({reflect:!0})],g.prototype,"padding",void 0),t([o({reflect:!0,type:Boolean})],g.prototype,"sticky",void 0),t([i()],g.prototype,"selectedTab",void 0),g=u=t([n("nord-tab-group")],g);var v=g;export{v 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 { 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":"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"}
+{"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 * @parent Tab\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    // Resolve the initial tab now the children are present. The field\n    // initializer for `selectedTab` runs at construction, but a framework\n    // (Vue/React) may create the group before slotting its `<nord-tab>`\n    // children — leaving `selectedTab` null and nothing pre-selected.\n    if (!this.selectedTab) {\n      this.selectedTab = this.initialSelectedTab\n    }\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":"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"}

package/lib/TabPanel.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as s,html as o}from"lit";import{customElement as r}from"lit/decorators.js";import{s as a}from"./Component-DSU3Qp0O.js";const n=e`.n-tab-panel{font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0}`;let l=class extends s{render(){return o`<div class="n-tab-panel"><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tabpanel"),this.setAttribute("tabindex","0")}};l.styles=[a,n],l=t([r("nord-tab-panel")],l);var i=l;export{i as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as s,html as o}from"lit";import{customElement as r}from"lit/decorators.js";import{s as a}from"./Component-BJ5O5n8k.js";const n=e`.n-tab-panel{color:var(--n-color-text);font-size:var(--n-font-size-m)}::slotted(*){margin:0}`;let l=class extends s{render(){return o`<div class="n-tab-panel"><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tabpanel"),this.setAttribute("tabindex","0")}};l.styles=[a,n],l=t([r("nord-tab-panel")],l);var i=l;export{i as default};
 //# sourceMappingURL=TabPanel.js.map

package/lib/TabPanel.js.map

@@ -1 +1 @@
-{"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"}
+{"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 * @parent Tab\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":"sSAiBe,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);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);display:block;max-inline-size:100%;overflow-x:auto;user-select:inherit}nord-table table{border-collapse:initial;border-spacing:0;color:var(--n-color-text);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-font-size-m);font-variant-numeric:tabular-nums;inline-size:100%;line-height:var(--n-line-height-tight);text-align:start}nord-table th{background:var(--n-color-surface-raised);color:var(--n-color-text-weaker);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);text-align:start}nord-table td,nord-table th{border-block-end:1px solid var(--n-color-border)}nord-table td{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);cursor:default;opacity:1}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:#0000}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-behavior:smooth;scroll-snap-type:inline mandatory}nord-table[scroll-snap] :is(th,td){scroll-snap-align:start}nord-table:where([striped]) tbody tr:where(:nth-child(2n)){background:var(--n-color-surface-raised)}nord-table .n-table-ellipsis{inline-size:90%;max-inline-size:0;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 i=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})],i.prototype,"density",void 0),t([n({reflect:!0,type:Boolean,attribute:"scroll-snap"})],i.prototype,"scrollSnap",void 0),t([n({type:Boolean,reflect:!0})],i.prototype,"striped",void 0),i=t([d("nord-table")],i);var s=i;export{s 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 { 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"}
+{"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":"43FA0Be,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{c as e}from"./interface-checked-small-BQmkNgCI.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-surface);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};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-checked-small-BQmkNgCI.js";import{c as t}from"./interface-close-small-CnpAFMO3.js";import{css as a,html as n,LitElement as r}from"lit";import{property as i,customElement as c}from"lit/decorators.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{ref as l}from"lit/directives/ref.js";import{F as d}from"./FormDataController-OUt5L5uC.js";import{N as v}from"./events-Bv6wNHwJ.js";import{F as p}from"./FocusableMixin-BlQLNPdJ.js";import{I as b}from"./InputMixin-LetXsCyv.js";import{s as h}from"./Component-BJ5O5n8k.js";import m from"./Icon.js";import{LocalizeController as g}from"./LocalizeController.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";const u=a`:host{--_n-tag-box-shadow:var(--n-tag-box-shadow,none);--_n-tag-border-radius:var(--n-tag-border-radius,var(--n-border-radius-s));--_n-tag-block-size:var(--n-tag-block-size,1.75rem);--_n-tag-background-color:var(--n-color-nav-hover);--_n-tag-border-color:var(--n-color-border-neutral);--_n-tag-checkbox-size:var(--n-size-icon-s);--_n-tag-checkbox-accent-color:var(--n-color-accent);--_n-tag-checkbox-border-color:var(--n-color-border-hover);--_n-tag-font-size:var(--n-font-size-m);--_n-tag-inline-size:fit-content;display:inline;vertical-align:middle}.n-tag{align-items:center;background:var(--_n-tag-background-color);border:1px solid var(--_n-tag-border-color);border-radius:var(--_n-tag-border-radius);box-shadow:var(--_n-tag-box-shadow);color:var(--n-color-text);display:inline-flex;font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-tag-font-size);font-weight:var(--n-font-weight);gap:calc(var(--n-space-xs)*1.5);inline-size:var(--_n-tag-inline-size);letter-spacing:0;line-height:var(--n-line-height-tight);min-block-size:var(--_n-tag-block-size);padding:0 var(--n-space-s);white-space:nowrap}.n-input-container,.n-tag{position:relative}input{appearance:none;background:var(--n-color-surface);block-size:var(--_n-tag-checkbox-size);border:1px solid var(--_n-tag-checkbox-border-color);border-radius:var(--n-border-radius-s);cursor:pointer;display:block;inline-size:var(--_n-tag-checkbox-size)}.n-content{flex:1;overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap}:host([expand]){--_n-tag-inline-size:100%;display:block}:host(:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-border-color:var(--n-color-border-strong);--_n-tag-box-shadow:var(--n-tag-box-shadow,var(--n-box-shadow))}:host([variant=selectable]) .n-tag:hover{--_n-tag-border-color:var(--n-color-border-hover)}.n-tag:has(input:checked){--_n-tag-background-color:var(--n-color-button)}input:checked{--_n-tag-checkbox-border-color:var(--n-color-accent);background:var(--_n-tag-checkbox-accent-color)}input:focus,input:focus-visible{outline:none!important}:host([variant=selectable]:focus-within) .n-tag{--_n-tag-border-color:var(--n-color-accent);--_n-tag-box-shadow:var(--n-tag-box-shadow,0 0 0 1px var(--n-color-accent),var(--n-box-shadow))}:host(:not([disabled])) label:active{opacity:.8;transform:translateY(1px);transition:none}nord-icon.icon-checked{--_n-icon-size:var(--n-size-icon-xxs);color:var(--n-color-text-on-accent);display:none;inset:calc(var(--n-space-xs)/2);pointer-events:none;position:absolute;z-index:var(--n-index-default)}input:checked~nord-icon.icon-checked{display:block}label{cursor:pointer;user-select:none}.n-remove-button{align-items:center;appearance:none;background:#0000;border:1px solid #0000;border-radius:var(--_n-tag-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;justify-content:center;margin-block-end:calc(var(--n-space-xs)*-1);margin-block-start:calc(var(--n-space-xs)*-1);margin-inline-end:calc(var(--n-space-s)*-1);margin-inline-start:0;padding:var(--n-space-s)}.n-remove-button nord-icon{--_n-icon-size:var(--n-size-icon-xxs);color:var(--n-color-icon)}.n-remove-button:hover{background:var(--n-color-surface-lowered)}.n-remove-button:hover nord-icon{color:var(--n-color-icon-hover)}.n-remove-button:focus-visible{outline:none!important}.n-remove-button:focus{border:1px solid var(--n-color-accent);box-shadow:0 0 0 1px var(--n-color-accent);outline:none!important}:host(:not([disabled])) .n-remove-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([disabled]:not([variant=default])) .n-tag{--_n-tag-background-color:var(--n-color-surface-lowered);--_n-tag-border-color:var(--_n-tag-background-color);color:var(--n-color-text-weaker);cursor:default;opacity:.5}:host([disabled]) input{background:var(--_n-tag-checkbox-accent-color);cursor:default;opacity:1}:host([disabled]) input:not(:checked){--_n-tag-checkbox-accent-color:var(--n-color-background);--_n-tag-checkbox-border-color:var(--n-color-border-hover)}:host([disabled]) .n-remove-button{cursor:default}:host([disabled]) .n-remove-button:hover{background:#0000}:host([disabled]) .n-remove-button:hover nord-icon{color:var(--n-color-icon)}:host([disabled]:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-box-shadow:var(--n-tag-box-shadow,none)}:host([size=s]) .n-tag{--_n-tag-font-size:var(--n-font-size-s)}`;m.registerIcon(e),m.registerIcon(t);let f=class extends(b(p(r))){constructor(){super(...arguments),this.localize=new g(this),this.formData=new d(this,{value:()=>this.formValue}),this.inputId="input",this.variant="default",this.checked=!1,this.size="m",this.expand=!1}get formValue(){return"selectable"===this.variant&&this.checked?this.value||"on":void 0}handleChange(o){const e=o.target;this.checked=e.checked,o.stopPropagation(),this.dispatchEvent(new v("change"))}handleRemove(){this.dispatchEvent(new v("remove"))}render(){switch(this.variant){case"selectable":return this.renderSelectableTag();case"removable":return this.renderRemovableTag();default:return this.renderStaticTag()}}renderStaticTag(){return n`<div class="n-tag"><div class="n-content"><slot></slot></div></div>`}renderRemovableTag(){return n`<div class="n-tag"><div class="n-content"><slot></slot></div><button class="n-remove-button" @click="${this.handleRemove}" ?disabled="${this.disabled}"><nord-icon name="interface-close-small" label="${this.localize.term("removeLabel")}"></nord-icon></button></div>`}renderSelectableTag(){return n`<label for="${this.inputId}" class="n-tag"><div class="n-input-container"><input ${l(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${s(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small"></nord-icon></div><div class="n-content"><slot></slot></div></label>`}};f.styles=[h,u],o([i({reflect:!0})],f.prototype,"variant",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"checked",void 0),o([i({reflect:!0})],f.prototype,"size",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),f=o([c("nord-tag")],f);var x=f;export{x as default};
 //# sourceMappingURL=Tag.js.map

package/lib/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../src/tag/Tag.ts"],"sourcesContent":["import * as checkedIcon from '@nordhealth/icons/lib/assets/interface-checked-small.js'\nimport * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { FormDataController } from '../common/controllers/FormDataController.js'\nimport { NordEvent } from '../common/events.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport Icon from '../icon/Icon.js'\n\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Tag.css'\n\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(closeIcon)\n\n/**\n * Tags represent a set of keywords that help label, categorize,\n * and organize objects. Commonly used to signify the attributes of an object.\n *\n * @status new\n * @category text\n * @slot - The tag content.\n *\n * @localization removeLabel - Accessible label for the remove button.\n */\n@customElement('nord-tag')\nexport default class Tag extends InputMixin(FocusableMixin(LitElement)) {\n  static styles = [componentStyle, style]\n\n  private localize = new LocalizeController<'nord-tag'>(this)\n\n  protected formData = new FormDataController(this, { value: () => this.formValue })\n\n  protected get formValue() {\n    return this.variant === 'selectable' && this.checked ? this.value || 'on' : undefined\n  }\n\n  protected inputId = 'input'\n\n  /**\n   * The behavioral variant of the tag.\n   */\n  @property({ reflect: true }) variant: 'default' | 'removable' | 'selectable' = 'default'\n\n  /**\n   * Controls whether the tag is checked or not (only relevant when variant is set to `selectable`).\n   */\n  @property({ reflect: true, type: Boolean }) checked: boolean = false\n\n  /**\n   * The size of the tag. This affects the font-size.\n   */\n  @property({ reflect: true }) size: 's' | 'm' = 'm'\n\n  /**\n   * Controls whether the tag expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  protected handleChange(e: Event) {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n\n    e.stopPropagation()\n\n    /**\n     * Fired whenever the tag has been checked or unchecked via user interaction.\n     */\n    this.dispatchEvent(new NordEvent('change'))\n  }\n\n  protected handleRemove() {\n    /**\n     * Fired when the remove button is activated. This event should be used to remove the tag from the DOM.\n     */\n    this.dispatchEvent(new NordEvent('remove'))\n  }\n\n  render() {\n    switch (this.variant) {\n      case 'selectable':\n        return this.renderSelectableTag()\n      case 'removable':\n        return this.renderRemovableTag()\n      case 'default':\n      default:\n        return this.renderStaticTag()\n    }\n  }\n\n  private renderStaticTag() {\n    return html`\n      <div class=\"n-tag\">\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n\n  private renderRemovableTag() {\n    return html`\n      <div class=\"n-tag\">\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n        <button class=\"n-remove-button\" @click=${this.handleRemove} ?disabled=${this.disabled}>\n          <nord-icon name=\"interface-close-small\" label=${this.localize.term('removeLabel')}></nord-icon>\n        </button>\n      </div>\n    `\n  }\n\n  private renderSelectableTag() {\n    return html`\n      <label for=${this.inputId} class=\"n-tag\">\n        <div class=\"n-input-container\">\n          <input\n            ${ref(this.focusableRef)}\n            class=\"n-input\"\n            id=${this.inputId}\n            type=\"checkbox\"\n            name=${ifDefined(this.name)}\n            .value=${this.value}\n            .checked=${this.checked}\n            ?disabled=${this.disabled}\n            @change=${this.handleChange}\n          />\n          <nord-icon class=\"icon-checked\" name=\"interface-checked-small\"></nord-icon>\n        </div>\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n      </label>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tag': Tag\n  }\n}\n"],"names":["Icon","registerIcon","checkedIcon","closeIcon","Tag","InputMixin","FocusableMixin","LitElement","constructor","this","localize","LocalizeController","formData","FormDataController","value","formValue","inputId","variant","checked","size","expand","undefined","handleChange","e","target","stopPropagation","dispatchEvent","NordEvent","handleRemove","render","renderSelectableTag","renderRemovableTag","renderStaticTag","html","disabled","term","ref","focusableRef","ifDefined","name","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"s3KAgBAA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAaH,IAAMC,EAAN,cAAkBC,EAAWC,EAAeC,KAA5C,WAAAC,uBAGLC,KAAAC,SAAW,IAAIC,EAA+BF,MAE5CA,KAAAG,SAAW,IAAIC,EAAmBJ,KAAM,CAAEK,MAAO,IAAML,KAAKM,YAM5DN,KAAOO,QAAG,QAKSP,KAAOQ,QAA2C,UAKnCR,KAAOS,SAAY,EAKlCT,KAAIU,KAAc,IAKHV,KAAMW,QAAG,CA+EtD,CAvGC,aAAcL,GACZ,MAAwB,eAAjBN,KAAKQ,SAA4BR,KAAKS,QAAUT,KAAKK,OAAS,UAAOO,CAC7E,CAwBS,YAAAC,CAAaC,GACrB,MAAMC,EAASD,EAAEC,OACjBf,KAAKS,QAAUM,EAAON,QAEtBK,EAAEE,kBAKFhB,KAAKiB,cAAc,IAAIC,EAAU,UAClC,CAES,YAAAC,GAIRnB,KAAKiB,cAAc,IAAIC,EAAU,UAClC,CAED,MAAAE,GACE,OAAQpB,KAAKQ,SACX,IAAK,aACH,OAAOR,KAAKqB,sBACd,IAAK,YACH,OAAOrB,KAAKsB,qBAEd,QACE,OAAOtB,KAAKuB,kBAEjB,CAEO,eAAAA,GACN,OAAOC,CAAI,qEAOZ,CAEO,kBAAAF,GACN,OAAOE,CAAI,wGAKkCxB,KAAKmB,4BAA0BnB,KAAKyB,4DAC3BzB,KAAKC,SAASyB,KAAK,6CAI1E,CAEO,mBAAAL,GACN,OAAOG,CAAI,eACIxB,KAAKO,gEAGVoB,EAAI3B,KAAK4B,qCAEN5B,KAAKO,kCAEHsB,EAAU7B,KAAK8B,kBACb9B,KAAKK,oBACHL,KAAKS,uBACJT,KAAKyB,sBACPzB,KAAKa,mJASxB,GA5GMlB,EAAAoC,OAAS,CAACC,EAAgBC,GAeJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmEzC,EAAA0C,UAAA,eAAA,GAK5CH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAmC5C,EAAA0C,UAAA,eAAA,GAKvCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6BzC,EAAA0C,UAAA,YAAA,GAKNH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyB5C,EAAA0C,UAAA,cAAA,GA/BvC1C,EAAGuC,EAAA,CADvBM,EAAc,aACM7C,SAAAA"}
+{"version":3,"file":"Tag.js","sources":["../src/tag/Tag.ts"],"sourcesContent":["import * as checkedIcon from '@nordhealth/icons/lib/assets/interface-checked-small.js'\nimport * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { FormDataController } from '../common/controllers/FormDataController.js'\nimport { NordEvent } from '../common/events.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport Icon from '../icon/Icon.js'\n\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Tag.css'\n\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(closeIcon)\n\n/**\n * Tags represent a set of keywords that help label, categorize,\n * and organize objects. Commonly used to signify the attributes of an object.\n *\n * @status new\n * @category content\n * @slot - The tag content.\n *\n * @localization removeLabel - Accessible label for the remove button.\n */\n@customElement('nord-tag')\nexport default class Tag extends InputMixin(FocusableMixin(LitElement)) {\n  static styles = [componentStyle, style]\n\n  private localize = new LocalizeController<'nord-tag'>(this)\n\n  protected formData = new FormDataController(this, { value: () => this.formValue })\n\n  protected get formValue() {\n    return this.variant === 'selectable' && this.checked ? this.value || 'on' : undefined\n  }\n\n  protected inputId = 'input'\n\n  /**\n   * The behavioral variant of the tag.\n   */\n  @property({ reflect: true }) variant: 'default' | 'removable' | 'selectable' = 'default'\n\n  /**\n   * Controls whether the tag is checked or not (only relevant when variant is set to `selectable`).\n   */\n  @property({ reflect: true, type: Boolean }) checked: boolean = false\n\n  /**\n   * The size of the tag. This affects the font-size.\n   */\n  @property({ reflect: true }) size: 's' | 'm' = 'm'\n\n  /**\n   * Controls whether the tag expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  protected handleChange(e: Event) {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n\n    e.stopPropagation()\n\n    /**\n     * Fired whenever the tag has been checked or unchecked via user interaction.\n     */\n    this.dispatchEvent(new NordEvent('change'))\n  }\n\n  protected handleRemove() {\n    /**\n     * Fired when the remove button is activated. This event should be used to remove the tag from the DOM.\n     */\n    this.dispatchEvent(new NordEvent('remove'))\n  }\n\n  render() {\n    switch (this.variant) {\n      case 'selectable':\n        return this.renderSelectableTag()\n      case 'removable':\n        return this.renderRemovableTag()\n      case 'default':\n      default:\n        return this.renderStaticTag()\n    }\n  }\n\n  private renderStaticTag() {\n    return html`\n      <div class=\"n-tag\">\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n\n  private renderRemovableTag() {\n    return html`\n      <div class=\"n-tag\">\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n        <button class=\"n-remove-button\" @click=${this.handleRemove} ?disabled=${this.disabled}>\n          <nord-icon name=\"interface-close-small\" label=${this.localize.term('removeLabel')}></nord-icon>\n        </button>\n      </div>\n    `\n  }\n\n  private renderSelectableTag() {\n    return html`\n      <label for=${this.inputId} class=\"n-tag\">\n        <div class=\"n-input-container\">\n          <input\n            ${ref(this.focusableRef)}\n            class=\"n-input\"\n            id=${this.inputId}\n            type=\"checkbox\"\n            name=${ifDefined(this.name)}\n            .value=${this.value}\n            .checked=${this.checked}\n            ?disabled=${this.disabled}\n            @change=${this.handleChange}\n          />\n          <nord-icon class=\"icon-checked\" name=\"interface-checked-small\"></nord-icon>\n        </div>\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n      </label>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tag': Tag\n  }\n}\n"],"names":["Icon","registerIcon","checkedIcon","closeIcon","Tag","InputMixin","FocusableMixin","LitElement","constructor","this","localize","LocalizeController","formData","FormDataController","value","formValue","inputId","variant","checked","size","expand","undefined","handleChange","e","target","stopPropagation","dispatchEvent","NordEvent","handleRemove","render","renderSelectableTag","renderRemovableTag","renderStaticTag","html","disabled","term","ref","focusableRef","ifDefined","name","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"0xLAgBAA,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 e,customElement as i}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)){z-index:var(--n-index-masked)}:host([variant=default]) .n-multiple-tags ::slotted(:focus-within){z-index:var(--n-index-masked)}: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([e({reflect:!0})],g.prototype,"variant",void 0),t([e({reflect:!0})],g.prototype,"direction",void 0),t([e({reflect:!0,type:Boolean})],g.prototype,"wrap",void 0),t([e({reflect:!0})],g.prototype,"role",void 0),g=t([i("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-BJ5O5n8k.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)){z-index:var(--n-index-masked)}:host([variant=default]) .n-multiple-tags ::slotted(:focus-within){z-index:var(--n-index-masked)}: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 { 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":"wpFAuBe,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAAG,cAAgB,IAAIC,EAAoBJ,MAKnBA,KAAOK,QAAyB,UAKhCL,KAASM,UAA8B,aAMxBN,KAAIO,MAAG,EAMtBP,KAAIQ,KAAW,OAe7C,CAbC,MAAAC,GACE,MAAMC,EAAkBV,KAAKC,YAAYU,SAASC,OAAS,EAE3D,OAAOC,CAAI,eACDC,EAAS,CACf,eAAe,EACf,QAASd,KAAKG,cAAcY,MAC5B,kBAAmBL,0BAKxB,GAvCMb,EAAAmB,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiDxB,EAAAyB,UAAA,eAAA,GAKzCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2DxB,EAAAyB,UAAA,iBAAA,GAMpCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAuB3B,EAAAyB,UAAA,YAAA,GAM3BH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8BxB,EAAAyB,UAAA,YAAA,GA1BhCzB,EAAQsB,EAAA,CAD5BM,EAAc,mBACM5B,SAAAA"}
+{"version":3,"file":"TagGroup.js","sources":["../src/tag-group/TagGroup.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './TagGroup.css'\n\n/**\n * Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.\n *\n * @status new\n * @category content\n * @slot - The tag group content\n *\n * @fires {NordEvent} change - Fired whenever a tag has been checked or unchecked via user interaction.\n * @fires {NordEvent} remove - Fired when the remove button is activated on a tag. This event should be used to remove the tag from the DOM.\n *\n * @cssprop [--n-tag-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the tag group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.\n * @cssprop [--n-tag-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.\n *\n * @parent Tag\n */\n@customElement('nord-tag-group')\nexport default class TagGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n  private dirController = new DirectionController(this)\n\n  /**\n   * The style variant of the tag group.\n   */\n  @property({ reflect: true }) variant: 'default' | 'spaced' = 'default'\n\n  /**\n   * The direction of the tag group.\n   */\n  @property({ reflect: true }) direction: 'vertical' | 'horizontal' = 'horizontal'\n\n  /**\n   * Defines whether the tags are forced in a single line\n   * or can be flowed into multiple lines (only applied when variant is set to `spaced`).\n   */\n  @property({ reflect: true, type: Boolean }) wrap = false\n\n  /**\n   * The appropriate role for the containing element.\n   */\n\n  @property({ reflect: true }) role: string = 'group'\n\n  render() {\n    const hasMultipleTags = this.defaultSlot.assigned.length > 1\n\n    return html`<div\n      class=${classMap({\n        'n-tag-group': true,\n        'n-rtl': this.dirController.isRTL,\n        'n-multiple-tags': hasMultipleTags,\n      })}\n    >\n      <slot></slot>\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tag-group': TagGroup\n  }\n}\n"],"names":["TagGroup","LitElement","constructor","this","defaultSlot","SlotController","dirController","DirectionController","variant","direction","wrap","role","render","hasMultipleTags","assigned","length","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"opFAyBe,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAAG,cAAgB,IAAIC,EAAoBJ,MAKnBA,KAAOK,QAAyB,UAKhCL,KAASM,UAA8B,aAMxBN,KAAIO,MAAG,EAMtBP,KAAIQ,KAAW,OAe7C,CAbC,MAAAC,GACE,MAAMC,EAAkBV,KAAKC,YAAYU,SAASC,OAAS,EAE3D,OAAOC,CAAI,eACDC,EAAS,CACf,eAAe,EACf,QAASd,KAAKG,cAAcY,MAC5B,kBAAmBL,0BAKxB,GAvCMb,EAAAmB,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiDxB,EAAAyB,UAAA,eAAA,GAKzCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2DxB,EAAAyB,UAAA,iBAAA,GAMpCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAuB3B,EAAAyB,UAAA,YAAA,GAM3BH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8BxB,EAAAyB,UAAA,YAAA,GA1BhCzB,EAAQsB,EAAA,CAD5BM,EAAc,mBACM5B,SAAAA"}

package/lib/TextField-CSKvieoG.js

@@ -0,0 +1,2 @@
+import{css as n}from"lit";const r=n`:host{--_n-input-inline-size:var(--n-input-inline-size,240px);--_n-input-block-size:var(--n-input-block-size,var(--n-space-xl));--_n-input-background:var(--n-input-background,var(--n-color-surface));--_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-input-block-size)/2 - var(--n-line-height-form)/2 - 1px);--_n-input-padding-inline:calc(var(--n-space-s)*1.6);--_n-input-min-content-block-size:calc(var(--n-line-height-form) + var(--n-space-s)/1.6*2 + 2px)}.n-input-container{inline-size:var(--_n-input-inline-size);position:relative}.n-input{background:var(--_n-input-background);border:1px solid var(--_n-input-border-color);border-radius:var(--_n-input-border-radius);color:var(--_n-input-color);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-input-font-size);inline-size:100%;line-height:var(--n-line-height-form);padding:var(--_n-input-padding-block) var(--_n-input-padding-inline);text-align:var(--_n-input-text-align);transition:border var(--n-transition-quickly),box-shadow var(--n-transition-quickly),background var(--n-transition-quickly)}@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));box-shadow:0 0 0 1px var(--_n-input-border-color);outline:none}.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-background:var(--n-input-background-inactive,var(--n-color-active));--_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))}.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-block-size:max(var(--n-input-block-size,calc(var(--n-space-xxl) - var(--n-space-l))),var(--_n-input-min-content-block-size));--_n-input-padding-block:calc(var(--_n-input-block-size)/2 - var(--n-line-height-form)/2 - 1px)}`;export{r as s};
+//# sourceMappingURL=TextField-CSKvieoG.js.map

package/lib/TextField-CSKvieoG.js.map

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

package/lib/TextSelectableMixin-Cfv__lHS.js.map

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

package/lib/Textarea.js.map

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

package/lib/TimePicker.js

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