@nordhealth/components 1.14.3 → 2.0.0

package/lib/Toast.js

@@ -1,2 +1,2 @@
-import{_ as s,e as o}from"./query-assigned-elements-e6cbac30.js";import{i as t,y as i,s as e}from"./lit-element-79bc2e0e.js";import{o as r}from"./class-map-cd6c8cbd.js";import{e as n}from"./property-03f59dce.js";import{t as a}from"./state-70f38ceb.js";import{i as c}from"./query-2d22378e.js";import{D as d}from"./DraftComponentMixin-9e4b7b34.js";import l from"./Icon.js";import{s as m}from"./Component-49a41387.js";import{N as p}from"./events-731d0007.js";import{E as u}from"./EventController-d99ebeef.js";import{o as f}from"./observe-a9c6dfb6.js";import"./directive-de55b00a.js";import"./if-defined-f43b1487.js";import"./unsafe-html-be8023cd.js";import"./cond-0a8d4554.js";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M133 7 7 133M7 7l126 126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-close",tags:"nordicon interface close cross remove delete erase symbol"});const b=t`:host{--n-toast-color:var(--n-color-surface);--n-toast-background-color:var(--n-color-text)}.n-toast{display:flex;gap:var(--n-space-l);align-items:flex-start;background-color:var(--n-toast-background-color);color:var(--n-toast-color);border-radius:var(--n-border-radius);animation:n-enter var(--n-transition-slowly) forwards 1;z-index:var(--n-index-toast);box-shadow:var(--n-box-shadow-popout)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{from{transform:translateY(50%);opacity:0}}@keyframes n-exit{to{transform:scale(.97);opacity:0}}.n-toast-inner{padding:var(--n-space-m);flex:1}.n-dismiss{--n-toast-focus-ring:0 0 0 2px var(--n-color-accent);border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);position:relative;inset-inline-end:var(--n-space-s);inset-block-start:var(--n-space-s);background-color:transparent;border-radius:var(--n-border-radius);cursor:pointer}.n-dismiss::after,.n-dismiss::before{content:"";position:absolute;display:block;border-radius:var(--n-border-radius)}.n-dismiss::before{inset:0;background:var(--n-toast-color);transition:opacity var(--n-transition-quickly);opacity:0}.n-dismiss:is(:hover,:focus)::before{opacity:.06}.n-dismiss::after{inset:calc(var(--n-space-s) * -1)}.n-dismiss:active{transform:translateY(1px)}.n-dismiss:focus{outline:0;box-shadow:var(--n-toast-focus-ring)}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--n-toast-focus-ring)}}.n-dismiss nord-icon{opacity:.53;transition:opacity var(--n-transition-quickly);color:var(--n-toast-color)}.n-dismiss:is(:hover,:focus) nord-icon{opacity:1}:host([variant=danger]){--n-toast-background-color:var(--n-color-status-danger);--n-toast-color:var(--n-color-text-on-accent)}`;l.registerIcon(v);let h=class extends(d(e)){constructor(){super(...arguments),this.events=new u(this),this.dismissed=!1,this.variant="default",this.autoDismiss=1e4}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.timeoutId)}dismiss(){return this.dismissed=!0,clearTimeout(this.timeoutId),new Promise((s=>{this.events.listen(this.toast,"animationend",(()=>{this.dispatchEvent(new p("dismiss")),s()}),{once:!0})}))}render(){return i`<div class="${r({"n-toast":!0,"n-dismissed":this.dismissed})}"><div class="n-toast-inner"><slot></slot></div><button class="n-dismiss" @click="${this.dismiss}" aria-hidden="true"><nord-icon name="interface-close" size="s"></nord-icon></button></div>`}handleAutoDismissChange(){clearTimeout(this.timeoutId),null!=this.autoDismiss&&this.autoDismiss>=0&&setTimeout((()=>this.dismiss()),this.autoDismiss)}};h.styles=[m,b],s([c(".n-toast",!0)],h.prototype,"toast",void 0),s([a()],h.prototype,"dismissed",void 0),s([n({reflect:!0})],h.prototype,"variant",void 0),s([n({type:Number,attribute:"auto-dismiss"})],h.prototype,"autoDismiss",void 0),s([f("autoDismiss")],h.prototype,"handleAutoDismissChange",null),h=s([o("nord-toast")],h);var y=h;export{y as default};
+import{_ as s,e as o}from"./query-assigned-elements-e6cbac30.js";import{i as t,s as i,y as e}from"./lit-element-79bc2e0e.js";import{o as r}from"./class-map-cd6c8cbd.js";import{e as n}from"./property-03f59dce.js";import{t as a}from"./state-70f38ceb.js";import{i as c}from"./query-2d22378e.js";import d from"./Icon.js";import{s as l}from"./Component-49a41387.js";import{N as m}from"./events-731d0007.js";import{E as u}from"./EventController-d99ebeef.js";import{o as p}from"./observe-a9c6dfb6.js";import"./directive-de55b00a.js";import"./if-defined-f43b1487.js";import"./unsafe-html-be8023cd.js";import"./cond-0a8d4554.js";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M133 7 7 133M7 7l126 126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-close",tags:"nordicon interface close cross remove delete erase symbol"});const f=t`: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)}`;d.registerIcon(v);let b=class extends i{constructor(){super(...arguments),this.events=new u(this),this.dismissed=!1,this.variant="default",this.autoDismiss=1e4}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.timeoutId)}dismiss(){return this.dismissed=!0,clearTimeout(this.timeoutId),new Promise((s=>{this.events.listen(this.toast,"animationend",(()=>{this.dispatchEvent(new m("dismiss")),s()}),{once:!0})}))}render(){return e`<div class="${r({"n-toast":!0,"n-dismissed":this.dismissed})}"><div class="n-toast-inner"><slot></slot></div><button class="n-dismiss" @click="${this.dismiss}" aria-hidden="true"><nord-icon name="interface-close" size="s"></nord-icon></button></div>`}handleAutoDismissChange(){clearTimeout(this.timeoutId),null!=this.autoDismiss&&this.autoDismiss>=0&&setTimeout((()=>this.dismiss()),this.autoDismiss)}};b.styles=[l,f],s([c(".n-toast",!0)],b.prototype,"toast",void 0),s([a()],b.prototype,"dismissed",void 0),s([n({reflect:!0})],b.prototype,"variant",void 0),s([n({type:Number,attribute:"auto-dismiss"})],b.prototype,"autoDismiss",void 0),s([p("autoDismiss")],b.prototype,"handleAutoDismissChange",null),b=s([o("nord-toast")],b);var h=b;export{h 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 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M133 7 7 133M7 7l126 126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"interface-close\"\nexport const tags = \"nordicon interface close cross remove delete erase symbol\"\n","import { LitElement, html } from \"lit\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close.js\"\n\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport Icon from \"../icon/Icon.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Toast.css\"\nimport { NordEvent } from \"../common/events.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\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 draft\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 DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private timeoutId?: ReturnType<typeof setTimeout>\n  private events = new EventController(this)\n\n  @query(\".n-toast\", true) private toast!: HTMLElement\n  @state() private dismissed = false\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({ 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  dismiss() {\n    this.dismissed = true\n    clearTimeout(this.timeoutId)\n\n    return new Promise<void>(resolve => {\n      this.events.listen(\n        this.toast,\n        \"animationend\",\n        () => {\n          this.dispatchEvent(new NordEvent(\"dismiss\"))\n          resolve()\n        },\n        { once: true }\n      )\n    })\n  }\n\n  render() {\n    return html`\n      <div 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","DraftComponentMixin","LitElement","constructor","this","events","EventController","dismissed","variant","autoDismiss","disconnectedCallback","super","clearTimeout","timeoutId","dismiss","Promise","resolve","listen","toast","dispatchEvent","NordEvent","once","render","html","classMap","handleAutoDismissChange","setTimeout","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","Number","attribute","observe","customElement"],"mappings":"8sBAAe,oNACM,uBACD,q1DCWpBA,EAAKC,aAAaC,GAYlB,IAAqBC,EAArB,cAAmCC,EAAoBC,IAAvDC,kCAIUC,KAAAC,OAAS,IAAIC,EAAgBF,MAGpBA,KAASG,WAAG,EAKAH,KAAOI,QAAyB,UAKNJ,KAAWK,YAAI,GAkDvE,CAhDCC,uBACEC,MAAMD,uBACNE,aAAaR,KAAKS,UACnB,CAMDC,UAIE,OAHAV,KAAKG,WAAY,EACjBK,aAAaR,KAAKS,WAEX,IAAIE,SAAcC,IACvBZ,KAAKC,OAAOY,OACVb,KAAKc,MACL,gBACA,KACEd,KAAKe,cAAc,IAAIC,EAAU,YACjCJ,GAAS,GAEX,CAAEK,MAAM,GACT,GAEJ,CAEDC,SACE,OAAOC,CAAI,eACIC,EAAS,CAAE,WAAW,EAAM,cAAepB,KAAKG,gGAKxBH,KAAKU,oGAK7C,CAGSW,0BACRb,aAAaR,KAAKS,WAEM,MAApBT,KAAKK,aAAuBL,KAAKK,aAAe,GAClDiB,YAAW,IAAMtB,KAAKU,WAAWV,KAAKK,YAEzC,GAjEMT,EAAA2B,OAAS,CAACC,EAAgBC,GAKRC,EAAA,CAAxBC,EAAM,YAAY,IAAiC/B,EAAAgC,UAAA,aAAA,GAC3CF,EAAA,CAARG,KAAiCjC,EAAAgC,UAAA,iBAAA,GAKLF,EAAA,CAA5BI,EAAS,CAAEC,SAAS,KAAiDnC,EAAAgC,UAAA,eAAA,GAKfF,EAAA,CAAtDI,EAAS,CAAEE,KAAMC,OAAQC,UAAW,kBAAsCtC,EAAAgC,UAAA,mBAAA,GA2C3EF,EAAA,CADCS,EAAQ,gBAORvC,EAAAgC,UAAA,0BAAA,MAlEkBhC,EAAK8B,EAAA,CADzBU,EAAc,eACMxC,SAAAA"}
+{"version":3,"file":"Toast.js","sources":["../../icons/lib/assets/interface-close.js","../src/toast/Toast.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M133 7 7 133M7 7l126 126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"interface-close\"\nexport const tags = \"nordicon interface close cross remove delete erase symbol\"\n","import { LitElement, html } from \"lit\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Toast.css\"\nimport { NordEvent } from \"../common/events.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\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 new\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 LitElement {\n  static styles = [componentStyle, style]\n\n  private timeoutId?: ReturnType<typeof setTimeout>\n  private events = new EventController(this)\n\n  @query(\".n-toast\", true) private toast!: HTMLElement\n  @state() private dismissed = false\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({ 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  dismiss() {\n    this.dismissed = true\n    clearTimeout(this.timeoutId)\n\n    return new Promise<void>(resolve => {\n      this.events.listen(\n        this.toast,\n        \"animationend\",\n        () => {\n          this.dispatchEvent(new NordEvent(\"dismiss\"))\n          resolve()\n        },\n        { once: true }\n      )\n    })\n  }\n\n  render() {\n    return html`\n      <div 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","LitElement","constructor","this","events","EventController","dismissed","variant","autoDismiss","disconnectedCallback","super","clearTimeout","timeoutId","dismiss","Promise","resolve","listen","toast","dispatchEvent","NordEvent","once","render","html","classMap","handleAutoDismissChange","setTimeout","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","Number","attribute","observe","customElement"],"mappings":"wpBAAe,oNACM,uBACD,g2DCUpBA,EAAKC,aAAaC,GAYlB,IAAqBC,EAArB,cAAmCC,EAAnCC,kCAIUC,KAAAC,OAAS,IAAIC,EAAgBF,MAGpBA,KAASG,WAAG,EAKAH,KAAOI,QAAyB,UAKNJ,KAAWK,YAAI,GAkDvE,CAhDCC,uBACEC,MAAMD,uBACNE,aAAaR,KAAKS,UACnB,CAMDC,UAIE,OAHAV,KAAKG,WAAY,EACjBK,aAAaR,KAAKS,WAEX,IAAIE,SAAcC,IACvBZ,KAAKC,OAAOY,OACVb,KAAKc,MACL,gBACA,KACEd,KAAKe,cAAc,IAAIC,EAAU,YACjCJ,GAAS,GAEX,CAAEK,MAAM,GACT,GAEJ,CAEDC,SACE,OAAOC,CAAI,eACIC,EAAS,CAAE,WAAW,EAAM,cAAepB,KAAKG,gGAKxBH,KAAKU,oGAK7C,CAGSW,0BACRb,aAAaR,KAAKS,WAEM,MAApBT,KAAKK,aAAuBL,KAAKK,aAAe,GAClDiB,YAAW,IAAMtB,KAAKU,WAAWV,KAAKK,YAEzC,GAjEMR,EAAA0B,OAAS,CAACC,EAAgBC,GAKRC,EAAA,CAAxBC,EAAM,YAAY,IAAiC9B,EAAA+B,UAAA,aAAA,GAC3CF,EAAA,CAARG,KAAiChC,EAAA+B,UAAA,iBAAA,GAKLF,EAAA,CAA5BI,EAAS,CAAEC,SAAS,KAAiDlC,EAAA+B,UAAA,eAAA,GAKfF,EAAA,CAAtDI,EAAS,CAAEE,KAAMC,OAAQC,UAAW,kBAAsCrC,EAAA+B,UAAA,mBAAA,GA2C3EF,EAAA,CADCS,EAAQ,gBAORtC,EAAA+B,UAAA,0BAAA,MAlEkB/B,EAAK6B,EAAA,CADzBU,EAAc,eACMvC,SAAAA"}

package/lib/ToastGroup.js

@@ -1,2 +1,2 @@
-import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i as n,y as s,s as o}from"./lit-element-79bc2e0e.js";import{D as a}from"./DraftComponentMixin-9e4b7b34.js";import{s as i}from"./Component-49a41387.js";const r=n`.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 l=class extends(a(o)){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}};l.styles=[i,r],l=t([e("nord-toast-group")],l);var d=l;export{d as default};
+import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i as n,s,y as a}from"./lit-element-79bc2e0e.js";import{s as o}from"./Component-49a41387.js";const i=n`.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 s{render(){return a`<div class="n-toast-group" role="log" aria-relevant="additions"><slot></slot></div>`}addToast(t,e={}){const{variant:n,autoDismiss:s}=e,a=document.createElement("nord-toast");return n&&(a.variant=n),null!=s&&(a.autoDismiss=s),a.textContent=t,this.appendChild(a),a}};r.styles=[o,i],r=t([e("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 { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport Toast from \"../toast/Toast.js\"\nimport style from \"./ToastGroup.css\"\n\ntype ToastOptions = Partial<Pick<Toast, \"variant\" | \"autoDismiss\">>\n\n/**\n * Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.\n *\n * @status draft\n * @category feedback\n * @slot - Default slot in which to place toasts.\n */\n@customElement(\"nord-toast-group\")\nexport default class ToastGroup extends DraftComponentMixin(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 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","DraftComponentMixin","LitElement","render","html","addToast","text","options","variant","autoDismiss","toast","document","createElement","textContent","this","appendChild","styles","componentStyle","style","__decorate","customElement"],"mappings":"+jBAkBA,IAAqBA,EAArB,cAAwCC,EAAoBC,IAG1DC,SACE,OAAOC,CAAI,qFAKZ,CAQDC,SAASC,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,GAhCMV,EAAAgB,OAAS,CAACC,EAAgBC,GADdlB,EAAUmB,EAAA,CAD9BC,EAAc,qBACMpB,SAAAA"}
+{"version":3,"file":"ToastGroup.js","sources":["../src/toast-group/ToastGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport Toast from \"../toast/Toast.js\"\nimport style from \"./ToastGroup.css\"\n\ntype ToastOptions = Partial<Pick<Toast, \"variant\" | \"autoDismiss\">>\n\n/**\n * Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.\n *\n * @status new\n * @category feedback\n * @slot - Default slot in which to place toasts.\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 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":"ogBAiBA,IAAqBA,EAArB,cAAwCC,EAGtCC,SACE,OAAOC,CAAI,qFAKZ,CAQDC,SAASC,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"}

package/lib/Toggle.js

@@ -1,2 +1,2 @@
-import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i,y as r,s as t}from"./lit-element-79bc2e0e.js";import{e as o}from"./property-03f59dce.js";import{l as s}from"./if-defined-f43b1487.js";import{n as a}from"./ref-697b28b5.js";import{F as l}from"./FocusableMixin-99db12c1.js";import{F as c}from"./FormAssociatedMixin-f6e5b3cd.js";import{I as d}from"./InputMixin-158f63fb.js";import{s as g}from"./Component-49a41387.js";import{s as p}from"./FormField-72062bf1.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const h=i`:host{display:inline-block;font-size:var(--n-font-size-m);--n-toggle-inline-size:3.2143em;--n-toggle-block-size:calc(var(--n-toggle-inline-size) / 1.6);--n-toggle-thumb-margin:0.35em}.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{-webkit-appearance:none;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-text-link)}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{opacity:.3;cursor:not-allowed}.n-label-container{padding-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}: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(c(d(l(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=r`<div class="n-expand">${this.renderLabel()} ${this.renderError()}</div>`,n=r`<div class="n-input-container"><input ${a(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${s(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" @change="${this.handleChange}"></div>`;return r`<div class="n-flex">${this.reverse?[e,n]:[n,e]}</div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};v.styles=[g,p,h],e([o({type:Boolean})],v.prototype,"checked",void 0),e([o({type:Boolean})],v.prototype,"reverse",void 0),e([o({reflect:!0})],v.prototype,"size",void 0),v=e([n("nord-toggle")],v);var b=v;export{b as default};
+import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i,y as r,s as t}from"./lit-element-79bc2e0e.js";import{e as o}from"./property-03f59dce.js";import{l as s}from"./if-defined-f43b1487.js";import{n as a}from"./ref-697b28b5.js";import{F as l}from"./FocusableMixin-99db12c1.js";import{F as c}from"./FormAssociatedMixin-f6e5b3cd.js";import{I as d}from"./InputMixin-158f63fb.js";import{s as g}from"./Component-49a41387.js";import{s as p}from"./FormField-72062bf1.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const h=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-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{-webkit-appearance:none;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-text-link)}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{opacity:.3;cursor:not-allowed}.n-label-container{padding-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}: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(c(d(l(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=r`<div class="n-expand">${this.renderLabel()} ${this.renderError()}</div>`,n=r`<div class="n-input-container"><input ${a(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${s(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" @change="${this.handleChange}"></div>`;return r`<div class="n-flex">${this.reverse?[e,n]:[n,e]}</div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};v.styles=[g,p,h],e([o({type:Boolean})],v.prototype,"checked",void 0),e([o({type:Boolean})],v.prototype,"reverse",void 0),e([o({reflect:!0})],v.prototype,"size",void 0),v=e([n("nord-toggle")],v);var b=v;export{b 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 } 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 new\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-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({ 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({ 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`<div class=\"n-expand\">${this.renderLabel()} ${this.renderError()}</div>`\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`<div class=\"n-flex\">${this.reverse ? [label, input] : [input, label]}</div>`\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","renderError","input","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","prototype","reflect","customElement"],"mappings":"0yFA0BA,IAAqBA,EAArB,cAAoCC,EAAoBC,EAAWC,EAAeC,MAAlFC,kCAU+BC,KAAOC,SAAY,EAMnBD,KAAOE,SAAY,EAKnBF,KAAIG,KAAoB,GA8BtD,CAhDwBC,gBACrB,OAAOJ,KAAKC,QAAUD,KAAKK,OAAS,UAAOC,CAC5C,CAkBDC,SACE,MAAMC,EAAQC,CAAI,yBAAyBT,KAAKU,iBAAiBV,KAAKW,sBAChEC,EAAQH,CAAI,yCAEZI,EAAIb,KAAKc,sCAENd,KAAKe,gDAGHC,EAAUhB,KAAKiB,kBACbjB,KAAKK,oBACHL,KAAKC,uBACJD,KAAKkB,wBACLlB,KAAKmB,+BACEH,EAAUhB,KAAKoB,oCACnBJ,EAAUhB,KAAKqB,2BACpBrB,KAAKsB,uBAInB,OAAOb,CAAI,uBAAuBT,KAAKE,QAAU,CAACM,EAAOI,GAAS,CAACA,EAAOJ,UAC3E,CAESc,aAAaC,GACrB,MAAMC,EAASD,EAAEC,OACjBxB,KAAKC,QAAUuB,EAAOvB,QACtBwB,MAAMH,aAAaC,EACpB,GAjDM7B,EAAMgC,OAAG,CAACC,EAAgBC,EAAgBC,GASpBC,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCvC,EAAAwC,UAAA,eAAA,GAMxBJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCvC,EAAAwC,UAAA,eAAA,GAKxBJ,EAAA,CAA5BC,EAAS,CAAEI,SAAS,KAAmCzC,EAAAwC,UAAA,YAAA,GArBrCxC,EAAMoC,EAAA,CAD1BM,EAAc,gBACM1C,SAAAA"}
+{"version":3,"file":"Toggle.js","sources":["../src/toggle/Toggle.ts"],"sourcesContent":["/* eslint-disable lit-a11y/role-has-required-aria-attrs */\nimport { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\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 new\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-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({ 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({ 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`<div class=\"n-expand\">${this.renderLabel()} ${this.renderError()}</div>`\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`<div class=\"n-flex\">${this.reverse ? [label, input] : [input, label]}</div>`\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","renderError","input","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","prototype","reflect","customElement"],"mappings":"2zFA0BA,IAAqBA,EAArB,cAAoCC,EAAoBC,EAAWC,EAAeC,MAAlFC,kCAU+BC,KAAOC,SAAY,EAMnBD,KAAOE,SAAY,EAKnBF,KAAIG,KAAoB,GA8BtD,CAhDwBC,gBACrB,OAAOJ,KAAKC,QAAUD,KAAKK,OAAS,UAAOC,CAC5C,CAkBDC,SACE,MAAMC,EAAQC,CAAI,yBAAyBT,KAAKU,iBAAiBV,KAAKW,sBAChEC,EAAQH,CAAI,yCAEZI,EAAIb,KAAKc,sCAENd,KAAKe,gDAGHC,EAAUhB,KAAKiB,kBACbjB,KAAKK,oBACHL,KAAKC,uBACJD,KAAKkB,wBACLlB,KAAKmB,+BACEH,EAAUhB,KAAKoB,oCACnBJ,EAAUhB,KAAKqB,2BACpBrB,KAAKsB,uBAInB,OAAOb,CAAI,uBAAuBT,KAAKE,QAAU,CAACM,EAAOI,GAAS,CAACA,EAAOJ,UAC3E,CAESc,aAAaC,GACrB,MAAMC,EAASD,EAAEC,OACjBxB,KAAKC,QAAUuB,EAAOvB,QACtBwB,MAAMH,aAAaC,EACpB,GAjDM7B,EAAMgC,OAAG,CAACC,EAAgBC,EAAgBC,GASpBC,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCvC,EAAAwC,UAAA,eAAA,GAMxBJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCvC,EAAAwC,UAAA,eAAA,GAKxBJ,EAAA,CAA5BC,EAAS,CAAEI,SAAS,KAAmCzC,EAAAwC,UAAA,YAAA,GArBrCxC,EAAMoC,EAAA,CAD1BM,EAAc,gBACM1C,SAAAA"}

package/lib/Tooltip.js

@@ -1,2 +1,2 @@
-import{_ as t,e as i}from"./query-assigned-elements-e6cbac30.js";import{i as e,s,y as o}from"./lit-element-79bc2e0e.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as d,o as l,f as h,s as p}from"./positioning-3bbd3548.js";import{S as c}from"./SlotController-ea6eff46.js";import{s as u}from"./Component-49a41387.js";import{E as v}from"./EventController-d99ebeef.js";import{f as m}from"./fsm-50373df9.js";import{o as b}from"./observe-a9c6dfb6.js";function y(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function f(t,i,e){t.setAttribute(i,e.join(" "))}const g=e`:host{--n-tooltip-background:rgba(20, 20, 20, 0.95);--n-tooltip-color:#fff;--n-tooltip-key-border:rgba(255, 255, 255, 0.03);--n-tooltip-key-background:rgba(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)}.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)}.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)}`;var x;function w(t,i){return Boolean(i.id)&&t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("aria-describedby")===i.id}const{transition:k}=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 s{constructor(){super(...arguments),this.shortcutSlot=new c(this,"shortcut"),this.events=new v(this),this.proxy=document.createElement("span"),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.updatePosition=t=>a(t,this,{strategy:"fixed",placement:d(this.position),middleware:[l(8),h(),p({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=k(this.state,"positioned")})),this.hideTooltip=()=>{this.state=k(this.state,"hide")},this.reposition=()=>{this.state=k(this.state,"reposition")},this.handleShow=t=>{const i=t.target;w(i,this)&&(this.currentElement=i,this.state=k(this.state,"show"))},this.handleHide=t=>{t.target===this.currentElement&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{var t,i;const e=null===(i=null===(t=this.currentElement)||void 0===t?void 0:t.focusableRef)||void 0===i?void 0:i.value;e&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,e.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const s=y(t,i);s.includes(e)||f(t,i,s.concat(e))}(e,"aria-describedby",this.id))},this.removeDescribedBy=()=>{var t,i;const e=null===(i=null===(t=this.currentElement)||void 0===t?void 0:t.focusableRef)||void 0===i?void 0:i.value;e&&(this.proxy.remove(),function(t,i,e){const s=y(t,i);s.includes(e)&&f(t,i,s.filter((t=>t!==e)))}(e,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback();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),this.events.listen(window,"resize",this.reposition,{passive:!0}),this.events.listen(window,"scroll",this.reposition,{passive:!0})}render(){return o`<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";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";break}case"waiting":this.timeoutId=setTimeout((()=>{this.state=k(this.state,"timeout")}),this.delay);break;case"positioning":x.lastOpened!==this&&(null===(i=x.lastOpened)||void 0===i||i.hideTooltip()),this.currentElement&&this.updatePosition(this.currentElement)}}};E.styles=[u,g],t([r()],E.prototype,"state",void 0),t([n({reflect:!0})],E.prototype,"position",void 0),t([n({reflect:!0})],E.prototype,"role",void 0),t([n({reflect:!0})],E.prototype,"id",void 0),t([n({reflect:!0,type:Number})],E.prototype,"delay",void 0),t([b("id")],E.prototype,"handleIdChange",null),t([b("state")],E.prototype,"handleStateChange",null),E=x=t([i("nord-tooltip")],E);var j=E;export{j as default};
+import{_ as t,e as i}from"./query-assigned-elements-e6cbac30.js";import{i as e,s,y as o}from"./lit-element-79bc2e0e.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as d,o as l,f as h,s as p}from"./positioning-3bbd3548.js";import{S as c}from"./SlotController-ea6eff46.js";import{s as u}from"./Component-49a41387.js";import{E as v}from"./EventController-d99ebeef.js";import{f as m}from"./fsm-50373df9.js";import{o as b}from"./observe-a9c6dfb6.js";function y(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function f(t,i,e){t.setAttribute(i,e.join(" "))}const g=e`:host{--_n-tooltip-background:rgba(20, 20, 20, 0.95);--_n-tooltip-color:#fff;--_n-tooltip-key-border:rgba(255, 255, 255, 0.03);--_n-tooltip-key-background:rgba(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)}.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)}.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)}`;var x;function w(t,i){return Boolean(i.id)&&t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("aria-describedby")===i.id}const{transition:k}=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 s{constructor(){super(...arguments),this.shortcutSlot=new c(this,"shortcut"),this.events=new v(this),this.proxy=document.createElement("span"),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.updatePosition=t=>a(t,this,{strategy:"fixed",placement:d(this.position),middleware:[l(8),h(),p({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=k(this.state,"positioned")})),this.hideTooltip=()=>{this.state=k(this.state,"hide")},this.reposition=()=>{this.state=k(this.state,"reposition")},this.handleShow=t=>{const i=t.target;w(i,this)&&(this.currentElement=i,this.state=k(this.state,"show"))},this.handleHide=t=>{t.target===this.currentElement&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{var t,i;const e=null===(i=null===(t=this.currentElement)||void 0===t?void 0:t.focusableRef)||void 0===i?void 0:i.value;e&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,e.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const s=y(t,i);s.includes(e)||f(t,i,s.concat(e))}(e,"aria-describedby",this.id))},this.removeDescribedBy=()=>{var t,i;const e=null===(i=null===(t=this.currentElement)||void 0===t?void 0:t.focusableRef)||void 0===i?void 0:i.value;e&&(this.proxy.remove(),function(t,i,e){const s=y(t,i);s.includes(e)&&f(t,i,s.filter((t=>t!==e)))}(e,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback();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),this.events.listen(window,"resize",this.reposition,{passive:!0}),this.events.listen(window,"scroll",this.reposition,{passive:!0})}render(){return o`<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";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";break}case"waiting":this.timeoutId=setTimeout((()=>{this.state=k(this.state,"timeout")}),this.delay);break;case"positioning":x.lastOpened!==this&&(null===(i=x.lastOpened)||void 0===i||i.hideTooltip()),this.currentElement&&this.updatePosition(this.currentElement)}}};E.styles=[u,g],t([r()],E.prototype,"state",void 0),t([n({reflect:!0})],E.prototype,"position",void 0),t([n({reflect:!0})],E.prototype,"role",void 0),t([n({reflect:!0})],E.prototype,"id",void 0),t([n({reflect:!0,type:Number})],E.prototype,"delay",void 0),t([b("id")],E.prototype,"handleIdChange",null),t([b("state")],E.prototype,"handleStateChange",null),E=x=t([i("nord-tooltip")],E);var j=E;export{j 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 { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, flip, shift, offset } from \"@floating-ui/dom\"\n\nimport * as attr from \"../common/attribute.js\"\nimport type { FocusableMixinInterface } from \"../common/mixins/FocusableMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tooltip.css\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { States, fsm } from \"../common/fsm.js\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { observe } from \"../common/decorators/observe.js\"\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) {\n  return Boolean(tooltip.id) && isElement(node) && node.getAttribute(\"aria-describedby\") === tooltip.id\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 */\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 = document.createElement(\"span\")\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  @property({ reflect: true }) role = \"tooltip\"\n\n  /**\n   * The id for the active element to reference via aria-describedby.\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   * Apply all event listeners\n   */\n  connectedCallback() {\n    super.connectedCallback()\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    this.events.listen(rootNode, \"click\", this.handleHide)\n\n    this.events.listen(window, \"resize\", this.reposition, { passive: true })\n    this.events.listen(window, \"scroll\", this.reposition, { passive: true })\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      // eslint-disable-next-line no-console\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        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        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        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(8),\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 target = e.target as FocusableElement\n\n    if (referencesTooltip(target, this)) {\n      this.currentElement = target\n      this.state = transition(this.state, \"show\")\n    }\n  }\n\n  private handleHide = (e: Event) => {\n    if (e.target === this.currentElement) {\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 = this.currentElement?.focusableRef?.value\n\n    if (focusable) {\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  private removeDescribedBy = () => {\n    const focusable = this.currentElement?.focusableRef?.value\n\n    if (focusable) {\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","referencesTooltip","node","tooltip","Boolean","id","nodeType","Node","ELEMENT_NODE","transition","fsm","hidden","show","visible","hide","reposition","waiting","timeout","positioning","positioned","Tooltip","Tooltip_1","LitElement","constructor","this","shortcutSlot","SlotController","events","EventController","proxy","document","createElement","state","coords","position","role","delay","updatePosition","currentElement","computePosition","strategy","placement","logicalToPhysical","middleware","offset","flip","shift","padding","then","x","y","hideTooltip","handleShow","e","target","handleHide","hideOnEscape","key","addDescribedBy","focusable","_b","_a","focusableRef","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","rootNode","getRootNode","listen","window","passive","render","html","isEmpty","handleIdChange","console","warn","handleStateChange","prevState","timeoutId","clearTimeout","undefined","style","visibility","opacity","lastOpened","left","top","setTimeout","styles","componentStyle","__decorate","prototype","property","reflect","type","Number","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 { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, flip, shift, offset } from \"@floating-ui/dom\"\n\nimport * as attr from \"../common/attribute.js\"\nimport type { FocusableMixinInterface } from \"../common/mixins/FocusableMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tooltip.css\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { States, fsm } from \"../common/fsm.js\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { observe } from \"../common/decorators/observe.js\"\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) {\n  return Boolean(tooltip.id) && isElement(node) && node.getAttribute(\"aria-describedby\") === tooltip.id\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 */\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 = document.createElement(\"span\")\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  @property({ reflect: true }) role = \"tooltip\"\n\n  /**\n   * The id for the active element to reference via aria-describedby.\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   * Apply all event listeners\n   */\n  connectedCallback() {\n    super.connectedCallback()\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    this.events.listen(rootNode, \"click\", this.handleHide)\n\n    this.events.listen(window, \"resize\", this.reposition, { passive: true })\n    this.events.listen(window, \"scroll\", this.reposition, { passive: true })\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      // eslint-disable-next-line no-console\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        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        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        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(8),\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 target = e.target as FocusableElement\n\n    if (referencesTooltip(target, this)) {\n      this.currentElement = target\n      this.state = transition(this.state, \"show\")\n    }\n  }\n\n  private handleHide = (e: Event) => {\n    if (e.target === this.currentElement) {\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 = this.currentElement?.focusableRef?.value\n\n    if (focusable) {\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  private removeDescribedBy = () => {\n    const focusable = this.currentElement?.focusableRef?.value\n\n    if (focusable) {\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","referencesTooltip","node","tooltip","Boolean","id","nodeType","Node","ELEMENT_NODE","transition","fsm","hidden","show","visible","hide","reposition","waiting","timeout","positioning","positioned","Tooltip","Tooltip_1","LitElement","constructor","this","shortcutSlot","SlotController","events","EventController","proxy","document","createElement","state","coords","position","role","delay","updatePosition","currentElement","computePosition","strategy","placement","logicalToPhysical","middleware","offset","flip","shift","padding","then","x","y","hideTooltip","handleShow","e","target","handleHide","hideOnEscape","key","addDescribedBy","focusable","_b","_a","focusableRef","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","rootNode","getRootNode","listen","window","passive","render","html","isEmpty","handleIdChange","console","warn","handleStateChange","prevState","timeoutId","clearTimeout","undefined","style","visibility","opacity","lastOpened","left","top","setTimeout","styles","componentStyle","__decorate","prototype","property","reflect","type","Number","observe","customElement"],"mappings":"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"}