@nordhealth/components 4.12.0 → 4.12.2

package/lib/AutocompleteMixin-D8eiOxvO.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteMixin-D8eiOxvO.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":"yFAiEM,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-D8eiOxvO.js","sources":["../src/common/mixins/AutocompleteMixin.ts"],"sourcesContent":["import type { 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":"yFAgEM,SAAUA,EACdC,GAEA,MAAMC,UAA4BD,EAAlC,WAAAE,uBAIcC,KAAYC,aAA0B,KACnD,EAED,OAHcC,EAAA,CAAXC,KAAsDL,EAAAM,UAAA,oBAAA,GAGlDN,CACT"}

package/lib/Avatar.js

@@ -1,2 +1,2 @@
-import{_ as a}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as t,html as i,nothing as o}from"lit";import{state as n,property as e,customElement as s}from"lit/decorators.js";import{s as l}from"./Component-DSU3Qp0O.js";import{f as v}from"./fsm-Bq5jMQrK.js";import{o as c}from"./observe-D0n0zOfU.js";import"./VisuallyHidden.js";import"./Icon.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const d=r`: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);line-height: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 i`<div class="n-avatar">${"initial"!==this.state?this.renderImage():o} ${"loaded"!==this.state?this.renderFallback():o}</div>`}handleSrcChange(){const a=this.src?"src-set":"src-clear";this.state=h(this.state,a)}renderImage(){return this.src?i`<slot hidden></slot><img class="n-${this.state}" src="${this.src}" @load="${this.handleLoad}" @error="${this.handleError}" alt="${this.name||""}">`:o}renderFallback(){return i`<nord-visually-hidden>${this.name}</nord-visually-hidden><div class="n-avatar-inner" aria-hidden="true"><slot></slot></div>${this.icon?i`<nord-icon name="${this.icon}"></nord-icon>`:i`<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=[l,d],a([n()],z.prototype,"state",void 0),a([e({reflect:!0})],z.prototype,"size",void 0),a([e({reflect:!0})],z.prototype,"src",void 0),a([e({reflect:!0})],z.prototype,"name",void 0),a([e({reflect:!0})],z.prototype,"icon",void 0),a([e({reflect:!0})],z.prototype,"variant",void 0),a([c("src")],z.prototype,"handleSrcChange",null),z=a([s("nord-avatar")],z);var x=z;export{x as default};
+import{_ as a}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as t,html as i,nothing as o}from"lit";import{state as n,property as e,customElement as s}from"lit/decorators.js";import{o as l}from"./observe-D0n0zOfU.js";import{f as v}from"./fsm-Bq5jMQrK.js";import{s as c}from"./Component-DSU3Qp0O.js";import"./VisuallyHidden.js";import"./Icon.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const d=r`: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);line-height: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 rgb(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 i`<div class="n-avatar">${"initial"!==this.state?this.renderImage():o} ${"loaded"!==this.state?this.renderFallback():o}</div>`}handleSrcChange(){const a=this.src?"src-set":"src-clear";this.state=h(this.state,a)}renderImage(){return this.src?i`<slot hidden></slot><img class="n-${this.state}" src="${this.src}" @load="${this.handleLoad}" @error="${this.handleError}" alt="${this.name||""}">`:o}renderFallback(){return i`<nord-visually-hidden>${this.name}</nord-visually-hidden><div class="n-avatar-inner" aria-hidden="true"><slot></slot></div>${this.icon?i`<nord-icon name="${this.icon}"></nord-icon>`:i`<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],a([n()],z.prototype,"state",void 0),a([e({reflect:!0})],z.prototype,"size",void 0),a([e({reflect:!0})],z.prototype,"src",void 0),a([e({reflect:!0})],z.prototype,"name",void 0),a([e({reflect:!0})],z.prototype,"icon",void 0),a([e({reflect:!0})],z.prototype,"variant",void 0),a([l("src")],z.prototype,"handleSrcChange",null),z=a([s("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":"k5FAUMA,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 type { States } from '../common/fsm.js'\nimport { html, LitElement, nothing } from 'lit'\n\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { fsm } from '../common/fsm.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Avatar.css'\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":"i5FAWMA,WAAEA,GAAeC,EAAI,CACzBC,QAAS,CACP,UAAW,WAEbC,QAAS,CACPC,KAAQ,SACRC,MAAS,UACT,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"}

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":"+6GAiBe,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 { html, LitElement } 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":"+6GAiBe,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"}

package/lib/Banner.js

@@ -1,2 +1,2 @@
-import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as o,html as e}from"lit";import{property as a,customElement as t}from"lit/decorators.js";import c from"./Icon.js";import{s}from"./Component-DSU3Qp0O.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./observe-D0n0zOfU.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>',tags:"nordicon interface help speech bubble support circle round question mark",title:i});const d="interface-warning";var v=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>',tags:"nordicon interface warning exclamation mark triangle shape alert error",title:d});const b="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>',tags:"nordicon interface info circle round alert notice information",title:b});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>',tags:"nordicon interface circle round checked checkmark ready done success",title:g});const u=n`: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(v),c.registerIcon(m),c.registerIcon(p);const f={warning:i,danger:d,info:b,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],r([a({reflect:!0})],_.prototype,"variant",void 0),_=r([t("nord-banner")],_);var w=_;export{w as default};
+import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as o,html as e}from"lit";import{property as a,customElement as t}from"lit/decorators.js";import{s as c}from"./Component-DSU3Qp0O.js";import s from"./Icon.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const i="interface-checked-circle";var l=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>',tags:"nordicon interface circle round checked checkmark ready done success",title:i});const d="interface-help";var v=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>',tags:"nordicon interface help speech bubble support circle round question mark",title:d});const b="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>',tags:"nordicon interface info circle round alert notice information",title:b});const g="interface-warning";var p=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>',tags:"nordicon interface warning exclamation mark triangle shape alert error",title:g});const u=n`: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)}`;s.registerIcon(v),s.registerIcon(p),s.registerIcon(m),s.registerIcon(l);const f={warning:d,danger:g,info:b,success:i};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=[c,u],r([a({reflect:!0})],_.prototype,"variant",void 0),_=r([t("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":"6XACO,MAAMA,EAAQ,6DADN,6eAEK,qFCDb,MAAMA,EAAQ,gEADN,8gBAEK,mFCDb,MAAMA,EAAQ,6DADN,iUAEK,0ECDb,MAAMA,EAAQ,uEADN,iXAEK,4/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-checked-circle.js","../../icons/lib/assets/interface-help.js","../../icons/lib/assets/interface-info.js","../../icons/lib/assets/interface-warning.js","../src/banner/Banner.ts"],"sourcesContent":["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 =\n  \"nordicon interface circle round checked checkmark ready done success\";\n","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 =\n  \"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=\"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 =\n  \"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=\"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 =\n  \"nordicon interface warning exclamation mark triangle shape alert error\";\n","import * as successIcon from '@nordhealth/icons/lib/assets/interface-checked-circle.js'\nimport * as warningIcon from '@nordhealth/icons/lib/assets/interface-help.js'\nimport * as infoIcon from '@nordhealth/icons/lib/assets/interface-info.js'\nimport * as dangerIcon from '@nordhealth/icons/lib/assets/interface-warning.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport Icon from '../icon/Icon.js'\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":"kYACO,MAAMA,EAAQ,uEADN,iXAGb,iFCFK,MAAMA,EAAQ,6DADN,6eAGb,qFCFK,MAAMA,EAAQ,6DADN,iUAGb,0ECFK,MAAMA,EAAQ,gEADN,8gBAGb,8/CCQFC,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"}

package/lib/Button.js

@@ -1,2 +1,13 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as n,nothing as r,LitElement as e}from"lit";import{property as a,customElement as i}from"lit/decorators.js";import{createRef as s,ref as l}from"lit/directives/ref.js";import{E as b}from"./EventController-BBOmvfLa.js";import{L as d}from"./LightDomController-DIwtVelV.js";import{c}from"./cond-CI1KbneT.js";import"./Spinner.js";import{F as u}from"./FocusableMixin-BlQLNPdJ.js";import{I as v}from"./InputMixin-LetXsCyv.js";import{s as h}from"./Component-DSU3Qp0O.js";import{S as p}from"./SlotController-Z6eG7LSZ.js";import"lit/directives/if-defined.js";const g=o`: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(e))){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.hideDropdownIcon=!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 o="toggle"===(null===(t=this.assignedSlot)||void 0===t?void 0:t.name),e=this.defaultSlot.assigned.some((t=>"nord-icon"===t.localName)),a=o&&!this.hideDropdownIcon&&!e&&!this.href,i=n`<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?n`<nord-icon name="interface-dropdown-small" class="n-toggle-icon"></nord-icon>`:r}</slot>`;return this.href?this.renderLink(i):this.renderButton(i)}renderLink(t){return n`<a ${l(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${c(this.disabled,r,this.href)}" tabindex="${c(this.disabled,"-1")}" aria-disabled="${c(this.disabled,"true")}" role="${c(this.disabled,"link")}">${t}</a>`}renderButton(t){return n`<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?r:n`<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],t([a({reflect:!0})],f.prototype,"variant",void 0),t([a({reflect:!0})],f.prototype,"type",void 0),t([a({reflect:!0})],f.prototype,"size",void 0),t([a({attribute:"aria-expanded"})],f.prototype,"accessibleExpanded",void 0),t([a({attribute:"aria-haspopup"})],f.prototype,"accessibleHasPopup",void 0),t([a({reflect:!0})],f.prototype,"href",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"download",void 0),t([a()],f.prototype,"target",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"square",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"loading",void 0),t([a({reflect:!0,type:Boolean,attribute:"hide-dropdown-icon"})],f.prototype,"hideDropdownIcon",void 0),f=t([i("nord-button")],f);var _=f;export{_ as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as n,nothing as r,LitElement as e}from"lit";import{property as a,customElement as i}from"lit/decorators.js";import{createRef as s,ref as l}from"lit/directives/ref.js";import{E as b}from"./EventController-BBOmvfLa.js";import{L as d}from"./LightDomController-DIwtVelV.js";import{S as c}from"./SlotController-Z6eG7LSZ.js";import{c as u}from"./cond-CI1KbneT.js";import{F as v}from"./FocusableMixin-BlQLNPdJ.js";import{I as h}from"./InputMixin-LetXsCyv.js";import{s as p}from"./Component-DSU3Qp0O.js";import"./Spinner.js";import"lit/directives/if-defined.js";const g=o`: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, rgb(0, 0, 0, 0) 50%, rgb(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{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;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(h(v(e))){constructor(){super(...arguments),this.defaultSlot=new c(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.hideDropdownIcon=!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 o="toggle"===(null===(t=this.assignedSlot)||void 0===t?void 0:t.name),e=this.defaultSlot.assigned.some((t=>"nord-icon"===t.localName)),a=o&&!this.hideDropdownIcon&&!e&&!this.href,i=n`<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?n`<nord-icon name="interface-dropdown-small" class="n-toggle-icon"></nord-icon>`:r}</slot>`;return this.href?this.renderLink(i):this.renderButton(i)}renderLink(t){return n`<a ${l(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${u(this.disabled,r,this.href)}" tabindex="${u(this.disabled,"-1")}" aria-disabled="${u(this.disabled,"true")}" role="${u(this.disabled,"link")}">${t}</a>`}renderButton(t){return n`<slot name="proxy" @slotchange="${this.handleProxyChange}"></slot><button ${l(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${u(this.name)}" value="${u(this.value)}" @click="${this.handleClick}" aria-disabled="${u(this.loading,"true")}" aria-expanded="${u(this.accessibleExpanded)}" aria-haspopup="${u(this.accessibleHasPopup)}">${t}</button>`}renderLightDom(){return this.href||!this.form?r:n`<button ${l(this.buttonRef)} slot="proxy" name="${u(this.name)}" value="${u(this.value)}" ?disabled="${this.disabled}" form="${u(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=[p,g],t([a({reflect:!0})],f.prototype,"variant",void 0),t([a({reflect:!0})],f.prototype,"type",void 0),t([a({reflect:!0})],f.prototype,"size",void 0),t([a({attribute:"aria-expanded"})],f.prototype,"accessibleExpanded",void 0),t([a({attribute:"aria-haspopup"})],f.prototype,"accessibleHasPopup",void 0),t([a({reflect:!0})],f.prototype,"href",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"download",void 0),t([a()],f.prototype,"target",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"square",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"loading",void 0),t([a({reflect:!0,type:Boolean,attribute:"hide-dropdown-icon"})],f.prototype,"hideDropdownIcon",void 0),f=t([i("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":["/* eslint-disable lit-a11y/accessible-name */\nimport { 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  /**\n   * Controls whether the `interface-dropdown-small` icon from Nordicons is hidden\n   * in the `end` slot when used as a dropdown toggle.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"hide-dropdown-icon\" }) hideDropdownIcon = 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 && !this.hideDropdownIcon && !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","hideDropdownIcon","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":"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"}
+{"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["/* eslint-disable lit-a11y/accessible-name */\nimport type { TemplateResult } from 'lit'\nimport { html, LitElement, nothing } 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 { SlotController } from '../common/controllers/SlotController.js'\n\nimport { cond } from '../common/directives/cond.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 '../spinner/Spinner.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   * 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   * @private\n   */\n  @property({ attribute: 'aria-expanded' }) accessibleExpanded?: 'true' | 'false'\n\n  /**\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   * @private\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  /**\n   * Controls whether the `interface-dropdown-small` icon from Nordicons is hidden\n   * in the `end` slot when used as a dropdown toggle.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'hide-dropdown-icon' }) hideDropdownIcon = 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 && !this.hideDropdownIcon && !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","hideDropdownIcon","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":"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"}

package/lib/ButtonGroup.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as r,html as n}from"lit";import{property as a,customElement as i}from"lit/decorators.js";import{classMap as e}from"lit/directives/class-map.js";import{S as s}from"./SlotController-Z6eG7LSZ.js";import{D as l}from"./DirectionController-ChvNGESZ.js";import{s as d}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const u=o`: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-multiple-buttons{--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.n-multiple-buttons{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]) .n-multiple-buttons ::slotted(*){margin-inline-end:-1px}:host([variant=default]) .n-multiple-buttons ::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]) .n-multiple-buttons ::slotted(*){border-radius:var(--n-button-border-radius)}:host([variant=default]) .n-multiple-buttons.n-rtl ::slotted(:last-child),:host([variant=default]) .n-multiple-buttons: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-multiple-buttons.n-rtl ::slotted(:first-child),:host([variant=default]) .n-multiple-buttons: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]) .n-multiple-buttons ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) .n-multiple-buttons ::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]) .n-multiple-buttons ::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 r{constructor(){super(...arguments),this.defaultSlot=new s(this),this.dirController=new l(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"))),o=this.defaultSlot.assigned.length>1;return n`<div class="${e({"n-button-group":!0,"n-rtl":this.dirController.isRTL,"n-small-gap":t&&"spaced"===this.variant,"n-multiple-buttons":o})}"><slot></slot></div>`}};b.styles=[d,u],t([a({reflect:!0})],b.prototype,"variant",void 0),t([a({reflect:!0})],b.prototype,"direction",void 0),t([a({reflect:!0,type:Boolean})],b.prototype,"wrap",void 0),t([a({reflect:!0})],b.prototype,"role",void 0),b=t([i("nord-button-group")],b);var p=b;export{p as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as r,html as n}from"lit";import{property as a,customElement as i}from"lit/decorators.js";import{classMap as e}from"lit/directives/class-map.js";import{D as s}from"./DirectionController-ChvNGESZ.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{s as d}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const u=o`: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-multiple-buttons{--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.n-multiple-buttons{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]) .n-multiple-buttons ::slotted(*){margin-inline-end:-1px}:host([variant=default]) .n-multiple-buttons ::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]) .n-multiple-buttons ::slotted(*){border-radius:var(--n-button-border-radius)}:host([variant=default]) .n-multiple-buttons.n-rtl ::slotted(:last-child),:host([variant=default]) .n-multiple-buttons: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-multiple-buttons.n-rtl ::slotted(:first-child),:host([variant=default]) .n-multiple-buttons: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]) .n-multiple-buttons ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) .n-multiple-buttons ::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]) .n-multiple-buttons ::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 r{constructor(){super(...arguments),this.defaultSlot=new l(this),this.dirController=new s(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"))),o=this.defaultSlot.assigned.length>1;return n`<div class="${e({"n-button-group":!0,"n-rtl":this.dirController.isRTL,"n-small-gap":t&&"spaced"===this.variant,"n-multiple-buttons":o})}"><slot></slot></div>`}};b.styles=[d,u],t([a({reflect:!0})],b.prototype,"variant",void 0),t([a({reflect:!0})],b.prototype,"direction",void 0),t([a({reflect:!0,type:Boolean})],b.prototype,"wrap",void 0),t([a({reflect:!0})],b.prototype,"role",void 0),b=t([i("nord-button-group")],b);var p=b;export{p 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 ready\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    const hasMultipleButtons = this.defaultSlot.assigned.length > 1\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-multiple-buttons\": hasMultipleButtons,\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","hasMultipleButtons","length","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"u/HAoBe,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,OA0B7C,CAxBC,MAAAC,GACE,MAAMC,EAAkBV,KAAKC,YAAYU,SAASC,OAAMC,GAC/B,gBAAnBA,EAAKC,WAAkD,gBAAnBD,EAAKC,WACN,MAA9BD,EAAKE,aAAa,UAMvBC,EAAqBhB,KAAKC,YAAYU,SAASM,OAAS,EAE9D,OAAOC,CAAI,eAECC,EAAS,CACf,kBAAkB,EAClB,QAASnB,KAAKG,cAAciB,MAC5B,cAAeV,GAAoC,WAAjBV,KAAKK,QACvC,qBAAsBW,0BAM7B,GAlDMnB,EAAAwB,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiD7B,EAAA8B,UAAA,eAAA,GAKzCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2D7B,EAAA8B,UAAA,iBAAA,GAMpCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAuBhC,EAAA8B,UAAA,YAAA,GAM3BH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8B7B,EAAA8B,UAAA,YAAA,GA1BhC9B,EAAW2B,EAAA,CAD/BM,EAAc,sBACMjC,SAAAA"}
+{"version":3,"file":"ButtonGroup.js","sources":["../src/button-group/ButtonGroup.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { classMap } from 'lit/directives/class-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.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 ready\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\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    const hasMultipleButtons = this.defaultSlot.assigned.length > 1\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-multiple-buttons': hasMultipleButtons,\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","hasMultipleButtons","length","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"u/HAoBe,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,OA0B7C,CAxBC,MAAAC,GACE,MAAMC,EAAkBV,KAAKC,YAAYU,SAASC,OAAOC,GAChC,gBAAnBA,EAAKC,WAAkD,gBAAnBD,EAAKC,WACN,MAA9BD,EAAKE,aAAa,UAMvBC,EAAqBhB,KAAKC,YAAYU,SAASM,OAAS,EAE9D,OAAOC,CAAI,eAECC,EAAS,CACf,kBAAkB,EAClB,QAASnB,KAAKG,cAAciB,MAC5B,cAAeV,GAAoC,WAAjBV,KAAKK,QACvC,qBAAsBW,0BAM7B,GAlDMnB,EAAAwB,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiD7B,EAAA8B,UAAA,eAAA,GAKzCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2D7B,EAAA8B,UAAA,iBAAA,GAMpCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAuBhC,EAAA8B,UAAA,YAAA,GAM3BH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8B7B,EAAA8B,UAAA,YAAA,GA1BhC9B,EAAW2B,EAAA,CAD/BM,EAAc,sBACMjC,SAAAA"}

package/lib/Calendar-CL_eqbiT.js

@@ -0,0 +1,2 @@
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as a,LitElement as t,isServer as n,html as i}from"lit";import{query as s,property as o,state as r,customElement as l}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{repeat as c}from"lit/directives/repeat.js";import{o as h}from"./tinykeys.module-_6MZt7MP.js";import{m as u,c as p}from"./collection-Dvg2XbxV.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{E as g}from"./EventController-BBOmvfLa.js";import{D as f,i as m,p as y,a as b,s as w,e as x,b as D,g as k,d as z,f as $,h as F,j as _,k as Y,l as T,m as M,n as S,o as j}from"./dates-CAAlPKZi.js";import{o as C}from"./observe-D0n0zOfU.js";import{c as N}from"./cond-CI1KbneT.js";import{r as L}from"./number-Dg2vCfGd.js";import{s as O}from"./Component-DSU3Qp0O.js";import X from"./Icon.js";import{LocalizeController as E}from"./LocalizeController.js";import{DateSelectEvent as W}from"./DateSelectEvent.js";import"./Button.js";import"./VisuallyHidden.js";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>',tags:"nordicon arrow down small caret pointing triangle chevron",title:"arrow-down-small"});var A=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>',tags:"nordicon arrow left small caret pointing triangle chevron",title:"arrow-left-small"});var I=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>',tags:"nordicon arrow right small caret pointing triangle chevron",title:"arrow-right-small"});const P=e=>e.preventDefault();class B{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:i}=this.options,s=a-this.initialTouchX,o=t-this.initialTouchY,r={initialX:this.initialTouchX,initialY:this.initialTouchY,pageX:a,pageY:t,distX:s,distY:o};n(r)&&(e.preventDefault(),i(r))},e.addController(this),this.events=new g(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",P),this.events.listen(e,"touchend",this.handleTouchEnd)}}hostDisconnected(){this.hadFirstUpdate=!1}}function H({distX:e,distY:a}){return Math.abs(e)>=70&&Math.abs(a)<=70}function R({distX:e,distY:a}){return Math.abs(a)>=70&&Math.abs(e)<=70&&a>0}const V=a`: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{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{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%}`;function G(e){return a=>{a.preventDefault(),e(a)}}X.registerIcon(I),X.registerIcon(A),X.registerIcon(U);const Z=()=>!1,q=()=>!1,J="dialog-header";let K=class extends t{constructor(){super(...arguments),this.direction=new v(this),this.swipe=new B(this,{matchesGesture:H,onSwipeEnd:({distX:e})=>this.addMonths(e<0?1:-1)}),this.shortcuts=h({ArrowRight:G((()=>this.addDays(this.direction.isLTR?1:-1))),ArrowLeft:G((()=>this.addDays(this.direction.isLTR?-1:1))),ArrowDown:G((()=>this.addDays(7))),ArrowUp:G((()=>this.addDays(-7))),Home:G((()=>this.startOfWeek())),End:G((()=>this.endOfWeek())),PageUp:G((()=>this.addMonths(-1))),PageDown:G((()=>this.addMonths(1))),"Shift+PageUp":G((()=>this.addYears(-1))),"Shift+PageDown":G((()=>this.addYears(1)))}),this.localize=new E(this,{onLangChange:()=>this.handleLangChange()}),this.value="",this.firstDayOfWeek=f.Monday,this.expand=!1,this.isDateDisabled=Z,this.isDateHighlighted=q,this.activeFocus=!1,this.focusedDay=new Date,this.handleDaySelect=e=>{const a=m(e,y(this.min||""),y(this.max||"")),t=!this.isDateDisabled(e);a&&t&&(this.value=b(e),this.dispatchEvent(new W("change",e)))},this.handleMonthSelect=e=>{this.setMonth(Number.parseInt(e.target.value,10))},this.handleYearSelect=e=>{this.setYear(Number.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=this.getToday(),a=y(this.value),t=this.focusedDay.getMonth(),s=this.focusedDay.getFullYear(),o=y(this.min||""),r=y(this.max||""),l=o?w(o):void 0,h=r?x(r):void 0,v=(a||this.focusedDay).getFullYear(),g=o?o.getFullYear():v-10,f=r?r.getFullYear():v+10;return n&&this.handleLangChange(),i`<div class="n-calendar"><div class="n-calendar-header"><div><nord-visually-hidden><h2 id="${J}" 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)=>i`<option value="${a}" ?selected="${a===t}" ?disabled="${!m(new Date(s,a,1),l,h)}">${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}">${c(L(g,f),(e=>e),(e=>i`<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="${D(o,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="${D(r,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="${J}" @focusin="${this.enableActiveFocus}" @focusout="${this.disableActiveFocus}"><thead><tr>${u(this.dayNames,this.firstDayOfWeek,((e,a)=>i`<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>${p(k(this.focusedDay,this.firstDayOfWeek),7).map((t=>i`<tr class="n-calendar-row">${t.map((t=>{const n=!m(t,o,r),s=z(t,e),l=this.isDateDisabled(t),c=z(t,a),h=D(t,this.focusedDay),u=this.isDateHighlighted(t),p=this.dateFormatShort.format(t),v=u&&"string"==typeof u?`${p}, ${u}`:p;return i`<td class="n-calendar-cell"><button type="button" tabindex="${z(t,this.focusedDay)?0:-1}" class="${d({"n-calendar-day":!0,"is-outside":n,"is-month":h,"is-highlighted":u})}" @click="${()=>this.handleDaySelect(t)}" @keydown="${this.shortcuts}" ?disabled="${n}" aria-disabled="${N(l,"true")}" aria-pressed="${c?"true":"false"}" aria-current="${N(s,"date")}" aria-label="${v}"><span aria-hidden="true">${t.getDate()}</span></button></td>`}))}</tr>`))}</tbody></table></div>`}handleValueChange(){this.setFocusedDay(y(this.value)||this.getToday())}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=F(e,"long"),this.dayNamesShort=F(e,"narrow")}getToday(){return y(this.today||"")||new Date}addDays(e){this.setFocusedDay(_(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(Y(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(T(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const a=M(w(this.focusedDay),e),t=x(a),n=M(this.focusedDay,e);this.setFocusedDay(S(n,a,t))}setYear(e){const a=j(w(this.focusedDay),e),t=x(a),n=j(this.focusedDay,e);this.setFocusedDay(S(n,a,t))}setFocusedDay(e){this.focusedDay=S(e,y(this.min||""),y(this.max||"")),this.dispatchEvent(new W("nord-focus-date",this.focusedDay))}};K.styles=[O,V],e([s(".n-calendar-select-month",!0)],K.prototype,"monthSelectNode",void 0),e([s('button[tabindex="0"]')],K.prototype,"focusedDayNode",void 0),e([o()],K.prototype,"value",void 0),e([o({reflect:!0,type:Number,attribute:"first-day-of-week"})],K.prototype,"firstDayOfWeek",void 0),e([o({reflect:!0})],K.prototype,"min",void 0),e([o({reflect:!0})],K.prototype,"max",void 0),e([o({reflect:!0})],K.prototype,"today",void 0),e([o({reflect:!0,type:Boolean})],K.prototype,"expand",void 0),e([o({attribute:!1})],K.prototype,"isDateDisabled",void 0),e([o({attribute:!1})],K.prototype,"isDateHighlighted",void 0),e([r()],K.prototype,"activeFocus",void 0),e([r()],K.prototype,"focusedDay",void 0),e([C("value")],K.prototype,"handleValueChange",null),e([C("focusedDay","updated")],K.prototype,"handleFocusedDayChange",null),K=e([l("nord-calendar")],K);var Q=K;export{Q as C,B as S,R as i};
+//# sourceMappingURL=Calendar-CL_eqbiT.js.map

package/lib/Calendar-CL_eqbiT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar-CL_eqbiT.js","sources":["../../icons/lib/assets/arrow-down-small.js","../../icons/lib/assets/arrow-left-small.js","../../icons/lib/assets/arrow-right-small.js","../src/common/controllers/SwipeController.ts","../src/calendar/Calendar.ts"],"sourcesContent":["export 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>';\nexport const title = \"arrow-down-small\";\nexport const tags = \"nordicon arrow down small caret pointing triangle chevron\";\n","export 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>';\nexport const title = \"arrow-left-small\";\nexport const tags = \"nordicon arrow left small caret pointing triangle chevron\";\n","export 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>';\nexport const title = \"arrow-right-small\";\nexport const tags =\n  \"nordicon arrow right small caret pointing triangle chevron\";\n","import type { ReactiveController, ReactiveElement } from 'lit'\nimport { EventController } from './EventController.js'\n\nexport interface SwipeDetails {\n  initialX: number\n  initialY: number\n  pageX: number\n  pageY: number\n  distX: number\n  distY: number\n}\n\nconst preventDefault = (e: Event) => e.preventDefault()\n\ntype SetRequired<T, K extends keyof T> = T & { [Property in K]-?: T[K] }\ninterface SwipeControllerOptions {\n  target?: () => HTMLElement\n  matchesGesture: (details: SwipeDetails) => boolean\n  onSwipeEnd: (details: SwipeDetails) => void\n}\n\nexport class SwipeController implements ReactiveController {\n  private events: EventController\n  private hadFirstUpdate = false\n\n  private initialTouchX: number = 0\n  private initialTouchY: number = 0\n  private options: SetRequired<SwipeControllerOptions, 'target'>\n\n  constructor(host: ReactiveElement, options: SwipeControllerOptions) {\n    host.addController(this)\n    this.events = new EventController(host)\n\n    this.options = {\n      target: () => host,\n      ...options,\n    }\n  }\n\n  hostUpdated() {\n    if (!this.hadFirstUpdate) {\n      this.hadFirstUpdate = true\n\n      const target = this.options.target()\n      this.events.listen(target, 'touchstart', this.handleTouchStart)\n      this.events.listen(target, 'touchmove', preventDefault)\n      this.events.listen(target, 'touchend', this.handleTouchEnd)\n    }\n  }\n\n  hostDisconnected() {\n    this.hadFirstUpdate = false\n  }\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const [{ pageX, pageY }] = event.changedTouches\n    this.initialTouchX = pageX\n    this.initialTouchY = pageY\n  }\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const [{ pageX, pageY }] = event.changedTouches\n    const { matchesGesture, onSwipeEnd } = this.options\n\n    const distX = pageX - this.initialTouchX\n    const distY = pageY - this.initialTouchY\n    const details = { initialX: this.initialTouchX, initialY: this.initialTouchY, pageX, pageY, distX, distY }\n\n    if (matchesGesture(details)) {\n      event.preventDefault()\n      onSwipeEnd(details)\n    }\n  }\n}\n\nconst THRESHOLD = 70\n\nexport function isHorizontalSwipe({ distX, distY }: SwipeDetails) {\n  return Math.abs(distX) >= THRESHOLD && Math.abs(distY) <= THRESHOLD\n}\n\nexport function isDownwardsSwipe({ distX, distY }: SwipeDetails) {\n  return Math.abs(distY) >= THRESHOLD && Math.abs(distX) <= THRESHOLD && distY > 0\n}\n","import * as arrowDownIcon from '@nordhealth/icons/lib/assets/arrow-down-small.js'\nimport * as arrowLeftIcon from '@nordhealth/icons/lib/assets/arrow-left-small.js'\nimport * as arrowRightIcon from '@nordhealth/icons/lib/assets/arrow-right-small.js'\nimport { html, isServer, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { createKeybindingsHandler } from 'tinykeys'\n\nimport { chunk, mapWithOffset } from '../common/collection.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { isHorizontalSwipe, SwipeController } from '../common/controllers/SwipeController.js'\n\nimport {\n  addDays,\n  clamp,\n  DaysOfWeek,\n  endOfMonth,\n  endOfWeek,\n  getDayNames,\n  getMonthNames,\n  getViewOfMonth,\n  inRange,\n  isEqual,\n  isEqualMonth,\n  parseISODate,\n  printISODate,\n  setMonth,\n  setYear,\n  startOfMonth,\n  startOfWeek,\n} from '../common/dates.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { range } from '../common/number.js'\nimport componentStyle from '../common/styles/Component.css'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Calendar.css'\n\nimport { DateSelectEvent } from './DateSelectEvent.js'\nimport '../button/Button.js'\nimport '../visually-hidden/VisuallyHidden.js'\n\nexport type DatePredicate = (date: Date) => boolean\n\nIcon.registerIcon(arrowRightIcon)\nIcon.registerIcon(arrowLeftIcon)\nIcon.registerIcon(arrowDownIcon)\n\nfunction preventDefault(fn: EventListener) {\n  return (e: Event) => {\n    e.preventDefault()\n    fn(e)\n  }\n}\n\nconst isDateDisabled: DatePredicate = () => false\nconst isDateHighlighted = () => false\n\nconst dialogLabelId = 'dialog-header'\n\n/**\n * Calendar allows user to pick a date. It comes with built-in\n * functionality that allows you to set a minimum and a maximum allowed date.\n * Please note that the date must be passed in ISO-8601 format.\n *\n * @status ready\n * @category list\n * @fires {DateSelectEvent} change - Dispatched when a date is selected and the value changes.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n *\n * @cssprop [--n-calendar-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-calendar-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n *\n * @localization prevMonthLabel - Accessible label for the previous month button.\n * @localization nextMonthLabel - Accessible label for the next month button.\n * @localization monthSelectLabel - Accessible label for the month select.\n * @localization yearSelectLabel - Accessible label for the year select.\n */\n@customElement('nord-calendar')\nexport default class Calendar extends LitElement {\n  static styles = [componentStyle, style]\n\n  @query('.n-calendar-select-month', true) private monthSelectNode!: HTMLElement\n  @query(`button[tabindex=\"0\"]`) private focusedDayNode!: HTMLButtonElement\n\n  private direction = new DirectionController(this)\n  private swipe = new SwipeController(this, {\n    matchesGesture: isHorizontalSwipe,\n    onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n  })\n\n  private shortcuts = createKeybindingsHandler({\n    'ArrowRight': preventDefault(() => this.addDays(this.direction.isLTR ? 1 : -1)),\n    'ArrowLeft': preventDefault(() => this.addDays(this.direction.isLTR ? -1 : 1)),\n    'ArrowDown': preventDefault(() => this.addDays(7)),\n    'ArrowUp': preventDefault(() => this.addDays(-7)),\n    'Home': preventDefault(() => this.startOfWeek()),\n    'End': preventDefault(() => this.endOfWeek()),\n    'PageUp': preventDefault(() => this.addMonths(-1)),\n    'PageDown': preventDefault(() => this.addMonths(1)),\n    'Shift+PageUp': preventDefault(() => this.addYears(-1)),\n    'Shift+PageDown': preventDefault(() => this.addYears(1)),\n  })\n\n  private localize = new LocalizeController<'nord-calendar'>(this, {\n    onLangChange: () => this.handleLangChange(),\n  })\n\n  /**\n   * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n   * these are used to format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatShort!: Intl.DateTimeFormat\n  private monthNames!: string[]\n  private monthNamesShort!: string[]\n  private dayNames!: string[]\n  private dayNamesShort!: string[]\n\n  /**\n   * The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = ''\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @property({ reflect: true, type: Number, attribute: 'first-day-of-week' }) firstDayOfWeek: DaysOfWeek\n    = DaysOfWeek.Monday\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @property({ reflect: true }) min?: string\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @property({ reflect: true }) max?: string\n\n  /**\n   * The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\n   * If not set, the current local date of the user is used.\n   */\n  @property({ reflect: true }) today?: string\n\n  /**\n   * Controls whether the calendar expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @property({ attribute: false }) isDateDisabled: DatePredicate = isDateDisabled\n\n  /**\n   * Controls which days are highlighted with a small indicator.\n   * Returning a \"falsy\" value will not show an indicator.\n   * Returning \"truthy\" value will show the indicator, but without an accessible label.\n   * Returning a string will show the indicator, and use the string as accessible label.\n   * It is recommended to return a string rather than a truthy value whenever possible.\n   */\n  @property({ attribute: false }) isDateHighlighted: (date: Date) => string | boolean = isDateHighlighted\n\n  @state() private activeFocus = false\n  @state() private focusedDay = new Date()\n\n  /**\n   * Programmatically move focus to the calendar.\n   * @param options An object which controls aspects of the focusing process.\n   */\n  focus(options?: FocusOptions & { target: 'day' | 'month' }) {\n    const target = options?.target ?? 'day'\n\n    if (target === 'day') {\n      this.focusedDayNode.focus()\n    }\n    else if (target === 'month') {\n      this.monthSelectNode.focus()\n    }\n  }\n\n  render() {\n    const today = this.getToday()\n    const valueAsDate = parseISODate(this.value)\n    const focusedMonth = this.focusedDay.getMonth()\n    const focusedYear = this.focusedDay.getFullYear()\n\n    const minDate = parseISODate(this.min || '')\n    const maxDate = parseISODate(this.max || '')\n    const minDateStartOfMonth = minDate ? startOfMonth(minDate) : undefined\n    const maxDateEndOfMonth = maxDate ? endOfMonth(maxDate) : undefined\n\n    const selectedYear = (valueAsDate || this.focusedDay).getFullYear()\n    const minYear = minDate ? minDate.getFullYear() : selectedYear - 10\n    const maxYear = maxDate ? maxDate.getFullYear() : selectedYear + 10\n\n    if (isServer) {\n      // Needed when run on a server, because the `onLangChange` callback does not get triggered, so we need to manually\n      // call `handleLangChange` to set the localized values for month and day names, which the `render` method relies on.\n      this.handleLangChange()\n    }\n\n    return html`\n      <div class=\"n-calendar\">\n        <div class=\"n-calendar-header\">\n          <div>\n            <nord-visually-hidden>\n              <h2 id=${dialogLabelId} aria-live=\"polite\" aria-atomic=\"true\">\n                ${this.monthNames[focusedMonth]}, ${this.focusedDay.getFullYear()}\n              </h2>\n            </nord-visually-hidden>\n\n            <div class=\"n-calendar-select\">\n              <select\n                aria-label=${this.localize.term('monthSelectLabel')}\n                class=\"n-calendar-select-month\"\n                @input=${this.handleMonthSelect}\n              >\n                ${this.monthNames.map(\n                  (month, i) => html`\n                    <option\n                      value=${i}\n                      ?selected=${i === focusedMonth}\n                      ?disabled=${!inRange(new Date(focusedYear, i, 1), minDateStartOfMonth, maxDateEndOfMonth)}\n                    >\n                      ${month}\n                    </option>\n                  `,\n                )}\n              </select>\n              <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n                <span>${this.monthNamesShort[focusedMonth]}</span>\n                <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n              </div>\n            </div>\n\n            <div class=\"n-calendar-select\">\n              <select\n                aria-label=${this.localize.term('yearSelectLabel')}\n                class=\"n-calendar-select-year\"\n                @input=${this.handleYearSelect}\n              >\n                ${repeat(\n                  range(minYear, maxYear),\n                  year => year,\n                  year => html`<option ?selected=${year === focusedYear}>${year}</option>`,\n                )}\n              </select>\n              <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n                <span>${this.focusedDay.getFullYear()}</span>\n                <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"n-calendar-nav\">\n            <nord-button\n              class=\"n-calendar-prev\"\n              @click=${this.handlePreviousMonthClick}\n              ?disabled=${isEqualMonth(minDate, this.focusedDay)}\n              type=\"button\"\n            >\n              <nord-visually-hidden>${this.localize.term('prevMonthLabel')}</nord-visually-hidden>\n              <nord-icon name=${this.direction.isLTR ? 'arrow-left-small' : 'arrow-right-small'} size=\"s\"></nord-icon>\n            </nord-button>\n\n            <nord-button\n              class=\"n-calendar-next\"\n              @click=${this.handleNextMonthClick}\n              ?disabled=${isEqualMonth(maxDate, this.focusedDay)}\n              type=\"button\"\n            >\n              <nord-visually-hidden>${this.localize.term('nextMonthLabel')}</nord-visually-hidden>\n              <nord-icon name=${this.direction.isLTR ? 'arrow-right-small' : 'arrow-left-small'} size=\"s\"></nord-icon>\n            </nord-button>\n          </div>\n        </div>\n\n        <table\n          class=\"n-calendar-table\"\n          aria-labelledby=${dialogLabelId}\n          @focusin=${this.enableActiveFocus}\n          @focusout=${this.disableActiveFocus}\n        >\n          <thead>\n            <tr>\n              ${mapWithOffset(\n                this.dayNames,\n                this.firstDayOfWeek,\n                (dayName, i) => html`\n                  <th class=\"n-calendar-table-header\" scope=\"col\">\n                    <span aria-hidden=\"true\">${this.dayNamesShort[i]}</span>\n                    <nord-visually-hidden>${dayName}</nord-visually-hidden>\n                  </th>\n                `,\n              )}\n            </tr>\n          </thead>\n          <tbody>\n            ${chunk(getViewOfMonth(this.focusedDay, this.firstDayOfWeek), 7).map(\n              week => html`\n                <tr class=\"n-calendar-row\">\n                  ${week.map((day) => {\n                    const outsideRange = !inRange(day, minDate, maxDate)\n                    const isToday = isEqual(day, today)\n                    const isDisabled = this.isDateDisabled(day)\n                    const isSelected = isEqual(day, valueAsDate)\n                    const isInMonth = isEqualMonth(day, this.focusedDay)\n                    const isHighlighted = this.isDateHighlighted(day)\n                    const formattedDate = this.dateFormatShort.format(day)\n\n                    const accessibleLabel\n                      = isHighlighted && typeof isHighlighted === 'string'\n                        ? `${formattedDate}, ${isHighlighted}`\n                        : formattedDate\n\n                    return html`\n                      <td class=\"n-calendar-cell\">\n                        <button\n                          type=\"button\"\n                          tabindex=${isEqual(day, this.focusedDay) ? 0 : -1}\n                          class=${classMap({\n                            'n-calendar-day': true,\n                            'is-outside': outsideRange,\n                            'is-month': isInMonth,\n                            'is-highlighted': isHighlighted,\n                          })}\n                          @click=${() => this.handleDaySelect(day)}\n                          @keydown=${this.shortcuts}\n                          ?disabled=${outsideRange}\n                          aria-disabled=${cond(isDisabled, 'true')}\n                          aria-pressed=${isSelected ? 'true' : 'false'}\n                          aria-current=${cond(isToday, 'date')}\n                          aria-label=${accessibleLabel}\n                        >\n                          <span aria-hidden=\"true\">${day.getDate()}</span>\n                        </button>\n                      </td>\n                    `\n                  })}\n                </tr>\n              `,\n            )}\n          </tbody>\n        </table>\n      </div>\n    `\n  }\n\n  @observe('value')\n  protected handleValueChange() {\n    this.setFocusedDay(parseISODate(this.value) || this.getToday())\n  }\n\n  @observe('focusedDay', 'updated')\n  protected handleFocusedDayChange() {\n    if (this.activeFocus) {\n      this.focusedDayNode.focus()\n    }\n  }\n\n  private handleLangChange() {\n    const lang = this.localize.resolvedLang\n    this.dateFormatShort = new Intl.DateTimeFormat(lang, { timeZone: 'UTC', day: 'numeric', month: 'long' })\n    this.monthNames = getMonthNames(lang, 'long')\n    this.monthNamesShort = getMonthNames(lang, 'short')\n    this.dayNames = getDayNames(lang, 'long')\n    this.dayNamesShort = getDayNames(lang, 'narrow')\n  }\n\n  private handleDaySelect = (day: Date) => {\n    const isInRange = inRange(day, parseISODate(this.min || ''), parseISODate(this.max || ''))\n    const isAllowed = !this.isDateDisabled(day)\n\n    if (isInRange && isAllowed) {\n      this.value = printISODate(day)\n      this.dispatchEvent(new DateSelectEvent('change', day))\n    }\n  }\n\n  private getToday() {\n    return parseISODate(this.today || '') || new Date()\n  }\n\n  private addDays(days: number) {\n    this.setFocusedDay(addDays(this.focusedDay, days))\n  }\n\n  private addMonths(months: number) {\n    this.setMonth(this.focusedDay.getMonth() + months)\n  }\n\n  private addYears(years: number) {\n    this.setYear(this.focusedDay.getFullYear() + years)\n  }\n\n  private startOfWeek() {\n    this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek))\n  }\n\n  private endOfWeek() {\n    this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek))\n  }\n\n  private setMonth(month: number) {\n    const min = setMonth(startOfMonth(this.focusedDay), month)\n    const max = endOfMonth(min)\n    const date = setMonth(this.focusedDay, month)\n\n    this.setFocusedDay(clamp(date, min, max))\n  }\n\n  private setYear(year: number) {\n    const min = setYear(startOfMonth(this.focusedDay), year)\n    const max = endOfMonth(min)\n    const date = setYear(this.focusedDay, year)\n\n    this.setFocusedDay(clamp(date, min, max))\n  }\n\n  private setFocusedDay(day: Date) {\n    this.focusedDay = clamp(day, parseISODate(this.min || ''), parseISODate(this.max || ''))\n    this.dispatchEvent(new DateSelectEvent('nord-focus-date', this.focusedDay))\n  }\n\n  private handleMonthSelect = (e: Event) => {\n    this.setMonth(Number.parseInt((e.target as HTMLSelectElement).value, 10))\n  }\n\n  private handleYearSelect = (e: Event) => {\n    this.setYear(Number.parseInt((e.target as HTMLSelectElement).value, 10))\n  }\n\n  private handleNextMonthClick = (event: MouseEvent) => {\n    event.preventDefault()\n    this.addMonths(1)\n  }\n\n  private handlePreviousMonthClick = (event: MouseEvent) => {\n    event.preventDefault()\n    this.addMonths(-1)\n  }\n\n  private enableActiveFocus = () => {\n    this.activeFocus = true\n  }\n\n  private disableActiveFocus = (e: FocusEvent) => {\n    const table = e.currentTarget as Node\n    const relatedTarget = e.relatedTarget as Node\n\n    if (relatedTarget && !table.contains(relatedTarget)) {\n      this.activeFocus = false\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-calendar': Calendar\n  }\n}\n"],"names":["preventDefault","e","SwipeController","constructor","host","options","this","hadFirstUpdate","initialTouchX","initialTouchY","handleTouchStart","event","pageX","pageY","changedTouches","handleTouchEnd","matchesGesture","onSwipeEnd","distX","distY","details","initialX","initialY","addController","events","EventController","target","hostUpdated","listen","hostDisconnected","isHorizontalSwipe","Math","abs","isDownwardsSwipe","fn","Icon","registerIcon","arrowRightIcon","arrowLeftIcon","arrowDownIcon","isDateDisabled","isDateHighlighted","dialogLabelId","Calendar","LitElement","direction","DirectionController","swipe","addMonths","shortcuts","createKeybindingsHandler","ArrowRight","addDays","isLTR","ArrowLeft","ArrowDown","ArrowUp","Home","startOfWeek","End","endOfWeek","PageUp","PageDown","addYears","localize","LocalizeController","onLangChange","handleLangChange","value","firstDayOfWeek","DaysOfWeek","Monday","expand","activeFocus","focusedDay","Date","handleDaySelect","day","isInRange","inRange","parseISODate","min","max","isAllowed","printISODate","dispatchEvent","DateSelectEvent","handleMonthSelect","setMonth","Number","parseInt","handleYearSelect","setYear","handleNextMonthClick","handlePreviousMonthClick","enableActiveFocus","disableActiveFocus","table","currentTarget","relatedTarget","contains","focus","_a","focusedDayNode","monthSelectNode","render","today","getToday","valueAsDate","focusedMonth","getMonth","focusedYear","getFullYear","minDate","maxDate","minDateStartOfMonth","startOfMonth","undefined","maxDateEndOfMonth","endOfMonth","selectedYear","minYear","maxYear","isServer","html","monthNames","term","map","month","i","monthNamesShort","repeat","range","year","isEqualMonth","mapWithOffset","dayNames","dayName","dayNamesShort","chunk","getViewOfMonth","week","outsideRange","isToday","isEqual","isDisabled","isSelected","isInMonth","isHighlighted","formattedDate","dateFormatShort","format","accessibleLabel","classMap","cond","getDate","handleValueChange","setFocusedDay","handleFocusedDayChange","lang","resolvedLang","Intl","DateTimeFormat","timeZone","getMonthNames","getDayNames","days","months","years","date","clamp","styles","componentStyle","style","__decorate","query","prototype","property","reflect","type","attribute","Boolean","state","observe","customElement"],"mappings":"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"}

package/lib/Calendar.js

@@ -1,2 +1,2 @@
-import"./tslib.es6-CmLYFWVC.js";import"lit";import"lit/decorators.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";export{C as default}from"./Calendar-CYcI340m.js";import"./Button.js";import"./VisuallyHidden.js";import"./Icon.js";import"./DirectionController-ChvNGESZ.js";import"./LocalizeController.js";import"./collection-Dvg2XbxV.js";import"./cond-CI1KbneT.js";import"./number-Dg2vCfGd.js";import"./dates-lbaNvUdr.js";import"./observe-D0n0zOfU.js";import"./DateSelectEvent.js";import"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";import"lit/directives/ref.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"lit/directives/if-defined.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./SlotController-Z6eG7LSZ.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./events-Bv6wNHwJ.js";
+import"./tslib.es6-CmLYFWVC.js";export{C as default}from"./Calendar-CL_eqbiT.js";import"lit";import"lit/decorators.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./collection-Dvg2XbxV.js";import"./DirectionController-ChvNGESZ.js";import"./dates-CAAlPKZi.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./number-Dg2vCfGd.js";import"./Component-DSU3Qp0O.js";import"./Icon.js";import"./LocalizeController.js";import"./DateSelectEvent.js";import"./Button.js";import"./VisuallyHidden.js";import"./EventController-BBOmvfLa.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./events-Bv6wNHwJ.js";import"lit/directives/ref.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";
 //# sourceMappingURL=Calendar.js.map

package/lib/Card.js

@@ -1,2 +1,2 @@
-import{_ as a}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as d,html as o}from"lit";import{property as e,customElement as t}from"lit/decorators.js";import{S as n}from"./SlotController-Z6eG7LSZ.js";import{s}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const i=r`:host{--_n-card-padding:var(--n-card-padding, var(--n-space-m));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-m));--_n-card-box-shadow:var(--n-card-box-shadow, var(--n-box-shadow-card));--_n-card-border-radius:var(--n-card-border-radius, var(--n-border-radius));--_n-card-header-background:var(--n-card-header-background, transparent);color:var(--n-color-text);display:block;inline-size:100%}.n-card{background:var(--n-color-surface);border-radius:var(--_n-card-border-radius);box-shadow:var(--_n-card-box-shadow);block-size:100%;display:flex;flex-direction:column}.header{background-color:var(--_n-card-header-background);border-block-end:1px solid var(--n-color-border);border-start-start-radius:var(--_n-card-border-radius);border-start-end-radius:var(--_n-card-border-radius);padding:var(--n-space-m) var(--_n-card-slot-padding);display:flex;gap:var(--n-space-s);align-items:center;justify-content:space-between;flex-wrap:wrap}:host([padding="l"]){--_n-card-padding:var(--n-card-padding, var(--n-space-l));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-l))}:host([padding=none]){--_n-card-padding:var(--n-card-padding, 0)}slot{display:block}slot:not([name]){padding:var(--_n-card-padding);flex:1}slot[name=footer]{padding:var(--_n-card-slot-padding);padding-block-start:0;white-space:nowrap}::slotted([slot=header-end]){--n-stack-gap:var(--n-space-s);display:flex;gap:var(--n-stack-gap);align-items:center;flex-wrap:wrap;margin-block-start:calc(var(--n-space-xs) * -1)!important;margin-block-end:calc(var(--n-space-xs) * -1)!important}::slotted([slot=header]){font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading);margin:0}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let l=class extends d{constructor(){super(...arguments),this.headerSlot=new n(this,"header"),this.headerEndSlot=new n(this,"header-end"),this.footerSlot=new n(this,"footer"),this.padding="m"}render(){return o`<div class="n-card"><div class="header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><slot></slot><slot name="${this.footerSlot.slotName}" ?hidden="${this.footerSlot.isEmpty}"></slot></div>`}};l.styles=[s,i],a([e({reflect:!0})],l.prototype,"padding",void 0),l=a([t("nord-card")],l);var c=l;export{c as default};
+import{_ as a}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as d,html as o}from"lit";import{property as e,customElement as t}from"lit/decorators.js";import{S as n}from"./SlotController-Z6eG7LSZ.js";import{s}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const i=r`:host{--_n-card-padding:var(--n-card-padding, var(--n-space-m));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-m));--_n-card-box-shadow:var(--n-card-box-shadow, var(--n-box-shadow-card));--_n-card-border-radius:var(--n-card-border-radius, var(--n-border-radius));--_n-card-header-background:var(--n-card-header-background, transparent);color:var(--n-color-text);display:block;inline-size:100%}.n-card{background:var(--n-color-surface);border-radius:var(--_n-card-border-radius);box-shadow:var(--_n-card-box-shadow);block-size:100%;display:flex;flex-direction:column}.header{background-color:var(--_n-card-header-background);border-block-end:1px solid var(--n-color-border);border-start-start-radius:var(--_n-card-border-radius);border-start-end-radius:var(--_n-card-border-radius);padding:var(--n-space-m) var(--_n-card-slot-padding);display:flex;gap:var(--n-space-s);align-items:center;justify-content:space-between;flex-wrap:wrap}:host([padding='l']){--_n-card-padding:var(--n-card-padding, var(--n-space-l));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-l))}:host([padding=none]){--_n-card-padding:var(--n-card-padding, 0)}slot{display:block}slot:not([name]){padding:var(--_n-card-padding);flex:1}slot[name=footer]{padding:var(--_n-card-slot-padding);padding-block-start:0;white-space:nowrap}::slotted([slot=header-end]){--n-stack-gap:var(--n-space-s);display:flex;gap:var(--n-stack-gap);align-items:center;flex-wrap:wrap;margin-block-start:calc(var(--n-space-xs) * -1)!important;margin-block-end:calc(var(--n-space-xs) * -1)!important}::slotted([slot=header]){font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading);margin:0}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let l=class extends d{constructor(){super(...arguments),this.headerSlot=new n(this,"header"),this.headerEndSlot=new n(this,"header-end"),this.footerSlot=new n(this,"footer"),this.padding="m"}render(){return o`<div class="n-card"><div class="header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><slot></slot><slot name="${this.footerSlot.slotName}" ?hidden="${this.footerSlot.isEmpty}"></slot></div>`}};l.styles=[s,i],a([e({reflect:!0})],l.prototype,"padding",void 0),l=a([t("nord-card")],l);var c=l;export{c as default};
 //# sourceMappingURL=Card.js.map