@nordhealth/components 3.12.0 → 3.14.0

package/lib/AutocompleteMixin-3cf61f49.js

@@ -0,0 +1,2 @@
+import{_ as e}from"./query-assigned-elements-15485e3d.js";import{e as o}from"./property-03f59dce.js";function t(t){class r extends t{constructor(){super(...arguments),this.autocomplete="off"}}return e([o()],r.prototype,"autocomplete",void 0),r}export{t as A};
+//# sourceMappingURL=AutocompleteMixin-3cf61f49.js.map

package/lib/{AutocompleteMixin-5a7e10b2.js.map → AutocompleteMixin-3cf61f49.js.map}

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteMixin-5a7e10b2.js","sources":["../src/common/mixins/AutocompleteMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype AutocompleteAttribute =\n  | \"off\"\n  | \"on\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level4\"\n  | \"address-level3\"\n  | \"address-level2\"\n  | \"address-level1\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tel-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\"\n\nexport declare class AutocompleteMixinInterface {\n  autocomplete: AutocompleteAttribute\n}\n\nexport function AutocompleteMixin<T extends Constructor<LitElement>>(\n  superClass: T\n): Constructor<AutocompleteMixinInterface> & T {\n  class AutocompleteElement extends superClass {\n    /**\n     * Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.\n     */\n    @property() autocomplete: AutocompleteAttribute = \"off\"\n  }\n\n  return AutocompleteElement\n}\n"],"names":["AutocompleteMixin","superClass","AutocompleteElement","constructor","this","autocomplete","__decorate","property","prototype"],"mappings":"qGAiEM,SAAUA,EACdC,GAEA,MAAMC,UAA4BD,EAAlC,WAAAE,uBAIcC,KAAYC,aAA0B,KACnD,EAED,OAHcC,EAAA,CAAXC,KAAsDL,EAAAM,UAAA,oBAAA,GAGlDN,CACT"}
+{"version":3,"file":"AutocompleteMixin-3cf61f49.js","sources":["../src/common/mixins/AutocompleteMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype AutocompleteAttribute =\n  | \"off\"\n  | \"on\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level4\"\n  | \"address-level3\"\n  | \"address-level2\"\n  | \"address-level1\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tel-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\"\n\nexport declare class AutocompleteMixinInterface {\n  autocomplete: AutocompleteAttribute\n}\n\nexport function AutocompleteMixin<T extends Constructor<LitElement>>(\n  superClass: T\n): Constructor<AutocompleteMixinInterface> & T {\n  class AutocompleteElement extends superClass {\n    /**\n     * Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.\n     */\n    @property() autocomplete: AutocompleteAttribute = \"off\"\n  }\n\n  return AutocompleteElement\n}\n"],"names":["AutocompleteMixin","superClass","AutocompleteElement","constructor","this","autocomplete","__decorate","property","prototype"],"mappings":"qGAiEM,SAAUA,EACdC,GAEA,MAAMC,UAA4BD,EAAlCE,kCAIcC,KAAYC,aAA0B,KACnD,EAED,OAHcC,EAAA,CAAXC,KAAsDL,EAAAM,UAAA,oBAAA,GAGlDN,CACT"}

package/lib/Avatar.js

@@ -1,2 +1,2 @@
-import{i as a,_ as r,s as t,x as o,A as e,e as i}from"./query-assigned-elements-92ce7494.js";import{n}from"./property-c78323b1.js";import{t as s}from"./state-d31c6912.js";import{s as c}from"./Component-2253424f.js";import{f as v}from"./fsm-50373df9.js";import{o as l}from"./observe-a9c6dfb6.js";import"./VisuallyHidden.js";import"./Icon.js";import"./if-defined-cccde88f.js";import"./directive-e9ce14b4.js";import"./cond-bb9ee891.js";import"./IconManager.js";const d=a`:host{--_n-avatar-color:var(--n-avatar-color, var(--n-color-text-weaker));--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-l));--_n-avatar-box-shadow:var(--n-avatar-box-shadow, none);--_n-avatar-text-color:var(--n-avatar-text-color, var(--n-color-text-on-accent));--_n-avatar-border-radius:var(--n-border-radius-circle);--_n-avatar-font-size:var(--n-font-size-xs);display:inline-flex;block-size:var(--_n-avatar-size);inline-size:var(--_n-avatar-size)}:host(:empty) .n-avatar-inner,:host(:not(:empty)) svg,:host([variant=square]) svg{display:none}:host(:empty){--_n-avatar-color:var(--n-avatar-color, var(--n-color-border))}.n-avatar{background:var(--_n-avatar-color);border-radius:var(--_n-avatar-border-radius);box-shadow:var(--_n-avatar-box-shadow);overflow:hidden;inline-size:100%;block-size:100%;display:grid;place-items:center;color:var(--_n-avatar-text-color);font-size:var(--_n-avatar-font-size);font-weight:var(--n-font-weight-active)}img,svg{inline-size:100%;block-size:auto;object-fit:cover}nord-icon{--_n-icon-size:var(--n-size-icon-s)}.n-loading{display:none}:host([size="s"]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xs) * 2));--_n-avatar-font-size:calc(var(--n-font-size-xs) / 1.1)}:host([size="s"]) nord-icon{--_n-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xl));--_n-avatar-font-size:var(--n-font-size-m)}:host([size="l"]) nord-icon{--_n-icon-size:20px}:host([size=xl]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xl) + var(--n-size-icon-s)));--_n-avatar-font-size:var(--n-font-size-l)}:host([size=xl]) nord-icon{--_n-icon-size:28px}:host([size=xxl]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xxl));--_n-avatar-font-size:var(--n-font-size-xxl)}:host([size=xxl]) nord-icon{--_n-icon-size:44px}:host([size=xxxl]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xxl) + var(--n-size-icon-xl)));--_n-avatar-font-size:var(--n-font-size-xxxl)}:host([size=xxxl]) nord-icon{--_n-icon-size:68px}:host([variant=square]){--_n-avatar-color:var(--n-avatar-color, var(--n-color-accent));--_n-avatar-box-shadow:var(--n-avatar-box-shadow, var(--n-box-shadow), 0 0 0 1px rgba(255, 255, 255, 0.6));--_n-avatar-border-radius:var(--n-border-radius)}:host([icon]){--_n-avatar-color:var(--n-avatar-color, var(--n-color-surface-lowered));--_n-avatar-text-color:var(--n-avatar-text-color, var(--n-color-text))}`,{transition:h}=v({initial:{"src-set":"loading"},loading:{load:"loaded",error:"initial","src-clear":"initial"},loaded:{"src-set":"loading","src-clear":"initial"}});let z=class extends t{constructor(){super(...arguments),this.state="initial",this.size="m",this.name="",this.variant="default"}render(){return o`<div class="n-avatar">${"initial"!==this.state?this.renderImage():e} ${"loaded"!==this.state?this.renderFallback():e}</div>`}handleSrcChange(){const a=this.src?"src-set":"src-clear";this.state=h(this.state,a)}renderImage(){return this.src?o`<slot hidden></slot><img class="n-${this.state}" src="${this.src}" @load="${this.handleLoad}" @error="${this.handleError}" alt="${this.name||""}">`:e}renderFallback(){return o`<nord-visually-hidden>${this.name}</nord-visually-hidden><div class="n-avatar-inner" aria-hidden="true"><slot></slot></div>${this.icon?o`<nord-icon name="${this.icon}"></nord-icon>`:o`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><rect fill="var(--_n-avatar-color)" height="27" rx="12" width="27" x="0" y="0"></rect><g fill="#fff" opacity=".7"><circle cx="13.5" cy="30" r="13"></circle><circle cx="13.5" cy="11" r="5"></circle></g></svg>`}`}handleLoad(){this.state=h(this.state,"load")}handleError(){this.state=h(this.state,"error")}};z.styles=[c,d],r([s()],z.prototype,"state",void 0),r([n({reflect:!0})],z.prototype,"size",void 0),r([n({reflect:!0})],z.prototype,"src",void 0),r([n({reflect:!0})],z.prototype,"name",void 0),r([n({reflect:!0})],z.prototype,"icon",void 0),r([n({reflect:!0})],z.prototype,"variant",void 0),r([l("src")],z.prototype,"handleSrcChange",null),z=r([i("nord-avatar")],z);var x=z;export{x as default};
+import{i as a,_ as r,s as t,x as o,A as e,e as i}from"./query-assigned-elements-15485e3d.js";import{e as n}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{s as c}from"./Component-420bbc41.js";import{f as v}from"./fsm-50373df9.js";import{o as l}from"./observe-a9c6dfb6.js";import"./VisuallyHidden.js";import"./Icon.js";import"./if-defined-9b177db4.js";import"./directive-de55b00a.js";import"./cond-44672025.js";import"./IconManager.js";const d=a`:host{--_n-avatar-color:var(--n-avatar-color, var(--n-color-text-weaker));--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-l));--_n-avatar-box-shadow:var(--n-avatar-box-shadow, none);--_n-avatar-text-color:var(--n-avatar-text-color, var(--n-color-text-on-accent));--_n-avatar-border-radius:var(--n-border-radius-circle);--_n-avatar-font-size:var(--n-font-size-xs);display:inline-flex;block-size:var(--_n-avatar-size);inline-size:var(--_n-avatar-size)}:host(:empty) .n-avatar-inner,:host(:not(:empty)) svg,:host([variant=square]) svg{display:none}:host(:empty){--_n-avatar-color:var(--n-avatar-color, var(--n-color-border))}.n-avatar{background:var(--_n-avatar-color);border-radius:var(--_n-avatar-border-radius);box-shadow:var(--_n-avatar-box-shadow);overflow:hidden;inline-size:100%;block-size:100%;display:grid;place-items:center;color:var(--_n-avatar-text-color);font-size:var(--_n-avatar-font-size);font-weight:var(--n-font-weight-active)}img,svg{inline-size:100%;block-size:auto;object-fit:cover}nord-icon{--_n-icon-size:var(--n-size-icon-s)}.n-loading{display:none}:host([size="s"]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xs) * 2));--_n-avatar-font-size:calc(var(--n-font-size-xs) / 1.1)}:host([size="s"]) nord-icon{--_n-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xl));--_n-avatar-font-size:var(--n-font-size-m)}:host([size="l"]) nord-icon{--_n-icon-size:20px}:host([size=xl]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xl) + var(--n-size-icon-s)));--_n-avatar-font-size:var(--n-font-size-l)}:host([size=xl]) nord-icon{--_n-icon-size:28px}:host([size=xxl]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xxl));--_n-avatar-font-size:var(--n-font-size-xxl)}:host([size=xxl]) nord-icon{--_n-icon-size:44px}:host([size=xxxl]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xxl) + var(--n-size-icon-xl)));--_n-avatar-font-size:var(--n-font-size-xxxl)}:host([size=xxxl]) nord-icon{--_n-icon-size:68px}:host([variant=square]){--_n-avatar-color:var(--n-avatar-color, var(--n-color-accent));--_n-avatar-box-shadow:var(--n-avatar-box-shadow, var(--n-box-shadow), 0 0 0 1px rgba(255, 255, 255, 0.6));--_n-avatar-border-radius:var(--n-border-radius)}:host([icon]){--_n-avatar-color:var(--n-avatar-color, var(--n-color-surface-lowered));--_n-avatar-text-color:var(--n-avatar-text-color, var(--n-color-text))}`,{transition:h}=v({initial:{"src-set":"loading"},loading:{load:"loaded",error:"initial","src-clear":"initial"},loaded:{"src-set":"loading","src-clear":"initial"}});let z=class extends t{constructor(){super(...arguments),this.state="initial",this.size="m",this.name="",this.variant="default"}render(){return o`<div class="n-avatar">${"initial"!==this.state?this.renderImage():e} ${"loaded"!==this.state?this.renderFallback():e}</div>`}handleSrcChange(){const a=this.src?"src-set":"src-clear";this.state=h(this.state,a)}renderImage(){return this.src?o`<slot hidden></slot><img class="n-${this.state}" src="${this.src}" @load="${this.handleLoad}" @error="${this.handleError}" alt="${this.name||""}">`:e}renderFallback(){return o`<nord-visually-hidden>${this.name}</nord-visually-hidden><div class="n-avatar-inner" aria-hidden="true"><slot></slot></div>${this.icon?o`<nord-icon name="${this.icon}"></nord-icon>`:o`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><rect fill="var(--_n-avatar-color)" height="27" rx="12" width="27" x="0" y="0"></rect><g fill="#fff" opacity=".7"><circle cx="13.5" cy="30" r="13"></circle><circle cx="13.5" cy="11" r="5"></circle></g></svg>`}`}handleLoad(){this.state=h(this.state,"load")}handleError(){this.state=h(this.state,"error")}};z.styles=[c,d],r([s()],z.prototype,"state",void 0),r([n({reflect:!0})],z.prototype,"size",void 0),r([n({reflect:!0})],z.prototype,"src",void 0),r([n({reflect:!0})],z.prototype,"name",void 0),r([n({reflect:!0})],z.prototype,"icon",void 0),r([n({reflect:!0})],z.prototype,"variant",void 0),r([l("src")],z.prototype,"handleSrcChange",null),z=r([i("nord-avatar")],z);var x=z;export{x as default};
 //# sourceMappingURL=Avatar.js.map

package/lib/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Avatar.css\"\nimport { fsm, States } from \"../common/fsm.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"../icon/Icon.js\"\n\nconst { transition } = fsm({\n  initial: {\n    \"src-set\": \"loading\",\n  },\n  loading: {\n    load: \"loaded\",\n    error: \"initial\",\n    \"src-clear\": \"initial\",\n  },\n  loaded: {\n    \"src-set\": \"loading\",\n    \"src-clear\": \"initial\",\n  },\n})\n\n/**\n * Avatar is used for showing a thumbnail representation of a single user or entity.\n * Default avatar illustration is displayed when no src is specified.\n *\n * @status ready\n * @category image\n *\n * @cssprop [--n-avatar-color=var(--n-color-status-highlight)] - Controls the color of the avatar fallback, using [color tokens](/tokens/#color).\n * @cssprop [--n-avatar-size=var(--n-size-icon-l)] - Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).\n * @cssprop [--n-avatar-box-shadow=none] - Controls the box shadow for the avatar.\n * @cssprop [--n-avatar-text-color=var(--n-color-text-on-accent)] - Controls the color of the avatar’s text and icon, using [color tokens](/tokens/#color).\n */\n\n@customElement(\"nord-avatar\")\nexport default class Avatar extends LitElement {\n  static styles = [componentStyle, style]\n\n  @state() private state: States<typeof transition> = \"initial\"\n\n  /**\n   * The size of the avatar.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | \"xxxl\" = \"m\"\n\n  /**\n   * The URL of the avatar image uploaded by the user.\n   */\n  @property({ reflect: true }) src?: string\n\n  /**\n   * The name of the person or entity.\n   */\n  @property({ reflect: true }) name: string = \"\"\n\n  /**\n   * The fallback icon.\n   */\n  @property({ reflect: true }) icon?: string\n\n  /**\n   * The style variant of the avatar.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"square\" = \"default\"\n\n  render() {\n    return html`\n      <div class=\"n-avatar\">\n        ${this.state !== \"initial\" ? this.renderImage() : nothing}\n        ${this.state !== \"loaded\" ? this.renderFallback() : nothing}\n      </div>\n    `\n  }\n\n  @observe(\"src\")\n  protected handleSrcChange() {\n    const event = this.src ? \"src-set\" : \"src-clear\"\n    this.state = transition(this.state, event)\n  }\n\n  protected renderImage() {\n    return this.src\n      ? html`\n          <slot hidden></slot>\n          <img\n            class=\"n-${this.state}\"\n            src=${this.src}\n            @load=${this.handleLoad}\n            @error=${this.handleError}\n            alt=${this.name || \"\"}\n          />\n        `\n      : nothing\n  }\n\n  protected renderFallback() {\n    return html`\n      <nord-visually-hidden>${this.name}</nord-visually-hidden>\n      <div class=\"n-avatar-inner\" aria-hidden=\"true\">\n        <slot></slot>\n      </div>\n      ${this.icon\n        ? html`<nord-icon name=\"${this.icon}\"></nord-icon>`\n        : html`\n            <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 27 27\">\n              <rect fill=\"var(--_n-avatar-color)\" height=\"27\" rx=\"12\" width=\"27\" x=\"0\" y=\"0\"></rect>\n              <g fill=\"#fff\" opacity=\".7\">\n                <circle cx=\"13.5\" cy=\"30\" r=\"13\"></circle>\n                <circle cx=\"13.5\" cy=\"11\" r=\"5\"></circle>\n              </g>\n            </svg>\n          `}\n    `\n  }\n\n  private handleLoad() {\n    this.state = transition(this.state, \"load\")\n  }\n\n  private handleError() {\n    this.state = transition(this.state, \"error\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-avatar\": Avatar\n  }\n}\n"],"names":["transition","fsm","initial","loading","load","error","loaded","Avatar","LitElement","constructor","this","state","size","name","variant","render","html","renderImage","nothing","renderFallback","handleSrcChange","event","src","handleLoad","handleError","icon","styles","componentStyle","style","__decorate","prototype","property","reflect","observe","customElement"],"mappings":"y1FAUMA,WAAEA,GAAeC,EAAI,CACzBC,QAAS,CACP,UAAW,WAEbC,QAAS,CACPC,KAAM,SACNC,MAAO,UACP,YAAa,WAEfC,OAAQ,CACN,UAAW,UACX,YAAa,aAkBF,IAAMC,EAAN,cAAqBC,EAArB,WAAAC,uBAGIC,KAAKC,MAA8B,UAKvBD,KAAIE,KAA4C,IAUhDF,KAAIG,KAAW,GAUfH,KAAOI,QAAyB,SA2D9D,CAzDC,MAAAC,GACE,OAAOC,CAAI,yBAEU,YAAfN,KAAKC,MAAsBD,KAAKO,cAAgBC,KACjC,WAAfR,KAAKC,MAAqBD,KAAKS,iBAAmBD,SAGzD,CAGS,eAAAE,GACR,MAAMC,EAAQX,KAAKY,IAAM,UAAY,YACrCZ,KAAKC,MAAQX,EAAWU,KAAKC,MAAOU,EACrC,CAES,WAAAJ,GACR,OAAOP,KAAKY,IACRN,CAAI,qCAGWN,KAAKC,eACVD,KAAKY,eACHZ,KAAKa,uBACJb,KAAKc,qBACRd,KAAKG,MAAQ,OAGvBK,CACL,CAES,cAAAC,GACR,OAAOH,CAAI,yBACeN,KAAKG,gGAI3BH,KAAKe,KACHT,CAAI,oBAAoBN,KAAKe,qBAC7BT,CAAI,kSAUX,CAEO,UAAAO,GACNb,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,OACrC,CAEO,WAAAa,GACNd,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,QACrC,GArFMJ,EAAAmB,OAAS,CAACC,EAAgBC,GAEhBC,EAAA,CAAhBlB,KAA4DJ,EAAAuB,UAAA,aAAA,GAKhCD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAA2DzB,EAAAuB,UAAA,YAAA,GAKnDD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAoBzB,EAAAuB,UAAA,WAAA,GAKZD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAyBzB,EAAAuB,UAAA,YAAA,GAKjBD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAqBzB,EAAAuB,UAAA,YAAA,GAKbD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAiDzB,EAAAuB,UAAA,eAAA,GAY5DD,EAAA,CADTI,EAAQ,QAIR1B,EAAAuB,UAAA,kBAAA,MA3CkBvB,EAAMsB,EAAA,CAD1BK,EAAc,gBACM3B,SAAAA"}
+{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Avatar.css\"\nimport { fsm, States } from \"../common/fsm.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"../icon/Icon.js\"\n\nconst { transition } = fsm({\n  initial: {\n    \"src-set\": \"loading\",\n  },\n  loading: {\n    load: \"loaded\",\n    error: \"initial\",\n    \"src-clear\": \"initial\",\n  },\n  loaded: {\n    \"src-set\": \"loading\",\n    \"src-clear\": \"initial\",\n  },\n})\n\n/**\n * Avatar is used for showing a thumbnail representation of a single user or entity.\n * Default avatar illustration is displayed when no src is specified.\n *\n * @status ready\n * @category image\n *\n * @cssprop [--n-avatar-color=var(--n-color-status-highlight)] - Controls the color of the avatar fallback, using [color tokens](/tokens/#color).\n * @cssprop [--n-avatar-size=var(--n-size-icon-l)] - Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).\n * @cssprop [--n-avatar-box-shadow=none] - Controls the box shadow for the avatar.\n * @cssprop [--n-avatar-text-color=var(--n-color-text-on-accent)] - Controls the color of the avatar’s text and icon, using [color tokens](/tokens/#color).\n */\n\n@customElement(\"nord-avatar\")\nexport default class Avatar extends LitElement {\n  static styles = [componentStyle, style]\n\n  @state() private state: States<typeof transition> = \"initial\"\n\n  /**\n   * The size of the avatar.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | \"xxxl\" = \"m\"\n\n  /**\n   * The URL of the avatar image uploaded by the user.\n   */\n  @property({ reflect: true }) src?: string\n\n  /**\n   * The name of the person or entity.\n   */\n  @property({ reflect: true }) name: string = \"\"\n\n  /**\n   * The fallback icon.\n   */\n  @property({ reflect: true }) icon?: string\n\n  /**\n   * The style variant of the avatar.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"square\" = \"default\"\n\n  render() {\n    return html`\n      <div class=\"n-avatar\">\n        ${this.state !== \"initial\" ? this.renderImage() : nothing}\n        ${this.state !== \"loaded\" ? this.renderFallback() : nothing}\n      </div>\n    `\n  }\n\n  @observe(\"src\")\n  protected handleSrcChange() {\n    const event = this.src ? \"src-set\" : \"src-clear\"\n    this.state = transition(this.state, event)\n  }\n\n  protected renderImage() {\n    return this.src\n      ? html`\n          <slot hidden></slot>\n          <img\n            class=\"n-${this.state}\"\n            src=${this.src}\n            @load=${this.handleLoad}\n            @error=${this.handleError}\n            alt=${this.name || \"\"}\n          />\n        `\n      : nothing\n  }\n\n  protected renderFallback() {\n    return html`\n      <nord-visually-hidden>${this.name}</nord-visually-hidden>\n      <div class=\"n-avatar-inner\" aria-hidden=\"true\">\n        <slot></slot>\n      </div>\n      ${this.icon\n        ? html`<nord-icon name=\"${this.icon}\"></nord-icon>`\n        : html`\n            <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 27 27\">\n              <rect fill=\"var(--_n-avatar-color)\" height=\"27\" rx=\"12\" width=\"27\" x=\"0\" y=\"0\"></rect>\n              <g fill=\"#fff\" opacity=\".7\">\n                <circle cx=\"13.5\" cy=\"30\" r=\"13\"></circle>\n                <circle cx=\"13.5\" cy=\"11\" r=\"5\"></circle>\n              </g>\n            </svg>\n          `}\n    `\n  }\n\n  private handleLoad() {\n    this.state = transition(this.state, \"load\")\n  }\n\n  private handleError() {\n    this.state = transition(this.state, \"error\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-avatar\": Avatar\n  }\n}\n"],"names":["transition","fsm","initial","loading","load","error","loaded","Avatar","LitElement","constructor","this","state","size","name","variant","render","html","renderImage","nothing","renderFallback","handleSrcChange","event","src","handleLoad","handleError","icon","styles","componentStyle","style","__decorate","prototype","property","reflect","observe","customElement"],"mappings":"81FAUMA,WAAEA,GAAeC,EAAI,CACzBC,QAAS,CACP,UAAW,WAEbC,QAAS,CACPC,KAAM,SACNC,MAAO,UACP,YAAa,WAEfC,OAAQ,CACN,UAAW,UACX,YAAa,aAkBF,IAAMC,EAAN,cAAqBC,EAArBC,kCAGIC,KAAKC,MAA8B,UAKvBD,KAAIE,KAA4C,IAUhDF,KAAIG,KAAW,GAUfH,KAAOI,QAAyB,SA2D9D,CAzDCC,SACE,OAAOC,CAAI,yBAEU,YAAfN,KAAKC,MAAsBD,KAAKO,cAAgBC,KACjC,WAAfR,KAAKC,MAAqBD,KAAKS,iBAAmBD,SAGzD,CAGSE,kBACR,MAAMC,EAAQX,KAAKY,IAAM,UAAY,YACrCZ,KAAKC,MAAQX,EAAWU,KAAKC,MAAOU,EACrC,CAESJ,cACR,OAAOP,KAAKY,IACRN,CAAI,qCAGWN,KAAKC,eACVD,KAAKY,eACHZ,KAAKa,uBACJb,KAAKc,qBACRd,KAAKG,MAAQ,OAGvBK,CACL,CAESC,iBACR,OAAOH,CAAI,yBACeN,KAAKG,gGAI3BH,KAAKe,KACHT,CAAI,oBAAoBN,KAAKe,qBAC7BT,CAAI,kSAUX,CAEOO,aACNb,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,OACrC,CAEOa,cACNd,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,QACrC,GArFMJ,EAAAmB,OAAS,CAACC,EAAgBC,GAEhBC,EAAA,CAAhBlB,KAA4DJ,EAAAuB,UAAA,aAAA,GAKhCD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAA2DzB,EAAAuB,UAAA,YAAA,GAKnDD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAoBzB,EAAAuB,UAAA,WAAA,GAKZD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAyBzB,EAAAuB,UAAA,YAAA,GAKjBD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAqBzB,EAAAuB,UAAA,YAAA,GAKbD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAiDzB,EAAAuB,UAAA,eAAA,GAY5DD,EAAA,CADTI,EAAQ,QAIR1B,EAAAuB,UAAA,kBAAA,MA3CkBvB,EAAMsB,EAAA,CAD1BK,EAAc,gBACM3B,SAAAA"}

package/lib/Badge.js

@@ -1,2 +1,2 @@
-import{i as o,_ as r,s as n,x as a,e}from"./query-assigned-elements-92ce7494.js";import{n as t}from"./property-c78323b1.js";import{s}from"./Component-2253424f.js";const c=o`:host{--_n-badge-background-color:var(--n-color-text-neutral);--_n-badge-chip-color:var(--n-color-status-neutral-weak);--_n-badge-border-color:var(--n-color-border-neutral);display:inline;vertical-align:middle}.n-badge{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;border-radius:var(--n-border-radius-pill);border:1px solid var(--_n-badge-border-color);background:var(--_n-badge-chip-color);font-size:var(--n-font-size-s);font-family:var(--n-font-family);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height);letter-spacing:0;padding-block-start:calc(var(--n-space-xs)/ 6);padding-block-end:calc(var(--n-space-xs)/ 6);padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s);color:var(--_n-badge-background-color);gap:var(--n-space-xs);align-items:center;display:inline-flex;white-space:nowrap;position:relative}:host(:is([variant=success],[type=success])){--_n-badge-chip-color:var(--n-color-status-success-weak);--_n-badge-border-color:var(--n-color-border-success);--_n-badge-background-color:var(--n-color-text-success)}:host(:is([variant=warning],[type=warning])){--_n-badge-chip-color:var(--n-color-status-warning-weak);--_n-badge-border-color:var(--n-color-border-warning);--_n-badge-background-color:var(--n-color-text-warning)}:host(:is([variant=highlight],[type=highlight])){--_n-badge-chip-color:var(--n-color-status-highlight-weak);--_n-badge-border-color:var(--n-color-border-highlight);--_n-badge-background-color:var(--n-color-text-highlight)}:host(:is([variant=info],[type=info],[type=progress])){--_n-badge-chip-color:var(--n-color-status-info-weak);--_n-badge-border-color:var(--n-color-border-info);--_n-badge-background-color:var(--n-color-text-info)}:host(:is([variant=danger],[type=danger])){--_n-badge-chip-color:var(--n-color-status-danger-weak);--_n-badge-border-color:var(--n-color-border-danger);--_n-badge-background-color:var(--n-color-text-danger)}:host([strong]){--_n-badge-chip-color:var(--n-color-status-neutral);--_n-badge-border-color:var(--n-color-border-neutral);--_n-badge-background-color:var(--n-color-text-neutral-strong)}:host(:is([variant=success],[type=success])[strong]){--_n-badge-chip-color:var(--n-color-status-success);--_n-badge-border-color:var(--n-color-status-success);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=warning],[type=warning])[strong]){--_n-badge-chip-color:var(--n-color-status-warning);--_n-badge-border-color:var(--n-color-status-warning);--_n-badge-background-color:var(--n-color-text-warning-strong)}:host(:is([variant=highlight],[type=highlight])[strong]){--_n-badge-chip-color:var(--n-color-status-highlight);--_n-badge-border-color:var(--n-color-status-highlight);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=info],[type=info],[type=progress])[strong]){--_n-badge-chip-color:var(--n-color-status-info);--_n-badge-border-color:var(--n-color-status-info);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=danger],[type=danger])[strong]){--_n-badge-chip-color:var(--n-color-status-danger);--_n-badge-border-color:var(--n-color-status-danger);--_n-badge-background-color:var(--n-color-text-on-accent)}::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-xxs);transform:translateY(-.5px)}`;let l=class extends n{constructor(){super(...arguments),this.strong=!1}render(){return a`<span class="n-badge"><slot name="icon"></slot><slot></slot></span>`}};l.styles=[s,c],r([t({reflect:!0})],l.prototype,"type",void 0),r([t({reflect:!0})],l.prototype,"variant",void 0),r([t({reflect:!0,type:Boolean})],l.prototype,"strong",void 0),l=r([e("nord-badge")],l);var i=l;export{i as default};
+import{i as o,_ as r,s as n,x as a,e}from"./query-assigned-elements-15485e3d.js";import{e as t}from"./property-03f59dce.js";import{s}from"./Component-420bbc41.js";const c=o`:host{--_n-badge-background-color:var(--n-color-text-neutral);--_n-badge-chip-color:var(--n-color-status-neutral-weak);--_n-badge-border-color:var(--n-color-border-neutral);display:inline;vertical-align:middle}.n-badge{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;border-radius:var(--n-border-radius-pill);border:1px solid var(--_n-badge-border-color);background:var(--_n-badge-chip-color);font-size:var(--n-font-size-s);font-family:var(--n-font-family);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height);letter-spacing:0;padding-block-start:calc(var(--n-space-xs)/ 6);padding-block-end:calc(var(--n-space-xs)/ 6);padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s);color:var(--_n-badge-background-color);gap:var(--n-space-xs);align-items:center;display:inline-flex;white-space:nowrap;position:relative}:host(:is([variant=success],[type=success])){--_n-badge-chip-color:var(--n-color-status-success-weak);--_n-badge-border-color:var(--n-color-border-success);--_n-badge-background-color:var(--n-color-text-success)}:host(:is([variant=warning],[type=warning])){--_n-badge-chip-color:var(--n-color-status-warning-weak);--_n-badge-border-color:var(--n-color-border-warning);--_n-badge-background-color:var(--n-color-text-warning)}:host(:is([variant=highlight],[type=highlight])){--_n-badge-chip-color:var(--n-color-status-highlight-weak);--_n-badge-border-color:var(--n-color-border-highlight);--_n-badge-background-color:var(--n-color-text-highlight)}:host(:is([variant=info],[type=info],[type=progress])){--_n-badge-chip-color:var(--n-color-status-info-weak);--_n-badge-border-color:var(--n-color-border-info);--_n-badge-background-color:var(--n-color-text-info)}:host(:is([variant=danger],[type=danger])){--_n-badge-chip-color:var(--n-color-status-danger-weak);--_n-badge-border-color:var(--n-color-border-danger);--_n-badge-background-color:var(--n-color-text-danger)}:host([strong]){--_n-badge-chip-color:var(--n-color-status-neutral);--_n-badge-border-color:var(--n-color-border-neutral);--_n-badge-background-color:var(--n-color-text-neutral-strong)}:host(:is([variant=success],[type=success])[strong]){--_n-badge-chip-color:var(--n-color-status-success);--_n-badge-border-color:var(--n-color-status-success);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=warning],[type=warning])[strong]){--_n-badge-chip-color:var(--n-color-status-warning);--_n-badge-border-color:var(--n-color-status-warning);--_n-badge-background-color:var(--n-color-text-warning-strong)}:host(:is([variant=highlight],[type=highlight])[strong]){--_n-badge-chip-color:var(--n-color-status-highlight);--_n-badge-border-color:var(--n-color-status-highlight);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=info],[type=info],[type=progress])[strong]){--_n-badge-chip-color:var(--n-color-status-info);--_n-badge-border-color:var(--n-color-status-info);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=danger],[type=danger])[strong]){--_n-badge-chip-color:var(--n-color-status-danger);--_n-badge-border-color:var(--n-color-status-danger);--_n-badge-background-color:var(--n-color-text-on-accent)}::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-xxs);transform:translateY(-.5px)}`;let l=class extends n{constructor(){super(...arguments),this.strong=!1}render(){return a`<span class="n-badge"><slot name="icon"></slot><slot></slot></span>`}};l.styles=[s,c],r([t({reflect:!0})],l.prototype,"type",void 0),r([t({reflect:!0})],l.prototype,"variant",void 0),r([t({reflect:!0,type:Boolean})],l.prototype,"strong",void 0),l=r([e("nord-badge")],l);var i=l;export{i as default};
 //# sourceMappingURL=Badge.js.map

package/lib/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Badge.css\"\n\n/**\n * Badges are used to inform users of the status of an object\n * or of an action that’s been taken. Commonly used in tabular\n * data to indicate status.\n *\n * @status ready\n * @category text\n * @slot - The badge content.\n * @slot icon - Used to place an icon at the start of badge.\n */\n@customElement(\"nord-badge\")\nexport default class Badge extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The type of badge.\n   * Determines the background color of the badge.\n   * @deprecated Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.\n   * @default \"neutral\"\n   */\n  @property({ reflect: true }) type?: \"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\"\n\n  /**\n   * The style variant of the badge.\n   * Determines the background color of the badge.\n   * @default \"neutral\"\n   */\n  @property({ reflect: true }) variant?: \"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\"\n\n  /**\n   * Strong badges are a secondary style for badges.\n   * They provide more visual prominence and emphasize them.\n   */\n  @property({ reflect: true, type: Boolean }) strong = false\n\n  render() {\n    return html`\n      <span class=\"n-badge\">\n        <slot name=\"icon\"></slot>\n        <slot></slot>\n      </span>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-badge\": Badge\n  }\n}\n"],"names":["Badge","LitElement","constructor","this","strong","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"g8GAiBe,IAAMA,EAAN,cAAoBC,EAApB,WAAAC,uBAsB+BC,KAAMC,QAAG,CAUtD,CARC,MAAAC,GACE,OAAOC,CAAI,qEAMZ,GA9BMN,EAAAO,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA+FZ,EAAAa,UAAA,YAAA,GAOvFH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqFZ,EAAAa,UAAA,eAAA,GAM9DH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyBf,EAAAa,UAAA,cAAA,GAtBvCb,EAAKU,EAAA,CADzBM,EAAc,eACMhB,SAAAA"}
+{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Badge.css\"\n\n/**\n * Badges are used to inform users of the status of an object\n * or of an action that’s been taken. Commonly used in tabular\n * data to indicate status.\n *\n * @status ready\n * @category text\n * @slot - The badge content.\n * @slot icon - Used to place an icon at the start of badge.\n */\n@customElement(\"nord-badge\")\nexport default class Badge extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The type of badge.\n   * Determines the background color of the badge.\n   * @deprecated Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.\n   * @default \"neutral\"\n   */\n  @property({ reflect: true }) type?: \"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\"\n\n  /**\n   * The style variant of the badge.\n   * Determines the background color of the badge.\n   * @default \"neutral\"\n   */\n  @property({ reflect: true }) variant?: \"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\"\n\n  /**\n   * Strong badges are a secondary style for badges.\n   * They provide more visual prominence and emphasize them.\n   */\n  @property({ reflect: true, type: Boolean }) strong = false\n\n  render() {\n    return html`\n      <span class=\"n-badge\">\n        <slot name=\"icon\"></slot>\n        <slot></slot>\n      </span>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-badge\": Badge\n  }\n}\n"],"names":["Badge","LitElement","constructor","this","strong","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"g8GAiBe,IAAMA,EAAN,cAAoBC,EAApBC,kCAsB+BC,KAAMC,QAAG,CAUtD,CARCC,SACE,OAAOC,CAAI,qEAMZ,GA9BMN,EAAAO,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA+FZ,EAAAa,UAAA,YAAA,GAOvFH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqFZ,EAAAa,UAAA,eAAA,GAM9DH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyBf,EAAAa,UAAA,cAAA,GAtBvCb,EAAKU,EAAA,CADzBM,EAAc,eACMhB,SAAAA"}

package/lib/Banner.js

@@ -1,2 +1,2 @@
-import{i as r,_ as n,s as o,x as e,e as a}from"./query-assigned-elements-92ce7494.js";import{n as t}from"./property-c78323b1.js";import c from"./Icon.js";import{s}from"./Component-2253424f.js";import"./state-d31c6912.js";import"./if-defined-cccde88f.js";import"./directive-e9ce14b4.js";import"./cond-bb9ee891.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";const i="interface-help";var l=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.15 15c0 .64-.51 1.15-1.15 1.15s-1.15-.51-1.15-1.15.51-1.15 1.15-1.15 1.15.51 1.15 1.15zm8.85-5c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8zm-8-5.5c-1.93 0-3.5 1.57-3.5 3.5h2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5c-.55 0-1 .45-1 1v1.5h2v-.65c1.44-.43 2.5-1.77 2.5-3.35 0-1.93-1.57-3.5-3.5-3.5z" fill="currentColor"/></svg>',title:i,tags:"nordicon interface help speech bubble support circle round question mark"});const d="interface-warning";var b=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.1502 13c0 .64-.51 1.15-1.15 1.15-.63998 0-1.14998-.51-1.14998-1.15s.51-1.15 1.14998-1.15c.64 0 1.15.51 1.15 1.15zm-2.14998-2h1.99998v-5h-1.99998zm10.51998 6.01c-.36.62-1.01.99-1.73.99h-15.58998c-.72 0-1.360004-.37-1.730004-.99-.36-.62-.37-1.36-.02-1.99l7.800004-13.95c.36-.629997 1.03-1.0199969 1.74998-1.0199969.72 0 1.39.3899999 1.75 1.0199969l7.8 13.95c.35.63.34 1.37-.02 1.99zm-1.72-1.01-7.8-13.95-7.79998 13.95z" fill="currentColor"/></svg>',title:d,tags:"nordicon interface warning exclamation mark triangle shape alert error"});const v="interface-info";var m=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m8.7 6c0-.72.58-1.3 1.3-1.3s1.3.58 1.3 1.3-.58 1.3-1.3 1.3-1.3-.58-1.3-1.3zm-8.7 4c0-5.51 4.49-10 10-10s10 4.49 10 10-4.49 10-10 10-10-4.49-10-10zm2 0c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8-8 3.59-8 8zm7 5h2v-6h-2z" fill="currentColor"/></svg>',title:v,tags:"nordicon interface info circle round alert notice information"});const g="interface-checked-circle";var p=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.3 6.38 1.49 1.33-5.32 5.95c-.18.21-.44.33-.72.33 0 0-.02 0-.03 0-.26 0-.52-.1-.71-.29l-2.86-2.86 1.41-1.41 2.12 2.12 4.61-5.17zm6.7 3.62c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8z" fill="currentColor"/></svg>',title:g,tags:"nordicon interface circle round checked checkmark ready done success"});const u=r`:host{--_n-banner-box-shadow:var(--n-banner-box-shadow, none);--_n-banner-border-radius:var(--n-banner-border-radius, var(--n-border-radius));--_n-banner-color:var(--n-color-text-info);--_n-banner-background:var(--n-color-status-info-weak);--_n-banner-border-color:var(--n-color-border-info)}.n-banner{background:var(--_n-banner-background);border:1px solid var(--_n-banner-border-color);border-radius:var(--_n-banner-border-radius);box-shadow:var(--_n-banner-box-shadow);padding:calc(var(--n-space-m)/ 1.25) var(--n-space-m);margin:0;inline-size:100%}.n-banner-content{inline-size:calc(100% - calc(var(--n-space-m) * 2));color:var(--_n-banner-color)}nord-icon{transform:translateY(2px) translateX(2px);color:var(--_n-banner-color)}::slotted(a){color:var(--_n-banner-color)!important;text-decoration:underline!important}::slotted(p){color:var(--_n-banner-color)!important;margin:0!important}:host([variant=success]){--_n-banner-color:var(--n-color-text-success);--_n-banner-background:var(--n-color-status-success-weak);--_n-banner-border-color:var(--n-color-border-success)}:host([variant=danger]){--_n-banner-color:var(--n-color-text-danger);--_n-banner-background:var(--n-color-status-danger-weak);--_n-banner-border-color:var(--n-color-border-danger)}:host([variant=warning]){--_n-banner-color:var(--n-color-text-warning);--_n-banner-background:var(--n-color-status-warning-weak);--_n-banner-border-color:var(--n-color-border-warning)}`;c.registerIcon(l),c.registerIcon(b),c.registerIcon(m),c.registerIcon(p);const f={warning:i,danger:d,info:v,success:g};let _=class extends o{constructor(){super(...arguments),this.variant="info"}render(){const r=f[this.variant]||f.info;return e`<div class="n-banner" role="alert"><nord-stack align-items="start" direction="horizontal"><nord-icon name="${r}" size="m"></nord-icon><div class="n-banner-content"><slot></slot></div></nord-stack></div>`}};_.styles=[s,u],n([t({reflect:!0})],_.prototype,"variant",void 0),_=n([a("nord-banner")],_);var w=_;export{w as default};
+import{i as r,_ as n,s as o,x as e,e as a}from"./query-assigned-elements-15485e3d.js";import{e as t}from"./property-03f59dce.js";import c from"./Icon.js";import{s}from"./Component-420bbc41.js";import"./state-70f38ceb.js";import"./if-defined-9b177db4.js";import"./directive-de55b00a.js";import"./cond-44672025.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";const i="interface-help";var l=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.15 15c0 .64-.51 1.15-1.15 1.15s-1.15-.51-1.15-1.15.51-1.15 1.15-1.15 1.15.51 1.15 1.15zm8.85-5c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8zm-8-5.5c-1.93 0-3.5 1.57-3.5 3.5h2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5c-.55 0-1 .45-1 1v1.5h2v-.65c1.44-.43 2.5-1.77 2.5-3.35 0-1.93-1.57-3.5-3.5-3.5z" fill="currentColor"/></svg>',title:i,tags:"nordicon interface help speech bubble support circle round question mark"});const d="interface-warning";var b=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.1502 13c0 .64-.51 1.15-1.15 1.15-.63998 0-1.14998-.51-1.14998-1.15s.51-1.15 1.14998-1.15c.64 0 1.15.51 1.15 1.15zm-2.14998-2h1.99998v-5h-1.99998zm10.51998 6.01c-.36.62-1.01.99-1.73.99h-15.58998c-.72 0-1.360004-.37-1.730004-.99-.36-.62-.37-1.36-.02-1.99l7.800004-13.95c.36-.629997 1.03-1.0199969 1.74998-1.0199969.72 0 1.39.3899999 1.75 1.0199969l7.8 13.95c.35.63.34 1.37-.02 1.99zm-1.72-1.01-7.8-13.95-7.79998 13.95z" fill="currentColor"/></svg>',title:d,tags:"nordicon interface warning exclamation mark triangle shape alert error"});const v="interface-info";var m=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m8.7 6c0-.72.58-1.3 1.3-1.3s1.3.58 1.3 1.3-.58 1.3-1.3 1.3-1.3-.58-1.3-1.3zm-8.7 4c0-5.51 4.49-10 10-10s10 4.49 10 10-4.49 10-10 10-10-4.49-10-10zm2 0c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8-8 3.59-8 8zm7 5h2v-6h-2z" fill="currentColor"/></svg>',title:v,tags:"nordicon interface info circle round alert notice information"});const g="interface-checked-circle";var p=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.3 6.38 1.49 1.33-5.32 5.95c-.18.21-.44.33-.72.33 0 0-.02 0-.03 0-.26 0-.52-.1-.71-.29l-2.86-2.86 1.41-1.41 2.12 2.12 4.61-5.17zm6.7 3.62c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8z" fill="currentColor"/></svg>',title:g,tags:"nordicon interface circle round checked checkmark ready done success"});const u=r`:host{--_n-banner-box-shadow:var(--n-banner-box-shadow, none);--_n-banner-border-radius:var(--n-banner-border-radius, var(--n-border-radius));--_n-banner-color:var(--n-color-text-info);--_n-banner-background:var(--n-color-status-info-weak);--_n-banner-border-color:var(--n-color-border-info)}.n-banner{background:var(--_n-banner-background);border:1px solid var(--_n-banner-border-color);border-radius:var(--_n-banner-border-radius);box-shadow:var(--_n-banner-box-shadow);padding:calc(var(--n-space-m)/ 1.25) var(--n-space-m);margin:0;inline-size:100%}.n-banner-content{inline-size:calc(100% - calc(var(--n-space-m) * 2));color:var(--_n-banner-color)}nord-icon{transform:translateY(2px) translateX(2px);color:var(--_n-banner-color)}::slotted(a){color:var(--_n-banner-color)!important;text-decoration:underline!important}::slotted(p){color:var(--_n-banner-color)!important;margin:0!important}:host([variant=success]){--_n-banner-color:var(--n-color-text-success);--_n-banner-background:var(--n-color-status-success-weak);--_n-banner-border-color:var(--n-color-border-success)}:host([variant=danger]){--_n-banner-color:var(--n-color-text-danger);--_n-banner-background:var(--n-color-status-danger-weak);--_n-banner-border-color:var(--n-color-border-danger)}:host([variant=warning]){--_n-banner-color:var(--n-color-text-warning);--_n-banner-background:var(--n-color-status-warning-weak);--_n-banner-border-color:var(--n-color-border-warning)}`;c.registerIcon(l),c.registerIcon(b),c.registerIcon(m),c.registerIcon(p);const f={warning:i,danger:d,info:v,success:g};let _=class extends o{constructor(){super(...arguments),this.variant="info"}render(){const r=f[this.variant]||f.info;return e`<div class="n-banner" role="alert"><nord-stack align-items="start" direction="horizontal"><nord-icon name="${r}" size="m"></nord-icon><div class="n-banner-content"><slot></slot></div></nord-stack></div>`}};_.styles=[s,u],n([t({reflect:!0})],_.prototype,"variant",void 0),_=n([a("nord-banner")],_);var w=_;export{w as default};
 //# sourceMappingURL=Banner.js.map

package/lib/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../icons/lib/assets/interface-help.js","../../icons/lib/assets/interface-warning.js","../../icons/lib/assets/interface-info.js","../../icons/lib/assets/interface-checked-circle.js","../src/banner/Banner.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.15 15c0 .64-.51 1.15-1.15 1.15s-1.15-.51-1.15-1.15.51-1.15 1.15-1.15 1.15.51 1.15 1.15zm8.85-5c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8zm-8-5.5c-1.93 0-3.5 1.57-3.5 3.5h2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5c-.55 0-1 .45-1 1v1.5h2v-.65c1.44-.43 2.5-1.77 2.5-3.35 0-1.93-1.57-3.5-3.5-3.5z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-help\"\nexport const tags = \"nordicon interface help speech bubble support circle round question mark\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.1502 13c0 .64-.51 1.15-1.15 1.15-.63998 0-1.14998-.51-1.14998-1.15s.51-1.15 1.14998-1.15c.64 0 1.15.51 1.15 1.15zm-2.14998-2h1.99998v-5h-1.99998zm10.51998 6.01c-.36.62-1.01.99-1.73.99h-15.58998c-.72 0-1.360004-.37-1.730004-.99-.36-.62-.37-1.36-.02-1.99l7.800004-13.95c.36-.629997 1.03-1.0199969 1.74998-1.0199969.72 0 1.39.3899999 1.75 1.0199969l7.8 13.95c.35.63.34 1.37-.02 1.99zm-1.72-1.01-7.8-13.95-7.79998 13.95z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-warning\"\nexport const tags = \"nordicon interface warning exclamation mark triangle shape alert error\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m8.7 6c0-.72.58-1.3 1.3-1.3s1.3.58 1.3 1.3-.58 1.3-1.3 1.3-1.3-.58-1.3-1.3zm-8.7 4c0-5.51 4.49-10 10-10s10 4.49 10 10-4.49 10-10 10-10-4.49-10-10zm2 0c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8-8 3.59-8 8zm7 5h2v-6h-2z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-info\"\nexport const tags = \"nordicon interface info circle round alert notice information\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.3 6.38 1.49 1.33-5.32 5.95c-.18.21-.44.33-.72.33 0 0-.02 0-.03 0-.26 0-.52-.1-.71-.29l-2.86-2.86 1.41-1.41 2.12 2.12 4.61-5.17zm6.7 3.62c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-checked-circle\"\nexport const tags = \"nordicon interface circle round checked checkmark ready done success\"\n","import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport * as warningIcon from \"@nordhealth/icons/lib/assets/interface-help.js\"\nimport * as dangerIcon from \"@nordhealth/icons/lib/assets/interface-warning.js\"\nimport * as infoIcon from \"@nordhealth/icons/lib/assets/interface-info.js\"\nimport * as successIcon from \"@nordhealth/icons/lib/assets/interface-checked-circle.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Banner.css\"\n\nIcon.registerIcon(warningIcon)\nIcon.registerIcon(dangerIcon)\nIcon.registerIcon(infoIcon)\nIcon.registerIcon(successIcon)\n\nconst iconMap: Record<Banner[\"variant\"], string> = {\n  warning: warningIcon.title,\n  danger: dangerIcon.title,\n  info: infoIcon.title,\n  success: successIcon.title,\n}\n\n/**\n * Banner informs users about important changes or conditions in the\n * interface. Use this component if you need to communicate to users\n * in a prominent way.\n *\n * @status ready\n * @category feedback\n * @slot - default slot\n *\n * @cssprop [--n-banner-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-banner-box-shadow=var(--n-box-shadow-card)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n */\n@customElement(\"nord-banner\")\nexport default class Banner extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The style variant of the banner.\n   */\n  @property({ reflect: true }) variant: \"info\" | \"danger\" | \"success\" | \"warning\" = \"info\"\n\n  render() {\n    const icon = iconMap[this.variant] || iconMap.info\n\n    return html`\n      <div class=\"n-banner\" role=\"alert\">\n        <nord-stack align-items=\"start\" direction=\"horizontal\">\n          <nord-icon name=${icon} size=\"m\"></nord-icon>\n          <div class=\"n-banner-content\">\n            <slot></slot>\n          </div>\n        </nord-stack>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-banner\": Banner\n  }\n}\n"],"names":["title","Icon","registerIcon","warningIcon","dangerIcon","infoIcon","successIcon","iconMap","warning","warningIcon.title","danger","dangerIcon.title","info","infoIcon.title","success","successIcon.title","Banner","LitElement","constructor","this","variant","render","icon","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"gXACO,MAAMA,EAAQ,6DADN,qfAEK,6ECDb,MAAMA,EAAQ,gEADN,shBAEK,2ECDb,MAAMA,EAAQ,6DADN,yUAEK,kECDb,MAAMA,EAAQ,uEADN,yXAEK,o/CCSpBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAClBJ,EAAKC,aAAaI,GAElB,MAAMC,EAA6C,CACjDC,QAASC,EACTC,OAAQC,EACRC,KAAMC,EACNC,QAASC,GAgBI,IAAMC,EAAN,cAAqBC,EAArB,WAAAC,uBAMgBC,KAAOC,QAA8C,MAgBnF,CAdC,MAAAC,GACE,MAAMC,EAAOf,EAAQY,KAAKC,UAAYb,EAAQK,KAE9C,OAAOW,CAAI,8GAGaD,8FAOzB,GApBMN,EAAAQ,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmEb,EAAAc,UAAA,eAAA,GANrEd,EAAMW,EAAA,CAD1BI,EAAc,gBACMf,SAAAA"}
+{"version":3,"file":"Banner.js","sources":["../../icons/lib/assets/interface-help.js","../../icons/lib/assets/interface-warning.js","../../icons/lib/assets/interface-info.js","../../icons/lib/assets/interface-checked-circle.js","../src/banner/Banner.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.15 15c0 .64-.51 1.15-1.15 1.15s-1.15-.51-1.15-1.15.51-1.15 1.15-1.15 1.15.51 1.15 1.15zm8.85-5c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8zm-8-5.5c-1.93 0-3.5 1.57-3.5 3.5h2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5c-.55 0-1 .45-1 1v1.5h2v-.65c1.44-.43 2.5-1.77 2.5-3.35 0-1.93-1.57-3.5-3.5-3.5z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-help\"\nexport const tags = \"nordicon interface help speech bubble support circle round question mark\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.1502 13c0 .64-.51 1.15-1.15 1.15-.63998 0-1.14998-.51-1.14998-1.15s.51-1.15 1.14998-1.15c.64 0 1.15.51 1.15 1.15zm-2.14998-2h1.99998v-5h-1.99998zm10.51998 6.01c-.36.62-1.01.99-1.73.99h-15.58998c-.72 0-1.360004-.37-1.730004-.99-.36-.62-.37-1.36-.02-1.99l7.800004-13.95c.36-.629997 1.03-1.0199969 1.74998-1.0199969.72 0 1.39.3899999 1.75 1.0199969l7.8 13.95c.35.63.34 1.37-.02 1.99zm-1.72-1.01-7.8-13.95-7.79998 13.95z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-warning\"\nexport const tags = \"nordicon interface warning exclamation mark triangle shape alert error\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m8.7 6c0-.72.58-1.3 1.3-1.3s1.3.58 1.3 1.3-.58 1.3-1.3 1.3-1.3-.58-1.3-1.3zm-8.7 4c0-5.51 4.49-10 10-10s10 4.49 10 10-4.49 10-10 10-10-4.49-10-10zm2 0c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8-8 3.59-8 8zm7 5h2v-6h-2z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-info\"\nexport const tags = \"nordicon interface info circle round alert notice information\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.3 6.38 1.49 1.33-5.32 5.95c-.18.21-.44.33-.72.33 0 0-.02 0-.03 0-.26 0-.52-.1-.71-.29l-2.86-2.86 1.41-1.41 2.12 2.12 4.61-5.17zm6.7 3.62c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-checked-circle\"\nexport const tags = \"nordicon interface circle round checked checkmark ready done success\"\n","import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport * as warningIcon from \"@nordhealth/icons/lib/assets/interface-help.js\"\nimport * as dangerIcon from \"@nordhealth/icons/lib/assets/interface-warning.js\"\nimport * as infoIcon from \"@nordhealth/icons/lib/assets/interface-info.js\"\nimport * as successIcon from \"@nordhealth/icons/lib/assets/interface-checked-circle.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Banner.css\"\n\nIcon.registerIcon(warningIcon)\nIcon.registerIcon(dangerIcon)\nIcon.registerIcon(infoIcon)\nIcon.registerIcon(successIcon)\n\nconst iconMap: Record<Banner[\"variant\"], string> = {\n  warning: warningIcon.title,\n  danger: dangerIcon.title,\n  info: infoIcon.title,\n  success: successIcon.title,\n}\n\n/**\n * Banner informs users about important changes or conditions in the\n * interface. Use this component if you need to communicate to users\n * in a prominent way.\n *\n * @status ready\n * @category feedback\n * @slot - default slot\n *\n * @cssprop [--n-banner-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-banner-box-shadow=var(--n-box-shadow-card)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n */\n@customElement(\"nord-banner\")\nexport default class Banner extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The style variant of the banner.\n   */\n  @property({ reflect: true }) variant: \"info\" | \"danger\" | \"success\" | \"warning\" = \"info\"\n\n  render() {\n    const icon = iconMap[this.variant] || iconMap.info\n\n    return html`\n      <div class=\"n-banner\" role=\"alert\">\n        <nord-stack align-items=\"start\" direction=\"horizontal\">\n          <nord-icon name=${icon} size=\"m\"></nord-icon>\n          <div class=\"n-banner-content\">\n            <slot></slot>\n          </div>\n        </nord-stack>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-banner\": Banner\n  }\n}\n"],"names":["title","Icon","registerIcon","warningIcon","dangerIcon","infoIcon","successIcon","iconMap","warning","warningIcon.title","danger","dangerIcon.title","info","infoIcon.title","success","successIcon.title","Banner","LitElement","constructor","this","variant","render","icon","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"gXACO,MAAMA,EAAQ,6DADN,qfAEK,6ECDb,MAAMA,EAAQ,gEADN,shBAEK,2ECDb,MAAMA,EAAQ,6DADN,yUAEK,kECDb,MAAMA,EAAQ,uEADN,yXAEK,o/CCSpBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAClBJ,EAAKC,aAAaI,GAElB,MAAMC,EAA6C,CACjDC,QAASC,EACTC,OAAQC,EACRC,KAAMC,EACNC,QAASC,GAgBI,IAAMC,EAAN,cAAqBC,EAArBC,kCAMgBC,KAAOC,QAA8C,MAgBnF,CAdCC,SACE,MAAMC,EAAOf,EAAQY,KAAKC,UAAYb,EAAQK,KAE9C,OAAOW,CAAI,8GAGaD,8FAOzB,GApBMN,EAAAQ,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmEb,EAAAc,UAAA,eAAA,GANrEd,EAAMW,EAAA,CAD1BI,EAAc,gBACMf,SAAAA"}

package/lib/Button.js

@@ -1,2 +1,2 @@
-import{i as t,x as o,A as n,_ as r,e,s as a}from"./query-assigned-elements-92ce7494.js";import{n as i}from"./property-c78323b1.js";import{e as s,n as l}from"./ref-99418ab4.js";import{E as b}from"./EventController-d99ebeef.js";import{L as d}from"./LightDomController-5388d84c.js";import{c}from"./cond-bb9ee891.js";import"./Spinner.js";import{F as u}from"./FocusableMixin-d30213b4.js";import{I as v}from"./InputMixin-83b5bd46.js";import{s as h}from"./Component-2253424f.js";import{S as p}from"./SlotController-d733c575.js";import"./directive-e9ce14b4.js";import"./if-defined-cccde88f.js";const g=t`:host{--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius-s));--_n-button-gap:var(--n-button-gap, var(--n-space-s));--_n-button-gradient:var(--n-button-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button));--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-strong));--_n-button-text-align:var(--n-button-text-align, center);--_n-button-box-shadow:var(--n-button-box-shadow, var(--n-box-shadow));--_n-button-color:var(--n-button-color, var(--n-color-text));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-m) / 1.2));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-m));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight));--_n-button-min-block-size:var(--n-button-min-block-size, var(--n-space-xl));--_n-button-toggle-icon-color:var(--n-button-toggle-icon-color, var(--n-color-icon));--_n-button-overflow:var(--n-button-overflow, hidden);--_n-button-opacity:1;--_n-button-border-style:solid;--_n-button-inline-size:fit-content;--_n-button-padding-block:calc(var(--n-space-s) / 1.6);--_n-button-icon-size:var(--n-size-icon-s);display:inline-block}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--_n-button-background-color);opacity:var(--_n-button-opacity);border-radius:var(--_n-button-border-radius);border:1px var(--_n-button-border-style) var(--_n-button-border-color);box-shadow:var(--_n-button-box-shadow);color:var(--_n-button-color);cursor:pointer;display:flex;gap:var(--_n-button-gap);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-button-font-size);font-weight:var(--_n-button-font-weight);line-height:var(--n-line-height-form);margin:0;min-block-size:var(--_n-button-min-block-size);padding:var(--_n-button-padding-block) var(--_n-button-padding-inline);text-align:var(--_n-button-text-align);text-decoration:none;transition:var(--n-transition-quickly);transition-property:background-color,opacity,color,box-shadow,border-color;-webkit-user-select:none;user-select:none;position:relative;inline-size:var(--_n-button-inline-size)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--_n-button-gradient);border-radius:var(--_n-button-border-radius);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([expand]){--_n-button-inline-size:100%;display:block}.n-content{flex:1;overflow:var(--_n-button-overflow);text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}.n-button:focus{outline:0}.n-button:focus-visible{--_n-button-border-color:var(--n-button-border-color, var(--n-color-accent));--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow));--_n-button-border-style:solid}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-on-accent));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active))}:host([variant=primary]),:host([variant=primary]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-accent))}:host([variant=primary]) .n-button:hover{filter:brightness(93%)}:host([variant=primary]) .n-button:focus{--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-surface), 0 0 0 3px var(--_n-button-border-color))}:host([variant=dashed]){--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-weaker));--_n-button-border-style:dashed}:host([variant=dashed]) .n-button:hover{--_n-button-color:var(--n-button-color, var(--n-color-text))}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--_n-button-box-shadow:var(--n-button-box-shadow, none)}:host([variant=plain]),:host([variant=plain]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-on-accent));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active))}:host([variant=danger]),:host([variant=danger]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-status-danger))}:host([variant=danger]) .n-button:hover{filter:brightness(93%)}:host([variant=danger]) .n-button:focus{--_n-button-border-color:var(--n-button-border-color, var(--n-color-status-danger));--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-surface), 0 0 0 3px var(--n-color-status-danger))}:host([disabled]){--_n-button-border-color:var(--n-button-border-color, var(--_n-button-background-color));--_n-button-background-color:var(--n-button-background-color, var(--n-color-border));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-weak));--_n-button-opacity:0.5;pointer-events:none}:host([disabled]) .n-button::after{display:none}.n-button-spinner{position:absolute;transform:translateX(-50%) translateY(-50%);inset-block-start:50%;inset-inline-start:50%}:host([loading]:not([href])){pointer-events:none}:host([loading]:not([href])) .n-content,:host([loading]:not([href])) ::slotted([slot=end]),:host([loading]:not([href])) ::slotted([slot=start]){opacity:0}:host([size="s"]){--_n-button-gap:var(--n-button-gap, var(--n-space-xs));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-s) + 1px));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-s));--_n-button-min-block-size:var(--n-button-min-block-size, calc(var(--n-space-l) + var(--n-space-xs)));--_n-button-padding-block:calc(var(--n-space-xs) - 1px);--_n-button-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-l) / 1.3));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-l));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active));--_n-button-min-block-size:var(--n-button-min-block-size, calc(var(--n-space-xxl) - var(--n-space-l)));--_n-button-icon-size:var(--n-size-icon-m)}:host([square]){--_n-button-inline-size:var(--_n-button-min-block-size);--_n-button-padding-block:0;--_n-button-padding-inline:0}:host([square]) .n-content{display:flex;justify-content:center;align-items:center}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}:host(:not([variant=primary],[variant=danger])) ::slotted(nord-icon){color:var(--n-color-icon)}:host(:not([variant=primary],[variant=danger])) .n-toggle-icon{color:var(--_n-button-toggle-icon-color)}:host(:not([square])) slot:not([name])::slotted(nord-icon){transform:translateY(1px)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-button-icon-size)}`;let f=class extends(v(u(a))){constructor(){super(...arguments),this.defaultSlot=new p(this),this.buttonRef=s(),this.events=new b(this),this.lightDom=new d(this,{render:()=>this.renderLightDom()}),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1,this.square=!1,this.loading=!1,this.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"click",this.handleOuterClick,!0)}render(){var t;const r="toggle"===(null===(t=this.assignedSlot)||void 0===t?void 0:t.name),e=this.defaultSlot.assigned.some((t=>"nord-icon"===t.localName)),a=r&&!e&&!this.href,i=o`<slot name="start"></slot><div class="n-content"><slot></slot></div><nord-spinner class="n-button-spinner" color="currentColor" ?hidden="${!this.loading||Boolean(this.href)}"></nord-spinner><slot name="end">${a?o`<nord-icon name="interface-dropdown-small" class="n-toggle-icon"></nord-icon>`:n}</slot>`;return this.href?this.renderLink(i):this.renderButton(i)}renderLink(t){return o`<a ${l(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${c(this.disabled,n,this.href)}" tabindex="${c(this.disabled,"-1")}" aria-disabled="${c(this.disabled,"true")}" role="${c(this.disabled,"link")}">${t}</a>`}renderButton(t){return o`<slot name="proxy" @slotchange="${this.handleProxyChange}"></slot><button ${l(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${c(this.name)}" value="${c(this.value)}" @click="${this.handleClick}" aria-disabled="${c(this.loading,"true")}" aria-expanded="${c(this.accessibleExpanded)}" aria-haspopup="${c(this.accessibleHasPopup)}">${t}</button>`}renderLightDom(){return this.href||!this.form?n:o`<button ${l(this.buttonRef)} slot="proxy" name="${c(this.name)}" value="${c(this.value)}" ?disabled="${this.disabled}" form="${c(this._formId)}" type="${this.type}"></button>`}handleClick(t){this.buttonRef.value&&(t.stopPropagation(),this.buttonRef.value.click())}handleProxyChange(t){const o=t.target,n=this.buttonRef.value;n&&n.assignedSlot!==o&&this.appendChild(n)}};f.styles=[h,g],r([i({reflect:!0})],f.prototype,"variant",void 0),r([i({reflect:!0})],f.prototype,"type",void 0),r([i({reflect:!0})],f.prototype,"size",void 0),r([i({attribute:"aria-expanded"})],f.prototype,"accessibleExpanded",void 0),r([i({attribute:"aria-haspopup"})],f.prototype,"accessibleHasPopup",void 0),r([i({reflect:!0})],f.prototype,"href",void 0),r([i({reflect:!0,type:Boolean})],f.prototype,"download",void 0),r([i()],f.prototype,"target",void 0),r([i({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),r([i({reflect:!0,type:Boolean})],f.prototype,"square",void 0),r([i({reflect:!0,type:Boolean})],f.prototype,"loading",void 0),f=r([e("nord-button")],f);var _=f;export{_ as default};
+import{i as t,x as o,A as n,_ as r,e,s as a}from"./query-assigned-elements-15485e3d.js";import{e as i}from"./property-03f59dce.js";import{e as s,n as l}from"./ref-5526fb07.js";import{E as b}from"./EventController-d99ebeef.js";import{L as d}from"./LightDomController-3d3edb76.js";import{c}from"./cond-44672025.js";import"./Spinner.js";import{F as u}from"./FocusableMixin-4300e44e.js";import{I as v}from"./InputMixin-f9fb4034.js";import{s as h}from"./Component-420bbc41.js";import{S as p}from"./SlotController-d733c575.js";import"./directive-de55b00a.js";import"./if-defined-9b177db4.js";const g=t`:host{--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius-s));--_n-button-gap:var(--n-button-gap, var(--n-space-s));--_n-button-gradient:var(--n-button-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button));--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-strong));--_n-button-text-align:var(--n-button-text-align, center);--_n-button-box-shadow:var(--n-button-box-shadow, var(--n-box-shadow));--_n-button-color:var(--n-button-color, var(--n-color-text));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-m) / 1.2));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-m));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight));--_n-button-min-block-size:var(--n-button-min-block-size, var(--n-space-xl));--_n-button-toggle-icon-color:var(--n-button-toggle-icon-color, var(--n-color-icon));--_n-button-overflow:var(--n-button-overflow, hidden);--_n-button-opacity:1;--_n-button-border-style:solid;--_n-button-inline-size:fit-content;--_n-button-padding-block:calc(var(--n-space-s) / 1.6);--_n-button-icon-size:var(--n-size-icon-s);display:inline-block}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--_n-button-background-color);opacity:var(--_n-button-opacity);border-radius:var(--_n-button-border-radius);border:1px var(--_n-button-border-style) var(--_n-button-border-color);box-shadow:var(--_n-button-box-shadow);color:var(--_n-button-color);cursor:pointer;display:flex;gap:var(--_n-button-gap);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-button-font-size);font-weight:var(--_n-button-font-weight);line-height:var(--n-line-height-form);margin:0;min-block-size:var(--_n-button-min-block-size);padding:var(--_n-button-padding-block) var(--_n-button-padding-inline);text-align:var(--_n-button-text-align);text-decoration:none;transition:var(--n-transition-quickly);transition-property:background-color,opacity,color,box-shadow,border-color;-webkit-user-select:none;user-select:none;position:relative;inline-size:var(--_n-button-inline-size)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--_n-button-gradient);border-radius:var(--_n-button-border-radius);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([expand]){--_n-button-inline-size:100%;display:block}.n-content{flex:1;overflow:var(--_n-button-overflow);text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}.n-button:focus{outline:0}.n-button:focus-visible{--_n-button-border-color:var(--n-button-border-color, var(--n-color-accent));--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow));--_n-button-border-style:solid}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-on-accent));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active))}:host([variant=primary]),:host([variant=primary]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-accent))}:host([variant=primary]) .n-button:hover{filter:brightness(93%)}:host([variant=primary]) .n-button:focus{--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-surface), 0 0 0 3px var(--_n-button-border-color))}:host([variant=dashed]){--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-weaker));--_n-button-border-style:dashed}:host([variant=dashed]) .n-button:hover{--_n-button-color:var(--n-button-color, var(--n-color-text))}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--_n-button-box-shadow:var(--n-button-box-shadow, none)}:host([variant=plain]),:host([variant=plain]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-on-accent));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active))}:host([variant=danger]),:host([variant=danger]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-status-danger))}:host([variant=danger]) .n-button:hover{filter:brightness(93%)}:host([variant=danger]) .n-button:focus{--_n-button-border-color:var(--n-button-border-color, var(--n-color-status-danger));--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-surface), 0 0 0 3px var(--n-color-status-danger))}:host([disabled]){--_n-button-border-color:var(--n-button-border-color, var(--_n-button-background-color));--_n-button-background-color:var(--n-button-background-color, var(--n-color-border));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-weak));--_n-button-opacity:0.5;pointer-events:none}:host([disabled]) .n-button::after{display:none}.n-button-spinner{position:absolute;transform:translateX(-50%) translateY(-50%);inset-block-start:50%;inset-inline-start:50%}:host([loading]:not([href])){pointer-events:none}:host([loading]:not([href])) .n-content,:host([loading]:not([href])) ::slotted([slot=end]),:host([loading]:not([href])) ::slotted([slot=start]){opacity:0}:host([size="s"]){--_n-button-gap:var(--n-button-gap, var(--n-space-xs));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-s) + 1px));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-s));--_n-button-min-block-size:var(--n-button-min-block-size, calc(var(--n-space-l) + var(--n-space-xs)));--_n-button-padding-block:calc(var(--n-space-xs) - 1px);--_n-button-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-l) / 1.3));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-l));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active));--_n-button-min-block-size:var(--n-button-min-block-size, calc(var(--n-space-xxl) - var(--n-space-l)));--_n-button-icon-size:var(--n-size-icon-m)}:host([square]){--_n-button-inline-size:var(--_n-button-min-block-size);--_n-button-padding-block:0;--_n-button-padding-inline:0}:host([square]) .n-content{display:flex;justify-content:center;align-items:center}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}:host(:not([variant=primary],[variant=danger])) ::slotted(nord-icon){color:var(--n-color-icon)}:host(:not([variant=primary],[variant=danger])) .n-toggle-icon{color:var(--_n-button-toggle-icon-color)}:host(:not([square])) slot:not([name])::slotted(nord-icon){transform:translateY(1px)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-button-icon-size)}`;let f=class extends(v(u(a))){constructor(){super(...arguments),this.defaultSlot=new p(this),this.buttonRef=s(),this.events=new b(this),this.lightDom=new d(this,{render:()=>this.renderLightDom()}),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1,this.square=!1,this.loading=!1,this.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"click",this.handleOuterClick,!0)}render(){var t;const r="toggle"===(null===(t=this.assignedSlot)||void 0===t?void 0:t.name),e=this.defaultSlot.assigned.some((t=>"nord-icon"===t.localName)),a=r&&!e&&!this.href,i=o`<slot name="start"></slot><div class="n-content"><slot></slot></div><nord-spinner class="n-button-spinner" color="currentColor" ?hidden="${!this.loading||Boolean(this.href)}"></nord-spinner><slot name="end">${a?o`<nord-icon name="interface-dropdown-small" class="n-toggle-icon"></nord-icon>`:n}</slot>`;return this.href?this.renderLink(i):this.renderButton(i)}renderLink(t){return o`<a ${l(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${c(this.disabled,n,this.href)}" tabindex="${c(this.disabled,"-1")}" aria-disabled="${c(this.disabled,"true")}" role="${c(this.disabled,"link")}">${t}</a>`}renderButton(t){return o`<slot name="proxy" @slotchange="${this.handleProxyChange}"></slot><button ${l(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${c(this.name)}" value="${c(this.value)}" @click="${this.handleClick}" aria-disabled="${c(this.loading,"true")}" aria-expanded="${c(this.accessibleExpanded)}" aria-haspopup="${c(this.accessibleHasPopup)}">${t}</button>`}renderLightDom(){return this.href||!this.form?n:o`<button ${l(this.buttonRef)} slot="proxy" name="${c(this.name)}" value="${c(this.value)}" ?disabled="${this.disabled}" form="${c(this._formId)}" type="${this.type}"></button>`}handleClick(t){this.buttonRef.value&&(t.stopPropagation(),this.buttonRef.value.click())}handleProxyChange(t){const o=t.target,n=this.buttonRef.value;n&&n.assignedSlot!==o&&this.appendChild(n)}};f.styles=[h,g],r([i({reflect:!0})],f.prototype,"variant",void 0),r([i({reflect:!0})],f.prototype,"type",void 0),r([i({reflect:!0})],f.prototype,"size",void 0),r([i({attribute:"aria-expanded"})],f.prototype,"accessibleExpanded",void 0),r([i({attribute:"aria-haspopup"})],f.prototype,"accessibleHasPopup",void 0),r([i({reflect:!0})],f.prototype,"href",void 0),r([i({reflect:!0,type:Boolean})],f.prototype,"download",void 0),r([i()],f.prototype,"target",void 0),r([i({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),r([i({reflect:!0,type:Boolean})],f.prototype,"square",void 0),r([i({reflect:!0,type:Boolean})],f.prototype,"loading",void 0),f=r([e("nord-button")],f);var _=f;export{_ as default};
 //# sourceMappingURL=Button.js.map

package/lib/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { createRef, ref } from \"lit/directives/ref.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport \"../spinner/Spinner.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Button.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n *\n * @status ready\n * @category action\n * @slot - The button content\n * @slot start - Used to place content at the start of button text. Typically used for icons.\n * @slot end - Used to place content at the end of button text. Typically used for icons.\n *\n * @cssprop [--n-button-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-button-gap=var(--n-space-s)] - Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the button.\n * @cssprop [--n-button-background-color=var(--n-color-button)] - Controls the background color of the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-border-color=var(--n-color-border-strong)] - Controls the border color of the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-text-align=center] - Controls the text alignment for the text in the button.\n * @cssprop [--n-button-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-button-color=var(--n-color-text)] - Controls the color of the text within the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-padding-inline=calc(var(--n-space-m) / 1.2)] - Controls the inline, or left and right, padding of the button.\n * @cssprop [--n-button-font-size=var(--n-font-size-m)] - Controls the size of the text within the button, using our [font tokens](/tokens/#font).\n * @cssprop [--n-button-font-weight=var(--n-font-weight)] - Controls the weight of the text within the button, using our [font tokens](/tokens/#font).\n * @cssprop [--n-button-min-block-size=var(--n-space-xl)] - Controls the minimum block size, or height, of the button using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-toggle-icon-color=var(--n-color-icon)] - Controls the color of toggle icon that gets rendered when the button is used as a [Dropdown](/components/dropdown/) toggle.\n */\n@customElement(\"nord-button\")\nexport default class Button extends InputMixin(FocusableMixin(LitElement)) {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n  private buttonRef = createRef<HTMLButtonElement>()\n  private events = new EventController(this)\n  private lightDom = new LightDomController(this, {\n    render: () => this.renderLightDom(),\n  })\n\n  /**\n   * The style variant of the button.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" = \"default\"\n\n  /**\n   * The type of the button.\n   */\n  @property({ reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"submit\"\n\n  /**\n   * The size of the button.\n   * This affects font-size and padding.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n  /**\n   * @private\n   * This does not need to be documented,\n   * since it is only for forwarding the aria-expanded attribute\n   * to the internal button element.\n   */\n  @property({ attribute: \"aria-expanded\" }) accessibleExpanded?: \"true\" | \"false\"\n\n  /**\n   * @private\n   * This does not need to be documented,\n   * since it is only for forwarding the aria-haspopup attribute\n   * to the internal button element.\n   */\n  @property({ attribute: \"aria-haspopup\" }) accessibleHasPopup?:\n    | \"false\"\n    | \"true\"\n    | \"menu\"\n    | \"listbox\"\n    | \"tree\"\n    | \"grid\"\n    | \"dialog\"\n\n  /**\n   * When provided, renders the button as a link,\n   * with its href attribute set to the given value.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * When provided together with a href property, the button will\n   * trigger a file download instead of a page visit.\n   */\n  @property({ reflect: true, type: Boolean }) download = false\n\n  /**\n   * When provided together with a href property, determines where\n   * to open the linked URL. The keywords have special meanings for\n   * where to load the URL: “_self” means the current browsing context,\n   * “_blank” usually a new tab but users can configure browsers this to\n   * open a new window instead, “_parent” means the parent browsing\n   * context of the current one, but if no parent exists, behaves as\n   * _self, and finally “top” means the topmost browsing context.\n   */\n  @property() target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\"\n\n  /**\n   * Controls whether the button expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * When provided, the button is rendered as a square button. Use this for icon only buttons.\n   */\n  @property({ reflect: true, type: Boolean }) square = false\n\n  /**\n   * Controls whether the button is in loading state. Please note that the spinner\n   * is hidden from assistive technologies, so you need to make sure to announce\n   * the loading state to e.g. screen reader users. We also recommend disabling\n   * all user interactions on the button itself while in loading state.\n   */\n  @property({ reflect: true, type: Boolean }) loading = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.events.listen(this, \"click\", this.handleOuterClick, true)\n  }\n\n  render() {\n    const isDropdownToggle = this.assignedSlot?.name === \"toggle\"\n    const isIconButton = this.defaultSlot.assigned.some(node => node.localName === \"nord-icon\")\n    const shouldShowDropdownIcon = isDropdownToggle && !isIconButton && !this.href\n\n    const innards = html`\n      <slot name=\"start\"></slot>\n      <div class=\"n-content\">\n        <slot></slot>\n      </div>\n      <nord-spinner\n        class=\"n-button-spinner\"\n        color=\"currentColor\"\n        ?hidden=${!this.loading || Boolean(this.href)}\n      ></nord-spinner>\n      <slot name=\"end\">\n        ${shouldShowDropdownIcon\n          ? html`<nord-icon name=\"interface-dropdown-small\" class=\"n-toggle-icon\"></nord-icon>`\n          : nothing}\n      </slot>\n    `\n\n    return this.href ? this.renderLink(innards) : this.renderButton(innards)\n  }\n\n  /**\n   * We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\n   * Links cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\n   * Along with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order.\n   *\n   * @see https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n   */\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a\n        ${ref(this.focusableRef)}\n        class=\"n-button\"\n        target=${this.target}\n        ?download=${this.download}\n        href=${cond(this.disabled, nothing, this.href)}\n        tabindex=${cond(this.disabled, \"-1\")}\n        aria-disabled=${cond(this.disabled, \"true\")}\n        role=${cond(this.disabled, \"link\")}\n        >${innards}\n      </a>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`\n      <slot name=\"proxy\" @slotchange=${this.handleProxyChange}></slot>\n      <button\n        ${ref(this.focusableRef)}\n        class=\"n-button\"\n        ?disabled=${this.disabled}\n        name=${cond(this.name)}\n        value=${cond(this.value)}\n        @click=${this.handleClick}\n        aria-disabled=${cond(this.loading, \"true\")}\n        aria-expanded=${cond(this.accessibleExpanded)}\n        aria-haspopup=${cond(this.accessibleHasPopup)}\n      >\n        ${innards}\n      </button>\n    `\n  }\n\n  private renderLightDom() {\n    if (this.href || !this.form) {\n      return nothing\n    }\n\n    return html`\n      <button\n        ${ref(this.buttonRef)}\n        slot=\"proxy\"\n        name=${cond(this.name)}\n        value=${cond(this.value)}\n        ?disabled=${this.disabled}\n        form=${cond(this._formId)}\n        type=${this.type}\n      ></button>\n    `\n  }\n\n  private handleOuterClick = (e: MouseEvent) => {\n    // we want to avoid emitting click events when a click\n    // happens in blank space in the host, but not on the button\n    // so we stop propagation of any events if click didn't happen on the internal or proxy button\n    const isInternalButton = e\n      .composedPath()\n      .some(node => node === this.focusableRef.value || node === this.buttonRef.value)\n\n    if (!isInternalButton) {\n      e.stopPropagation()\n    }\n  }\n\n  private handleClick(e: Event) {\n    if (this.buttonRef.value) {\n      // prevents two events: one from internal button, one from proxy button\n      e.stopPropagation()\n      this.buttonRef.value.click()\n    }\n  }\n\n  /**\n   * React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\n   * So we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in.\n   */\n  private handleProxyChange(e: Event) {\n    const slot = e.target as HTMLSlotElement\n    const proxyButton = this.buttonRef.value\n\n    if (proxyButton && proxyButton.assignedSlot !== slot) {\n      this.appendChild(proxyButton)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-button\": Button\n  }\n}\n"],"names":["Button","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","buttonRef","createRef","events","EventController","lightDom","LightDomController","render","renderLightDom","variant","type","size","download","target","expand","square","loading","handleOuterClick","e","composedPath","some","node","focusableRef","value","stopPropagation","connectedCallback","super","listen","isDropdownToggle","_a","assignedSlot","name","isIconButton","assigned","localName","shouldShowDropdownIcon","href","innards","html","Boolean","nothing","renderLink","renderButton","ref","cond","disabled","handleProxyChange","handleClick","accessibleExpanded","accessibleHasPopup","form","_formId","click","slot","proxyButton","appendChild","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","customElement"],"mappings":"2lQAyCe,IAAMA,EAAN,cAAqBC,EAAWC,EAAeC,KAA/C,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAASG,UAAGC,IACZJ,KAAAK,OAAS,IAAIC,EAAgBN,MAC7BA,KAAAO,SAAW,IAAIC,EAAmBR,KAAM,CAC9CS,OAAQ,IAAMT,KAAKU,mBAMQV,KAAOW,QAA0D,UAKjEX,KAAIY,KAAkC,SAMtCZ,KAAIa,KAAoB,IAmCTb,KAAQc,UAAG,EAW3Cd,KAAMe,OAA4C,QAKlBf,KAAMgB,QAAG,EAKThB,KAAMiB,QAAG,EAQTjB,KAAOkB,SAAG,EA4F9ClB,KAAAmB,iBAAoBC,IAIDA,EACtBC,eACAC,MAAKC,GAAQA,IAASvB,KAAKwB,aAAaC,OAASF,IAASvB,KAAKG,UAAUsB,SAG1EL,EAAEM,iBACH,CAuBJ,CA3HC,iBAAAC,GACEC,MAAMD,oBACN3B,KAAKK,OAAOwB,OAAO7B,KAAM,QAASA,KAAKmB,kBAAkB,EAC1D,CAED,MAAAV,SACE,MAAMqB,EAA+C,YAAT,QAAnBC,EAAA/B,KAAKgC,oBAAc,IAAAD,OAAA,EAAAA,EAAAE,MACtCC,EAAelC,KAAKC,YAAYkC,SAASb,MAAKC,GAA2B,cAAnBA,EAAKa,YAC3DC,EAAyBP,IAAqBI,IAAiBlC,KAAKsC,KAEpEC,EAAUC,CAAI,6IAQLxC,KAAKkB,SAAWuB,QAAQzC,KAAKsC,0CAGtCD,EACEG,CAAI,gFACJE,WAIR,OAAO1C,KAAKsC,KAAOtC,KAAK2C,WAAWJ,GAAWvC,KAAK4C,aAAaL,EACjE,CASO,UAAAI,CAAWJ,GACjB,OAAOC,CAAI,MAELK,EAAI7C,KAAKwB,0CAEFxB,KAAKe,sBACFf,KAAKc,mBACVgC,EAAK9C,KAAK+C,SAAUL,EAAS1C,KAAKsC,oBAC9BQ,EAAK9C,KAAK+C,SAAU,yBACfD,EAAK9C,KAAK+C,SAAU,kBAC7BD,EAAK9C,KAAK+C,SAAU,YACxBR,OAGR,CAEO,YAAAK,CAAaL,GACnB,OAAOC,CAAI,mCACwBxC,KAAKgD,qCAElCH,EAAI7C,KAAKwB,6CAECxB,KAAK+C,mBACVD,EAAK9C,KAAKiC,iBACTa,EAAK9C,KAAKyB,mBACTzB,KAAKiD,+BACEH,EAAK9C,KAAKkB,QAAS,2BACnB4B,EAAK9C,KAAKkD,uCACVJ,EAAK9C,KAAKmD,wBAExBZ,YAGP,CAEO,cAAA7B,GACN,OAAIV,KAAKsC,OAAStC,KAAKoD,KACdV,EAGFF,CAAI,WAELK,EAAI7C,KAAKG,iCAEJ2C,EAAK9C,KAAKiC,iBACTa,EAAK9C,KAAKyB,sBACNzB,KAAK+C,mBACVD,EAAK9C,KAAKqD,mBACVrD,KAAKY,iBAGjB,CAeO,WAAAqC,CAAY7B,GACdpB,KAAKG,UAAUsB,QAEjBL,EAAEM,kBACF1B,KAAKG,UAAUsB,MAAM6B,QAExB,CAMO,iBAAAN,CAAkB5B,GACxB,MAAMmC,EAAOnC,EAAEL,OACTyC,EAAcxD,KAAKG,UAAUsB,MAE/B+B,GAAeA,EAAYxB,eAAiBuB,GAC9CvD,KAAKyD,YAAYD,EAEpB,GAnNM7D,EAAA+D,OAAS,CAACC,EAAgBC,GAYJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAkFpE,EAAAqE,UAAA,eAAA,GAK1EH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsDpE,EAAAqE,UAAA,YAAA,GAM9CH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmCpE,EAAAqE,UAAA,YAAA,GAQdH,EAAA,CAAzCC,EAAS,CAAEG,UAAW,mBAAwDtE,EAAAqE,UAAA,0BAAA,GAQrCH,EAAA,CAAzCC,EAAS,CAAEG,UAAW,mBAOXtE,EAAAqE,UAAA,0BAAA,GAMiBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBpE,EAAAqE,UAAA,YAAA,GAMEH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMnD,KAAM6B,WAA2B9C,EAAAqE,UAAA,gBAAA,GAWhDH,EAAA,CAAXC,KAAoEnE,EAAAqE,UAAA,cAAA,GAKzBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMnD,KAAM6B,WAAyB9C,EAAAqE,UAAA,cAAA,GAKdH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMnD,KAAM6B,WAAyB9C,EAAAqE,UAAA,cAAA,GAQdH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMnD,KAAM6B,WAA0B9C,EAAAqE,UAAA,eAAA,GAxFxCrE,EAAMkE,EAAA,CAD1BK,EAAc,gBACMvE,SAAAA"}
+{"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { createRef, ref } from \"lit/directives/ref.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport \"../spinner/Spinner.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Button.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n *\n * @status ready\n * @category action\n * @slot - The button content\n * @slot start - Used to place content at the start of button text. Typically used for icons.\n * @slot end - Used to place content at the end of button text. Typically used for icons.\n *\n * @cssprop [--n-button-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-button-gap=var(--n-space-s)] - Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the button.\n * @cssprop [--n-button-background-color=var(--n-color-button)] - Controls the background color of the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-border-color=var(--n-color-border-strong)] - Controls the border color of the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-text-align=center] - Controls the text alignment for the text in the button.\n * @cssprop [--n-button-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-button-color=var(--n-color-text)] - Controls the color of the text within the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-padding-inline=calc(var(--n-space-m) / 1.2)] - Controls the inline, or left and right, padding of the button.\n * @cssprop [--n-button-font-size=var(--n-font-size-m)] - Controls the size of the text within the button, using our [font tokens](/tokens/#font).\n * @cssprop [--n-button-font-weight=var(--n-font-weight)] - Controls the weight of the text within the button, using our [font tokens](/tokens/#font).\n * @cssprop [--n-button-min-block-size=var(--n-space-xl)] - Controls the minimum block size, or height, of the button using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-toggle-icon-color=var(--n-color-icon)] - Controls the color of toggle icon that gets rendered when the button is used as a [Dropdown](/components/dropdown/) toggle.\n */\n@customElement(\"nord-button\")\nexport default class Button extends InputMixin(FocusableMixin(LitElement)) {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n  private buttonRef = createRef<HTMLButtonElement>()\n  private events = new EventController(this)\n  private lightDom = new LightDomController(this, {\n    render: () => this.renderLightDom(),\n  })\n\n  /**\n   * The style variant of the button.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" = \"default\"\n\n  /**\n   * The type of the button.\n   */\n  @property({ reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"submit\"\n\n  /**\n   * The size of the button.\n   * This affects font-size and padding.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n  /**\n   * @private\n   * This does not need to be documented,\n   * since it is only for forwarding the aria-expanded attribute\n   * to the internal button element.\n   */\n  @property({ attribute: \"aria-expanded\" }) accessibleExpanded?: \"true\" | \"false\"\n\n  /**\n   * @private\n   * This does not need to be documented,\n   * since it is only for forwarding the aria-haspopup attribute\n   * to the internal button element.\n   */\n  @property({ attribute: \"aria-haspopup\" }) accessibleHasPopup?:\n    | \"false\"\n    | \"true\"\n    | \"menu\"\n    | \"listbox\"\n    | \"tree\"\n    | \"grid\"\n    | \"dialog\"\n\n  /**\n   * When provided, renders the button as a link,\n   * with its href attribute set to the given value.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * When provided together with a href property, the button will\n   * trigger a file download instead of a page visit.\n   */\n  @property({ reflect: true, type: Boolean }) download = false\n\n  /**\n   * When provided together with a href property, determines where\n   * to open the linked URL. The keywords have special meanings for\n   * where to load the URL: “_self” means the current browsing context,\n   * “_blank” usually a new tab but users can configure browsers this to\n   * open a new window instead, “_parent” means the parent browsing\n   * context of the current one, but if no parent exists, behaves as\n   * _self, and finally “top” means the topmost browsing context.\n   */\n  @property() target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\"\n\n  /**\n   * Controls whether the button expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * When provided, the button is rendered as a square button. Use this for icon only buttons.\n   */\n  @property({ reflect: true, type: Boolean }) square = false\n\n  /**\n   * Controls whether the button is in loading state. Please note that the spinner\n   * is hidden from assistive technologies, so you need to make sure to announce\n   * the loading state to e.g. screen reader users. We also recommend disabling\n   * all user interactions on the button itself while in loading state.\n   */\n  @property({ reflect: true, type: Boolean }) loading = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.events.listen(this, \"click\", this.handleOuterClick, true)\n  }\n\n  render() {\n    const isDropdownToggle = this.assignedSlot?.name === \"toggle\"\n    const isIconButton = this.defaultSlot.assigned.some(node => node.localName === \"nord-icon\")\n    const shouldShowDropdownIcon = isDropdownToggle && !isIconButton && !this.href\n\n    const innards = html`\n      <slot name=\"start\"></slot>\n      <div class=\"n-content\">\n        <slot></slot>\n      </div>\n      <nord-spinner\n        class=\"n-button-spinner\"\n        color=\"currentColor\"\n        ?hidden=${!this.loading || Boolean(this.href)}\n      ></nord-spinner>\n      <slot name=\"end\">\n        ${shouldShowDropdownIcon\n          ? html`<nord-icon name=\"interface-dropdown-small\" class=\"n-toggle-icon\"></nord-icon>`\n          : nothing}\n      </slot>\n    `\n\n    return this.href ? this.renderLink(innards) : this.renderButton(innards)\n  }\n\n  /**\n   * We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\n   * Links cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\n   * Along with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order.\n   *\n   * @see https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n   */\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a\n        ${ref(this.focusableRef)}\n        class=\"n-button\"\n        target=${this.target}\n        ?download=${this.download}\n        href=${cond(this.disabled, nothing, this.href)}\n        tabindex=${cond(this.disabled, \"-1\")}\n        aria-disabled=${cond(this.disabled, \"true\")}\n        role=${cond(this.disabled, \"link\")}\n        >${innards}\n      </a>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`\n      <slot name=\"proxy\" @slotchange=${this.handleProxyChange}></slot>\n      <button\n        ${ref(this.focusableRef)}\n        class=\"n-button\"\n        ?disabled=${this.disabled}\n        name=${cond(this.name)}\n        value=${cond(this.value)}\n        @click=${this.handleClick}\n        aria-disabled=${cond(this.loading, \"true\")}\n        aria-expanded=${cond(this.accessibleExpanded)}\n        aria-haspopup=${cond(this.accessibleHasPopup)}\n      >\n        ${innards}\n      </button>\n    `\n  }\n\n  private renderLightDom() {\n    if (this.href || !this.form) {\n      return nothing\n    }\n\n    return html`\n      <button\n        ${ref(this.buttonRef)}\n        slot=\"proxy\"\n        name=${cond(this.name)}\n        value=${cond(this.value)}\n        ?disabled=${this.disabled}\n        form=${cond(this._formId)}\n        type=${this.type}\n      ></button>\n    `\n  }\n\n  private handleOuterClick = (e: MouseEvent) => {\n    // we want to avoid emitting click events when a click\n    // happens in blank space in the host, but not on the button\n    // so we stop propagation of any events if click didn't happen on the internal or proxy button\n    const isInternalButton = e\n      .composedPath()\n      .some(node => node === this.focusableRef.value || node === this.buttonRef.value)\n\n    if (!isInternalButton) {\n      e.stopPropagation()\n    }\n  }\n\n  private handleClick(e: Event) {\n    if (this.buttonRef.value) {\n      // prevents two events: one from internal button, one from proxy button\n      e.stopPropagation()\n      this.buttonRef.value.click()\n    }\n  }\n\n  /**\n   * React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\n   * So we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in.\n   */\n  private handleProxyChange(e: Event) {\n    const slot = e.target as HTMLSlotElement\n    const proxyButton = this.buttonRef.value\n\n    if (proxyButton && proxyButton.assignedSlot !== slot) {\n      this.appendChild(proxyButton)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-button\": Button\n  }\n}\n"],"names":["Button","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","buttonRef","createRef","events","EventController","lightDom","LightDomController","render","renderLightDom","variant","type","size","download","target","expand","square","loading","handleOuterClick","e","composedPath","some","node","focusableRef","value","stopPropagation","connectedCallback","super","listen","isDropdownToggle","_a","assignedSlot","name","isIconButton","assigned","localName","shouldShowDropdownIcon","href","innards","html","Boolean","nothing","renderLink","renderButton","ref","cond","disabled","handleProxyChange","handleClick","accessibleExpanded","accessibleHasPopup","form","_formId","click","slot","proxyButton","appendChild","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","customElement"],"mappings":"2lQAyCe,IAAMA,EAAN,cAAqBC,EAAWC,EAAeC,KAA/CC,kCAGLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAASG,UAAGC,IACZJ,KAAAK,OAAS,IAAIC,EAAgBN,MAC7BA,KAAAO,SAAW,IAAIC,EAAmBR,KAAM,CAC9CS,OAAQ,IAAMT,KAAKU,mBAMQV,KAAOW,QAA0D,UAKjEX,KAAIY,KAAkC,SAMtCZ,KAAIa,KAAoB,IAmCTb,KAAQc,UAAG,EAW3Cd,KAAMe,OAA4C,QAKlBf,KAAMgB,QAAG,EAKThB,KAAMiB,QAAG,EAQTjB,KAAOkB,SAAG,EA4F9ClB,KAAAmB,iBAAoBC,IAIDA,EACtBC,eACAC,MAAKC,GAAQA,IAASvB,KAAKwB,aAAaC,OAASF,IAASvB,KAAKG,UAAUsB,SAG1EL,EAAEM,iBACH,CAuBJ,CA3HCC,oBACEC,MAAMD,oBACN3B,KAAKK,OAAOwB,OAAO7B,KAAM,QAASA,KAAKmB,kBAAkB,EAC1D,CAEDV,eACE,MAAMqB,EAA+C,YAAT,QAAnBC,EAAA/B,KAAKgC,oBAAc,IAAAD,OAAA,EAAAA,EAAAE,MACtCC,EAAelC,KAAKC,YAAYkC,SAASb,MAAKC,GAA2B,cAAnBA,EAAKa,YAC3DC,EAAyBP,IAAqBI,IAAiBlC,KAAKsC,KAEpEC,EAAUC,CAAI,6IAQLxC,KAAKkB,SAAWuB,QAAQzC,KAAKsC,0CAGtCD,EACEG,CAAI,gFACJE,WAIR,OAAO1C,KAAKsC,KAAOtC,KAAK2C,WAAWJ,GAAWvC,KAAK4C,aAAaL,EACjE,CASOI,WAAWJ,GACjB,OAAOC,CAAI,MAELK,EAAI7C,KAAKwB,0CAEFxB,KAAKe,sBACFf,KAAKc,mBACVgC,EAAK9C,KAAK+C,SAAUL,EAAS1C,KAAKsC,oBAC9BQ,EAAK9C,KAAK+C,SAAU,yBACfD,EAAK9C,KAAK+C,SAAU,kBAC7BD,EAAK9C,KAAK+C,SAAU,YACxBR,OAGR,CAEOK,aAAaL,GACnB,OAAOC,CAAI,mCACwBxC,KAAKgD,qCAElCH,EAAI7C,KAAKwB,6CAECxB,KAAK+C,mBACVD,EAAK9C,KAAKiC,iBACTa,EAAK9C,KAAKyB,mBACTzB,KAAKiD,+BACEH,EAAK9C,KAAKkB,QAAS,2BACnB4B,EAAK9C,KAAKkD,uCACVJ,EAAK9C,KAAKmD,wBAExBZ,YAGP,CAEO7B,iBACN,OAAIV,KAAKsC,OAAStC,KAAKoD,KACdV,EAGFF,CAAI,WAELK,EAAI7C,KAAKG,iCAEJ2C,EAAK9C,KAAKiC,iBACTa,EAAK9C,KAAKyB,sBACNzB,KAAK+C,mBACVD,EAAK9C,KAAKqD,mBACVrD,KAAKY,iBAGjB,CAeOqC,YAAY7B,GACdpB,KAAKG,UAAUsB,QAEjBL,EAAEM,kBACF1B,KAAKG,UAAUsB,MAAM6B,QAExB,CAMON,kBAAkB5B,GACxB,MAAMmC,EAAOnC,EAAEL,OACTyC,EAAcxD,KAAKG,UAAUsB,MAE/B+B,GAAeA,EAAYxB,eAAiBuB,GAC9CvD,KAAKyD,YAAYD,EAEpB,GAnNM7D,EAAA+D,OAAS,CAACC,EAAgBC,GAYJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAkFpE,EAAAqE,UAAA,eAAA,GAK1EH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsDpE,EAAAqE,UAAA,YAAA,GAM9CH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmCpE,EAAAqE,UAAA,YAAA,GAQdH,EAAA,CAAzCC,EAAS,CAAEG,UAAW,mBAAwDtE,EAAAqE,UAAA,0BAAA,GAQrCH,EAAA,CAAzCC,EAAS,CAAEG,UAAW,mBAOXtE,EAAAqE,UAAA,0BAAA,GAMiBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBpE,EAAAqE,UAAA,YAAA,GAMEH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMnD,KAAM6B,WAA2B9C,EAAAqE,UAAA,gBAAA,GAWhDH,EAAA,CAAXC,KAAoEnE,EAAAqE,UAAA,cAAA,GAKzBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMnD,KAAM6B,WAAyB9C,EAAAqE,UAAA,cAAA,GAKdH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMnD,KAAM6B,WAAyB9C,EAAAqE,UAAA,cAAA,GAQdH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMnD,KAAM6B,WAA0B9C,EAAAqE,UAAA,eAAA,GAxFxCrE,EAAMkE,EAAA,CAD1BK,EAAc,gBACMvE,SAAAA"}

package/lib/ButtonGroup.js

@@ -1,2 +1,2 @@
-import{i as t,_ as r,s as o,x as a,e as n}from"./query-assigned-elements-92ce7494.js";import{n as e}from"./property-c78323b1.js";import{o as i}from"./class-map-512f0bc1.js";import{S as s}from"./SlotController-d733c575.js";import{D as d}from"./DirectionController-f35f5476.js";import{s as l}from"./Component-2253424f.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";const u=t`:host{--_n-button-group-border-radius:var(--n-button-group-border-radius, var(--n-border-radius-s));--_n-button-group-box-shadow:var(--n-button-group-box-shadow, var(--n-box-shadow));--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}:host([variant=default]){--n-button-border-radius:0;--n-button-box-shadow:none}.n-button-group{display:flex;flex-direction:var(--_n-button-group-flex-direction);max-inline-size:var(--_n-button-group-max-inline-size)}:host([variant=default]) .n-button-group{border-radius:var(--_n-button-group-border-radius);box-shadow:var(--_n-button-group-box-shadow)}:host([variant=spaced]) .n-button-group{gap:calc(var(--n-space-s) + var(--n-space-xs))}:host([variant=spaced]) .n-button-group.n-small-gap{gap:var(--n-space-s)}:host([variant=default][direction=horizontal]) ::slotted(*){margin-inline-end:-1px}:host([variant=default]) ::slotted(:is(:hover,:focus,:focus-within,[aria-pressed=true])){z-index:var(--n-index-mask)}:host([variant=default]) ::slotted([aria-pressed=true]){--n-button-background-color:var(--n-color-status-info-weak);--n-button-border-color:var(--n-color-accent)}:host([variant=default]) ::slotted(*){border-radius:var(--n-button-border-radius)}:host([variant=default]) .n-rtl ::slotted(:last-child),:host([variant=default]) :not(.n-rtl) ::slotted(:first-child){--n-button-border-radius:var(--_n-button-group-border-radius) 0 0 var(--_n-button-group-border-radius)}:host([variant=default]) .n-rtl ::slotted(:first-child),:host([variant=default]) :not(.n-rtl) ::slotted(:last-child){--n-button-border-radius:0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0}:host([direction=vertical]) .n-button-group{--_n-button-group-flex-direction:column}:host([variant=default][direction=vertical]) ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) ::slotted(:first-child){--n-button-border-radius:var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0 0}:host([variant=default][direction=vertical]) ::slotted(:last-child){--n-button-border-radius:0 0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius)}:host([variant=spaced][wrap]) .n-button-group{flex-wrap:wrap}:host([variant=default]) ::slotted(nord-button[variant=primary]){position:relative}:host([variant=default]) ::slotted(nord-button[variant=primary]:not(:is(:focus,:first-child)))::before,:host([variant=default]) ::slotted(nord-button[variant=primary]:not(:is(:focus,:last-child)))::after{content:"";position:absolute;z-index:var(--n-index-mask);background:var(--n-color-text);opacity:.25}:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::after,:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::before{inline-size:1px;inset-block:0}:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::after{inset-inline-end:0}:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::after,:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::before{block-size:1px;inset-inline:0}:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::after{inset-block-end:0}`;let b=class extends o{constructor(){super(...arguments),this.defaultSlot=new s(this),this.dirController=new d(this),this.variant="default",this.direction="horizontal",this.wrap=!1,this.role="group"}render(){const t=this.defaultSlot.assigned.every((t=>"nord-button"!==t.localName&&"nord-select"!==t.localName||"s"===t.getAttribute("size")));return a`<div class="${i({"n-button-group":!0,"n-rtl":this.dirController.isRTL,"n-small-gap":t&&"spaced"===this.variant})}"><slot></slot></div>`}};b.styles=[l,u],r([e({reflect:!0})],b.prototype,"variant",void 0),r([e({reflect:!0})],b.prototype,"direction",void 0),r([e({reflect:!0,type:Boolean})],b.prototype,"wrap",void 0),r([e({reflect:!0})],b.prototype,"role",void 0),b=r([n("nord-button-group")],b);var p=b;export{p as default};
+import{i as t,_ as r,s as o,x as a,e as n}from"./query-assigned-elements-15485e3d.js";import{e}from"./property-03f59dce.js";import{o as i}from"./class-map-cb77ead2.js";import{S as s}from"./SlotController-d733c575.js";import{D as d}from"./DirectionController-f35f5476.js";import{s as l}from"./Component-420bbc41.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const u=t`:host{--_n-button-group-border-radius:var(--n-button-group-border-radius, var(--n-border-radius-s));--_n-button-group-box-shadow:var(--n-button-group-box-shadow, var(--n-box-shadow));--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}:host([variant=default]){--n-button-border-radius:0;--n-button-box-shadow:none}.n-button-group{display:flex;flex-direction:var(--_n-button-group-flex-direction);max-inline-size:var(--_n-button-group-max-inline-size)}:host([variant=default]) .n-button-group{border-radius:var(--_n-button-group-border-radius);box-shadow:var(--_n-button-group-box-shadow)}:host([variant=spaced]) .n-button-group{gap:calc(var(--n-space-s) + var(--n-space-xs))}:host([variant=spaced]) .n-button-group.n-small-gap{gap:var(--n-space-s)}:host([variant=default][direction=horizontal]) ::slotted(*){margin-inline-end:-1px}:host([variant=default]) ::slotted(:is(:hover,:focus,:focus-within,[aria-pressed=true])){z-index:var(--n-index-mask)}:host([variant=default]) ::slotted(:is(:focus,:focus-within)){--n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow))}:host([variant=default]) ::slotted([aria-pressed=true]){--n-button-background-color:var(--n-color-status-info-weak);--n-button-border-color:var(--n-color-accent)}:host([variant=default]) ::slotted(*){border-radius:var(--n-button-border-radius)}:host([variant=default]) .n-rtl ::slotted(:last-child),:host([variant=default]) :not(.n-rtl) ::slotted(:first-child){--n-button-border-radius:var(--_n-button-group-border-radius) 0 0 var(--_n-button-group-border-radius)}:host([variant=default]) .n-rtl ::slotted(:first-child),:host([variant=default]) :not(.n-rtl) ::slotted(:last-child){--n-button-border-radius:0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0}:host([direction=vertical]) .n-button-group{--_n-button-group-flex-direction:column}:host([variant=default][direction=vertical]) ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) ::slotted(:first-child){--n-button-border-radius:var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0 0}:host([variant=default][direction=vertical]) ::slotted(:last-child){--n-button-border-radius:0 0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius)}:host([variant=spaced][wrap]) .n-button-group{flex-wrap:wrap}:host([variant=default]) ::slotted(nord-button[variant=primary]){position:relative}:host([variant=default]) ::slotted(nord-button[variant=primary]:not(:is(:focus,:first-child)))::before,:host([variant=default]) ::slotted(nord-button[variant=primary]:not(:is(:focus,:last-child)))::after{content:"";position:absolute;z-index:var(--n-index-mask);background:var(--n-color-text);opacity:.25}:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::after,:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::before{inline-size:1px;inset-block:0}:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::after{inset-inline-end:0}:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::after,:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::before{block-size:1px;inset-inline:0}:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::after{inset-block-end:0}`;let b=class extends o{constructor(){super(...arguments),this.defaultSlot=new s(this),this.dirController=new d(this),this.variant="default",this.direction="horizontal",this.wrap=!1,this.role="group"}render(){const t=this.defaultSlot.assigned.every((t=>"nord-button"!==t.localName&&"nord-select"!==t.localName||"s"===t.getAttribute("size")));return a`<div class="${i({"n-button-group":!0,"n-rtl":this.dirController.isRTL,"n-small-gap":t&&"spaced"===this.variant})}"><slot></slot></div>`}};b.styles=[l,u],r([e({reflect:!0})],b.prototype,"variant",void 0),r([e({reflect:!0})],b.prototype,"direction",void 0),r([e({reflect:!0,type:Boolean})],b.prototype,"wrap",void 0),r([e({reflect:!0})],b.prototype,"role",void 0),b=r([n("nord-button-group")],b);var c=b;export{c as default};
 //# sourceMappingURL=ButtonGroup.js.map

package/lib/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","sources":["../src/button-group/ButtonGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./ButtonGroup.css\"\n\n/**\n * Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.\n *\n * @status new\n * @category structure\n * @slot - The button group content\n *\n * @cssprop [--n-button-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.\n * @cssprop [--n-button-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.\n */\n@customElement(\"nord-button-group\")\nexport default class ButtonGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n  private dirController = new DirectionController(this)\n\n  /**\n   * The style variant of the button group.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"spaced\" = \"default\"\n\n  /**\n   * The direction of the button group.\n   */\n  @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"horizontal\"\n\n  /**\n   * Defines whether the buttons are forced in a single line\n   * or can be flowed into multiple lines (only applied when variant is set to `spaced`).\n   */\n  @property({ reflect: true, type: Boolean }) wrap = false\n\n  /**\n   * The appropriate role for the containing element.\n   */\n  // eslint-disable-next-line lit/no-native-attributes\n  @property({ reflect: true }) role: string = \"group\"\n\n  render() {\n    const hasSmallButtons = this.defaultSlot.assigned.every(node => {\n      if (node.localName === \"nord-button\" || node.localName === \"nord-select\") {\n        return node.getAttribute(\"size\") === \"s\"\n      }\n\n      return true\n    })\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-button-group\": true,\n          \"n-rtl\": this.dirController.isRTL,\n          \"n-small-gap\": hasSmallButtons && this.variant === \"spaced\",\n        })}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-button-group\": ButtonGroup\n  }\n}\n"],"names":["ButtonGroup","LitElement","constructor","this","defaultSlot","SlotController","dirController","DirectionController","variant","direction","wrap","role","render","hasSmallButtons","assigned","every","node","localName","getAttribute","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"6lHAoBe,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAAG,cAAgB,IAAIC,EAAoBJ,MAKnBA,KAAOK,QAAyB,UAKhCL,KAASM,UAA8B,aAMxBN,KAAIO,MAAG,EAMtBP,KAAIQ,KAAW,OAuB7C,CArBC,MAAAC,GACE,MAAMC,EAAkBV,KAAKC,YAAYU,SAASC,OAAMC,GAC/B,gBAAnBA,EAAKC,WAAkD,gBAAnBD,EAAKC,WACN,MAA9BD,EAAKE,aAAa,UAM7B,OAAOC,CAAI,eAECC,EAAS,CACf,kBAAkB,EAClB,QAASjB,KAAKG,cAAce,MAC5B,cAAeR,GAAoC,WAAjBV,KAAKK,gCAM9C,GA/CMR,EAAAsB,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiD3B,EAAA4B,UAAA,eAAA,GAKzCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2D3B,EAAA4B,UAAA,iBAAA,GAMpCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAuB9B,EAAA4B,UAAA,YAAA,GAM3BH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8B3B,EAAA4B,UAAA,YAAA,GA1BhC5B,EAAWyB,EAAA,CAD/BM,EAAc,sBACM/B,SAAAA"}
+{"version":3,"file":"ButtonGroup.js","sources":["../src/button-group/ButtonGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./ButtonGroup.css\"\n\n/**\n * Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.\n *\n * @status new\n * @category structure\n * @slot - The button group content\n *\n * @cssprop [--n-button-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.\n * @cssprop [--n-button-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.\n */\n@customElement(\"nord-button-group\")\nexport default class ButtonGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n  private dirController = new DirectionController(this)\n\n  /**\n   * The style variant of the button group.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"spaced\" = \"default\"\n\n  /**\n   * The direction of the button group.\n   */\n  @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"horizontal\"\n\n  /**\n   * Defines whether the buttons are forced in a single line\n   * or can be flowed into multiple lines (only applied when variant is set to `spaced`).\n   */\n  @property({ reflect: true, type: Boolean }) wrap = false\n\n  /**\n   * The appropriate role for the containing element.\n   */\n  // eslint-disable-next-line lit/no-native-attributes\n  @property({ reflect: true }) role: string = \"group\"\n\n  render() {\n    const hasSmallButtons = this.defaultSlot.assigned.every(node => {\n      if (node.localName === \"nord-button\" || node.localName === \"nord-select\") {\n        return node.getAttribute(\"size\") === \"s\"\n      }\n\n      return true\n    })\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-button-group\": true,\n          \"n-rtl\": this.dirController.isRTL,\n          \"n-small-gap\": hasSmallButtons && this.variant === \"spaced\",\n        })}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-button-group\": ButtonGroup\n  }\n}\n"],"names":["ButtonGroup","LitElement","constructor","this","defaultSlot","SlotController","dirController","DirectionController","variant","direction","wrap","role","render","hasSmallButtons","assigned","every","node","localName","getAttribute","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"6vHAoBe,IAAMA,EAAN,cAA0BC,EAA1BC,kCAGLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAAG,cAAgB,IAAIC,EAAoBJ,MAKnBA,KAAOK,QAAyB,UAKhCL,KAASM,UAA8B,aAMxBN,KAAIO,MAAG,EAMtBP,KAAIQ,KAAW,OAuB7C,CArBCC,SACE,MAAMC,EAAkBV,KAAKC,YAAYU,SAASC,OAAMC,GAC/B,gBAAnBA,EAAKC,WAAkD,gBAAnBD,EAAKC,WACN,MAA9BD,EAAKE,aAAa,UAM7B,OAAOC,CAAI,eAECC,EAAS,CACf,kBAAkB,EAClB,QAASjB,KAAKG,cAAce,MAC5B,cAAeR,GAAoC,WAAjBV,KAAKK,gCAM9C,GA/CMR,EAAAsB,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiD3B,EAAA4B,UAAA,eAAA,GAKzCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2D3B,EAAA4B,UAAA,iBAAA,GAMpCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAuB9B,EAAA4B,UAAA,YAAA,GAM3BH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8B3B,EAAA4B,UAAA,YAAA,GA1BhC5B,EAAWyB,EAAA,CAD/BM,EAAc,sBACM/B,SAAAA"}

package/lib/{Calendar-5fbf9d8d.js → Calendar-a80c53ba.js}

@@ -1,2 +1,2 @@
-import{i as e,_ as a,s as t,x as n,e as s}from"./query-assigned-elements-92ce7494.js";import{n as i}from"./property-c78323b1.js";import{t as o}from"./state-d31c6912.js";import{i as r}from"./query-36bfe0e4.js";import{o as l}from"./class-map-512f0bc1.js";import{c as d,m as c,a as h}from"./collection-511dcfac.js";import{o as u}from"./tinykeys.module-84e6cc41.js";import"./Button.js";import"./VisuallyHidden.js";import p from"./Icon.js";import{E as v}from"./EventController-d99ebeef.js";import{D as f}from"./DirectionController-f35f5476.js";import{LocalizeController as g}from"./LocalizeController.js";import{c as m}from"./cond-bb9ee891.js";import{r as b}from"./number-c3ab3e95.js";import{i as y,p as w,a as x,s as D,e as k,b as z,g as $,c as F,d as _,f as Y,h as j,j as S,k as M,l as T,m as C,n as N}from"./dates-5b651fbe.js";import{o as L}from"./observe-a9c6dfb6.js";import{DateSelectEvent as O}from"./DateSelectEvent.js";import{s as X}from"./Component-2253424f.js";var E=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m6.92903.100342-2.12132 2.121318 7.77819 7.77818-7.77828 7.77826 2.12132 2.1213 8.48536-8.4853c.7811-.7811.7811-2.04743 0-2.82848z" fill="currentColor"/></svg>',title:"arrow-right-small",tags:"nordicon arrow right small caret pointing triangle chevron"});var W=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.0712.105225 2.1213 2.121315-7.77816 7.77816 7.77826 7.7783-2.1213 2.1213-8.48539-8.4854c-.78105-.781-.78105-2.04735 0-2.82839z" fill="currentColor"/></svg>',title:"arrow-left-small",tags:"nordicon arrow left small caret pointing triangle chevron"});var U=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m.100342 6.92903 2.121318-2.12132 7.77818 7.77819 7.77826-7.77828 2.1213 2.12132-8.4853 8.48536c-.7811.7811-2.04743.7811-2.82848 0z" fill="currentColor"/></svg>',title:"arrow-down-small",tags:"nordicon arrow down small caret pointing triangle chevron"});const A=e=>e.preventDefault();class I{constructor(e,a){this.hadFirstUpdate=!1,this.initialTouchX=0,this.initialTouchY=0,this.handleTouchStart=e=>{const[{pageX:a,pageY:t}]=e.changedTouches;this.initialTouchX=a,this.initialTouchY=t},this.handleTouchEnd=e=>{const[{pageX:a,pageY:t}]=e.changedTouches,{matchesGesture:n,onSwipeEnd:s}=this.options,i=a-this.initialTouchX,o=t-this.initialTouchY,r={initialX:this.initialTouchX,initialY:this.initialTouchY,pageX:a,pageY:t,distX:i,distY:o};n(r)&&(e.preventDefault(),s(r))},e.addController(this),this.events=new v(e),this.options={target:()=>e,...a}}hostUpdated(){if(!this.hadFirstUpdate){this.hadFirstUpdate=!0;const e=this.options.target();this.events.listen(e,"touchstart",this.handleTouchStart),this.events.listen(e,"touchmove",A),this.events.listen(e,"touchend",this.handleTouchEnd)}}hostDisconnected(){this.hadFirstUpdate=!1}}const P=({distX:e,distY:a})=>Math.abs(e)>=70&&Math.abs(a)<=70,B=({distX:e,distY:a})=>Math.abs(a)>=70&&Math.abs(e)<=70&&a>0,H=e`:host{--_n-calendar-box-shadow:var(--n-calendar-box-shadow, var(--n-box-shadow-popout));--_n-calendar-border-radius:var(--n-calendar-border-radius, var(--n-border-radius-s));--_n-calendar-highlight-color:var(--n-calendar-highlight-color, var(--n-color-accent));--_n-calendar-padding:var(--n-space-m) var(--n-space-m) calc(var(--n-space-m) * 1.25);--_n-calendar-inline-size:max-content;font-feature-settings:var(--n-font-features-reduced)}.n-calendar{-webkit-user-select:none;user-select:none;background:var(--n-color-surface);box-shadow:var(--_n-calendar-box-shadow);border-radius:var(--_n-calendar-border-radius);inline-size:var(--_n-calendar-inline-size);min-inline-size:min-content;padding:var(--_n-calendar-padding)}:host([expand]){--_n-calendar-inline-size:100%}.n-calendar-table{border-collapse:collapse;border-spacing:0;color:var(--n-color-text);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);text-align:center;inline-size:100%}.n-calendar-table-header{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);letter-spacing:1px;padding-block-end:var(--n-space-s);text-decoration:none;text-transform:uppercase}.n-calendar-cell{text-align:center;padding:1px}.n-calendar-day{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:0 0;border:0;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:inline-block;font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);font-variant-numeric:tabular-nums;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);padding:0 0 1px;position:relative;text-align:center;vertical-align:middle}.n-calendar-day[aria-current=date]{box-shadow:0 0 0 1px var(--n-color-text-link);color:var(--n-color-text-link);position:relative}.n-calendar-day:hover{background:var(--n-color-active)}.n-calendar-day:focus,.n-calendar-day[aria-pressed=true]{background:var(--n-color-accent);box-shadow:none;color:var(--n-color-text-on-accent);outline:0}.n-calendar-day:active{background:var(--n-color-accent);box-shadow:none!important;color:var(--n-color-text-on-accent)}.n-calendar-day:focus{box-shadow:0 0 5px var(--n-color-accent)}.n-calendar-day:not(.is-month){box-shadow:none}.n-calendar-day:not(.is-month),.n-calendar-day[aria-disabled=true]{background:0 0;color:var(--n-color-text-weakest);cursor:default}.n-calendar-day[aria-disabled=true]{color:var(--n-color-text-weaker);text-decoration:line-through}.n-calendar-day:not(.is-month)[aria-disabled=true]{color:var(--n-color-text-weakest);text-decoration:none}.n-calendar-day[aria-disabled=true][aria-current=date]{box-shadow:0 0 0 1px var(--n-color-accent);color:var(--n-color-text-link)}.n-calendar-day[aria-disabled=true][aria-current=date]:focus{box-shadow:0 0 5px var(--n-color-accent);background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-calendar-day[aria-disabled=true]:not([aria-current=date])::before{display:none}.n-calendar-day.is-outside{background:0 0;box-shadow:none;color:var(--n-color-text-weakest);cursor:default;pointer-events:none}.n-calendar-day.is-outside::before{display:none}.n-calendar-day.is-highlighted::after{--_n-calendar-highlight-size:5px;content:"";position:absolute;inset-inline-start:calc(50% - (var(--_n-calendar-highlight-size)/ 2));inset-block-end:var(--n-space-xs);block-size:var(--_n-calendar-highlight-size);inline-size:var(--_n-calendar-highlight-size);border-radius:var(--n-border-radius-circle);background-color:var(--_n-calendar-highlight-color)}.n-calendar-day.is-highlighted.is-month:is([aria-pressed=true],:focus):not([aria-disabled=true])::after{background-color:var(--n-color-text-on-accent)}.n-calendar-day.is-highlighted:is(:not(.is-month),.is-outside,[aria-disabled=true])::after{background-color:var(--n-color-text-weakest)}.n-calendar-header{align-items:start;display:flex;justify-content:space-between;margin-block-end:var(--n-space-m);inline-size:100%}.n-calendar-nav{white-space:nowrap}.n-calendar-nav nord-button{--_n-button-padding-inline:11px;margin-inline-start:var(--n-space-xs)}.n-calendar-select{display:inline-flex;margin-block-start:var(--n-space-xs);position:relative;line-height:var(--n-line-height)}.n-calendar-select span{margin-inline-end:var(--n-space-s)}.n-calendar-select select{cursor:pointer;font-size:var(--n-font-size-l);block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%}.n-calendar-select select:focus+.n-calendar-select-label{box-shadow:0 0 0 2px var(--n-color-accent)}.n-calendar-select-label{display:flex;align-items:center;border-radius:var(--n-border-radius-s);color:var(--n-color-text);font-size:var(--n-font-size-xl);font-weight:var(--n-font-weight-active);padding-block:0;padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-xs);pointer-events:none;position:relative;inline-size:100%}`;p.registerIcon(E),p.registerIcon(W),p.registerIcon(U);const R=e=>a=>{a.preventDefault(),e(a)},V=()=>!1,q=()=>!1,G="dialog-header";let Z=class extends t{constructor(){super(...arguments),this.direction=new f(this),this.swipe=new I(this,{matchesGesture:P,onSwipeEnd:({distX:e})=>this.addMonths(e<0?1:-1)}),this.shortcuts=u({ArrowRight:R((()=>this.addDays(this.direction.isLTR?1:-1))),ArrowLeft:R((()=>this.addDays(this.direction.isLTR?-1:1))),ArrowDown:R((()=>this.addDays(7))),ArrowUp:R((()=>this.addDays(-7))),Home:R((()=>this.startOfWeek())),End:R((()=>this.endOfWeek())),PageUp:R((()=>this.addMonths(-1))),PageDown:R((()=>this.addMonths(1))),"Shift+PageUp":R((()=>this.addYears(-1))),"Shift+PageDown":R((()=>this.addYears(1)))}),this.localize=new g(this,{onLangChange:()=>this.handleLangChange()}),this.value="",this.firstDayOfWeek=1,this.expand=!1,this.isDateDisabled=V,this.isDateHighlighted=q,this.activeFocus=!1,this.focusedDay=new Date,this.handleDaySelect=e=>{const a=y(e,w(this.min||""),w(this.max||"")),t=!this.isDateDisabled(e);a&&t&&(this.value=x(e),this.dispatchEvent(new O("change",e)))},this.handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))},this.handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))},this.handleNextMonthClick=e=>{e.preventDefault(),this.addMonths(1)},this.handlePreviousMonthClick=e=>{e.preventDefault(),this.addMonths(-1)},this.enableActiveFocus=()=>{this.activeFocus=!0},this.disableActiveFocus=e=>{const a=e.currentTarget,t=e.relatedTarget;t&&!a.contains(t)&&(this.activeFocus=!1)}}focus(e){var a;const t=null!==(a=null==e?void 0:e.target)&&void 0!==a?a:"day";"day"===t?this.focusedDayNode.focus():"month"===t&&this.monthSelectNode.focus()}render(){const e=new Date,a=w(this.value),t=this.focusedDay.getMonth(),s=this.focusedDay.getFullYear(),i=w(this.min||""),o=w(this.max||""),r=i?D(i):void 0,u=o?k(o):void 0,p=(a||this.focusedDay).getFullYear(),v=i?i.getFullYear():p-10,f=o?o.getFullYear():p+10;return n`<div class="n-calendar"><div class="n-calendar-header"><div><nord-visually-hidden><h2 id="${G}" aria-live="polite" aria-atomic="true">${this.monthNames[t]}, ${this.focusedDay.getFullYear()}</h2></nord-visually-hidden><div class="n-calendar-select"><select aria-label="${this.localize.term("monthSelectLabel")}" class="n-calendar-select-month" @input="${this.handleMonthSelect}">${this.monthNames.map(((e,a)=>n`<option value="${a}" ?selected="${a===t}" ?disabled="${!y(new Date(s,a,1),r,u)}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.monthNamesShort[t]}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div><div class="n-calendar-select"><select aria-label="${this.localize.term("yearSelectLabel")}" class="n-calendar-select-year" @input="${this.handleYearSelect}">${d(b(v,f),(e=>e),(e=>n`<option ?selected="${e===s}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.focusedDay.getFullYear()}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div></div><div class="n-calendar-nav"><nord-button class="n-calendar-prev" @click="${this.handlePreviousMonthClick}" ?disabled="${z(i,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("prevMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-left-small":"arrow-right-small"}" size="s"></nord-icon></nord-button><nord-button class="n-calendar-next" @click="${this.handleNextMonthClick}" ?disabled="${z(o,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("nextMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-right-small":"arrow-left-small"}" size="s"></nord-icon></nord-button></div></div><table class="n-calendar-table" aria-labelledby="${G}" @focusin="${this.enableActiveFocus}" @focusout="${this.disableActiveFocus}"><thead><tr>${c(this.dayNames,this.firstDayOfWeek,((e,a)=>n`<th class="n-calendar-table-header" scope="col"><span aria-hidden="true">${this.dayNamesShort[a]}</span><nord-visually-hidden>${e}</nord-visually-hidden></th>`))}</tr></thead><tbody>${h($(this.focusedDay,this.firstDayOfWeek),7).map((t=>n`<tr class="n-calendar-row">${t.map((t=>{const s=!y(t,i,o),r=F(t,e),d=this.isDateDisabled(t),c=F(t,a),h=z(t,this.focusedDay),u=this.isDateHighlighted(t),p=this.dateFormatShort.format(t),v=u&&"string"==typeof u?`${p}, ${u}`:p;return n`<td class="n-calendar-cell"><button type="button" tabindex="${F(t,this.focusedDay)?0:-1}" class="${l({"n-calendar-day":!0,"is-outside":s,"is-month":h,"is-highlighted":u})}" @click="${()=>this.handleDaySelect(t)}" @keydown="${this.shortcuts}" ?disabled="${s}" aria-disabled="${m(d,"true")}" aria-pressed="${c?"true":"false"}" aria-current="${m(r,"date")}" aria-label="${v}"><span aria-hidden="true">${t.getDate()}</span></button></td>`}))}</tr>`))}</tbody></table></div>`}handleValueChange(){this.setFocusedDay(w(this.value)||new Date)}handleFocusedDayChange(){this.activeFocus&&this.focusedDayNode.focus()}handleLangChange(){const e=this.localize.resolvedLang;this.dateFormatShort=new Intl.DateTimeFormat(e,{timeZone:"UTC",day:"numeric",month:"long"}),this.monthNames=_(e,"long"),this.monthNamesShort=_(e,"short"),this.dayNames=Y(e,"long"),this.dayNamesShort=Y(e,"narrow")}addDays(e){this.setFocusedDay(j(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(S(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(M(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const a=T(D(this.focusedDay),e),t=k(a),n=T(this.focusedDay,e);this.setFocusedDay(C(n,a,t))}setYear(e){const a=N(D(this.focusedDay),e),t=k(a),n=N(this.focusedDay,e);this.setFocusedDay(C(n,a,t))}setFocusedDay(e){this.focusedDay=C(e,w(this.min||""),w(this.max||"")),this.dispatchEvent(new O("nord-focus-date",this.focusedDay))}};Z.styles=[X,H],a([r(".n-calendar-select-month",!0)],Z.prototype,"monthSelectNode",void 0),a([r('button[tabindex="0"]')],Z.prototype,"focusedDayNode",void 0),a([i()],Z.prototype,"value",void 0),a([i({reflect:!0,type:Number,attribute:"first-day-of-week"})],Z.prototype,"firstDayOfWeek",void 0),a([i({reflect:!0})],Z.prototype,"min",void 0),a([i({reflect:!0})],Z.prototype,"max",void 0),a([i({reflect:!0,type:Boolean})],Z.prototype,"expand",void 0),a([i({attribute:!1})],Z.prototype,"isDateDisabled",void 0),a([i({attribute:!1})],Z.prototype,"isDateHighlighted",void 0),a([o()],Z.prototype,"activeFocus",void 0),a([o()],Z.prototype,"focusedDay",void 0),a([L("value")],Z.prototype,"handleValueChange",null),a([L("focusedDay","updated")],Z.prototype,"handleFocusedDayChange",null),Z=a([s("nord-calendar")],Z);var J=Z;export{J as C,I as S,B as i};
-//# sourceMappingURL=Calendar-5fbf9d8d.js.map
+import{i as e,_ as a,s as t,x as n,e as s}from"./query-assigned-elements-15485e3d.js";import{e as i}from"./property-03f59dce.js";import{t as o}from"./state-70f38ceb.js";import{i as r}from"./query-2d22378e.js";import{o as l}from"./class-map-cb77ead2.js";import{c as d,m as c,a as h}from"./collection-2f8e38bd.js";import{o as u}from"./tinykeys.module-84e6cc41.js";import"./Button.js";import"./VisuallyHidden.js";import p from"./Icon.js";import{E as v}from"./EventController-d99ebeef.js";import{D as f}from"./DirectionController-f35f5476.js";import{LocalizeController as g}from"./LocalizeController.js";import{c as m}from"./cond-44672025.js";import{r as b}from"./number-c3ab3e95.js";import{i as y,p as w,a as x,s as D,e as k,b as z,g as $,c as F,d as _,f as Y,h as j,j as S,k as M,l as T,m as C,n as N}from"./dates-5b651fbe.js";import{o as L}from"./observe-a9c6dfb6.js";import{DateSelectEvent as O}from"./DateSelectEvent.js";import{s as X}from"./Component-420bbc41.js";var E=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m6.92903.100342-2.12132 2.121318 7.77819 7.77818-7.77828 7.77826 2.12132 2.1213 8.48536-8.4853c.7811-.7811.7811-2.04743 0-2.82848z" fill="currentColor"/></svg>',title:"arrow-right-small",tags:"nordicon arrow right small caret pointing triangle chevron"});var W=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.0712.105225 2.1213 2.121315-7.77816 7.77816 7.77826 7.7783-2.1213 2.1213-8.48539-8.4854c-.78105-.781-.78105-2.04735 0-2.82839z" fill="currentColor"/></svg>',title:"arrow-left-small",tags:"nordicon arrow left small caret pointing triangle chevron"});var U=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m.100342 6.92903 2.121318-2.12132 7.77818 7.77819 7.77826-7.77828 2.1213 2.12132-8.4853 8.48536c-.7811.7811-2.04743.7811-2.82848 0z" fill="currentColor"/></svg>',title:"arrow-down-small",tags:"nordicon arrow down small caret pointing triangle chevron"});const A=e=>e.preventDefault();class I{constructor(e,a){this.hadFirstUpdate=!1,this.initialTouchX=0,this.initialTouchY=0,this.handleTouchStart=e=>{const[{pageX:a,pageY:t}]=e.changedTouches;this.initialTouchX=a,this.initialTouchY=t},this.handleTouchEnd=e=>{const[{pageX:a,pageY:t}]=e.changedTouches,{matchesGesture:n,onSwipeEnd:s}=this.options,i=a-this.initialTouchX,o=t-this.initialTouchY,r={initialX:this.initialTouchX,initialY:this.initialTouchY,pageX:a,pageY:t,distX:i,distY:o};n(r)&&(e.preventDefault(),s(r))},e.addController(this),this.events=new v(e),this.options={target:()=>e,...a}}hostUpdated(){if(!this.hadFirstUpdate){this.hadFirstUpdate=!0;const e=this.options.target();this.events.listen(e,"touchstart",this.handleTouchStart),this.events.listen(e,"touchmove",A),this.events.listen(e,"touchend",this.handleTouchEnd)}}hostDisconnected(){this.hadFirstUpdate=!1}}const P=({distX:e,distY:a})=>Math.abs(e)>=70&&Math.abs(a)<=70,B=({distX:e,distY:a})=>Math.abs(a)>=70&&Math.abs(e)<=70&&a>0,H=e`:host{--_n-calendar-box-shadow:var(--n-calendar-box-shadow, var(--n-box-shadow-popout));--_n-calendar-border-radius:var(--n-calendar-border-radius, var(--n-border-radius-s));--_n-calendar-highlight-color:var(--n-calendar-highlight-color, var(--n-color-accent));--_n-calendar-padding:var(--n-space-m) var(--n-space-m) calc(var(--n-space-m) * 1.25);--_n-calendar-inline-size:max-content;font-feature-settings:var(--n-font-features-reduced)}.n-calendar{-webkit-user-select:none;user-select:none;background:var(--n-color-surface);box-shadow:var(--_n-calendar-box-shadow);border-radius:var(--_n-calendar-border-radius);inline-size:var(--_n-calendar-inline-size);min-inline-size:min-content;padding:var(--_n-calendar-padding)}:host([expand]){--_n-calendar-inline-size:100%}.n-calendar-table{border-collapse:collapse;border-spacing:0;color:var(--n-color-text);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);text-align:center;inline-size:100%}.n-calendar-table-header{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);letter-spacing:1px;padding-block-end:var(--n-space-s);text-decoration:none;text-transform:uppercase}.n-calendar-cell{text-align:center;padding:1px}.n-calendar-day{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:0 0;border:0;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:inline-block;font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);font-variant-numeric:tabular-nums;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);padding:0 0 1px;position:relative;text-align:center;vertical-align:middle}.n-calendar-day[aria-current=date]{box-shadow:0 0 0 1px var(--n-color-text-link);color:var(--n-color-text-link);position:relative}.n-calendar-day:hover{background:var(--n-color-active)}.n-calendar-day:focus,.n-calendar-day[aria-pressed=true]{background:var(--n-color-accent);box-shadow:none;color:var(--n-color-text-on-accent);outline:0}.n-calendar-day:active{background:var(--n-color-accent);box-shadow:none!important;color:var(--n-color-text-on-accent)}.n-calendar-day:focus{box-shadow:0 0 5px var(--n-color-accent)}.n-calendar-day:not(.is-month){box-shadow:none}.n-calendar-day:not(.is-month),.n-calendar-day[aria-disabled=true]{background:0 0;color:var(--n-color-text-weakest);cursor:default}.n-calendar-day[aria-disabled=true]{color:var(--n-color-text-weaker);text-decoration:line-through}.n-calendar-day:not(.is-month)[aria-disabled=true]{color:var(--n-color-text-weakest);text-decoration:none}.n-calendar-day[aria-disabled=true][aria-current=date]{box-shadow:0 0 0 1px var(--n-color-accent);color:var(--n-color-text-link)}.n-calendar-day[aria-disabled=true][aria-current=date]:focus{box-shadow:0 0 5px var(--n-color-accent);background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-calendar-day[aria-disabled=true]:not([aria-current=date])::before{display:none}.n-calendar-day.is-outside{background:0 0;box-shadow:none;color:var(--n-color-text-weakest);cursor:default;pointer-events:none}.n-calendar-day.is-outside::before{display:none}.n-calendar-day.is-highlighted::after{--_n-calendar-highlight-size:5px;content:"";position:absolute;inset-inline-start:calc(50% - (var(--_n-calendar-highlight-size)/ 2));inset-block-end:var(--n-space-xs);block-size:var(--_n-calendar-highlight-size);inline-size:var(--_n-calendar-highlight-size);border-radius:var(--n-border-radius-circle);background-color:var(--_n-calendar-highlight-color)}.n-calendar-day.is-highlighted.is-month:is([aria-pressed=true],:focus):not([aria-disabled=true])::after{background-color:var(--n-color-text-on-accent)}.n-calendar-day.is-highlighted:is(:not(.is-month),.is-outside,[aria-disabled=true])::after{background-color:var(--n-color-text-weakest)}.n-calendar-header{align-items:start;display:flex;justify-content:space-between;margin-block-end:var(--n-space-m);inline-size:100%}.n-calendar-nav{white-space:nowrap}.n-calendar-nav nord-button{--_n-button-padding-inline:11px;margin-inline-start:var(--n-space-xs)}.n-calendar-select{display:inline-flex;margin-block-start:var(--n-space-xs);position:relative;line-height:var(--n-line-height)}.n-calendar-select span{margin-inline-end:var(--n-space-s)}.n-calendar-select select{cursor:pointer;font-size:var(--n-font-size-l);block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%}.n-calendar-select select:focus+.n-calendar-select-label{box-shadow:0 0 0 2px var(--n-color-accent)}.n-calendar-select-label{display:flex;align-items:center;border-radius:var(--n-border-radius-s);color:var(--n-color-text);font-size:var(--n-font-size-xl);font-weight:var(--n-font-weight-active);padding-block:0;padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-xs);pointer-events:none;position:relative;inline-size:100%}`;p.registerIcon(E),p.registerIcon(W),p.registerIcon(U);const R=e=>a=>{a.preventDefault(),e(a)},V=()=>!1,q=()=>!1,G="dialog-header";let Z=class extends t{constructor(){super(...arguments),this.direction=new f(this),this.swipe=new I(this,{matchesGesture:P,onSwipeEnd:({distX:e})=>this.addMonths(e<0?1:-1)}),this.shortcuts=u({ArrowRight:R((()=>this.addDays(this.direction.isLTR?1:-1))),ArrowLeft:R((()=>this.addDays(this.direction.isLTR?-1:1))),ArrowDown:R((()=>this.addDays(7))),ArrowUp:R((()=>this.addDays(-7))),Home:R((()=>this.startOfWeek())),End:R((()=>this.endOfWeek())),PageUp:R((()=>this.addMonths(-1))),PageDown:R((()=>this.addMonths(1))),"Shift+PageUp":R((()=>this.addYears(-1))),"Shift+PageDown":R((()=>this.addYears(1)))}),this.localize=new g(this,{onLangChange:()=>this.handleLangChange()}),this.value="",this.firstDayOfWeek=1,this.expand=!1,this.isDateDisabled=V,this.isDateHighlighted=q,this.activeFocus=!1,this.focusedDay=new Date,this.handleDaySelect=e=>{const a=y(e,w(this.min||""),w(this.max||"")),t=!this.isDateDisabled(e);a&&t&&(this.value=x(e),this.dispatchEvent(new O("change",e)))},this.handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))},this.handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))},this.handleNextMonthClick=e=>{e.preventDefault(),this.addMonths(1)},this.handlePreviousMonthClick=e=>{e.preventDefault(),this.addMonths(-1)},this.enableActiveFocus=()=>{this.activeFocus=!0},this.disableActiveFocus=e=>{const a=e.currentTarget,t=e.relatedTarget;t&&!a.contains(t)&&(this.activeFocus=!1)}}focus(e){var a;const t=null!==(a=null==e?void 0:e.target)&&void 0!==a?a:"day";"day"===t?this.focusedDayNode.focus():"month"===t&&this.monthSelectNode.focus()}render(){const e=new Date,a=w(this.value),t=this.focusedDay.getMonth(),s=this.focusedDay.getFullYear(),i=w(this.min||""),o=w(this.max||""),r=i?D(i):void 0,u=o?k(o):void 0,p=(a||this.focusedDay).getFullYear(),v=i?i.getFullYear():p-10,f=o?o.getFullYear():p+10;return n`<div class="n-calendar"><div class="n-calendar-header"><div><nord-visually-hidden><h2 id="${G}" aria-live="polite" aria-atomic="true">${this.monthNames[t]}, ${this.focusedDay.getFullYear()}</h2></nord-visually-hidden><div class="n-calendar-select"><select aria-label="${this.localize.term("monthSelectLabel")}" class="n-calendar-select-month" @input="${this.handleMonthSelect}">${this.monthNames.map(((e,a)=>n`<option value="${a}" ?selected="${a===t}" ?disabled="${!y(new Date(s,a,1),r,u)}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.monthNamesShort[t]}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div><div class="n-calendar-select"><select aria-label="${this.localize.term("yearSelectLabel")}" class="n-calendar-select-year" @input="${this.handleYearSelect}">${d(b(v,f),(e=>e),(e=>n`<option ?selected="${e===s}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.focusedDay.getFullYear()}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div></div><div class="n-calendar-nav"><nord-button class="n-calendar-prev" @click="${this.handlePreviousMonthClick}" ?disabled="${z(i,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("prevMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-left-small":"arrow-right-small"}" size="s"></nord-icon></nord-button><nord-button class="n-calendar-next" @click="${this.handleNextMonthClick}" ?disabled="${z(o,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("nextMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-right-small":"arrow-left-small"}" size="s"></nord-icon></nord-button></div></div><table class="n-calendar-table" aria-labelledby="${G}" @focusin="${this.enableActiveFocus}" @focusout="${this.disableActiveFocus}"><thead><tr>${c(this.dayNames,this.firstDayOfWeek,((e,a)=>n`<th class="n-calendar-table-header" scope="col"><span aria-hidden="true">${this.dayNamesShort[a]}</span><nord-visually-hidden>${e}</nord-visually-hidden></th>`))}</tr></thead><tbody>${h($(this.focusedDay,this.firstDayOfWeek),7).map((t=>n`<tr class="n-calendar-row">${t.map((t=>{const s=!y(t,i,o),r=F(t,e),d=this.isDateDisabled(t),c=F(t,a),h=z(t,this.focusedDay),u=this.isDateHighlighted(t),p=this.dateFormatShort.format(t),v=u&&"string"==typeof u?`${p}, ${u}`:p;return n`<td class="n-calendar-cell"><button type="button" tabindex="${F(t,this.focusedDay)?0:-1}" class="${l({"n-calendar-day":!0,"is-outside":s,"is-month":h,"is-highlighted":u})}" @click="${()=>this.handleDaySelect(t)}" @keydown="${this.shortcuts}" ?disabled="${s}" aria-disabled="${m(d,"true")}" aria-pressed="${c?"true":"false"}" aria-current="${m(r,"date")}" aria-label="${v}"><span aria-hidden="true">${t.getDate()}</span></button></td>`}))}</tr>`))}</tbody></table></div>`}handleValueChange(){this.setFocusedDay(w(this.value)||new Date)}handleFocusedDayChange(){this.activeFocus&&this.focusedDayNode.focus()}handleLangChange(){const e=this.localize.resolvedLang;this.dateFormatShort=new Intl.DateTimeFormat(e,{timeZone:"UTC",day:"numeric",month:"long"}),this.monthNames=_(e,"long"),this.monthNamesShort=_(e,"short"),this.dayNames=Y(e,"long"),this.dayNamesShort=Y(e,"narrow")}addDays(e){this.setFocusedDay(j(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(S(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(M(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const a=T(D(this.focusedDay),e),t=k(a),n=T(this.focusedDay,e);this.setFocusedDay(C(n,a,t))}setYear(e){const a=N(D(this.focusedDay),e),t=k(a),n=N(this.focusedDay,e);this.setFocusedDay(C(n,a,t))}setFocusedDay(e){this.focusedDay=C(e,w(this.min||""),w(this.max||"")),this.dispatchEvent(new O("nord-focus-date",this.focusedDay))}};Z.styles=[X,H],a([r(".n-calendar-select-month",!0)],Z.prototype,"monthSelectNode",void 0),a([r('button[tabindex="0"]')],Z.prototype,"focusedDayNode",void 0),a([i()],Z.prototype,"value",void 0),a([i({reflect:!0,type:Number,attribute:"first-day-of-week"})],Z.prototype,"firstDayOfWeek",void 0),a([i({reflect:!0})],Z.prototype,"min",void 0),a([i({reflect:!0})],Z.prototype,"max",void 0),a([i({reflect:!0,type:Boolean})],Z.prototype,"expand",void 0),a([i({attribute:!1})],Z.prototype,"isDateDisabled",void 0),a([i({attribute:!1})],Z.prototype,"isDateHighlighted",void 0),a([o()],Z.prototype,"activeFocus",void 0),a([o()],Z.prototype,"focusedDay",void 0),a([L("value")],Z.prototype,"handleValueChange",null),a([L("focusedDay","updated")],Z.prototype,"handleFocusedDayChange",null),Z=a([s("nord-calendar")],Z);var J=Z;export{J as C,I as S,B as i};
+//# sourceMappingURL=Calendar-a80c53ba.js.map