@nordhealth/components 4.26.2 → 5.0.0

package/lib/TimePicker.js.map

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

package/lib/Toast.js

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

package/lib/Toast.js.map

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

package/lib/ToastGroup.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as n,html as s}from"lit";import{customElement as o}from"lit/decorators.js";import{s as a}from"./Component-DSU3Qp0O.js";const i=e`.n-toast-group{display:flex;flex-direction:column;gap:var(--n-space-s);position:fixed;z-index:var(--n-index-toast);inset:0;inset-block-start:auto;inset-inline-end:var(--n-scrollbar-gutter,0);margin:1em;pointer-events:none}::slotted(nord-toast){max-inline-size:calc(var(--n-space-xxl) * 5);inline-size:100%;margin-inline:auto;pointer-events:auto}`;let r=class extends n{render(){return s`<div class="n-toast-group" role="log" aria-relevant="additions"><slot></slot></div>`}addToast(t,e={}){const{variant:n,autoDismiss:s}=e,o=document.createElement("nord-toast");return n&&(o.variant=n),null!=s&&(o.autoDismiss=s),o.textContent=t,this.appendChild(o),o}};r.styles=[a,i],r=t([o("nord-toast-group")],r);var l=r;export{l as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,LitElement as o,html as n}from"lit";import{customElement as s}from"lit/decorators.js";import{s as a}from"./Component-BJ5O5n8k.js";const i=t`:host{background:none;border:none;inset:auto;margin:0;max-block-size:none;max-inline-size:none;overflow:visible;padding:0}.n-toast-group{display:flex;flex-direction:column;gap:var(--n-space-s);inset:0;inset-block-start:auto;inset-inline-end:var(--n-scrollbar-gutter,0);margin:1em;pointer-events:none;position:fixed;z-index:var(--n-index-toast)}::slotted(nord-toast){inline-size:100%;margin-inline:auto;max-inline-size:calc(var(--n-space-xxl)*5);pointer-events:auto}`;let r=class extends o{disconnectedCallback(){super.disconnectedCallback(),this.leaveTopLayer()}render(){return n`<div class="n-toast-group" role="log" aria-relevant="additions"><slot @slotchange="${this.handleSlotChange}"></slot></div>`}handleSlotChange(e){e.target.assignedElements().length>0?this.enterTopLayer():this.leaveTopLayer()}enterTopLayer(){if("function"==typeof this.showPopover&&!this.matches(":popover-open"))try{this.setAttribute("popover","manual"),this.showPopover()}catch(e){this.removeAttribute("popover")}}leaveTopLayer(){this.removeAttribute("popover")}addToast(e,t={}){const{variant:o,autoDismiss:n}=t,s=document.createElement("nord-toast");return o&&(s.variant=o),null!=n&&(s.autoDismiss=n),s.textContent=e,this.appendChild(s),s}};r.styles=[a,i],r=e([s("nord-toast-group")],r);var l=r;export{l as default};
 //# sourceMappingURL=ToastGroup.js.map

package/lib/ToastGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastGroup.js","sources":["../src/toast-group/ToastGroup.ts"],"sourcesContent":["import type Toast from '../toast/Toast.js'\nimport { html, LitElement } from 'lit'\n\nimport { customElement } from 'lit/decorators.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './ToastGroup.css'\n\ntype ToastOptions = Partial<Pick<Toast, 'variant' | 'autoDismiss'>>\n\n/**\n * Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.\n *\n * @status ready\n * @category feedback\n * @slot - Default slot in which to place toasts.\n *\n * @fires {NordEvent} dismiss - Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.\n */\n@customElement('nord-toast-group')\nexport default class ToastGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`\n      <div class=\"n-toast-group\" role=\"log\" aria-relevant=\"additions\">\n        <slot></slot>\n      </div>\n    `\n  }\n\n  /**\n   * Convenience method for creating and adding a toast to the group.\n   * @param {string} text - The text/message of the toast.\n   * @param options - An optional object for configuring the toast's `variant` and `autoDismiss`.\n   * @returns {Toast} The toast instance.\n   */\n  addToast(text: string, options: ToastOptions = {}) {\n    const { variant, autoDismiss } = options\n    const toast = document.createElement('nord-toast')\n\n    if (variant) {\n      toast.variant = variant\n    }\n\n    if (autoDismiss != null) {\n      toast.autoDismiss = autoDismiss\n    }\n\n    toast.textContent = text\n    this.appendChild(toast)\n\n    return toast\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-toast-group': ToastGroup\n  }\n}\n"],"names":["ToastGroup","LitElement","render","html","addToast","text","options","variant","autoDismiss","toast","document","createElement","textContent","this","appendChild","styles","componentStyle","style","__decorate","customElement"],"mappings":"miBAmBe,IAAMA,EAAN,cAAyBC,EAGtC,MAAAC,GACE,OAAOC,CAAI,qFAKZ,CAQD,QAAAC,CAASC,EAAcC,EAAwB,IAC7C,MAAMC,QAAEA,EAAOC,YAAEA,GAAgBF,EAC3BG,EAAQC,SAASC,cAAc,cAarC,OAXIJ,IACFE,EAAMF,QAAUA,GAGC,MAAfC,IACFC,EAAMD,YAAcA,GAGtBC,EAAMG,YAAcP,EACpBQ,KAAKC,YAAYL,GAEVA,CACR,GAhCMT,EAAAe,OAAS,CAACC,EAAgBC,GADdjB,EAAUkB,EAAA,CAD9BC,EAAc,qBACMnB,SAAAA"}
+{"version":3,"file":"ToastGroup.js","sources":["../src/toast-group/ToastGroup.ts"],"sourcesContent":["import type Toast from '../toast/Toast.js'\nimport { html, LitElement } from 'lit'\n\nimport { customElement } from 'lit/decorators.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './ToastGroup.css'\n\ntype ToastOptions = Partial<Pick<Toast, 'variant' | 'autoDismiss'>>\n\n/**\n * Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.\n *\n * @status ready\n * @category feedback\n * @slot - Default slot in which to place toasts.\n *\n * @fires {NordEvent} dismiss - Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.\n *\n * @parent Toast\n */\n@customElement('nord-toast-group')\nexport default class ToastGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    this.leaveTopLayer()\n  }\n\n  render() {\n    return html`\n      <div class=\"n-toast-group\" role=\"log\" aria-relevant=\"additions\">\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `\n  }\n\n  private handleSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement\n    const hasToasts = slot.assignedElements().length > 0\n\n    if (hasToasts) {\n      this.enterTopLayer()\n    }\n    else {\n      this.leaveTopLayer()\n    }\n  }\n\n  /**\n   * Place the group in the top layer via the Popover API so that toasts render\n   * above modals, drawers and other content regardless of stacking contexts\n   * created by container queries, transforms or other containing block ancestors.\n   */\n  private enterTopLayer() {\n    if (typeof this.showPopover !== 'function' || this.matches(':popover-open'))\n      return\n\n    try {\n      this.setAttribute('popover', 'manual')\n      this.showPopover()\n    }\n    catch {\n      this.removeAttribute('popover')\n    }\n  }\n\n  private leaveTopLayer() {\n    this.removeAttribute('popover')\n  }\n\n  /**\n   * Convenience method for creating and adding a toast to the group.\n   * @param {string} text - The text/message of the toast.\n   * @param options - An optional object for configuring the toast's `variant` and `autoDismiss`.\n   * @returns {Toast} The toast instance.\n   */\n  addToast(text: string, options: ToastOptions = {}) {\n    const { variant, autoDismiss } = options\n    const toast = document.createElement('nord-toast')\n\n    if (variant) {\n      toast.variant = variant\n    }\n\n    if (autoDismiss != null) {\n      toast.autoDismiss = autoDismiss\n    }\n\n    toast.textContent = text\n    this.appendChild(toast)\n\n    return toast\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-toast-group': ToastGroup\n  }\n}\n"],"names":["ToastGroup","LitElement","disconnectedCallback","super","this","leaveTopLayer","render","html","handleSlotChange","event","target","assignedElements","length","enterTopLayer","showPopover","matches","setAttribute","_a","removeAttribute","addToast","text","options","variant","autoDismiss","toast","document","createElement","textContent","appendChild","styles","componentStyle","style","__decorate","customElement"],"mappings":"2pBAqBe,IAAMA,EAAN,cAAyBC,EAGtC,oBAAAC,GACEC,MAAMD,uBAENE,KAAKC,eACN,CAED,MAAAC,GACE,OAAOC,CAAI,sFAEaH,KAAKI,iCAG9B,CAEO,gBAAAA,CAAiBC,GACVA,EAAMC,OACIC,mBAAmBC,OAAS,EAGjDR,KAAKS,gBAGLT,KAAKC,eAER,CAOO,aAAAQ,GACN,GAAgC,mBAArBT,KAAKU,cAA8BV,KAAKW,QAAQ,iBAG3D,IACEX,KAAKY,aAAa,UAAW,UAC7BZ,KAAKU,aACN,CACD,MAAAG,GACEb,KAAKc,gBAAgB,UACtB,CACF,CAEO,aAAAb,GACND,KAAKc,gBAAgB,UACtB,CAQD,QAAAC,CAASC,EAAcC,EAAwB,IAC7C,MAAMC,QAAEA,EAAOC,YAAEA,GAAgBF,EAC3BG,EAAQC,SAASC,cAAc,cAarC,OAXIJ,IACFE,EAAMF,QAAUA,GAGC,MAAfC,IACFC,EAAMD,YAAcA,GAGtBC,EAAMG,YAAcP,EACpBhB,KAAKwB,YAAYJ,GAEVA,CACR,GAxEMxB,EAAA6B,OAAS,CAACC,EAAgBC,GADd/B,EAAUgC,EAAA,CAD9BC,EAAc,qBACMjC,SAAAA"}

package/lib/Toggle.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as n,html as i,nothing as r,LitElement as t}from"lit";import{property as o,customElement as s}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{ref as l}from"lit/directives/ref.js";import{F as c}from"./FocusableMixin-BlQLNPdJ.js";import{F as d}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as g}from"./InputMixin-LetXsCyv.js";import{s as h}from"./Component-DSU3Qp0O.js";import{s as p}from"./FormField-BFaVzUjk.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";const v=n`:host{--_n-toggle-block-size:calc(var(--_n-toggle-inline-size) / 1.6);--_n-toggle-inline-size:3.2143em;--_n-toggle-thumb-margin:0.35em;display:inline-block;font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-block-size:100%}.n-input-container{position:relative}.n-toggle{appearance:none;display:inline-flex;align-items:center;inline-size:var(--_n-toggle-inline-size);block-size:var(--_n-toggle-block-size);border-radius:var(--n-border-radius-pill);background:var(--_n-toggle-background,var(--n-color-border-strong));cursor:pointer;transition:background var(--n-transition-slowly);font-size:var(--_n-toggle-size,var(--n-font-size-m))}.n-toggle::before{content:'';display:block;aspect-ratio:1/1;block-size:calc(100% - 2 * var(--_n-toggle-thumb-margin));background:var(--n-color-text-on-accent);border-radius:var(--n-border-radius-circle);transition:margin;transition-duration:inherit;margin-inline-start:var(--_n-toggle-thumb-margin);box-shadow:var(--n-box-shadow)}input:checked{--_n-toggle-background:var(--n-color-accent)}input:checked::before{margin-inline-start:calc(var(--_n-toggle-inline-size) - var(--_n-toggle-block-size) + var(--_n-toggle-thumb-margin))}input:checked[aria-invalid]{--_n-toggle-background:var(--n-color-status-danger)}input:focus{outline:0;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{cursor:default}:host([disabled]) input:not(:checked){--_n-toggle-background:var(--n-color-border-neutral)}:host([disabled]) input:checked{opacity:.3}.n-label-container{margin-block-end:0}label{user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([hint-below]) :is(.n-hint, .n-error){padding-inline-start:0}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}:host([reverse][hint-below]) :is(.n-hint, .n-error){padding-inline-end:0}:host([size='s']) .n-toggle{--_n-toggle-size:var(--n-font-size-xs)}:host([size='l']) .n-toggle{--_n-toggle-size:var(--n-font-size-xl)}`;let u=class extends(d(g(c(t)))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=i`<div class="n-expand">${this.renderLabel()} ${this.isHintBelow?r:this.renderError()}</div>`,n=i`<div class="n-input-container"><input ${l(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"></div>`;return i`<div class="n-flex">${this.reverse?[e,n]:[n,e]}</div>${this.isHintBelow?this.renderError():r} ${this.isHintBelow?this.renderHint():r}`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};u.styles=[h,p,v],e([o({reflect:!0,type:Boolean})],u.prototype,"checked",void 0),e([o({reflect:!0,type:Boolean})],u.prototype,"reverse",void 0),e([o({reflect:!0})],u.prototype,"size",void 0),u=e([s("nord-toggle")],u);var m=u;export{m as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as i,html as n,nothing as t,LitElement as r}from"lit";import{property as o,customElement as s}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{ref as l}from"lit/directives/ref.js";import{F as c}from"./FocusableMixin-BlQLNPdJ.js";import{F as d}from"./FormAssociatedMixin-D9aPREgv.js";import{I as g}from"./InputMixin-LetXsCyv.js";import{s as h}from"./Component-BJ5O5n8k.js";import{s as p}from"./FormField-CMgEFZCK.js";import"./FormDataController-OUt5L5uC.js";import"./events-Bv6wNHwJ.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";const m=i`:host{--_n-toggle-block-size:calc(var(--_n-toggle-inline-size)/1.6);--_n-toggle-inline-size:3.2143em;--_n-toggle-thumb-margin:0.35em;display:inline-block;font-size:var(--n-font-size-m)}.n-expand,.n-flex{display:flex}.n-expand{align-items:flex-start;flex:1;flex-direction:column;justify-content:center;min-block-size:100%}.n-input-container{position:relative}.n-toggle{align-items:center;appearance:none;background:var(--_n-toggle-background,var(--n-color-border-strong));block-size:var(--_n-toggle-block-size);border-radius:var(--n-border-radius-pill);cursor:pointer;display:inline-flex;font-size:var(--_n-toggle-size,var(--n-font-size-m));inline-size:var(--_n-toggle-inline-size);transition:background var(--n-transition-slowly)}.n-toggle:before{aspect-ratio:1/1;background:var(--n-color-text-on-accent);block-size:calc(100% - var(--_n-toggle-thumb-margin)*2);border-radius:var(--n-border-radius-circle);box-shadow:var(--n-box-shadow);content:"";display:block;margin-inline-start:var(--_n-toggle-thumb-margin);transition:margin;transition-duration:inherit}input:checked{--_n-toggle-background:var(--n-color-accent)}input:checked:before{margin-inline-start:calc(var(--_n-toggle-inline-size) - var(--_n-toggle-block-size) + var(--_n-toggle-thumb-margin))}input:checked[aria-invalid]{--_n-toggle-background:var(--n-color-status-danger)}input:focus{box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent);outline:none}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{cursor:default}:host([disabled]) input:not(:checked){--_n-toggle-background:var(--n-color-border-neutral)}:host([disabled]) input:checked{opacity:.3}.n-label-container{margin-block-end:0}label{cursor:pointer;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height);user-select:none}.n-error,.n-hint,label{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs)}:host([hint-below]) :is(.n-hint,.n-error){padding-inline-start:0}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-end:var(--n-space-s);padding-inline-start:0}:host([reverse][hint-below]) :is(.n-hint,.n-error){padding-inline-end:0}:host([size=s]) .n-toggle{--_n-toggle-size:var(--n-font-size-xs)}:host([size=l]) .n-toggle{--_n-toggle-size:var(--n-font-size-xl)}`;let v=class extends(d(g(c(r)))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=n`<div class="n-expand">${this.renderLabel()} ${this.isHintBelow?t:this.renderError()}</div>`,i=n`<div class="n-input-container"><input ${l(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.effectiveDisabled}" ?required="${this.required}" aria-label="${a(this.controlAriaLabel)}" aria-describedby="${a(this.controlAriaDescribedby)}" aria-invalid="${a(this.controlAriaInvalid)}" @change="${this.handleChange}"></div>`;return n`<div class="n-flex">${this.reverse?[e,i]:[i,e]}</div>${this.isHintBelow?this.renderError():t} ${this.isHintBelow?this.renderHint():t}`}handleChange(e){const i=e.target;this.checked=i.checked,super.handleChange(e)}};v.styles=[h,p,m],e([o({reflect:!0,type:Boolean})],v.prototype,"checked",void 0),e([o({reflect:!0,type:Boolean})],v.prototype,"reverse",void 0),e([o({reflect:!0})],v.prototype,"size",void 0),v=e([s("nord-toggle")],v);var u=v;export{u as default};
 //# sourceMappingURL=Toggle.js.map

package/lib/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../src/toggle/Toggle.ts"],"sourcesContent":["/* eslint-disable lit-a11y/role-has-required-aria-attrs */\nimport { 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'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport formFieldStyle from '../common/styles/FormField.css'\nimport style from './Toggle.css'\n\n/**\n * Toggle switch gives control over a feature or option that can be\n * turned on or off. If a physical switch would work for the action, a\n * toggle is probably the best component to use.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n *\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-toggle')\nexport default class Toggle extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.checked ? this.value || 'on' : undefined\n  }\n\n  /**\n   * Controls whether the toggle is checked or not.\n   */\n  @property({ reflect: true, type: Boolean }) checked: boolean = false\n\n  /**\n   * Controls whether the contents are displayed in reverse order,\n   * putting the label before the toggle.\n   */\n  @property({ reflect: true, type: Boolean }) reverse: boolean = false\n\n  /**\n   * The size of the toggle switch.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 'm'\n\n  render() {\n    const label = html`\n      <div class=\"n-expand\">\n        ${this.renderLabel()}\n        ${this.isHintBelow ? nothing : this.renderError()}\n      </div>\n    `\n    const input = html`<div class=\"n-input-container\">\n      <input\n        ${ref(this.focusableRef)}\n        class=\"n-toggle\"\n        id=${this.inputId}\n        type=\"checkbox\"\n        role=\"switch\"\n        name=${ifDefined(this.name)}\n        .value=${this.value}\n        .checked=${this.checked}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        aria-describedby=${ifDefined(this.getDescribedBy())}\n        aria-invalid=${ifDefined(this.getInvalid())}\n        @change=${this.handleChange}\n      />\n    </div>`\n\n    return html`\n      <div class=\"n-flex\">${this.reverse ? [label, input] : [input, label]}</div>\n      ${this.isHintBelow ? this.renderError() : nothing}\n      ${this.isHintBelow ? this.renderHint() : nothing}\n    `\n  }\n\n  protected handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n    super.handleChange(e)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-toggle': Toggle\n  }\n}\n"],"names":["Toggle","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","checked","reverse","size","formValue","value","undefined","render","label","html","renderLabel","isHintBelow","nothing","renderError","input","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","renderHint","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"miGA4Be,IAAMA,EAAN,cAAqBC,EAAoBC,EAAWC,EAAeC,MAAnE,WAAAC,uBAU+BC,KAAOC,SAAY,EAMnBD,KAAOE,SAAY,EAKlCF,KAAIG,KAAoB,GAuCtD,CAzDC,aAAuBC,GACrB,OAAOJ,KAAKC,QAAUD,KAAKK,OAAS,UAAOC,CAC5C,CAkBD,MAAAC,GACE,MAAMC,EAAQC,CAAI,yBAEZT,KAAKU,iBACLV,KAAKW,YAAcC,EAAUZ,KAAKa,sBAGlCC,EAAQL,CAAI,yCAEZM,EAAIf,KAAKgB,sCAENhB,KAAKiB,gDAGHC,EAAUlB,KAAKmB,kBACbnB,KAAKK,oBACHL,KAAKC,uBACJD,KAAKoB,wBACLpB,KAAKqB,+BACEH,EAAUlB,KAAKsB,oCACnBJ,EAAUlB,KAAKuB,2BACpBvB,KAAKwB,uBAInB,OAAOf,CAAI,uBACaT,KAAKE,QAAU,CAACM,EAAOM,GAAS,CAACA,EAAON,WAC5DR,KAAKW,YAAcX,KAAKa,cAAgBD,KACxCZ,KAAKW,YAAcX,KAAKyB,aAAeb,GAE5C,CAES,YAAAY,CAAaE,GACrB,MAAMC,EAASD,EAAEC,OACjB3B,KAAKC,QAAU0B,EAAO1B,QACtB2B,MAAMJ,aAAaE,EACpB,GA1DMhC,EAAMmC,OAAG,CAACC,EAAgBC,EAAgBC,GASLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAmC3C,EAAA4C,UAAA,eAAA,GAMxBL,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAmC3C,EAAA4C,UAAA,eAAA,GAKvCL,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmCzC,EAAA4C,UAAA,YAAA,GArBrC5C,EAAMuC,EAAA,CAD1BM,EAAc,gBACM7C,SAAAA"}
+{"version":3,"file":"Toggle.js","sources":["../src/toggle/Toggle.ts"],"sourcesContent":["/* eslint-disable lit-a11y/role-has-required-aria-attrs */\nimport { 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'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport formFieldStyle from '../common/styles/FormField.css'\nimport style from './Toggle.css'\n\n/**\n * Toggle switch gives control over a feature or option that can be\n * turned on or off. If a physical switch would work for the action, a\n * toggle is probably the best component to use.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n *\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-toggle')\nexport default class Toggle extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.checked ? this.value || 'on' : undefined\n  }\n\n  /**\n   * Controls whether the toggle is checked or not.\n   */\n  @property({ reflect: true, type: Boolean }) checked: boolean = false\n\n  /**\n   * Controls whether the contents are displayed in reverse order,\n   * putting the label before the toggle.\n   */\n  @property({ reflect: true, type: Boolean }) reverse: boolean = false\n\n  /**\n   * The size of the toggle switch.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 'm'\n\n  render() {\n    const label = html`\n      <div class=\"n-expand\">\n        ${this.renderLabel()}\n        ${this.isHintBelow ? nothing : this.renderError()}\n      </div>\n    `\n    const input = html`<div class=\"n-input-container\">\n      <input\n        ${ref(this.focusableRef)}\n        class=\"n-toggle\"\n        id=${this.inputId}\n        type=\"checkbox\"\n        role=\"switch\"\n        name=${ifDefined(this.name)}\n        .value=${this.value}\n        .checked=${this.checked}\n        ?disabled=${this.effectiveDisabled}\n        ?required=${this.required}\n        aria-label=${ifDefined(this.controlAriaLabel)}\n        aria-describedby=${ifDefined(this.controlAriaDescribedby)}\n        aria-invalid=${ifDefined(this.controlAriaInvalid)}\n        @change=${this.handleChange}\n      />\n    </div>`\n\n    return html`\n      <div class=\"n-flex\">${this.reverse ? [label, input] : [input, label]}</div>\n      ${this.isHintBelow ? this.renderError() : nothing}\n      ${this.isHintBelow ? this.renderHint() : nothing}\n    `\n  }\n\n  protected handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n    super.handleChange(e)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-toggle': Toggle\n  }\n}\n"],"names":["Toggle","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","checked","reverse","size","formValue","value","undefined","render","label","html","renderLabel","isHintBelow","nothing","renderError","input","ref","focusableRef","inputId","ifDefined","name","effectiveDisabled","required","controlAriaLabel","controlAriaDescribedby","controlAriaInvalid","handleChange","renderHint","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"4rGA4Be,IAAMA,EAAN,cAAqBC,EAAoBC,EAAWC,EAAeC,MAAnE,WAAAC,uBAU+BC,KAAOC,SAAY,EAMnBD,KAAOE,SAAY,EAKlCF,KAAIG,KAAoB,GAwCtD,CA1DC,aAAuBC,GACrB,OAAOJ,KAAKC,QAAUD,KAAKK,OAAS,UAAOC,CAC5C,CAkBD,MAAAC,GACE,MAAMC,EAAQC,CAAI,yBAEZT,KAAKU,iBACLV,KAAKW,YAAcC,EAAUZ,KAAKa,sBAGlCC,EAAQL,CAAI,yCAEZM,EAAIf,KAAKgB,sCAENhB,KAAKiB,gDAGHC,EAAUlB,KAAKmB,kBACbnB,KAAKK,oBACHL,KAAKC,uBACJD,KAAKoB,iCACLpB,KAAKqB,yBACJH,EAAUlB,KAAKsB,wCACTJ,EAAUlB,KAAKuB,0CACnBL,EAAUlB,KAAKwB,iCACpBxB,KAAKyB,uBAInB,OAAOhB,CAAI,uBACaT,KAAKE,QAAU,CAACM,EAAOM,GAAS,CAACA,EAAON,WAC5DR,KAAKW,YAAcX,KAAKa,cAAgBD,KACxCZ,KAAKW,YAAcX,KAAK0B,aAAed,GAE5C,CAES,YAAAa,CAAaE,GACrB,MAAMC,EAASD,EAAEC,OACjB5B,KAAKC,QAAU2B,EAAO3B,QACtB4B,MAAMJ,aAAaE,EACpB,GA3DMjC,EAAMoC,OAAG,CAACC,EAAgBC,EAAgBC,GASLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAmC5C,EAAA6C,UAAA,eAAA,GAMxBL,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAmC5C,EAAA6C,UAAA,eAAA,GAKvCL,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmC1C,EAAA6C,UAAA,YAAA,GArBrC7C,EAAMwC,EAAA,CAD1BM,EAAc,gBACM9C,SAAAA"}

package/lib/Tooltip.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as i,l as e,o,f as s,s as n}from"./positioning-D-K8Mueq.js";import{css as r,LitElement as a,html as l}from"lit";import{state as d,property as h,customElement as p}from"lit/decorators.js";import{E as c}from"./EventController-BBOmvfLa.js";import{S as u}from"./SlotController-Z6eG7LSZ.js";import{o as v}from"./observe-D0n0zOfU.js";import{f as m}from"./fsm-Bq5jMQrK.js";import{s as f}from"./Component-DSU3Qp0O.js";function y(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function b(t,i,e){t.setAttribute(i,e.join(" "))}const g=r`:host{--_n-tooltip-max-size:var(--n-tooltip-max-size, 50ch);--_n-tooltip-background:rgb(20, 20, 20, 0.95);--_n-tooltip-color:#fff;--_n-tooltip-key-border:rgb(255, 255, 255, 0.03);--_n-tooltip-key-background:rgb(255, 255, 255, 0.1);position:fixed;pointer-events:none;visibility:hidden;opacity:0;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transition-timing-function:ease;z-index:var(--n-index-popout);inset:auto;inline-size:auto;block-size:auto;margin:0;padding:0;border:none;background:0 0;overflow:visible;color:inherit}.n-tooltip{gap:var(--n-space-s);font-family:var(--n-font-family);font-size:var(--n-font-size-xs);line-height:var(--n-line-height);color:var(--_n-tooltip-color);padding:calc(var(--n-space-s)/ 1.5) var(--n-space-s);background-color:var(--_n-tooltip-background);border-radius:var(--n-border-radius-s);word-break:break-word;max-inline-size:var(--_n-tooltip-max-size)}.n-tooltip,.n-tooltip-shortcut{display:flex;align-items:center}.n-tooltip-shortcut{gap:2px}::slotted([slot=shortcut]){box-sizing:border-box;margin:0;inline-size:var(--n-size-icon-m);block-size:var(--n-size-icon-m);border-radius:var(--n-border-radius-s);border:1px solid var(--_n-tooltip-key-border)!important;padding:1px!important;text-align:center;font-size:var(--n-font-size-xs);line-height:var(--n-line-height-tight);letter-spacing:-.5px;vertical-align:middle!important;background-color:var(--_n-tooltip-key-background)}[slot=shortcut]::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;var x;function k(t){return t.nodeType===Node.ELEMENT_NODE}function w(t){var i;const e=null===(i=null==t?void 0:t.focusableRef)||void 0===i?void 0:i.value;return e&&"focusableRef"in e?w(e):e}const{transition:z}=m({hidden:{show:"waiting"},visible:{hide:"hidden",reposition:"positioning",show:"positioning"},waiting:{timeout:"positioning",hide:"hidden"},positioning:{positioned:"visible",hide:"hidden"}});let E=x=class extends a{constructor(){super(...arguments),this.shortcutSlot=new u(this,"shortcut"),this.events=new c(this),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.open=!1,this.sideOffset=8,this.alignOffset=0,this.updatePosition=t=>i(t,this,{strategy:"fixed",placement:e(this.position),middleware:[o({mainAxis:this.sideOffset,alignmentAxis:this.alignOffset}),s(),n({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=z(this.state,"positioned")})),this.hideTooltip=()=>{this.state=z(this.state,"hide")},this.reposition=()=>{this.state=z(this.state,"reposition")},this.handleShow=t=>{const i=function(t,i){return i.id&&k(t)?t.closest(`[aria-describedby~="${CSS.escape(i.id)}"]`):null}(t.target,this);i&&(this.currentElement=i,this.state=z(this.state,"show"))},this.handleHide=t=>{const i=t.target;this.currentElement&&k(i)&&this.currentElement.contains(i)&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{const t=w(this.currentElement);t&&this.proxy&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,t.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const o=y(t,i);o.includes(e)||b(t,i,o.concat(e))}(t,"aria-describedby",this.id))},this.removeDescribedBy=()=>{const t=w(this.currentElement);t&&this.proxy&&(this.proxy.remove(),function(t,i,e){const o=y(t,i);o.includes(e)&&b(t,i,o.filter((t=>t!==e)))}(t,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback(),this.proxy=document.createElement("span");const t=this.getRootNode();this.events.listen(t,"keydown",this.hideOnEscape),this.events.listen(t,"mouseover",this.handleShow),this.events.listen(t,"focusin",this.handleShow),this.events.listen(t,"mouseout",this.handleHide),this.events.listen(t,"focusout",this.handleHide),this.events.listen(t,"click",this.handleHide,{capture:!0}),this.events.listen(window,"resize",this.reposition,{passive:!0}),this.events.listen(window,"scroll",this.reposition,{passive:!0})}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.proxy)||void 0===t||t.remove(),this.proxy=void 0}render(){return l`<div class="n-tooltip"><slot></slot><div class="n-tooltip-shortcut" ?hidden="${this.shortcutSlot.isEmpty}"><slot class="n-tooltip-key" name="shortcut"></slot></div></div>`}handleIdChange(){this.id||console.warn("NORD: The tooltip requires an id attribute and value")}handleStateChange(t){var i;switch(this.state){case"hidden":"waiting"===t&&this.timeoutId&&clearTimeout(this.timeoutId),this.removeDescribedBy(),this.currentElement=void 0,this.style.visibility="hidden",this.style.opacity="0",this.open=!1,this.leaveTopLayer();break;case"visible":{this.timeoutId=void 0,x.lastOpened=this,this.addDescribedBy();const[t,i]=this.coords;this.style.left=`${t}px`,this.style.top=`${i}px`,this.style.visibility="visible",this.style.opacity="1",this.open=!0;break}case"waiting":this.timeoutId=setTimeout((()=>{this.state=z(this.state,"timeout")}),this.delay);break;case"positioning":x.lastOpened!==this&&(null===(i=x.lastOpened)||void 0===i||i.hideTooltip()),this.enterTopLayer(),this.currentElement&&this.updatePosition(this.currentElement)}}enterTopLayer(){if("function"==typeof this.showPopover)try{this.setAttribute("popover","manual"),this.showPopover()}catch(t){this.removeAttribute("popover")}}leaveTopLayer(){this.removeAttribute("popover")}};E.styles=[f,g],t([d()],E.prototype,"state",void 0),t([h({reflect:!0})],E.prototype,"position",void 0),t([h({reflect:!0})],E.prototype,"role",void 0),t([h({reflect:!0})],E.prototype,"id",void 0),t([h({reflect:!0,type:Number})],E.prototype,"delay",void 0),t([h({type:Boolean,reflect:!0})],E.prototype,"open",void 0),t([h({reflect:!0,type:Number,attribute:"side-offset"})],E.prototype,"sideOffset",void 0),t([h({reflect:!0,type:Number,attribute:"align-offset"})],E.prototype,"alignOffset",void 0),t([v("id")],E.prototype,"handleIdChange",null),t([v("state")],E.prototype,"handleStateChange",null),E=x=t([p("nord-tooltip")],E);var C=E;export{C as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as i,l as e,o,f as s,s as n}from"./positioning-D-K8Mueq.js";import{css as r,LitElement as a,html as l}from"lit";import{state as h,property as d,customElement as p}from"lit/decorators.js";import{E as c}from"./EventController-BBOmvfLa.js";import{S as u}from"./SlotController-Z6eG7LSZ.js";import{o as v}from"./observe-D0n0zOfU.js";import{t as f}from"./events-Bv6wNHwJ.js";import{f as m}from"./fsm-Bq5jMQrK.js";import{s as y}from"./Component-BJ5O5n8k.js";function b(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function g(t,i,e){t.setAttribute(i,e.join(" "))}const x=r`:host{--_n-tooltip-max-size:var(--n-tooltip-max-size,50ch);--_n-tooltip-background:#141414f2;--_n-tooltip-color:#fff;--_n-tooltip-key-border:#ffffff08;--_n-tooltip-key-background:#ffffff1a;background:none;block-size:auto;border:none;color:inherit;inline-size:auto;inset:auto;margin:0;opacity:0;overflow:visible;padding:0;pointer-events:none;position:fixed;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transition-timing-function:ease;visibility:hidden;z-index:var(--n-index-popout)}.n-tooltip{background-color:var(--_n-tooltip-background);border-radius:var(--n-border-radius-s);color:var(--_n-tooltip-color);font-family:var(--n-font-family);font-size:var(--n-font-size-xs);gap:var(--n-space-s);line-height:var(--n-line-height);max-inline-size:var(--_n-tooltip-max-size);padding:calc(var(--n-space-s)/1.5) var(--n-space-s);word-break:break-word}.n-tooltip,.n-tooltip-shortcut{align-items:center;display:flex}.n-tooltip-shortcut{gap:2px}::slotted([slot=shortcut]){background-color:var(--_n-tooltip-key-background);block-size:var(--n-size-icon-m);border:1px solid var(--_n-tooltip-key-border)!important;border-radius:var(--n-border-radius-s);box-sizing:border-box;font-size:var(--n-font-size-xs);inline-size:var(--n-size-icon-m);letter-spacing:-.5px;line-height:var(--n-line-height-tight);margin:0;padding:1px!important;text-align:center;vertical-align:middle!important}[slot=shortcut]::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;var k;function w(t){return t.nodeType===Node.ELEMENT_NODE}function z(t){var i;const e=null===(i=null==t?void 0:t.focusableRef)||void 0===i?void 0:i.value;return e&&"focusableRef"in e?z(e):e}const{transition:E}=m({hidden:{show:"waiting"},visible:{hide:"hidden",reposition:"positioning",show:"positioning"},waiting:{timeout:"positioning",hide:"hidden"},positioning:{positioned:"visible",hide:"hidden"}});let T=k=class extends a{constructor(){super(...arguments),this.shortcutSlot=new u(this,"shortcut"),this.events=new c(this),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.open=!1,this.sideOffset=8,this.alignOffset=0,this.updatePosition=t=>i(t,this,{strategy:"fixed",placement:e(this.position),middleware:[o({mainAxis:this.sideOffset,alignmentAxis:this.alignOffset}),s(),n({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=E(this.state,"positioned")})),this.hideTooltip=()=>{this.state=E(this.state,"hide")},this.reposition=()=>{this.state=E(this.state,"reposition")},this.handleShow=t=>{const i=function(t,i){return i.id&&w(t)?t.closest(`[aria-describedby~="${CSS.escape(i.id)}"]`):null}(t.target,this);i&&(this.currentElement=i,this.state=E(this.state,"show"))},this.handleHide=t=>{const i=t.target;this.currentElement&&w(i)&&this.currentElement.contains(i)&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{const t=z(this.currentElement);t&&this.proxy&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,t.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const o=b(t,i);o.includes(e)||g(t,i,o.concat(e))}(t,"aria-describedby",this.id))},this.removeDescribedBy=()=>{const t=z(this.currentElement);t&&this.proxy&&(this.proxy.remove(),function(t,i,e){const o=b(t,i);o.includes(e)&&g(t,i,o.filter((t=>t!==e)))}(t,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback(),this.proxy=document.createElement("span");const t=this.getRootNode();this.events.listen(t,"keydown",this.hideOnEscape),this.events.listen(t,"mouseover",this.handleShow),this.events.listen(t,"focusin",this.handleShow),this.events.listen(t,"mouseout",this.handleHide),this.events.listen(t,"focusout",this.handleHide),this.events.listen(t,"click",this.handleHide,{capture:!0}),this.events.listen(window,"resize",this.reposition,{passive:!0}),this.events.listen(window,"scroll",this.reposition,{passive:!0})}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.proxy)||void 0===t||t.remove(),this.proxy=void 0,this.leaveTopLayer()}render(){return l`<div class="n-tooltip"><slot></slot><div class="n-tooltip-shortcut" ?hidden="${this.shortcutSlot.isEmpty}"><slot class="n-tooltip-key" name="shortcut"></slot></div></div>`}handleIdChange(){this.id||console.warn("NORD: The tooltip requires an id attribute and value")}handleStateChange(t){var i;switch(this.state){case"hidden":"waiting"===t&&this.timeoutId&&clearTimeout(this.timeoutId),this.removeDescribedBy(),this.currentElement=void 0,this.style.visibility="hidden",this.style.opacity="0",this.open=!1,"visible"===t&&this.hasAttribute("popover")?f(this).then((()=>{"hidden"===this.state&&this.leaveTopLayer()})):this.leaveTopLayer();break;case"visible":{this.timeoutId=void 0,k.lastOpened=this,this.addDescribedBy();const[t,i]=this.coords;this.style.left=`${t}px`,this.style.top=`${i}px`,this.style.visibility="visible",this.style.opacity="1",this.open=!0;break}case"waiting":this.timeoutId=setTimeout((()=>{this.state=E(this.state,"timeout")}),this.delay);break;case"positioning":k.lastOpened!==this&&(null===(i=k.lastOpened)||void 0===i||i.hideTooltip()),this.enterTopLayer(),this.currentElement&&this.updatePosition(this.currentElement)}}enterTopLayer(){if("function"==typeof this.showPopover)try{this.setAttribute("popover","manual"),this.showPopover()}catch(t){this.removeAttribute("popover")}}leaveTopLayer(){this.removeAttribute("popover")}};T.styles=[y,x],t([h()],T.prototype,"state",void 0),t([d({reflect:!0})],T.prototype,"position",void 0),t([d({reflect:!0})],T.prototype,"role",void 0),t([d({reflect:!0})],T.prototype,"id",void 0),t([d({reflect:!0,type:Number})],T.prototype,"delay",void 0),t([d({type:Boolean,reflect:!0})],T.prototype,"open",void 0),t([d({reflect:!0,type:Number,attribute:"side-offset"})],T.prototype,"sideOffset",void 0),t([d({reflect:!0,type:Number,attribute:"align-offset"})],T.prototype,"alignOffset",void 0),t([v("id")],T.prototype,"handleIdChange",null),t([v("state")],T.prototype,"handleStateChange",null),T=k=t([p("nord-tooltip")],T);var C=T;export{C as default};
 //# sourceMappingURL=Tooltip.js.map

package/lib/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../src/common/attribute.ts","../src/tooltip/Tooltip.ts"],"sourcesContent":["function getTokens(element: Element, attr: string) {\n  const value = element.getAttribute(attr)\n  return value ? value.split(/\\s+/) : []\n}\n\nfunction setTokens(element: Element, attr: string, tokens: string[]) {\n  element.setAttribute(attr, tokens.join(' '))\n}\n\n/**\n * Carefully adds a token to a space-separated attribute\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add\n */\nexport function add(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (!tokens.includes(token)) {\n    setTokens(element, attr, tokens.concat(token))\n  }\n}\n\n/**\n * Carefully removes a token from a space-separated attribute.\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove\n */\nexport function remove(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (tokens.includes(token)) {\n    setTokens(\n      element,\n      attr,\n      tokens.filter(t => t !== token),\n    )\n  }\n}\n","import type { States } from '../common/fsm.js'\nimport type { FocusableMixinInterface } from '../common/mixins/FocusableMixin.js'\nimport { computePosition, flip, offset, shift } from '@floating-ui/dom'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport * as attr from '../common/attribute.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { fsm } from '../common/fsm.js'\nimport { logicalToPhysical } from '../common/positioning.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Tooltip.css'\n\n// @ts-expect-error we're being naughty and accessing a protected field!\n// however this means we always get the correct types,\n// and it will ensure this file is not forgotten about if focusable mixin ever changes\ntype FocusableElement = HTMLElement & Pick<FocusableMixinInterface, 'focusableRef'>\n\nfunction isElement(el: Node): el is Element {\n  return el.nodeType === Node.ELEMENT_NODE\n}\n\nfunction referencesTooltip(node: Node, tooltip: Tooltip): Element | null {\n  if (!tooltip.id || !isElement(node))\n    return null\n\n  // Walk up so hovering a descendant (icon, span, etc.) still resolves to\n  // the ancestor that carries aria-describedby.\n  return node.closest(`[aria-describedby~=\"${CSS.escape(tooltip.id)}\"]`)\n}\n\nfunction getFocusable(el?: FocusableElement): HTMLElement | undefined {\n  const focusable = el?.focusableRef?.value as HTMLElement | FocusableElement | undefined\n\n  if (focusable && 'focusableRef' in focusable) {\n    return getFocusable(focusable)\n  }\n\n  return focusable\n}\n\nconst { transition } = fsm({\n  hidden: {\n    show: 'waiting',\n  },\n  visible: {\n    hide: 'hidden',\n    reposition: 'positioning',\n    show: 'positioning',\n  },\n  waiting: {\n    timeout: 'positioning',\n    hide: 'hidden',\n  },\n  positioning: {\n    positioned: 'visible',\n    hide: 'hidden',\n  },\n})\n\ntype TooltipStates = States<typeof transition>\n\n/**\n * Tooltips are floating containers for displaying additional information\n * for the currently focused element. A tooltip can be useful when you want\n * to e.g. give a hint about an existing Command Menu shortcut.\n *\n * @status ready\n * @category overlay\n * @slot - The tooltip content\n * @slot shortcut - Optional slot that holds shortcut keys to access the subject\n * @cssprop [--n-tooltip-max-size=50ch] - Controls the maximum inline size, or width, of the tooltip.\n */\n@customElement('nord-tooltip')\nexport default class Tooltip extends LitElement {\n  static styles = [componentStyle, style]\n\n  // tracks the last tooltip opened, so we can enforce only one is ever open at a time\n  private static lastOpened?: Tooltip\n\n  private shortcutSlot = new SlotController(this, 'shortcut')\n  private events = new EventController(this)\n\n  // The current element which revealed the tooltip shown\n  private currentElement?: FocusableElement\n  private timeoutId?: ReturnType<typeof setTimeout>\n\n  /**\n   * the proxy element is for cases where the targetElement is a web component,\n   * and the WC has a focusable child in its shadow root e.g. a button component.\n   * in this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\n   * and wire up aria-describedby from the focusable element to the proxy.\n   * when the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship.\n   */\n  private proxy?: HTMLSpanElement\n\n  /**\n   * The current state of the tooltip, dependent on the state machine\n   */\n  @state() private state: TooltipStates = 'hidden'\n\n  // The current coordinates for the tooltip\n  private coords: [number, number] = [0, 0]\n\n  /**\n   * Control the position of the tooltip component.\n   * When set to \"none\", the tooltip will be shown above\n   * but accommodate for browser boundaries.\n   */\n  @property({ reflect: true }) position: 'block-end' | 'block-start' | 'inline-start' | 'inline-end' = 'block-start'\n\n  /**\n   * The tooltip role, set on the component by default.\n   */\n\n  @property({ reflect: true }) role = 'tooltip'\n\n  /**\n   * The id for the active element to reference via aria-describedby.\n   */\n\n  @property({ reflect: true }) id: string = ''\n\n  /**\n   * The delay in milliseconds before the tooltip is opened.\n   */\n  @property({ reflect: true, type: Number }) delay: number = 500\n\n  /**\n   * Indicates whether the tooltip is currently open.\n   */\n  @property({ type: Boolean, reflect: true }) open: boolean = false\n\n  /**\n   * Distance in pixels from the trigger along the main axis — the gap between\n   * the tooltip and the side it opens against. Fed into Floating UI's `offset`\n   * middleware as `mainAxis`. Defaults to `8`.\n   */\n  @property({ reflect: true, type: Number, attribute: 'side-offset' }) sideOffset: number = 8\n\n  /**\n   * Offset in pixels along the alignment axis — skids the tooltip along the\n   * trigger's edge. Fed into Floating UI's `offset` middleware as\n   * `alignmentAxis`. Defaults to `0`.\n   */\n  @property({ reflect: true, type: Number, attribute: 'align-offset' }) alignOffset: number = 0\n\n  /**\n   * Apply all event listeners\n   */\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.proxy = document.createElement('span')\n\n    const rootNode = this.getRootNode() as Document\n\n    this.events.listen(rootNode, 'keydown', this.hideOnEscape)\n\n    // we treat mouseover and focusin the same, since they both show tooltip\n    this.events.listen(rootNode, 'mouseover', this.handleShow)\n    this.events.listen(rootNode, 'focusin', this.handleShow)\n\n    // we treat focusout, mouseout, click the same, since they all hide tooltip\n    this.events.listen(rootNode, 'mouseout', this.handleHide)\n    this.events.listen(rootNode, 'focusout', this.handleHide)\n    // we use event capture here to handle cases where e.g. a close button causes its ancestor to be removed from the DOM.\n    // in this case the click event will never bubble up to the rootNode, so we never receive it, and the tooltip can remain open\n    // by capturing, we get this event first, and can close the tooltip eagerly\n    this.events.listen(rootNode, 'click', this.handleHide, { capture: true })\n\n    this.events.listen(window, 'resize', this.reposition, { passive: true })\n    this.events.listen(window, 'scroll', this.reposition, { passive: true })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.proxy?.remove()\n    this.proxy = undefined\n  }\n\n  render() {\n    return html`\n      <div class=\"n-tooltip\">\n        <slot></slot>\n        <div class=\"n-tooltip-shortcut\" ?hidden=${this.shortcutSlot.isEmpty}>\n          <slot class=\"n-tooltip-key\" name=\"shortcut\"></slot>\n        </div>\n      </div>\n    `\n  }\n\n  @observe('id')\n  protected handleIdChange() {\n    if (!this.id) {\n      console.warn('NORD: The tooltip requires an id attribute and value')\n    }\n  }\n\n  @observe('state')\n  private handleStateChange(prevState: TooltipStates) {\n    switch (this.state) {\n      case 'hidden': {\n        if (prevState === 'waiting' && this.timeoutId) {\n          clearTimeout(this.timeoutId)\n        }\n\n        this.removeDescribedBy()\n        this.currentElement = undefined\n        this.style.visibility = 'hidden'\n        this.style.opacity = '0'\n        this.open = false\n        this.leaveTopLayer()\n        break\n      }\n\n      case 'visible': {\n        this.timeoutId = undefined\n        Tooltip.lastOpened = this\n        this.addDescribedBy()\n\n        const [x, y] = this.coords\n\n        // use physical properties here since floating-ui\n        // works exclusively in physical dimensions\n        // we do all the mapping in logicalToPhysical.\n        this.style.left = `${x}px`\n        this.style.top = `${y}px`\n        this.style.visibility = 'visible'\n        this.style.opacity = '1'\n        this.open = true\n        break\n      }\n\n      case 'waiting': {\n        this.timeoutId = setTimeout(() => {\n          this.state = transition(this.state, 'timeout')\n        }, this.delay)\n        break\n      }\n\n      case 'positioning': {\n        if (Tooltip.lastOpened !== this) {\n          Tooltip.lastOpened?.hideTooltip()\n        }\n\n        this.enterTopLayer()\n        if (this.currentElement) {\n          this.updatePosition(this.currentElement)\n        }\n        break\n      }\n    }\n  }\n\n  /**\n   * Setting and updating the position of the tooltip\n   */\n  private updatePosition = (currentElement: HTMLElement) =>\n    computePosition(currentElement, this, {\n      strategy: 'fixed',\n      placement: logicalToPhysical(this.position),\n      middleware: [\n        offset({ mainAxis: this.sideOffset, alignmentAxis: this.alignOffset }),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n      ],\n    }).then(({ x, y }) => {\n      this.coords = [x, y]\n      this.state = transition(this.state, 'positioned')\n    })\n\n  private hideTooltip = () => {\n    this.state = transition(this.state, 'hide')\n  }\n\n  private reposition = () => {\n    this.state = transition(this.state, 'reposition')\n  }\n\n  private handleShow = (e: Event) => {\n    const node = e.target as Node\n    const reference = referencesTooltip(node, this) as FocusableElement | null\n\n    if (reference) {\n      this.currentElement = reference\n      this.state = transition(this.state, 'show')\n    }\n  }\n\n  private handleHide = (e: Event) => {\n    const node = e.target as Node\n    if (this.currentElement && isElement(node) && this.currentElement.contains(node)) {\n      this.hideTooltip()\n    }\n  }\n\n  private hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this.hideTooltip()\n    }\n  }\n\n  private addDescribedBy = () => {\n    const focusable = getFocusable(this.currentElement)\n\n    if (focusable && this.proxy) {\n      this.proxy.hidden = true\n      this.proxy.id = this.id\n      this.proxy.textContent = this.textContent\n\n      focusable.insertAdjacentElement('afterend', this.proxy)\n      attr.add(focusable, 'aria-describedby', this.id)\n    }\n  }\n\n  /**\n   * Place the element in the top layer via the Popover API so that\n   * position: fixed works relative to the viewport regardless of\n   * `overflow: hidden|auto` or `contain` on any ancestor.\n   */\n  private enterTopLayer() {\n    if (typeof this.showPopover !== 'function')\n      return\n\n    try {\n      this.setAttribute('popover', 'manual')\n      this.showPopover()\n    }\n    catch {\n      this.removeAttribute('popover')\n    }\n  }\n\n  private leaveTopLayer() {\n    this.removeAttribute('popover')\n  }\n\n  private removeDescribedBy = () => {\n    const focusable = getFocusable(this.currentElement)\n\n    if (focusable && this.proxy) {\n      this.proxy.remove()\n      attr.remove(focusable, 'aria-describedby', this.id)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tooltip': Tooltip\n  }\n}\n"],"names":["getTokens","element","attr","value","getAttribute","split","setTokens","tokens","setAttribute","join","isElement","el","nodeType","Node","ELEMENT_NODE","getFocusable","focusable","_a","focusableRef","transition","fsm","hidden","show","visible","hide","reposition","waiting","timeout","positioning","positioned","Tooltip","Tooltip_1","LitElement","constructor","this","shortcutSlot","SlotController","events","EventController","state","coords","position","role","id","delay","open","sideOffset","alignOffset","updatePosition","currentElement","computePosition","strategy","placement","logicalToPhysical","middleware","offset","mainAxis","alignmentAxis","flip","shift","padding","then","x","y","hideTooltip","handleShow","e","reference","node","tooltip","closest","CSS","escape","referencesTooltip","target","handleHide","contains","hideOnEscape","key","addDescribedBy","proxy","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","document","createElement","rootNode","getRootNode","listen","capture","window","passive","disconnectedCallback","undefined","render","html","isEmpty","handleIdChange","console","warn","handleStateChange","prevState","timeoutId","clearTimeout","style","visibility","opacity","leaveTopLayer","lastOpened","left","top","setTimeout","enterTopLayer","showPopover","removeAttribute","styles","componentStyle","__decorate","prototype","property","reflect","type","Number","Boolean","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../src/common/attribute.ts","../src/tooltip/Tooltip.ts"],"sourcesContent":["function getTokens(element: Element, attr: string) {\n  const value = element.getAttribute(attr)\n  return value ? value.split(/\\s+/) : []\n}\n\nfunction setTokens(element: Element, attr: string, tokens: string[]) {\n  element.setAttribute(attr, tokens.join(' '))\n}\n\n/**\n * Carefully adds a token to a space-separated attribute\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add\n */\nexport function add(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (!tokens.includes(token)) {\n    setTokens(element, attr, tokens.concat(token))\n  }\n}\n\n/**\n * Carefully removes a token from a space-separated attribute.\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove\n */\nexport function remove(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (tokens.includes(token)) {\n    setTokens(\n      element,\n      attr,\n      tokens.filter(t => t !== token),\n    )\n  }\n}\n","import type { States } from '../common/fsm.js'\nimport type { FocusableMixinInterface } from '../common/mixins/FocusableMixin.js'\nimport { computePosition, flip, offset, shift } from '@floating-ui/dom'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport * as attr from '../common/attribute.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { transition as awaitTransition } from '../common/events.js'\nimport { fsm } from '../common/fsm.js'\nimport { logicalToPhysical } from '../common/positioning.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Tooltip.css'\n\n// @ts-expect-error we're being naughty and accessing a protected field!\n// however this means we always get the correct types,\n// and it will ensure this file is not forgotten about if focusable mixin ever changes\ntype FocusableElement = HTMLElement & Pick<FocusableMixinInterface, 'focusableRef'>\n\nfunction isElement(el: Node): el is Element {\n  return el.nodeType === Node.ELEMENT_NODE\n}\n\nfunction referencesTooltip(node: Node, tooltip: Tooltip): Element | null {\n  if (!tooltip.id || !isElement(node))\n    return null\n\n  // Walk up so hovering a descendant (icon, span, etc.) still resolves to\n  // the ancestor that carries aria-describedby.\n  return node.closest(`[aria-describedby~=\"${CSS.escape(tooltip.id)}\"]`)\n}\n\nfunction getFocusable(el?: FocusableElement): HTMLElement | undefined {\n  const focusable = el?.focusableRef?.value as HTMLElement | FocusableElement | undefined\n\n  if (focusable && 'focusableRef' in focusable) {\n    return getFocusable(focusable)\n  }\n\n  return focusable\n}\n\nconst { transition } = fsm({\n  hidden: {\n    show: 'waiting',\n  },\n  visible: {\n    hide: 'hidden',\n    reposition: 'positioning',\n    show: 'positioning',\n  },\n  waiting: {\n    timeout: 'positioning',\n    hide: 'hidden',\n  },\n  positioning: {\n    positioned: 'visible',\n    hide: 'hidden',\n  },\n})\n\ntype TooltipStates = States<typeof transition>\n\n/**\n * Tooltips are floating containers for displaying additional information\n * for the currently focused element. A tooltip can be useful when you want\n * to e.g. give a hint about an existing Command Menu shortcut.\n *\n * @status ready\n * @category overlay\n * @slot - The tooltip content\n * @slot shortcut - Optional slot that holds shortcut keys to access the subject\n * @cssprop [--n-tooltip-max-size=50ch] - Controls the maximum inline size, or width, of the tooltip.\n */\n@customElement('nord-tooltip')\nexport default class Tooltip extends LitElement {\n  static styles = [componentStyle, style]\n\n  // tracks the last tooltip opened, so we can enforce only one is ever open at a time\n  private static lastOpened?: Tooltip\n\n  private shortcutSlot = new SlotController(this, 'shortcut')\n  private events = new EventController(this)\n\n  // The current element which revealed the tooltip shown\n  private currentElement?: FocusableElement\n  private timeoutId?: ReturnType<typeof setTimeout>\n\n  /**\n   * the proxy element is for cases where the targetElement is a web component,\n   * and the WC has a focusable child in its shadow root e.g. a button component.\n   * in this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\n   * and wire up aria-describedby from the focusable element to the proxy.\n   * when the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship.\n   */\n  private proxy?: HTMLSpanElement\n\n  /**\n   * The current state of the tooltip, dependent on the state machine\n   */\n  @state() private state: TooltipStates = 'hidden'\n\n  // The current coordinates for the tooltip\n  private coords: [number, number] = [0, 0]\n\n  /**\n   * Control the position of the tooltip component.\n   * When set to \"none\", the tooltip will be shown above\n   * but accommodate for browser boundaries.\n   */\n  @property({ reflect: true }) position: 'block-end' | 'block-start' | 'inline-start' | 'inline-end' = 'block-start'\n\n  /**\n   * The tooltip role, set on the component by default.\n   */\n\n  @property({ reflect: true }) role = 'tooltip'\n\n  /**\n   * The id for the active element to reference via aria-describedby.\n   */\n\n  @property({ reflect: true }) id: string = ''\n\n  /**\n   * The delay in milliseconds before the tooltip is opened.\n   */\n  @property({ reflect: true, type: Number }) delay: number = 500\n\n  /**\n   * Indicates whether the tooltip is currently open.\n   */\n  @property({ type: Boolean, reflect: true }) open: boolean = false\n\n  /**\n   * Distance in pixels from the trigger along the main axis — the gap between\n   * the tooltip and the side it opens against. Fed into Floating UI's `offset`\n   * middleware as `mainAxis`. Defaults to `8`.\n   */\n  @property({ reflect: true, type: Number, attribute: 'side-offset' }) sideOffset: number = 8\n\n  /**\n   * Offset in pixels along the alignment axis — skids the tooltip along the\n   * trigger's edge. Fed into Floating UI's `offset` middleware as\n   * `alignmentAxis`. Defaults to `0`.\n   */\n  @property({ reflect: true, type: Number, attribute: 'align-offset' }) alignOffset: number = 0\n\n  /**\n   * Apply all event listeners\n   */\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.proxy = document.createElement('span')\n\n    const rootNode = this.getRootNode() as Document\n\n    this.events.listen(rootNode, 'keydown', this.hideOnEscape)\n\n    // we treat mouseover and focusin the same, since they both show tooltip\n    this.events.listen(rootNode, 'mouseover', this.handleShow)\n    this.events.listen(rootNode, 'focusin', this.handleShow)\n\n    // we treat focusout, mouseout, click the same, since they all hide tooltip\n    this.events.listen(rootNode, 'mouseout', this.handleHide)\n    this.events.listen(rootNode, 'focusout', this.handleHide)\n    // we use event capture here to handle cases where e.g. a close button causes its ancestor to be removed from the DOM.\n    // in this case the click event will never bubble up to the rootNode, so we never receive it, and the tooltip can remain open\n    // by capturing, we get this event first, and can close the tooltip eagerly\n    this.events.listen(rootNode, 'click', this.handleHide, { capture: true })\n\n    this.events.listen(window, 'resize', this.reposition, { passive: true })\n    this.events.listen(window, 'scroll', this.reposition, { passive: true })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.proxy?.remove()\n    this.proxy = undefined\n    // A tooltip removed mid-fade never receives transitionend, so leave the\n    // top layer here to avoid stranding the popover attribute.\n    this.leaveTopLayer()\n  }\n\n  render() {\n    return html`\n      <div class=\"n-tooltip\">\n        <slot></slot>\n        <div class=\"n-tooltip-shortcut\" ?hidden=${this.shortcutSlot.isEmpty}>\n          <slot class=\"n-tooltip-key\" name=\"shortcut\"></slot>\n        </div>\n      </div>\n    `\n  }\n\n  @observe('id')\n  protected handleIdChange() {\n    if (!this.id) {\n      console.warn('NORD: The tooltip requires an id attribute and value')\n    }\n  }\n\n  @observe('state')\n  private handleStateChange(prevState: TooltipStates) {\n    switch (this.state) {\n      case 'hidden': {\n        if (prevState === 'waiting' && this.timeoutId) {\n          clearTimeout(this.timeoutId)\n        }\n\n        this.removeDescribedBy()\n        this.currentElement = undefined\n        this.style.visibility = 'hidden'\n        this.style.opacity = '0'\n        this.open = false\n        // A hide only fades opacity when coming from the fully-visible state.\n        // In that case, stay in the top layer until the fade ends (or is\n        // cancelled) so the tooltip never flashes behind higher-stacked\n        // ancestors like the layout nav rail. Any other path had opacity 0\n        // already, so there is nothing to wait for — leave immediately.\n        if (prevState === 'visible' && this.hasAttribute('popover')) {\n          awaitTransition(this).then(() => {\n            // Ignore a stale resolution if the tooltip was shown again mid-fade.\n            if (this.state === 'hidden') {\n              this.leaveTopLayer()\n            }\n          })\n        }\n        else {\n          this.leaveTopLayer()\n        }\n        break\n      }\n\n      case 'visible': {\n        this.timeoutId = undefined\n        Tooltip.lastOpened = this\n        this.addDescribedBy()\n\n        const [x, y] = this.coords\n\n        // use physical properties here since floating-ui\n        // works exclusively in physical dimensions\n        // we do all the mapping in logicalToPhysical.\n        this.style.left = `${x}px`\n        this.style.top = `${y}px`\n        this.style.visibility = 'visible'\n        this.style.opacity = '1'\n        this.open = true\n        break\n      }\n\n      case 'waiting': {\n        this.timeoutId = setTimeout(() => {\n          this.state = transition(this.state, 'timeout')\n        }, this.delay)\n        break\n      }\n\n      case 'positioning': {\n        if (Tooltip.lastOpened !== this) {\n          Tooltip.lastOpened?.hideTooltip()\n        }\n\n        this.enterTopLayer()\n        if (this.currentElement) {\n          this.updatePosition(this.currentElement)\n        }\n        break\n      }\n    }\n  }\n\n  /**\n   * Setting and updating the position of the tooltip\n   */\n  private updatePosition = (currentElement: HTMLElement) =>\n    computePosition(currentElement, this, {\n      strategy: 'fixed',\n      placement: logicalToPhysical(this.position),\n      middleware: [\n        offset({ mainAxis: this.sideOffset, alignmentAxis: this.alignOffset }),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n      ],\n    }).then(({ x, y }) => {\n      this.coords = [x, y]\n      this.state = transition(this.state, 'positioned')\n    })\n\n  private hideTooltip = () => {\n    this.state = transition(this.state, 'hide')\n  }\n\n  private reposition = () => {\n    this.state = transition(this.state, 'reposition')\n  }\n\n  private handleShow = (e: Event) => {\n    const node = e.target as Node\n    const reference = referencesTooltip(node, this) as FocusableElement | null\n\n    if (reference) {\n      this.currentElement = reference\n      this.state = transition(this.state, 'show')\n    }\n  }\n\n  private handleHide = (e: Event) => {\n    const node = e.target as Node\n    if (this.currentElement && isElement(node) && this.currentElement.contains(node)) {\n      this.hideTooltip()\n    }\n  }\n\n  private hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this.hideTooltip()\n    }\n  }\n\n  private addDescribedBy = () => {\n    const focusable = getFocusable(this.currentElement)\n\n    if (focusable && this.proxy) {\n      this.proxy.hidden = true\n      this.proxy.id = this.id\n      this.proxy.textContent = this.textContent\n\n      focusable.insertAdjacentElement('afterend', this.proxy)\n      attr.add(focusable, 'aria-describedby', this.id)\n    }\n  }\n\n  /**\n   * Place the element in the top layer via the Popover API so that\n   * position: fixed works relative to the viewport regardless of\n   * `overflow: hidden|auto` or `contain` on any ancestor.\n   */\n  private enterTopLayer() {\n    if (typeof this.showPopover !== 'function')\n      return\n\n    try {\n      this.setAttribute('popover', 'manual')\n      this.showPopover()\n    }\n    catch {\n      this.removeAttribute('popover')\n    }\n  }\n\n  private leaveTopLayer() {\n    this.removeAttribute('popover')\n  }\n\n  private removeDescribedBy = () => {\n    const focusable = getFocusable(this.currentElement)\n\n    if (focusable && this.proxy) {\n      this.proxy.remove()\n      attr.remove(focusable, 'aria-describedby', this.id)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tooltip': Tooltip\n  }\n}\n"],"names":["getTokens","element","attr","value","getAttribute","split","setTokens","tokens","setAttribute","join","isElement","el","nodeType","Node","ELEMENT_NODE","getFocusable","focusable","_a","focusableRef","transition","fsm","hidden","show","visible","hide","reposition","waiting","timeout","positioning","positioned","Tooltip","Tooltip_1","LitElement","constructor","this","shortcutSlot","SlotController","events","EventController","state","coords","position","role","id","delay","open","sideOffset","alignOffset","updatePosition","currentElement","computePosition","strategy","placement","logicalToPhysical","middleware","offset","mainAxis","alignmentAxis","flip","shift","padding","then","x","y","hideTooltip","handleShow","e","reference","node","tooltip","closest","CSS","escape","referencesTooltip","target","handleHide","contains","hideOnEscape","key","addDescribedBy","proxy","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","document","createElement","rootNode","getRootNode","listen","capture","window","passive","disconnectedCallback","undefined","leaveTopLayer","render","html","isEmpty","handleIdChange","console","warn","handleStateChange","prevState","timeoutId","clearTimeout","style","visibility","opacity","hasAttribute","awaitTransition","lastOpened","left","top","setTimeout","enterTopLayer","showPopover","removeAttribute","styles","componentStyle","__decorate","prototype","property","reflect","type","Number","Boolean","attribute","observe","customElement"],"mappings":"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"}

package/lib/TopBar.js

@@ -1,2 +1,2 @@
-import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as t,html as r}from"lit";import{customElement as e}from"lit/decorators.js";import{s as a}from"./Component-DSU3Qp0O.js";const i=o`:host{background:var(--n-color-accent-secondary);block-size:var(--n-size-top-bar);display:flex;align-items:center;color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active);padding-inline-start:calc(var(--n-space-m) + var(--_n-header-gutter,0px));padding-inline-end:var(--n-space-s);gap:var(--n-space-xs)}slot{display:block}slot:not([name]){flex:1}slot[name=end]{display:flex;margin-inline-start:auto;align-items:center;gap:1px}::slotted(:is(h1, h2, h3, h4, h5, h6, p, em, span)){color:var(--n-color-text-on-accent)!important;font-size:var(--n-font-size-m)!important;line-height:var(--n-line-height)!important;font-weight:var(--n-font-weight-active)!important;font-style:normal!important}::slotted(:is(nord-avatar, nord-dropdown)){--n-avatar-color:var(--n-color-accent-secondary);--n-avatar-box-shadow:inset 0 0 0 100px rgb(255, 255, 255, 0.2),0 0 0 1px rgb(255, 255, 255, 0.6)}::slotted(nord-input){--n-input-background:rgb(255, 255, 255, 0.15);--n-input-border-color:rgb(255, 255, 255, 0.4);--n-input-placeholder-color:rgb(255, 255, 255, 0.85);--n-input-icon-color:rgb(255, 255, 255, 0.85);--n-input-color:#fff;transition:inline-size var(--n-transition-slowly);inline-size:min(400px,100%)}::slotted(nord-input:hover){--n-input-border-color:rgb(255, 255, 255, 0.4);--n-input-placeholder-color:rgb(255, 255, 255);--n-input-icon-color:rgb(255, 255, 255)}::slotted(nord-input:focus){--n-input-background:var(--n-color-surface);--n-input-border-color:var(--n-color-surface);--n-input-placeholder-color:var(--n-color-text-weaker);--n-input-icon-color:var(--n-color-icon);--n-input-color:var(--n-color-text);--n-input-font-size:var(--n-font-size-l);inline-size:min(745px,100%)}::slotted(nord-dropdown){--n-button-gap:calc(var(--n-space-xs) / 2);--n-button-background-color:transparent;--n-button-toggle-icon-color:rgb(255, 255, 255, 0.85);--n-button-padding-inline:calc(var(--n-space-s) + 2px);--n-button-overflow:visible}::slotted(nord-dropdown:is(:hover, [open], :focus-within)){--n-button-background-color:rgb(255, 255, 255, 0.18)}`;let l=class extends t{render(){return r`<slot></slot><slot name="end"></slot>`}};l.styles=[a,i],l=n([e("nord-top-bar")],l);var s=l;export{s as default};
+import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as t,html as r}from"lit";import{customElement as e}from"lit/decorators.js";import{s as a}from"./Component-BJ5O5n8k.js";const i=o`:host{align-items:center;background:var(--n-color-accent-secondary);block-size:var(--n-size-top-bar);color:var(--n-color-text-on-accent);display:flex;font-weight:var(--n-font-weight-active);gap:var(--n-space-xs);padding-inline-end:var(--n-space-s);padding-inline-start:calc(var(--n-space-m) + var(--_n-header-gutter, 0px))}slot{display:block}slot:not([name]){flex:1}slot[name=end]{align-items:center;display:flex;gap:1px;margin-inline-start:auto}::slotted(:is(h1,h2,h3,h4,h5,h6,p,em,span)){color:var(--n-color-text-on-accent)!important;font-size:var(--n-font-size-m)!important;font-style:normal!important;font-weight:var(--n-font-weight-active)!important;line-height:var(--n-line-height)!important}::slotted(:is(nord-avatar,nord-dropdown)){--n-avatar-color:var(--n-color-accent-secondary);--n-avatar-box-shadow:inset 0 0 0 100px #fff3,0 0 0 1px #fff9}::slotted(nord-input){--n-input-background:#ffffff26;--n-input-border-color:#fff6;--n-input-placeholder-color:#ffffffd9;--n-input-icon-color:#ffffffd9;--n-input-color:#fff;inline-size:min(400px,100%);transition:inline-size var(--n-transition-slowly)}::slotted(nord-input:hover){--n-input-border-color:#fff6;--n-input-placeholder-color:#fff;--n-input-icon-color:#fff}::slotted(nord-input:focus){--n-input-background:var(--n-color-surface);--n-input-border-color:var(--n-color-surface);--n-input-placeholder-color:var(--n-color-text-weaker);--n-input-icon-color:var(--n-color-icon);--n-input-color:var(--n-color-text);--n-input-font-size:var(--n-font-size-l);inline-size:min(745px,100%)}::slotted(nord-dropdown){--n-button-gap:calc(var(--n-space-xs)/2);--n-button-background-color:#0000;--n-button-toggle-icon-color:#ffffffd9;--n-button-padding-inline:calc(var(--n-space-s) + 2px);--n-button-overflow:visible}::slotted(nord-dropdown:is(:hover,[open],:focus-within)){--n-button-background-color:#ffffff2e}`;let l=class extends t{render(){return r`<slot></slot><slot name="end"></slot>`}};l.styles=[a,i],l=n([e("nord-top-bar")],l);var f=l;export{f as default};
 //# sourceMappingURL=TopBar.js.map

package/lib/TopBar.js.map

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

package/lib/Truncate.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as i,isServer as r,html as s}from"lit";import{state as o,property as n,customElement as l}from"lit/decorators.js";import{createRef as a,ref as c}from"lit/directives/ref.js";import"./Tooltip.js";import"./positioning-D-K8Mueq.js";import"./EventController-BBOmvfLa.js";import"./SlotController-Z6eG7LSZ.js";import"./observe-D0n0zOfU.js";import"./fsm-Bq5jMQrK.js";import"./Component-DSU3Qp0O.js";const d=e`:host{display:inline-block;inline-size:100%;max-inline-size:100%;min-inline-size:0;vertical-align:bottom}.n-truncate{display:block;white-space:nowrap;overflow:hidden}:host([line-clamp]) .n-truncate{white-space:normal;max-block-size:calc(var(--_n-truncate-line-clamp,2) * 1lh)}.n-truncate-source{display:none}`;let p=0;let h=class extends i{constructor(){super(...arguments),this.spanRef=a(),this.tooltipId="n-truncate-"+ ++p,this.currentTrigger=null,this.isTruncated=!1,this.text="",this.position="block-start",this.delay=500,this.sideOffset=8,this.alignOffset=0,this.lineClamp=1,this.noTooltip=!1}connectedCallback(){super.connectedCallback(),r||(this.observer=new ResizeObserver((()=>{requestAnimationFrame((()=>this.measure()))})),this.contentObserver=new MutationObserver((()=>{this.captureText(),this.measure()})),this.contentObserver.observe(this,{characterData:!0,childList:!0,subtree:!0}),this.captureText())}firstUpdated(){const t=this.spanRef.value;t&&this.observer&&this.observer.observe(t)}updated(){this.syncTooltip()}disconnectedCallback(){var t,e,i;super.disconnectedCallback(),null===(t=this.observer)||void 0===t||t.disconnect(),this.observer=void 0,null===(e=this.contentObserver)||void 0===e||e.disconnect(),this.contentObserver=void 0,null===(i=this.tooltipElement)||void 0===i||i.remove(),this.tooltipElement=void 0,this.clearTrigger()}captureText(){var t;const e=(null!==(t=this.textContent)&&void 0!==t?t:"").trim();e!==this.text&&(this.text=e)}measure(){const t=this.spanRef.value;if(!t)return;const e=this.text;if(!e)return t.textContent="",void(this.isTruncated=!1);if(t.textContent=e,this.fits(t))return void(this.isTruncated=!1);let i=0,r=e.length;for(;i<r;){const s=Math.ceil((i+r)/2);t.textContent=m(e.slice(0,s))+"…",this.fits(t)?i=s:r=s-1}t.textContent=m(e.slice(0,i))+"…",this.isTruncated=!0}fits(t){return this.lineClamp>1?t.scrollHeight<=t.clientHeight:t.scrollWidth<=t.clientWidth}findTriggerElement(){let t=this;for(;t&&t!==document.body&&t!==document.documentElement;){if("none"!==getComputedStyle(t).pointerEvents)return t;t=t.parentElement}return this}addDescribedById(t,e){const i=t.getAttribute("aria-describedby"),r=i?i.split(/\s+/).filter(Boolean):[];r.includes(e)||(r.push(e),t.setAttribute("aria-describedby",r.join(" ")))}removeDescribedById(t,e){const i=t.getAttribute("aria-describedby");if(!i)return;const r=i.split(/\s+/).filter(Boolean).filter((t=>t!==e));r.length?t.setAttribute("aria-describedby",r.join(" ")):t.removeAttribute("aria-describedby")}clearTrigger(){this.currentTrigger&&(this.removeDescribedById(this.currentTrigger,this.tooltipId),this.currentTrigger=null)}syncTooltip(){var t,e;if(!this.isTruncated||!this.text)return this.removeAttribute("truncated"),null===(t=this.tooltipElement)||void 0===t||t.remove(),this.tooltipElement=void 0,void this.clearTrigger();if(this.setAttribute("truncated",""),this.noTooltip)return null===(e=this.tooltipElement)||void 0===e||e.remove(),this.tooltipElement=void 0,void this.clearTrigger();this.tooltipElement||(this.tooltipElement=document.createElement("nord-tooltip"),this.tooltipElement.id=this.tooltipId,document.body.appendChild(this.tooltipElement)),this.tooltipElement.setAttribute("position",this.position),this.tooltipElement.setAttribute("delay",String(this.delay)),this.tooltipElement.setAttribute("side-offset",String(this.sideOffset)),this.tooltipElement.setAttribute("align-offset",String(this.alignOffset)),this.tooltipElement.textContent=this.text;const i=this.findTriggerElement();i!==this.currentTrigger&&(this.currentTrigger&&this.removeDescribedById(this.currentTrigger,this.tooltipId),this.currentTrigger=i),this.addDescribedById(i,this.tooltipId)}willUpdate(t){t.has("lineClamp")&&(this.lineClamp>1?(this.setAttribute("line-clamp",String(this.lineClamp)),this.style.setProperty("--_n-truncate-line-clamp",String(this.lineClamp))):(this.removeAttribute("line-clamp"),this.style.removeProperty("--_n-truncate-line-clamp")))}render(){return s`<span ${c(this.spanRef)} class="n-truncate"></span><slot class="n-truncate-source" aria-hidden="true"></slot>`}};h.styles=d,t([o()],h.prototype,"isTruncated",void 0),t([o()],h.prototype,"text",void 0),t([n({reflect:!0})],h.prototype,"position",void 0),t([n({reflect:!0,type:Number})],h.prototype,"delay",void 0),t([n({reflect:!0,type:Number,attribute:"side-offset"})],h.prototype,"sideOffset",void 0),t([n({reflect:!0,type:Number,attribute:"align-offset"})],h.prototype,"alignOffset",void 0),t([n({type:Number,attribute:"line-clamp"})],h.prototype,"lineClamp",void 0),t([n({type:Boolean,reflect:!0,attribute:"no-tooltip"})],h.prototype,"noTooltip",void 0),h=t([l("nord-truncate")],h);var u=h;function m(t){return t.replace(/[\s.,;:!?-]+$/u,"")}export{u as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as i,isServer as r,html as s}from"lit";import{state as o,property as n,customElement as l}from"lit/decorators.js";import{createRef as a,ref as c}from"lit/directives/ref.js";import"./Tooltip.js";import"./positioning-D-K8Mueq.js";import"./EventController-BBOmvfLa.js";import"./SlotController-Z6eG7LSZ.js";import"./observe-D0n0zOfU.js";import"./events-Bv6wNHwJ.js";import"./fsm-Bq5jMQrK.js";import"./Component-BJ5O5n8k.js";const p=e`:host{display:inline-block;inline-size:100%;max-inline-size:100%;min-inline-size:0;vertical-align:bottom}.n-truncate{display:block;overflow:hidden;white-space:nowrap}:host([line-clamp]) .n-truncate{max-block-size:calc(var(--_n-truncate-line-clamp, 2)*1lh);white-space:normal}.n-truncate-source{display:none}`;let d=0;let h=class extends i{constructor(){super(...arguments),this.spanRef=a(),this.tooltipId="n-truncate-"+ ++d,this.currentTrigger=null,this.isTruncated=!1,this.text="",this.position="block-start",this.delay=500,this.sideOffset=8,this.alignOffset=0,this.lineClamp=1,this.noTooltip=!1}connectedCallback(){super.connectedCallback(),r||(this.observer=new ResizeObserver((()=>{requestAnimationFrame((()=>this.measure()))})),this.contentObserver=new MutationObserver((()=>{this.captureText(),this.measure()})),this.contentObserver.observe(this,{characterData:!0,childList:!0,subtree:!0}),this.captureText())}firstUpdated(){const t=this.spanRef.value;t&&this.observer&&this.observer.observe(t)}updated(){this.syncTooltip()}disconnectedCallback(){var t,e,i;super.disconnectedCallback(),null===(t=this.observer)||void 0===t||t.disconnect(),this.observer=void 0,null===(e=this.contentObserver)||void 0===e||e.disconnect(),this.contentObserver=void 0,null===(i=this.tooltipElement)||void 0===i||i.remove(),this.tooltipElement=void 0,this.clearTrigger()}captureText(){var t;const e=(null!==(t=this.textContent)&&void 0!==t?t:"").trim();e!==this.text&&(this.text=e)}measure(){const t=this.spanRef.value;if(!t)return;const e=this.text;if(!e)return t.textContent="",void(this.isTruncated=!1);if(t.textContent=e,this.fits(t))return void(this.isTruncated=!1);let i=0,r=e.length;for(;i<r;){const s=Math.ceil((i+r)/2);t.textContent=m(e.slice(0,s))+"…",this.fits(t)?i=s:r=s-1}t.textContent=m(e.slice(0,i))+"…",this.isTruncated=!0}fits(t){return this.lineClamp>1?t.scrollHeight<=t.clientHeight:t.scrollWidth<=t.clientWidth}findTriggerElement(){let t=this;for(;t&&t!==document.body&&t!==document.documentElement;){if("none"!==getComputedStyle(t).pointerEvents)return t;t=t.parentElement}return this}addDescribedById(t,e){const i=t.getAttribute("aria-describedby"),r=i?i.split(/\s+/).filter(Boolean):[];r.includes(e)||(r.push(e),t.setAttribute("aria-describedby",r.join(" ")))}removeDescribedById(t,e){const i=t.getAttribute("aria-describedby");if(!i)return;const r=i.split(/\s+/).filter(Boolean).filter((t=>t!==e));r.length?t.setAttribute("aria-describedby",r.join(" ")):t.removeAttribute("aria-describedby")}clearTrigger(){this.currentTrigger&&(this.removeDescribedById(this.currentTrigger,this.tooltipId),this.currentTrigger=null)}syncTooltip(){var t,e;if(!this.isTruncated||!this.text)return this.removeAttribute("truncated"),null===(t=this.tooltipElement)||void 0===t||t.remove(),this.tooltipElement=void 0,void this.clearTrigger();if(this.setAttribute("truncated",""),this.noTooltip)return null===(e=this.tooltipElement)||void 0===e||e.remove(),this.tooltipElement=void 0,void this.clearTrigger();this.tooltipElement||(this.tooltipElement=document.createElement("nord-tooltip"),this.tooltipElement.id=this.tooltipId,document.body.appendChild(this.tooltipElement)),this.tooltipElement.setAttribute("position",this.position),this.tooltipElement.setAttribute("delay",String(this.delay)),this.tooltipElement.setAttribute("side-offset",String(this.sideOffset)),this.tooltipElement.setAttribute("align-offset",String(this.alignOffset)),this.tooltipElement.textContent=this.text;const i=this.findTriggerElement();i!==this.currentTrigger&&(this.currentTrigger&&this.removeDescribedById(this.currentTrigger,this.tooltipId),this.currentTrigger=i),this.addDescribedById(i,this.tooltipId)}willUpdate(t){t.has("lineClamp")&&(this.lineClamp>1?(this.setAttribute("line-clamp",String(this.lineClamp)),this.style.setProperty("--_n-truncate-line-clamp",String(this.lineClamp))):(this.removeAttribute("line-clamp"),this.style.removeProperty("--_n-truncate-line-clamp")))}render(){return s`<span ${c(this.spanRef)} class="n-truncate"></span><slot class="n-truncate-source" aria-hidden="true"></slot>`}};h.styles=p,t([o()],h.prototype,"isTruncated",void 0),t([o()],h.prototype,"text",void 0),t([n({reflect:!0})],h.prototype,"position",void 0),t([n({reflect:!0,type:Number})],h.prototype,"delay",void 0),t([n({reflect:!0,type:Number,attribute:"side-offset"})],h.prototype,"sideOffset",void 0),t([n({reflect:!0,type:Number,attribute:"align-offset"})],h.prototype,"alignOffset",void 0),t([n({type:Number,attribute:"line-clamp"})],h.prototype,"lineClamp",void 0),t([n({type:Boolean,reflect:!0,attribute:"no-tooltip"})],h.prototype,"noTooltip",void 0),h=t([l("nord-truncate")],h);var u=h;function m(t){return t.replace(/[\s.,;:!?-]+$/u,"")}export{u as default};
 //# sourceMappingURL=Truncate.js.map

package/lib/Truncate.js.map

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

package/lib/VisuallyHidden.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as i,html as r}from"lit";import{customElement as s}from"lit/decorators.js";const e=o`:host{all:initial;border:0!important;clip:rect(1px,1px,1px,1px)!important;block-size:1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;inset-block-start:0;inline-size:1px!important}`;let l=class extends i{render(){return r`<slot></slot>`}};l.styles=e,l=t([s("nord-visually-hidden")],l);var n=l;export{n as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as i,html as r}from"lit";import{customElement as s}from"lit/decorators.js";const e=o`:host{all:initial;border:0!important;clip:rect(1px,1px,1px,1px)!important;block-size:1px!important;inline-size:1px!important;inset-block-start:0;overflow:hidden!important;padding:0!important;position:absolute!important}`;let l=class extends i{render(){return r`<slot></slot>`}};l.styles=e,l=t([s("nord-visually-hidden")],l);var n=l;export{n as default};
 //# sourceMappingURL=VisuallyHidden.js.map

package/lib/VisuallyHidden.js.map

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