@nordhealth/components 3.9.0 → 3.11.0

package/lib/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private subnavSlot = new SlotController(this, \"subnav\")\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property() icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property() href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property() badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ type: Boolean }) open = false\n\n  /**\n   * @internal\n   */\n  get hasSubNav() {\n    return this.subnavSlot.hasContent\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-nav-content\">\n        <span class=\"n-nav-label\"><slot></slot></span>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    } else if (this.href) {\n      element = this.renderLink(innards)\n    } else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, \"page\")} href=${this.href || \"\"}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? \"true\" : \"false\"}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xxs\"\n          class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent(\"toggle\"))\n  }\n\n  @observe(\"active\", \"updated\")\n  protected handleActiveChange() {\n    if (this.active && !this.hasSubNav) {\n      this.dispatchEvent(new NordEvent(\"activate\"))\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-item\": NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","hasSubNav","hasContent","render","innards","html","icon","nothing","badge","element","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","handleActiveChange","styles","componentStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"wiHAyBe,IAAMA,EAAN,cAAsBC,EAAeC,IAArC,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBxBL,KAAIM,MAAG,CA6ErC,CAxEC,aAAIC,GACF,OAAOP,KAAKC,WAAWO,UACxB,CAED,MAAAC,GACE,MAAMC,EAAUC,CAAI,GAChBX,KAAKY,KAAOD,CAAI,uCAAsCX,KAAKY,8BAA+BC,6EAGxFb,KAAKc,MAAQH,CAAI,6BAA6BX,KAAKc,eAAiBD,UAG1E,IAAIE,EAUJ,OAPEA,EADEf,KAAKC,WAAWO,WACRR,KAAKgB,aAAaN,GACnBV,KAAKiB,KACJjB,KAAKkB,WAAWR,GAEhBV,KAAKmB,aAAaT,GAGvBC,CAAI,wBAELI,gBACWf,KAAKC,WAAWmB,uBAAqBpB,KAAKM,qBAG5D,CAEO,UAAAY,CAAWR,GACjB,OAAOC,CAAI,yBACeU,EAAIrB,KAAKsB,+BAA8BC,EAAKvB,KAAKK,OAAQ,kBAAgBL,KAAKiB,MAAQ,OAC1GP,OAGP,CAEO,YAAAM,CAAaN,GACnB,OAAOC,CAAI,sCAGEX,KAAKwB,8BACExB,KAAKM,KAAO,OAAS,YACnCe,EAAIrB,KAAKsB,iBAETZ,iCAIQe,EAAS,CAAE,iBAAiB,EAAM,QAASzB,KAAKG,UAAUuB,gEAKzE,CAEO,YAAAP,CAAaT,GACnB,OAAOC,CAAI,8BAA8BU,EAAIrB,KAAKsB,iBAAiBZ,YACpE,CAEO,UAAAc,GACNxB,KAAKM,MAAQN,KAAKM,KAClBN,KAAK2B,cAAc,IAAIC,EAAU,UAClC,CAGS,kBAAAC,GACJ7B,KAAKK,SAAWL,KAAKO,WACvBP,KAAK2B,cAAc,IAAIC,EAAU,YAEpC,GA3GMhC,EAAAkC,OAAS,CAACC,EAAgBC,GASWC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBzC,EAAA0C,UAAA,cAAA,GAK9CL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAMbL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAAyBtC,EAAA0C,UAAA,aAAA,GAMGL,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAuBxC,EAAA0C,UAAA,YAAA,GAwE/BL,EAAA,CADTM,EAAQ,SAAU,YAKlB3C,EAAA0C,UAAA,qBAAA,MA5GkB1C,EAAOqC,EAAA,CAD3BO,EAAc,kBACM5C,SAAAA"}
+{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private subnavSlot = new SlotController(this, \"subnav\")\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property({ reflect: true }) icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property({ reflect: true }) badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ reflect: true, type: Boolean }) open = false\n\n  /**\n   * @internal\n   */\n  get hasSubNav() {\n    return this.subnavSlot.hasContent\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-nav-content\">\n        <span class=\"n-nav-label\"><slot></slot></span>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    } else if (this.href) {\n      element = this.renderLink(innards)\n    } else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, \"page\")} href=${this.href || \"\"}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? \"true\" : \"false\"}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xxs\"\n          class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent(\"toggle\"))\n  }\n\n  @observe(\"active\", \"updated\")\n  protected handleActiveChange() {\n    if (this.active && !this.hasSubNav) {\n      this.dispatchEvent(new NordEvent(\"activate\"))\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-item\": NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","hasSubNav","hasContent","render","innards","html","icon","nothing","badge","element","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","handleActiveChange","styles","componentStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"wiHAyBe,IAAMA,EAAN,cAAsBC,EAAeC,IAArC,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBTL,KAAIM,MAAG,CA6EpD,CAxEC,aAAIC,GACF,OAAOP,KAAKC,WAAWO,UACxB,CAED,MAAAC,GACE,MAAMC,EAAUC,CAAI,GAChBX,KAAKY,KAAOD,CAAI,uCAAsCX,KAAKY,8BAA+BC,6EAGxFb,KAAKc,MAAQH,CAAI,6BAA6BX,KAAKc,eAAiBD,UAG1E,IAAIE,EAUJ,OAPEA,EADEf,KAAKC,WAAWO,WACRR,KAAKgB,aAAaN,GACnBV,KAAKiB,KACJjB,KAAKkB,WAAWR,GAEhBV,KAAKmB,aAAaT,GAGvBC,CAAI,wBAELI,gBACWf,KAAKC,WAAWmB,uBAAqBpB,KAAKM,qBAG5D,CAEO,UAAAY,CAAWR,GACjB,OAAOC,CAAI,yBACeU,EAAIrB,KAAKsB,+BAA8BC,EAAKvB,KAAKK,OAAQ,kBAAgBL,KAAKiB,MAAQ,OAC1GP,OAGP,CAEO,YAAAM,CAAaN,GACnB,OAAOC,CAAI,sCAGEX,KAAKwB,8BACExB,KAAKM,KAAO,OAAS,YACnCe,EAAIrB,KAAKsB,iBAETZ,iCAIQe,EAAS,CAAE,iBAAiB,EAAM,QAASzB,KAAKG,UAAUuB,gEAKzE,CAEO,YAAAP,CAAaT,GACnB,OAAOC,CAAI,8BAA8BU,EAAIrB,KAAKsB,iBAAiBZ,YACpE,CAEO,UAAAc,GACNxB,KAAKM,MAAQN,KAAKM,KAClBN,KAAK2B,cAAc,IAAIC,EAAU,UAClC,CAGS,kBAAAC,GACJ7B,KAAKK,SAAWL,KAAKO,WACvBP,KAAK2B,cAAc,IAAIC,EAAU,YAEpC,GA3GMhC,EAAAkC,OAAS,CAACC,EAAgBC,GASWC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBzC,EAAA0C,UAAA,cAAA,GAK7BL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAqBzC,EAAA0C,UAAA,YAAA,GAMbL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAqBzC,EAAA0C,UAAA,YAAA,GAKbL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAsBzC,EAAA0C,UAAA,aAAA,GAMCL,EAAA,CAA3CC,EAAS,CAAEG,SAAS,EAAMF,KAAMC,WAAuBxC,EAAA0C,UAAA,YAAA,GAwE9CL,EAAA,CADTM,EAAQ,SAAU,YAKlB3C,EAAA0C,UAAA,qBAAA,MA5GkB1C,EAAOqC,EAAA,CAD3BO,EAAc,kBACM5C,SAAAA"}

package/lib/{NavToggle-cb2c3648.js → NavToggle-b54db654.js}

@@ -1,2 +1,2 @@
 import{i as o,_ as n,x as t,e as r,s as i}from"./query-assigned-elements-92ce7494.js";import{n as e}from"./ref-99418ab4.js";import{o as s}from"./class-map-512f0bc1.js";import{LocalizeController as a}from"./LocalizeController.js";import{D as l}from"./DirectionController-f35f5476.js";import{F as c}from"./FocusableMixin-d30213b4.js";import"./Button.js";import g from"./Icon.js";import"./VisuallyHidden.js";import{s as m}from"./Component-2253424f.js";const d="navigation-toggle-lock";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z" fill="currentColor"/></svg>',title:d,tags:"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron"});const h="navigation-toggle";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z" fill="currentColor"/></svg>',title:h,tags:"nordicon navigation hamburger menu toggle navigation three lines"});const p=o`:host{color:var(--n-color-icon);display:inline-flex}nord-button{--n-button-color:currentColor}nord-icon{display:block;transform:translateX(-1px);color:currentColor}nord-icon[name=navigation-toggle-lock]{display:none}.is-rtl nord-icon[name=navigation-toggle-lock]{transform:rotate(180deg)}@media (min-width:768px){:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle-lock]{display:block}:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle]{display:none}}`;g.registerIcon(u),g.registerIcon(v);let f=class extends(c(i)){constructor(){super(...arguments),this.direction=new l(this),this.localization=new a(this)}render(){return t`<nord-button variant="plain" ${e(this.focusableRef)} class="${s({"is-rtl":this.direction.isRTL})}"><nord-visually-hidden>${this.localization.term("label")}</nord-visually-hidden><nord-icon size="m" name="${h}"></nord-icon><nord-icon size="m" name="${d}"></nord-icon></nord-button>`}};f.styles=[m,p],f=n([r("nord-nav-toggle")],f);var b=f;export{b as N,v as l};
-//# sourceMappingURL=NavToggle-cb2c3648.js.map
+//# sourceMappingURL=NavToggle-b54db654.js.map

package/lib/{NavToggle-cb2c3648.js.map → NavToggle-b54db654.js.map}

@@ -1 +1 @@
-{"version":3,"file":"NavToggle-cb2c3648.js","sources":["../../icons/lib/assets/navigation-toggle-lock.js","../../icons/lib/assets/navigation-toggle.js","../src/nav-toggle/NavToggle.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-toggle-lock\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-toggle\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation three lines\"\n","import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as unlockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle.js\"\nimport * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.js\"\n\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./NavToggle.css\"\n\nIcon.registerIcon(unlockIcon)\nIcon.registerIcon(lockIcon)\n\n/**\n * Nav toggle is meant for hiding and showing the primary navigation.\n * This component is used internally in the Layout component, but can also be\n * used separate to further customize the behavior.\n *\n * @status new\n * @category action\n *\n * @localization label - Accessible label for the nav toggle button.\n */\n@customElement(\"nord-nav-toggle\")\nexport default class NavToggle extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private direction = new DirectionController(this)\n  private localization = new LocalizeController<\"nord-nav-toggle\">(this)\n\n  render() {\n    return html`\n      <nord-button variant=\"plain\" ${ref(this.focusableRef)} class=${classMap({ \"is-rtl\": this.direction.isRTL })}>\n        <nord-visually-hidden>${this.localization.term(\"label\")}</nord-visually-hidden>\n        <nord-icon size=\"m\" name=${unlockIcon.title}></nord-icon>\n        <nord-icon size=\"m\" name=${lockIcon.title}></nord-icon>\n      </nord-button>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-toggle\": NavToggle\n  }\n}\n"],"names":["title","Icon","registerIcon","unlockIcon","lockIcon","NavToggle","FocusableMixin","LitElement","constructor","this","direction","DirectionController","localization","LocalizeController","render","html","ref","focusableRef","classMap","isRTL","term","unlockIcon.title","lockIcon.title","styles","componentStyle","style","__decorate","customElement"],"mappings":"icACO,MAAMA,EAAQ,qEADN,4TAEK,kGCDb,MAAMA,EAAQ,gEADN,0MAEK,ijBCgBpBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAaH,IAAMC,EAAN,cAAwBC,EAAeC,IAAvC,WAAAC,uBAGLC,KAAAC,UAAY,IAAIC,EAAoBF,MACpCA,KAAAG,aAAe,IAAIC,EAAsCJ,KAWlE,CATC,MAAAK,GACE,OAAOC,CAAI,gCACsBC,EAAIP,KAAKQ,wBAAuBC,EAAS,CAAE,SAAUT,KAAKC,UAAUS,kCACzEV,KAAKG,aAAaQ,KAAK,4DACpBC,4CACAC,+BAGhC,GAbMjB,EAAAkB,OAAS,CAACC,EAAgBC,GADdpB,EAASqB,EAAA,CAD7BC,EAAc,oBACMtB,SAAAA"}
+{"version":3,"file":"NavToggle-b54db654.js","sources":["../../icons/lib/assets/navigation-toggle-lock.js","../../icons/lib/assets/navigation-toggle.js","../src/nav-toggle/NavToggle.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-toggle-lock\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z\" fill=\"currentColor\"/></svg>'\nexport const title = \"navigation-toggle\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation three lines\"\n","import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as unlockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle.js\"\nimport * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.js\"\n\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./NavToggle.css\"\n\nIcon.registerIcon(unlockIcon)\nIcon.registerIcon(lockIcon)\n\n/**\n * Nav toggle is meant for hiding and showing the primary navigation.\n * This component is used internally in the Layout component, but can also be\n * used separate to further customize the behavior.\n *\n * @status new\n * @category action\n *\n * @localization label - Accessible label for the nav toggle button.\n */\n@customElement(\"nord-nav-toggle\")\nexport default class NavToggle extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private direction = new DirectionController(this)\n  private localization = new LocalizeController<\"nord-nav-toggle\">(this)\n\n  render() {\n    return html`\n      <nord-button variant=\"plain\" ${ref(this.focusableRef)} class=${classMap({ \"is-rtl\": this.direction.isRTL })}>\n        <nord-visually-hidden>${this.localization.term(\"label\")}</nord-visually-hidden>\n        <nord-icon size=\"m\" name=${unlockIcon.title}></nord-icon>\n        <nord-icon size=\"m\" name=${lockIcon.title}></nord-icon>\n      </nord-button>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-toggle\": NavToggle\n  }\n}\n"],"names":["title","Icon","registerIcon","unlockIcon","lockIcon","NavToggle","FocusableMixin","LitElement","constructor","this","direction","DirectionController","localization","LocalizeController","render","html","ref","focusableRef","classMap","isRTL","term","unlockIcon.title","lockIcon.title","styles","componentStyle","style","__decorate","customElement"],"mappings":"icACO,MAAMA,EAAQ,qEADN,4TAEK,kGCDb,MAAMA,EAAQ,gEADN,0MAEK,ijBCgBpBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAaH,IAAMC,EAAN,cAAwBC,EAAeC,IAAvC,WAAAC,uBAGLC,KAAAC,UAAY,IAAIC,EAAoBF,MACpCA,KAAAG,aAAe,IAAIC,EAAsCJ,KAWlE,CATC,MAAAK,GACE,OAAOC,CAAI,gCACsBC,EAAIP,KAAKQ,wBAAuBC,EAAS,CAAE,SAAUT,KAAKC,UAAUS,kCACzEV,KAAKG,aAAaQ,KAAK,4DACpBC,4CACAC,+BAGhC,GAbMjB,EAAAkB,OAAS,CAACC,EAAgBC,GADdpB,EAASqB,EAAA,CAD7BC,EAAc,oBACMtB,SAAAA"}

package/lib/NavToggle.js

@@ -1,2 +1,2 @@
-import"./query-assigned-elements-92ce7494.js";import"./ref-99418ab4.js";import"./class-map-512f0bc1.js";export{N as default}from"./NavToggle-cb2c3648.js";import"./LocalizeController.js";import"./DirectionController-f35f5476.js";import"./FocusableMixin-d30213b4.js";import"./Button.js";import"./Icon.js";import"./VisuallyHidden.js";import"./Component-2253424f.js";import"./directive-e9ce14b4.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"./property-c78323b1.js";import"./EventController-d99ebeef.js";import"./LightDomController-5388d84c.js";import"./cond-bb9ee891.js";import"./Spinner.js";import"./if-defined-cccde88f.js";import"./InputMixin-83b5bd46.js";import"./SlotController-d733c575.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";
+import"./query-assigned-elements-92ce7494.js";import"./ref-99418ab4.js";import"./class-map-512f0bc1.js";export{N as default}from"./NavToggle-b54db654.js";import"./LocalizeController.js";import"./DirectionController-f35f5476.js";import"./FocusableMixin-d30213b4.js";import"./Button.js";import"./Icon.js";import"./VisuallyHidden.js";import"./Component-2253424f.js";import"./directive-e9ce14b4.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"./property-c78323b1.js";import"./EventController-d99ebeef.js";import"./LightDomController-5388d84c.js";import"./cond-bb9ee891.js";import"./Spinner.js";import"./if-defined-cccde88f.js";import"./InputMixin-83b5bd46.js";import"./SlotController-d733c575.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";
 //# sourceMappingURL=NavToggle.js.map

package/lib/Navigation.js

@@ -1,2 +1,2 @@
-import{i as n,_ as o,s as e,x as a,e as t}from"./query-assigned-elements-92ce7494.js";import{S as r}from"./SlotController-d733c575.js";import{s as i}from"./Component-2253424f.js";import{E as l}from"./EventController-d99ebeef.js";const s=n`:host{--_n-navigation-background-color:var(--n-navigation-background-color, var(--n-color-nav-surface));--_n-navigation-header-block-size:var(--n-navigation-header-block-size, var(--n-space-xxl));--_n-navigation-header-padding-inline:var(--n-navigation-header-padding-inline);--_n-navigation-header-background:var(--n-navigation-header-background, var(--_n-navigation-background-color));--_n-navigation-header-divider:var(--n-navigation-header-divider, 1px solid var(--n-color-border));--_n-navigation-header-color:var(--n-navigation-header-color);--_n-navigation-header-toggle-icon-color:var(--n-navigation-header-toggle-icon-color);--_n-navigation-header-focus-style:var(--n-navigation-header-focus-style, var(--_n-navigation-dropdown-box-shadow));--_n-navigation-dropdown-box-shadow:0 0 0 1px var(--n-color-accent) inset;display:flex;flex-direction:column;block-size:100%;background:var(--_n-navigation-background-color)}.n-navigation-main{display:flex;flex-direction:column;flex:1;overflow-y:auto;overscroll-behavior-y:none}nav{flex:1;padding:var(--n-space-m)}::slotted(nord-nav-group[heading]:first-of-type){margin-block-start:calc(var(--n-space-s) * -1)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center;--n-button-text-align:start;--n-button-background-color:transparent;--n-button-border-color:transparent;--n-button-box-shadow:none;--n-button-gradient:none}slot[name=header]{--n-button-border-radius:0;--n-button-color:var(--_n-navigation-header-color);--n-button-min-block-size:var(--_n-navigation-header-block-size);--n-select-block-size:var(--n-button-min-block-size);--n-button-font-weight:var(--n-font-weight-active);--n-button-toggle-icon-color:var(--_n-navigation-header-toggle-icon-color);--n-button-padding-inline:var(--_n-navigation-header-padding-inline);block-size:var(--_n-navigation-header-block-size);background-color:var(--_n-navigation-header-background);border-block-end:var(--_n-navigation-header-divider)}slot[name=footer]{--n-button-color:var(--n-color-text-weak);--n-button-padding-inline:var(--n-space-xs);margin:var(--n-space-m)}:is([name=header],[name=footer])::slotted(:not([open]):focus-within){--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:var(--_n-navigation-dropdown-box-shadow)}slot[name=header]::slotted(:not([open], :active):focus-within){--n-button-box-shadow:var(--_n-navigation-header-focus-style)}[name=footer]::slotted(:is(:hover, [open])){--n-button-border-color:var(--n-color-border-hover)}`;let d=class extends e{constructor(){super(...arguments),this.headerSlot=new r(this,"header"),this.events=new l(this),this.allowItemsToRemainOpen=!1,this.handleActivate=n=>{var o,e;const a=n.target,t=new Set;let r=null===(o=a.parentElement)||void 0===o?void 0:o.closest("nord-nav-item");for(;r;)t.add(r),r=null===(e=r.parentElement)||void 0===e?void 0:e.closest("nord-nav-item");for(const n of this.querySelectorAll("nord-nav-item"))if(n!==a){const o=t.has(n);n.open=o||this.allowItemsToRemainOpen&&n.open,n.active=o}this.allowItemsToRemainOpen=!1}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"activate",this.handleActivate);const n=this.querySelector("nord-nav-item[active]");this.allowItemsToRemainOpen=null!=n}render(){return a`<slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><div class="n-navigation-main"><nav><slot></slot></nav><slot name="footer"></slot></div>`}};d.styles=[i,s],d=o([t("nord-navigation")],d);var c=d;export{c as default};
+import{i as n,_ as o,s as e,x as a,A as t,e as r}from"./query-assigned-elements-92ce7494.js";import{n as i}from"./property-c78323b1.js";import{S as s}from"./SlotController-d733c575.js";import{s as l}from"./Component-2253424f.js";import{E as d}from"./EventController-d99ebeef.js";const c=n`:host{--_n-navigation-background-color:var(--n-navigation-background-color, var(--n-color-nav-surface));--_n-navigation-header-block-size:var(--n-navigation-header-block-size, var(--n-space-xxl));--_n-navigation-header-padding-inline:var(--n-navigation-header-padding-inline);--_n-navigation-header-background:var(--n-navigation-header-background, var(--_n-navigation-background-color));--_n-navigation-header-divider:var(--n-navigation-header-divider, 1px solid var(--n-color-border));--_n-navigation-header-color:var(--n-navigation-header-color);--_n-navigation-header-toggle-icon-color:var(--n-navigation-header-toggle-icon-color);--_n-navigation-header-focus-style:var(--n-navigation-header-focus-style, var(--_n-navigation-dropdown-box-shadow));--_n-navigation-dropdown-box-shadow:0 0 0 1px var(--n-color-accent) inset;display:flex;flex-direction:column;block-size:100%;background:var(--_n-navigation-background-color)}.n-navigation-main{display:flex;flex-direction:column;flex:1;overflow-y:auto;overscroll-behavior-y:none}nav{flex:1;padding:var(--n-space-m)}::slotted(nord-nav-group[heading]:first-of-type){margin-block-start:calc(var(--n-space-s) * -1)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center;--n-button-text-align:start;--n-button-background-color:transparent;--n-button-border-color:transparent;--n-button-box-shadow:none;--n-button-gradient:none}slot[name=header]{--n-button-border-radius:0;--n-button-color:var(--_n-navigation-header-color);--n-button-min-block-size:var(--_n-navigation-header-block-size);--n-select-block-size:var(--n-button-min-block-size);--n-button-font-weight:var(--n-font-weight-active);--n-button-toggle-icon-color:var(--_n-navigation-header-toggle-icon-color);--n-button-padding-inline:var(--_n-navigation-header-padding-inline);block-size:var(--_n-navigation-header-block-size);background-color:var(--_n-navigation-header-background);border-block-end:var(--_n-navigation-header-divider)}slot[name=footer]{--n-button-color:var(--n-color-text-weak);--n-button-padding-inline:var(--n-space-xs);margin:var(--n-space-m)}:is([name=header],[name=footer])::slotted(:not([open]):focus-within){--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:var(--_n-navigation-dropdown-box-shadow)}slot[name=header]::slotted(:not([open], :active):focus-within){--n-button-box-shadow:var(--_n-navigation-header-focus-style)}[name=footer]::slotted(:is(:hover, [open])){--n-button-border-color:var(--n-color-border-hover)}:host([sticky-footer]) slot[name=footer]{background:var(--_n-navigation-background-color);z-index:var(--n-index-sticky);padding:var(--n-space-s) var(--n-space-m);margin:0;position:sticky;inset-block-end:0}:host([sticky-footer]) .n-navigation-main{background:linear-gradient(white 30%,rgba(255,255,255,0)) center top,linear-gradient(rgba(255,255,255,0),#fff 70%) center bottom,radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.1),rgba(0,0,0,0)) center top,radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.1),rgba(0,0,0,0)) center bottom;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 7px,100% 7px;background-attachment:local,local,scroll,scroll}`;let v=class extends e{constructor(){super(...arguments),this.headerSlot=new s(this,"header"),this.events=new d(this),this.allowItemsToRemainOpen=!1,this.stickyFooter=!1,this.handleActivate=n=>{var o,e;const a=n.target,t=new Set;let r=null===(o=a.parentElement)||void 0===o?void 0:o.closest("nord-nav-item");for(;r;)t.add(r),r=null===(e=r.parentElement)||void 0===e?void 0:e.closest("nord-nav-item");for(const n of this.querySelectorAll("nord-nav-item"))if(n!==a){const o=t.has(n);n.open=o||this.allowItemsToRemainOpen&&n.open,n.active=o}this.allowItemsToRemainOpen=!1}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"activate",this.handleActivate);const n=this.querySelector("nord-nav-item[active]");this.allowItemsToRemainOpen=null!=n}render(){return a`<slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><div class="n-navigation-main"><nav><slot></slot></nav>${this.stickyFooter?t:a`<slot name="footer"></slot>`}</div>${this.stickyFooter?a`<slot name="footer"></slot>`:t}`}};v.styles=[l,c],o([i({type:Boolean,reflect:!0,attribute:"sticky-footer"})],v.prototype,"stickyFooter",void 0),v=o([r("nord-navigation")],v);var g=v;export{g as default};
 //# sourceMappingURL=Navigation.js.map

package/lib/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Navigation.css\"\nimport NavItem from \"../nav-item/NavItem.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status ready\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n *\n * @cssprop [--n-navigation-background-color=var(--n-color-nav-surface)] - Controls the background color of the navigation element.\n */\n@customElement(\"nord-navigation\")\nexport default class Navigation extends LitElement {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, \"header\")\n  private events = new EventController(this)\n  private allowItemsToRemainOpen = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    // if we add this event listener during render\n    // we seem to miss the first activate event.\n    // so let's add it as early as possible.\n    this.events.listen(this, \"activate\", this.handleActivate)\n\n    // in cases where there is an initially active nav-item,\n    // we should allow any nav-items with the `open` attribute to remain open.\n    const activeItem = this.querySelector(\"nord-nav-item[active]\")\n    this.allowItemsToRemainOpen = activeItem != null\n  }\n\n  render() {\n    return html`\n      <slot name=\"header\" ?hidden=${this.headerSlot.isEmpty}></slot>\n      <div class=\"n-navigation-main\">\n        <nav>\n          <slot></slot>\n        </nav>\n        <slot name=\"footer\"></slot>\n      </div>\n    `\n  }\n\n  private handleActivate = (e: Event) => {\n    const target = e.target as NavItem\n    const ancestors = new Set<NavItem>()\n\n    // walk up the DOM, gathering all ancestors from the target to its top-most nav-item.\n    // it's more efficient to first gather ancestors here,\n    // than to repeatedly call item.contains(target) in the for-loop below.\n    let parent = target.parentElement?.closest(\"nord-nav-item\")\n    while (parent) {\n      ancestors.add(parent)\n      parent = parent.parentElement?.closest(\"nord-nav-item\")\n    }\n\n    // open and activate any items on the path, otherwise close and deactivate.\n    // however, if the item is set to open initially, we should not close it.\n    for (const item of this.querySelectorAll(\"nord-nav-item\")) {\n      if (item !== target) {\n        const isAncestor = ancestors.has(item)\n        item.open = isAncestor || (this.allowItemsToRemainOpen && item.open)\n        item.active = isAncestor\n      }\n    }\n\n    // this is a one-time thing, purely for initial open state\n    this.allowItemsToRemainOpen = false\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-navigation\": Navigation\n  }\n}\n"],"names":["Navigation","LitElement","constructor","this","headerSlot","SlotController","events","EventController","allowItemsToRemainOpen","handleActivate","e","target","ancestors","Set","parent","_a","parentElement","closest","add","_b","item","querySelectorAll","isAncestor","has","open","active","connectedCallback","super","listen","activeItem","querySelector","render","html","isEmpty","styles","componentStyle","style","__decorate","customElement"],"mappings":"0rFAwBe,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,OAAS,IAAIC,EAAgBJ,MAC7BA,KAAsBK,wBAAG,EA2BzBL,KAAAM,eAAkBC,YACxB,MAAMC,EAASD,EAAEC,OACXC,EAAY,IAAIC,IAKtB,IAAIC,EAA6B,QAApBC,EAAAJ,EAAOK,qBAAa,IAAAD,OAAA,EAAAA,EAAEE,QAAQ,iBAC3C,KAAOH,GACLF,EAAUM,IAAIJ,GACdA,UAASK,EAAAL,EAAOE,oCAAeC,QAAQ,iBAKzC,IAAK,MAAMG,KAAQjB,KAAKkB,iBAAiB,iBACvC,GAAID,IAAST,EAAQ,CACnB,MAAMW,EAAaV,EAAUW,IAAIH,GACjCA,EAAKI,KAAOF,GAAenB,KAAKK,wBAA0BY,EAAKI,KAC/DJ,EAAKK,OAASH,CACf,CAIHnB,KAAKK,wBAAyB,CAAK,CAEtC,CAnDC,iBAAAkB,GACEC,MAAMD,oBAINvB,KAAKG,OAAOsB,OAAOzB,KAAM,WAAYA,KAAKM,gBAI1C,MAAMoB,EAAa1B,KAAK2B,cAAc,yBACtC3B,KAAKK,uBAAuC,MAAdqB,CAC/B,CAED,MAAAE,GACE,OAAOC,CAAI,gCACqB7B,KAAKC,WAAW6B,0GAQjD,GA7BMjC,EAAAkC,OAAS,CAACC,EAAgBC,GADdpC,EAAUqC,EAAA,CAD9BC,EAAc,oBACMtC,SAAAA"}
+{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Navigation.css\"\nimport NavItem from \"../nav-item/NavItem.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status ready\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n *\n * @cssprop [--n-navigation-background-color=var(--n-color-nav-surface)] - Controls the background color of the navigation element.\n */\n@customElement(\"nord-navigation\")\nexport default class Navigation extends LitElement {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, \"header\")\n  private events = new EventController(this)\n  private allowItemsToRemainOpen = false\n\n  /**\n   * Controls whether the navigations's footer has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true, attribute: \"sticky-footer\" }) stickyFooter: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    // if we add this event listener during render\n    // we seem to miss the first activate event.\n    // so let's add it as early as possible.\n    this.events.listen(this, \"activate\", this.handleActivate)\n\n    // in cases where there is an initially active nav-item,\n    // we should allow any nav-items with the `open` attribute to remain open.\n    const activeItem = this.querySelector(\"nord-nav-item[active]\")\n    this.allowItemsToRemainOpen = activeItem != null\n  }\n\n  render() {\n    return html`\n      <slot name=\"header\" ?hidden=${this.headerSlot.isEmpty}></slot>\n      <div class=\"n-navigation-main\">\n        <nav>\n          <slot></slot>\n        </nav>\n        ${!this.stickyFooter ? html`<slot name=\"footer\"></slot>` : nothing}\n      </div>\n      ${this.stickyFooter ? html`<slot name=\"footer\"></slot>` : nothing}\n    `\n  }\n\n  private handleActivate = (e: Event) => {\n    const target = e.target as NavItem\n    const ancestors = new Set<NavItem>()\n\n    // walk up the DOM, gathering all ancestors from the target to its top-most nav-item.\n    // it's more efficient to first gather ancestors here,\n    // than to repeatedly call item.contains(target) in the for-loop below.\n    let parent = target.parentElement?.closest(\"nord-nav-item\")\n    while (parent) {\n      ancestors.add(parent)\n      parent = parent.parentElement?.closest(\"nord-nav-item\")\n    }\n\n    // open and activate any items on the path, otherwise close and deactivate.\n    // however, if the item is set to open initially, we should not close it.\n    for (const item of this.querySelectorAll(\"nord-nav-item\")) {\n      if (item !== target) {\n        const isAncestor = ancestors.has(item)\n        item.open = isAncestor || (this.allowItemsToRemainOpen && item.open)\n        item.active = isAncestor\n      }\n    }\n\n    // this is a one-time thing, purely for initial open state\n    this.allowItemsToRemainOpen = false\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-navigation\": Navigation\n  }\n}\n"],"names":["Navigation","LitElement","constructor","this","headerSlot","SlotController","events","EventController","allowItemsToRemainOpen","stickyFooter","handleActivate","e","target","ancestors","Set","parent","_a","parentElement","closest","add","_b","item","querySelectorAll","isAncestor","has","open","active","connectedCallback","super","listen","activeItem","querySelector","render","html","isEmpty","nothing","styles","componentStyle","style","__decorate","property","type","Boolean","reflect","attribute","prototype","customElement"],"mappings":"44GAwBe,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,OAAS,IAAIC,EAAgBJ,MAC7BA,KAAsBK,wBAAG,EAKuCL,KAAYM,cAAY,EA4BxFN,KAAAO,eAAkBC,YACxB,MAAMC,EAASD,EAAEC,OACXC,EAAY,IAAIC,IAKtB,IAAIC,EAA6B,QAApBC,EAAAJ,EAAOK,qBAAa,IAAAD,OAAA,EAAAA,EAAEE,QAAQ,iBAC3C,KAAOH,GACLF,EAAUM,IAAIJ,GACdA,UAASK,EAAAL,EAAOE,oCAAeC,QAAQ,iBAKzC,IAAK,MAAMG,KAAQlB,KAAKmB,iBAAiB,iBACvC,GAAID,IAAST,EAAQ,CACnB,MAAMW,EAAaV,EAAUW,IAAIH,GACjCA,EAAKI,KAAOF,GAAepB,KAAKK,wBAA0Ba,EAAKI,KAC/DJ,EAAKK,OAASH,CACf,CAIHpB,KAAKK,wBAAyB,CAAK,CAEtC,CApDC,iBAAAmB,GACEC,MAAMD,oBAINxB,KAAKG,OAAOuB,OAAO1B,KAAM,WAAYA,KAAKO,gBAI1C,MAAMoB,EAAa3B,KAAK4B,cAAc,yBACtC5B,KAAKK,uBAAuC,MAAdsB,CAC/B,CAED,MAAAE,GACE,OAAOC,CAAI,gCACqB9B,KAAKC,WAAW8B,0EAKzC/B,KAAKM,aAAmD0B,EAApCF,CAAI,sCAE3B9B,KAAKM,aAAewB,CAAI,8BAAgCE,GAE7D,GAnCMnC,EAAAoC,OAAS,CAACC,EAAgBC,GASuCC,EAAA,CAAvEC,EAAS,CAAEC,KAAMC,QAASC,SAAS,EAAMC,UAAW,mBAAgD5C,EAAA6C,UAAA,oBAAA,GAVlF7C,EAAUuC,EAAA,CAD9BO,EAAc,oBACM9C,SAAAA"}

package/lib/Notification.js

@@ -1,2 +1,2 @@
-import{i as o,x as i,_ as t,e as n,s as r}from"./query-assigned-elements-92ce7494.js";import{o as s}from"./class-map-512f0bc1.js";import{n as a}from"./ref-99418ab4.js";import"./Stack.js";import"./Icon.js";import{N as e}from"./NotificationMixin-207f1f56.js";import{s as c}from"./Component-2253424f.js";import{LocalizeController as l}from"./LocalizeController.js";import"./directive-e9ce14b4.js";import"./property-c78323b1.js";import"./state-d31c6912.js";import"./if-defined-cccde88f.js";import"./cond-bb9ee891.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./events-d9666e88.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";const m=o`:host{--_n-notification-focus-ring:0 0 0 2px var(--n-color-accent);--_n-notification-dismiss-size:calc(var(--n-space-m) * 2)}.n-notification{color:var(--n-color-text-weaker);background:var(--n-color-surface-raised);box-shadow:var(--n-box-shadow-nav);padding-block-start:calc(var(--n-space-l)/ 1.2);padding-block-end:var(--n-space-l);padding-inline-start:calc(var(--n-space-l)/ 1.2);padding-inline-end:var(--n-space-m);border-radius:var(--n-border-radius);position:relative;animation:n-enter var(--n-transition-slowly) forwards 1}.n-notification-body{flex:1;padding-inline-end:var(--_n-notification-dismiss-size)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{from{transform:translateY(10%);opacity:0}}@keyframes n-exit{to{transform:scale(.97);opacity:0}}.n-dismiss{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--_n-notification-dismiss-size);inline-size:var(--_n-notification-dismiss-size);background-color:transparent;border-radius:var(--n-border-radius-s);color:var(--n-color-icon);cursor:pointer;transition:opacity var(--n-transition-slowly),color var(--n-transition-slowly);position:absolute;inset-inline-end:var(--n-space-m);inset-block-start:14px}.n-dismiss:hover{color:var(--n-color-text);background:rgba(0,0,0,.04)}.n-dismiss:active{opacity:.8;transform:translateY(1px)}.n-dismiss:focus{outline:0;box-shadow:var(--_n-notification-focus-ring)}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--_n-notification-focus-ring)}}::slotted(nord-icon),slot nord-icon{color:var(--n-color-text-link)!important;transform:translateY(3px) translateX(1px)!important}::slotted(:is(h1, h2, h3, h4, h5, h6)){color:var(--n-color-text)!important;font-size:var(--n-font-size-m)!important;line-height:var(--n-line-height)!important;margin:0 0 var(--n-space-s)!important;font-weight:var(--n-font-weight-active)!important;font-style:normal!important}::slotted(p){margin:0!important;font-size:var(--n-font-size-m)!important;color:var(--n-color-text-weaker)!important;line-height:var(--n-line-height)!important;font-weight:var(--n-font-weight)!important;font-style:normal!important}::slotted(a){color:var(--n-color-text-link)!important;text-decoration:none!important;margin:var(--n-space-s) 0 0!important;font-weight:var(--n-font-weight)!important;font-style:normal!important;display:block}::slotted(a:hover){text-decoration:underline!important}`;let d=class extends(e(r)){constructor(){super(...arguments),this.localize=new l(this)}render(){return i`<div ${a(this.notificationRef)} class="${s({"n-notification":!0,"n-dismissed":this.dismissed})}"><button class="n-dismiss" @click="${this.dismiss}"><nord-icon name="interface-close-small" size="xs" label="${this.localize.term("dismissLabel")}"></nord-icon></button><nord-stack align-items="stretch" direction="horizontal"><slot name="icon"><nord-icon name="navigation-notifications"></nord-icon></slot><div class="n-notification-body"><slot></slot></div></nord-stack></div>`}};d.styles=[c,m],d=t([n("nord-notification")],d);var p=d;export{p as default};
+import{i as o,x as i,_ as t,e as n,s as a}from"./query-assigned-elements-92ce7494.js";import{o as r}from"./class-map-512f0bc1.js";import{n as s}from"./ref-99418ab4.js";import"./Stack.js";import"./Icon.js";import{N as e}from"./NotificationMixin-207f1f56.js";import{s as c}from"./Component-2253424f.js";import{LocalizeController as l}from"./LocalizeController.js";import"./directive-e9ce14b4.js";import"./property-c78323b1.js";import"./state-d31c6912.js";import"./if-defined-cccde88f.js";import"./cond-bb9ee891.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./events-d9666e88.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const m=o`:host{--_n-notification-focus-ring:0 0 0 2px var(--n-color-accent);--_n-notification-dismiss-size:calc(var(--n-space-m) * 2)}.n-notification{color:var(--n-color-text-weaker);background:var(--n-color-surface-raised);box-shadow:var(--n-box-shadow-nav);padding-block-start:calc(var(--n-space-l)/ 1.2);padding-block-end:var(--n-space-l);padding-inline-start:calc(var(--n-space-l)/ 1.2);padding-inline-end:var(--n-space-m);border-radius:var(--n-border-radius);position:relative;animation:n-enter var(--n-transition-slowly) forwards 1}.n-notification-body{flex:1;padding-inline-end:var(--_n-notification-dismiss-size)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{from{transform:translateY(10%);opacity:0}}@keyframes n-exit{to{transform:scale(.97);opacity:0}}.n-dismiss{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--_n-notification-dismiss-size);inline-size:var(--_n-notification-dismiss-size);background-color:transparent;border-radius:var(--n-border-radius-s);color:var(--n-color-icon);cursor:pointer;transition:opacity var(--n-transition-slowly),color var(--n-transition-slowly);position:absolute;inset-inline-end:var(--n-space-m);inset-block-start:14px}.n-dismiss:hover{color:var(--n-color-text);background:rgba(0,0,0,.04)}.n-dismiss:active{opacity:.8;transform:translateY(1px)}.n-dismiss:focus{outline:0;box-shadow:var(--_n-notification-focus-ring)}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--_n-notification-focus-ring)}}::slotted(nord-icon),slot nord-icon{color:var(--n-color-text-link)!important;transform:translateY(3px) translateX(1px)!important}::slotted(:is(h1, h2, h3, h4, h5, h6)){color:var(--n-color-text)!important;font-size:var(--n-font-size-m)!important;line-height:var(--n-line-height)!important;margin:0 0 var(--n-space-s)!important;font-weight:var(--n-font-weight-active)!important;font-style:normal!important}::slotted(p){margin:0!important;font-size:var(--n-font-size-m)!important;color:var(--n-color-text-weaker)!important;line-height:var(--n-line-height)!important;font-weight:var(--n-font-weight)!important;font-style:normal!important}::slotted(a){color:var(--n-color-text-link)!important;text-decoration:none!important;margin:var(--n-space-s) 0 0!important;font-weight:var(--n-font-weight)!important;font-style:normal!important;display:block}::slotted(a:hover){text-decoration:underline!important}`;let d=class extends(e(a)){constructor(){super(...arguments),this.localize=new l(this)}render(){return i`<div ${s(this.notificationRef)} class="${r({"n-notification":!0,"n-dismissed":this.dismissed})}"><button class="n-dismiss" @click="${this.dismiss}"><nord-icon name="interface-close-small" size="xs" label="${this.localize.term("dismissLabel")}"></nord-icon></button><nord-stack align-items="stretch" direction="horizontal"><slot name="icon"><nord-icon name="navigation-notifications"></nord-icon></slot><div class="n-notification-body"><slot></slot></div></nord-stack></div>`}};d.styles=[c,m],d=t([n("nord-notification")],d);var p=d;export{p as default};
 //# sourceMappingURL=Notification.js.map

package/lib/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../src/notification/Notification.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport \"../stack/Stack.js\"\nimport \"../icon/Icon.js\"\nimport { NotificationMixin } from \"../common/mixins/NotificationMixin.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Notification.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\n/**\n * Notifications provide important information that requires action or acknowledgement.\n * A notification is displayed until the user dismisses it.\n *\n * @status new\n * @category feedback\n * @slot - Default slot used for the notification text/message.\n * @slot icon - Slot used for the notification icon.\n * @fires dismiss - Fired when the notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.\n * @localization dismissLabel - Accessible label for the dismiss button.\n */\n@customElement(\"nord-notification\")\nexport default class Notification extends NotificationMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private localize = new LocalizeController<\"nord-notification\">(this)\n\n  render() {\n    return html`\n      <div ${ref(this.notificationRef)} class=${classMap({ \"n-notification\": true, \"n-dismissed\": this.dismissed })}>\n        <button class=\"n-dismiss\" @click=${this.dismiss}>\n          <nord-icon name=\"interface-close-small\" size=\"xs\" label=${this.localize.term(\"dismissLabel\")}></nord-icon>\n        </button>\n\n        <nord-stack align-items=\"stretch\" direction=\"horizontal\">\n          <slot name=\"icon\">\n            <nord-icon name=\"navigation-notifications\"></nord-icon>\n          </slot>\n          <div class=\"n-notification-body\">\n            <slot></slot>\n          </div>\n        </nord-stack>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-notification\": Notification\n  }\n}\n"],"names":["Notification","NotificationMixin","LitElement","constructor","this","localize","LocalizeController","render","html","ref","notificationRef","classMap","dismissed","dismiss","term","styles","componentStyle","style","__decorate","customElement"],"mappings":"kuGAwBe,IAAMA,EAAN,cAA2BC,EAAkBC,IAA7C,WAAAC,uBAGLC,KAAAC,SAAW,IAAIC,EAAwCF,KAoBhE,CAlBC,MAAAG,GACE,OAAOC,CAAI,QACFC,EAAIL,KAAKM,2BAA0BC,EAAS,CAAE,kBAAkB,EAAM,cAAeP,KAAKQ,kDAC5DR,KAAKS,qEACoBT,KAAKC,SAASS,KAAK,wPAapF,GArBMd,EAAAe,OAAS,CAACC,EAAgBC,GADdjB,EAAYkB,EAAA,CADhCC,EAAc,sBACMnB,SAAAA"}
+{"version":3,"file":"Notification.js","sources":["../src/notification/Notification.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport \"../stack/Stack.js\"\nimport \"../icon/Icon.js\"\nimport { NotificationMixin } from \"../common/mixins/NotificationMixin.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Notification.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\n/**\n * Notifications provide important information that requires action or acknowledgement.\n * A notification is displayed until the user dismisses it.\n *\n * @status new\n * @category feedback\n * @slot - Default slot used for the notification text/message.\n * @slot icon - Slot used for the notification icon.\n * @fires dismiss - Fired when the notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.\n * @localization dismissLabel - Accessible label for the dismiss button.\n */\n@customElement(\"nord-notification\")\nexport default class Notification extends NotificationMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private localize = new LocalizeController<\"nord-notification\">(this)\n\n  render() {\n    return html`\n      <div ${ref(this.notificationRef)} class=${classMap({ \"n-notification\": true, \"n-dismissed\": this.dismissed })}>\n        <button class=\"n-dismiss\" @click=${this.dismiss}>\n          <nord-icon name=\"interface-close-small\" size=\"xs\" label=${this.localize.term(\"dismissLabel\")}></nord-icon>\n        </button>\n\n        <nord-stack align-items=\"stretch\" direction=\"horizontal\">\n          <slot name=\"icon\">\n            <nord-icon name=\"navigation-notifications\"></nord-icon>\n          </slot>\n          <div class=\"n-notification-body\">\n            <slot></slot>\n          </div>\n        </nord-stack>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-notification\": Notification\n  }\n}\n"],"names":["Notification","NotificationMixin","LitElement","constructor","this","localize","LocalizeController","render","html","ref","notificationRef","classMap","dismissed","dismiss","term","styles","componentStyle","style","__decorate","customElement"],"mappings":"6vGAwBe,IAAMA,EAAN,cAA2BC,EAAkBC,IAA7C,WAAAC,uBAGLC,KAAAC,SAAW,IAAIC,EAAwCF,KAoBhE,CAlBC,MAAAG,GACE,OAAOC,CAAI,QACFC,EAAIL,KAAKM,2BAA0BC,EAAS,CAAE,kBAAkB,EAAM,cAAeP,KAAKQ,kDAC5DR,KAAKS,qEACoBT,KAAKC,SAASS,KAAK,wPAapF,GArBMd,EAAAe,OAAS,CAACC,EAAgBC,GADdjB,EAAYkB,EAAA,CADhCC,EAAc,sBACMnB,SAAAA"}

package/lib/Popout-2f9d860d.js

@@ -0,0 +1,2 @@
+import{_ as t,i as e,x as o,e as i,s}from"./query-assigned-elements-92ce7494.js";import{n}from"./property-c78323b1.js";import{t as r}from"./state-d31c6912.js";import{i as a}from"./query-36bfe0e4.js";import{c as l,l as p,o as h,f as d,s as c,h as m,a as u}from"./positioning-2346bdd6.js";import{L as v}from"./LightDismissController-11ae4745.js";import{S as f}from"./ScrollbarController-773c79f4.js";import{N as g,t as y}from"./events-d9666e88.js";import{s as b}from"./Component-2253424f.js";import{D as w}from"./DirectionController-f35f5476.js";import{o as E}from"./observe-a9c6dfb6.js";import{E as x}from"./EventController-d99ebeef.js";function C(e){class o extends e{constructor(){super(...arguments),this.open=!1,this.align="start",this.position="block-end"}}return t([n({type:Boolean,reflect:!0})],o.prototype,"open",void 0),t([n({reflect:!0})],o.prototype,"align",void 0),t([n({reflect:!0})],o.prototype,"position",void 0),o}const k=e`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);left:var(--_n-popout-position-x);top:var(--_n-popout-position-y);color:var(--n-color-text);opacity:0;transition:opacity var(--n-transition-slowly)}.n-popout{pointer-events:none;transform:translateY(-10px) scale(.97);visibility:hidden;transition:transform var(--n-transition-slowly),visibility var(--n-transition-slowly);transform-origin:top left;will-change:transform,opacity,visibility;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-popout);border-radius:var(--n-border-radius-s)}:host([open]){opacity:1}:host([open]) .n-popout{transition-property:transform;visibility:visible;pointer-events:auto;transform:translateY(0) translateX(0) scale(1)}@media (max-width:35.9375em){:host{position:fixed;inset:0;overflow-y:auto;opacity:1;background:0 0;transition:background var(--n-transition-mobile)}:host([open]){pointer-events:auto;background:var(--n-color-overlay)}:host .n-popout{position:fixed;inset:0;inset-block-start:auto;transform:translateY(100%);transition:transform var(--n-transition-mobile),visibility var(--n-transition-mobile);transform-origin:bottom center;border-radius:0}}.top-end,.top-start{transform:translateY(10px) scale(.97)}.left-end,.left-start{transform:translateX(10px) scale(.97)}.right-end,.right-start{transform:translateX(-10px) scale(.97)}.bottom-start.is-rtl,.left-end,.top-end{transform-origin:bottom right}.bottom-end,.left-start,.top-start.is-rtl{transform-origin:top right}.bottom-end.is-rtl,.right-end,.right-start{transform-origin:bottom left}.right-start,.top-end.is-rtl{transform-origin:top left}`,A=matchMedia("(max-width: 35.9375em)");let P=class extends(C(s)){constructor(){super(...arguments),this.scrollBar=new f(this),this.dismiss=new v(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("mouseup"!==t.type),isDismissible:t=>t!==this.popout&&t!==this.targetElement}),this.events=new x(this),this.direction=new w(this),this.smallViewport=A.matches,this.id="",this.enableScroll=()=>{this.open||this.scrollBar.unlockScroll()},this.updatePosition=async()=>{var t;if(!this.anchorElement)return;const{x:e,y:o,placement:i,middlewareData:s}=await l(this.anchorElement,this,{strategy:"fixed",placement:p(this.position,this.align,this.direction.dir),middleware:[h(8),d(),c({padding:8}),m()]});this.computedPosition=i,this.style.setProperty("--_n-popout-position-x",`${e}px`),this.style.setProperty("--_n-popout-position-y",`${o}px`),(null===(t=s.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):this.smallViewport?this.show():this.updatePosition().then((()=>this.show()))},this.handleMediaQueryChange=()=>{var t;this.smallViewport=A.matches,null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),!this.smallViewport&&this.open&&this.anchorElement?(this.cleanupAutoUpdate=u(this.anchorElement,this,this.updatePosition),this.scrollBar.unlockScroll()):this.open&&this.scrollBar.lockScroll()}}async show(){return this.open?Promise.resolve():(this.open=!0,await this.updateComplete,this.dispatchEvent(new g("open")),y(this.popout))}async hide(t=!0){var e,o;return this.open?(this.open=!1,null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.dispatchEvent(new g("close")),t&&(null===(o=this.targetElement)||void 0===o||o.focus({preventScroll:!0})),y(this.popout)):Promise.resolve()}firstUpdated(){this.smallViewport||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.events.listen(A,"change",this.handleMediaQueryChange)}disconnectedCallback(){var t,e;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),null===(e=this.targetElement)||void 0===e||e.removeAttribute("aria-expanded")}render(){return o`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}" @transitionend="${this.enableScroll}"><slot></slot></div>`}handleIdChange(){var t;null===(t=this.targetElement)||void 0===t||t.removeEventListener("click",this.toggleOpen),this.id?(this.targetElement=this.getToggle(),this.anchorElement=this.getAnchor(),this.events.listen(this.targetElement,"click",this.toggleOpen)):console.warn("NORD: popout requires an id attribute and value")}handleOpenChange(){var t,e;null===(t=this.targetElement)||void 0===t||t.setAttribute("aria-expanded",`${this.open}`),this.open?this.smallViewport?this.scrollBar.lockScroll():this.anchorElement&&(this.cleanupAutoUpdate=u(this.anchorElement,this,this.updatePosition)):null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this)}handleAnchorChange(){var t;null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.anchorElement=this.getAnchor(),this.open&&!this.smallViewport&&this.anchorElement&&(this.cleanupAutoUpdate=u(this.anchorElement,this,this.updatePosition))}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}getAnchor(){if(!this.anchor)return this.targetElement;const t=this.getRootNode().querySelector(`#${this.anchor}`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};P.styles=[b,k],t([a(".n-popout",!0)],P.prototype,"popout",void 0),t([r()],P.prototype,"computedPosition",void 0),t([r()],P.prototype,"smallViewport",void 0),t([n({reflect:!0})],P.prototype,"id",void 0),t([n({reflect:!0})],P.prototype,"anchor",void 0),t([E("id")],P.prototype,"handleIdChange",null),t([E("open")],P.prototype,"handleOpenChange",null),t([E("anchor")],P.prototype,"handleAnchorChange",null),P=t([i("nord-popout")],P);var S=P;export{C as F,S as P};
+//# sourceMappingURL=Popout-2f9d860d.js.map

package/lib/Popout-2f9d860d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popout-2f9d860d.js","sources":["../src/common/mixins/FloatingComponentMixin.ts","../src/popout/Popout.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { Alignment } from \"@floating-ui/dom\"\nimport { LogicalSide } from \"../positioning.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FloatingMixinInterface {\n  open: boolean\n  align: Alignment\n  position: LogicalSide\n}\n\nexport function FloatingMixin<T extends Constructor<LitElement>>(\n  superClass: T\n): Constructor<FloatingMixinInterface> & T {\n  class FloatingElement extends superClass {\n    /**\n     * Controls whether the component is open or not.\n     */\n    @property({ type: Boolean, reflect: true }) open = false\n\n    /**\n     * Set the alignment in relation to the toggle (or anchor) depending on the position.\n     * `start` will align it to the left of the toggle (or anchor).\n     * `end` will align it to the right of the toggle (or anchor).\n     * Setting the `position` to `inline-start` or `inline-end` will switch\n     * `start` and `end` to the top and bottom respectively.\n     */\n    @property({ reflect: true }) align: \"start\" | \"end\" = \"start\"\n\n    /**\n     * Set the position in relation to the toggle (or anchor).\n     * Options follow logical properties.\n     * `block-start` and `block-end` referring to top and bottom respectively,\n     * `inline-start` and `inline-end` referring to left and right respectively.\n     */\n    @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-end\"\n  }\n\n  return FloatingElement\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { computePosition, shift, offset, flip, hide, autoUpdate, Placement } from \"@floating-ui/dom\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { ScrollbarController } from \"../common/controllers/ScrollbarController.js\"\nimport { NordEvent, transition } from \"../common/events.js\"\nimport { FloatingMixin } from \"../common/mixins/FloatingComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Popout.css\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\n\n/*\n * The breakpoint width to switch between \"sheet\" design and floating design\n */\nconst mediaQuery = matchMedia(\"(max-width: 35.9375em)\")\n\n/**\n * Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.\n *\n * @status ready\n * @category overlay\n * @slot - The popout content.\n */\n@customElement(\"nord-popout\")\nexport default class Popout extends FloatingMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private targetElement?: HTMLElement\n  private anchorElement?: HTMLElement\n  private cleanupAutoUpdate?: ReturnType<typeof autoUpdate>\n\n  @query(\".n-popout\", true) private popout!: HTMLDivElement\n\n  private scrollBar = new ScrollbarController(this)\n\n  /**\n   * Handle dismissal of the popout, clicking outside the target button and popout.\n   */\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"mouseup\"),\n    isDismissible: node => node !== this.popout && node !== this.targetElement,\n  })\n\n  private events = new EventController(this)\n  private direction = new DirectionController(this)\n\n  @state() private computedPosition?: Placement\n\n  @state() private smallViewport = mediaQuery.matches\n\n  /**\n   * The id for the active element to reference via aria-controls.\n   */\n  // eslint-disable-next-line lit/no-native-attributes\n  @property({ reflect: true }) id: string = \"\"\n\n  /**\n   * Set an optional anchor element to align against, replacing the triggering element.\n   */\n  @property({ reflect: true }) anchor?: string\n\n  /**\n   * Show the popout.\n   * A promise that resolves to a `TransitionEvent` when the popout's show animation ends or is cancelled.\n   * If the popout is already open, the promise resolves immediately with `undefined`.\n   */\n  async show(): Promise<TransitionEvent | void> {\n    if (this.open) {\n      return Promise.resolve()\n    }\n\n    this.open = true\n\n    // we should only focus once the popout is visible after render is complete\n    await this.updateComplete\n\n    /**\n     * Dispatched when the popout is opened.\n     */\n    this.dispatchEvent(new NordEvent(\"open\"))\n\n    return transition(this.popout)\n  }\n\n  /**\n   * Hide the popout.\n   * Returns a promise that resolves to a `TransitionEvent` when the popout's hide animation ends or is cancelled.\n   * If the popout is already closed, the promise resolves immediately with `undefined`.\n   * @param {boolean} moveFocusToButton prevent focus returning to the target button. Default is true.\n   */\n  async hide(moveFocusToButton: boolean = true): Promise<TransitionEvent | void> {\n    if (!this.open) {\n      return Promise.resolve()\n    }\n\n    this.open = false\n\n    this.cleanupAutoUpdate?.()\n\n    /**\n     * Dispatched when the popout is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.targetElement?.focus({ preventScroll: true })\n    }\n\n    return transition(this.popout)\n  }\n\n  /**\n   * Position the popout on load.\n   */\n  firstUpdated() {\n    if (!this.smallViewport) {\n      this.updatePosition()\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.cleanupAutoUpdate?.()\n    this.targetElement?.removeAttribute(\"aria-expanded\")\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"n-popout ${this.computedPosition} is-${this.direction.dir}\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n        @transitionend=${this.enableScroll}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n\n  @observe(\"id\")\n  protected handleIdChange() {\n    // clean up any old listeners\n    this.targetElement?.removeEventListener(\"click\", this.toggleOpen)\n\n    if (!this.id) {\n      // eslint-disable-next-line no-console\n      console.warn(\"NORD: popout requires an id attribute and value\")\n    } else {\n      this.targetElement = this.getToggle()\n      this.anchorElement = this.getAnchor()\n\n      this.events.listen(this.targetElement, \"click\", this.toggleOpen)\n    }\n  }\n\n  @observe(\"open\")\n  protected handleOpenChange() {\n    this.targetElement?.setAttribute(\"aria-expanded\", `${this.open}`)\n\n    if (this.open) {\n      if (this.smallViewport) {\n        // hide scrollbar and prevent scroll on body\n        this.scrollBar.lockScroll()\n      } else if (this.anchorElement) {\n        this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n      }\n    } else {\n      this.cleanupAutoUpdate?.()\n    }\n  }\n\n  @observe(\"anchor\")\n  protected handleAnchorChange() {\n    this.cleanupAutoUpdate?.()\n    this.anchorElement = this.getAnchor()\n\n    // if the popout is already open when the anchor changes, we should update its position\n    if (this.open && !this.smallViewport && this.anchorElement) {\n      this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n    }\n  }\n\n  private enableScroll = () => {\n    // scrollbar should only be restored when the backdrop has transitioned\n    // that way we avoid awkward double scrollbars.\n    if (!this.open) {\n      this.scrollBar.unlockScroll()\n    }\n  }\n\n  /**\n   * Get the position of the element toggling the popout\n   * and position the popout underneath it, taking into account the optional placement.\n   */\n  private updatePosition = async () => {\n    if (!this.anchorElement) {\n      return\n    }\n\n    const { x, y, placement, middlewareData } = await computePosition(this.anchorElement, this, {\n      strategy: \"fixed\",\n      placement: logicalToPhysical(this.position, this.align, this.direction.dir),\n      middleware: [\n        offset(8),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ],\n    })\n\n    this.computedPosition = placement\n\n    // use physical properties here since floating-ui\n    // works exclusively in physical dimensions\n    // we do all the mapping in logicalToPhysical\n    this.style.setProperty(\"--_n-popout-position-x\", `${x}px`)\n    this.style.setProperty(\"--_n-popout-position-y\", `${y}px`)\n\n    if (middlewareData.hide?.referenceHidden) {\n      this.hide()\n    }\n  }\n\n  /**\n   * Toggle the popout open or closed using state.\n   * Updating the position to underneath the target button before the popout is opened.\n   */\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n    if (this.open) {\n      this.hide(false)\n    } else if (!this.smallViewport) {\n      this.updatePosition().then(() => this.show())\n    } else {\n      this.show()\n    }\n  }\n\n  private getToggle() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const toggle = <HTMLElement>rootNode.querySelector(`[aria-controls='${this.id}']`)\n\n    if (toggle instanceof HTMLSlotElement) {\n      return toggle.assignedElements()[0] as HTMLElement\n    }\n\n    return toggle\n  }\n\n  private getAnchor() {\n    if (!this.anchor) {\n      return this.targetElement\n    }\n\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const anchor = <HTMLElement>rootNode.querySelector(`#${this.anchor}`)\n\n    if (anchor instanceof HTMLSlotElement) {\n      return anchor.assignedElements()[0] as HTMLElement\n    }\n\n    return anchor\n  }\n\n  /**\n   * Update the smallViewport flag to switch between \"sheet\" and \"floating\".\n   * autoUpdate is needed when a viewport gets larger and the popout is open.\n   */\n  private handleMediaQueryChange = () => {\n    this.smallViewport = mediaQuery.matches\n\n    this.cleanupAutoUpdate?.()\n\n    if (!this.smallViewport && this.open && this.anchorElement) {\n      this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n      this.scrollBar.unlockScroll()\n    } else if (this.open) {\n      this.scrollBar.lockScroll()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-popout\": Popout\n  }\n}\n"],"names":["FloatingMixin","superClass","FloatingElement","constructor","this","open","align","position","__decorate","property","type","Boolean","reflect","prototype","mediaQuery","matchMedia","Popout","LitElement","scrollBar","ScrollbarController","dismiss","LightDismissController","isOpen","onDismiss","e","hide","isDismissible","node","popout","targetElement","events","EventController","direction","DirectionController","smallViewport","matches","id","enableScroll","unlockScroll","updatePosition","async","anchorElement","x","y","placement","middlewareData","computePosition","strategy","logicalToPhysical","dir","middleware","offset","flip","shift","padding","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","show","then","handleMediaQueryChange","cleanupAutoUpdate","call","autoUpdate","lockScroll","Promise","resolve","updateComplete","dispatchEvent","NordEvent","transition","moveFocusToButton","_b","focus","preventScroll","firstUpdated","connectedCallback","super","listen","disconnectedCallback","removeAttribute","render","html","handleIdChange","removeEventListener","getToggle","getAnchor","console","warn","handleOpenChange","setAttribute","handleAnchorChange","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","anchor","styles","componentStyle","query","state","observe","customElement"],"mappings":"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"}

package/lib/Popout.js

@@ -1,2 +1,2 @@
-import"./query-assigned-elements-92ce7494.js";import"./property-c78323b1.js";import"./state-d31c6912.js";import"./query-36bfe0e4.js";import"./positioning-2346bdd6.js";import"./LightDismissController-a2645ae6.js";import"./ScrollbarController-773c79f4.js";import"./events-d9666e88.js";export{P as default}from"./Popout-2220e77b.js";import"./Component-2253424f.js";import"./DirectionController-f35f5476.js";import"./observe-a9c6dfb6.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";
+import"./query-assigned-elements-92ce7494.js";import"./property-c78323b1.js";import"./state-d31c6912.js";import"./query-36bfe0e4.js";import"./positioning-2346bdd6.js";import"./LightDismissController-11ae4745.js";import"./ScrollbarController-773c79f4.js";import"./events-d9666e88.js";export{P as default}from"./Popout-2f9d860d.js";import"./Component-2253424f.js";import"./DirectionController-f35f5476.js";import"./observe-a9c6dfb6.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";
 //# sourceMappingURL=Popout.js.map

package/lib/Radio.js

@@ -1,2 +1,2 @@
-import{A as e,i as t,x as n,_ as o,e as i,s as r}from"./query-assigned-elements-92ce7494.js";import{n as a}from"./property-c78323b1.js";import{n as s}from"./ref-99418ab4.js";import{L as l}from"./LightDomController-5388d84c.js";import{S as d}from"./SlotController-d733c575.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as h}from"./cond-bb9ee891.js";import{F as p}from"./FocusableMixin-d30213b4.js";import{F as m}from"./FormAssociatedMixin-a278fda4.js";import{I as u}from"./InputMixin-83b5bd46.js";import{s as b}from"./Component-2253424f.js";import{s as v}from"./FormField-87551be2.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";class g extends d{constructor(t,n){super(t,n.slotName),this.options=n,this.onChange=()=>{this.syncLightDom()},this.renderHook=document.createComment(this.slotName),this.lightDom=new l(t,{render:()=>this.hasContent?e:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}syncLightDom(){const e=this.content;e&&this.options.syncLightDom(e)}}const f=t`:host{--_n-radio-size:calc(var(--n-space-m) * 1.25);display:inline-block;line-height:var(--n-line-height)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--_n-radio-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0!important;padding:0!important;border:1px solid var(--_n-radio-border-color,var(--n-color-border-hover))!important;border-radius:var(--n-border-radius-circle)!important;transition:none!important;display:block!important;inline-size:var(--_n-radio-size)!important;block-size:var(--_n-radio-size)!important;cursor:pointer}::slotted(input:checked){--_n-radio-border-color:var(--n-color-accent);background:var(--_n-radio-accent-color)!important}::slotted(input[aria-invalid]){--_n-radio-accent-color:var(--n-color-status-danger);--_n-radio-border-color:var(--_n-radio-accent-color)}::slotted(input:active){opacity:.8}::slotted(input:focus-visible){outline:0!important}::slotted(input:focus){outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)!important}:host([disabled]) ::slotted(input){--_n-radio-accent-color:var(--n-color-border-strong);--_n-radio-border-color:var(--_n-radio-accent-color);background:var(--_n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(label){color:var(--n-color-text-weaker);cursor:default}.n-dot{--_n-radio-dot-size:var(--n-space-s);--_n-radio-dot-inset:calc((var(--_n-radio-size) - var(--_n-radio-dot-size)) / 2);position:absolute;border-radius:var(--n-border-radius-circle);inline-size:var(--_n-radio-dot-size);block-size:var(--_n-radio-dot-size);background-color:var(--n-color-text-on-accent);inset-inline-start:var(--_n-radio-dot-inset);inset-block-start:var(--_n-radio-dot-inset);z-index:var(--n-index-default);pointer-events:none}.n-label-container{margin-block-end:0}::slotted(label){-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l)!important;padding-inline-start:var(--n-space-s)!important;cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}`;let k=0;const $=e=>`nord-radio-${e}-${k++}`;let y=class extends(m(u(p(r)))){constructor(){super(...arguments),this.inputId=$("input"),this.hintId=$("hint"),this.errorId=$("error"),this.hintSlot=new g(this,{slotName:"hint",render:()=>this.hint?n`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:e,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new g(this,{slotName:"label",render:()=>this.label?n`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:e,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):e.htmlFor=this.inputId}}),this.errorSlot=new g(this,{slotName:"error",render:()=>this.error?n`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:e,syncLightDom:e=>{e.id=this.hintId}}),this.inputSlot=new l(this,{render:()=>n`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${s(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" name="${h(this.name)}" .value="${h(this.value)}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${h(this.getDescribedBy())}" aria-invalid="${h(this.getInvalid())}" form="${h(this._formId)}">`}),this.checked=!1,this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}render(){return n`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?n`<div class="n-dot"></div>`:e}</div><div class="n-expand"><div class="n-label-container">${t=this.hideLabel,o=()=>n`<slot name="label"></slot><slot name="label-internal"></slot>`,i=e=>n`<nord-visually-hidden>${e}</nord-visually-hidden>`,t?i(o()):o()}<div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint"></slot><slot name="hint-internal"></slot></div></div><div class="n-caption n-error" role="alert" ?hidden="${!this.hasError}"><slot name="error"></slot><slot name="error-internal"></slot></div></div></div>`;var t,o,i}handleCheckedChange(e){!e&&this.checked&&this.uncheckSiblings()}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){e.stopPropagation();const t=e.target;this.checked=t.checked,super.handleChange(e)}};y.styles=[b,v,f],o([a({type:Boolean,reflect:!0})],y.prototype,"checked",void 0),o([c("checked")],y.prototype,"handleCheckedChange",null),y=o([i("nord-radio")],y);var _=y;export{_ as default};
+import{A as e,i as t,x as o,_ as n,e as i,s as r}from"./query-assigned-elements-92ce7494.js";import{n as s}from"./property-c78323b1.js";import{n as a}from"./ref-99418ab4.js";import{L as l}from"./LightDomController-5388d84c.js";import{S as d}from"./SlotController-d733c575.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as h}from"./cond-bb9ee891.js";import{F as p}from"./FocusableMixin-d30213b4.js";import{F as m}from"./FormAssociatedMixin-3fa55d53.js";import{I as u}from"./InputMixin-83b5bd46.js";import{s as b}from"./Component-2253424f.js";import{s as v}from"./FormField-87551be2.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";import"./FormDataController-592ff3dd.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";class f extends d{constructor(t,o){super(t,o.slotName),this.options=o,this.onChange=()=>{this.syncLightDom()},this.renderHook=document.createComment(this.slotName),this.lightDom=new l(t,{render:()=>this.hasContent?e:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}syncLightDom(){const e=this.content;e&&this.options.syncLightDom(e)}}const g=t`:host{--_n-radio-size:calc(var(--n-space-m) * 1.25);display:inline-block;line-height:var(--n-line-height)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--_n-radio-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0!important;padding:0!important;border:1px solid var(--_n-radio-border-color,var(--n-color-border-hover))!important;border-radius:var(--n-border-radius-circle)!important;transition:none!important;display:block!important;inline-size:var(--_n-radio-size)!important;block-size:var(--_n-radio-size)!important;cursor:pointer}::slotted(input:checked){--_n-radio-border-color:var(--n-color-accent);background:var(--_n-radio-accent-color)!important}::slotted(input[aria-invalid]){--_n-radio-accent-color:var(--n-color-status-danger);--_n-radio-border-color:var(--_n-radio-accent-color)}::slotted(input:active){opacity:.8}::slotted(input:focus-visible){outline:0!important}::slotted(input:focus){outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)!important}:host([disabled]) ::slotted(label){color:var(--n-color-text-weaker);cursor:default}:host([disabled]) ::slotted(input){background:var(--_n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(input:not(:checked)){--_n-radio-accent-color:var(--n-color-active);--_n-radio-border-color:var(--n-color-border-neutral)}:host([disabled]) ::slotted(input:checked){opacity:.3}.n-dot{--_n-radio-dot-size:var(--n-space-s);--_n-radio-dot-inset:calc((var(--_n-radio-size) - var(--_n-radio-dot-size)) / 2);position:absolute;border-radius:var(--n-border-radius-circle);inline-size:var(--_n-radio-dot-size);block-size:var(--_n-radio-dot-size);background-color:var(--n-color-text-on-accent);inset-inline-start:var(--_n-radio-dot-inset);inset-block-start:var(--_n-radio-dot-inset);z-index:var(--n-index-default);pointer-events:none}.n-label-container{margin-block-end:0}::slotted(label){-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l)!important;padding-inline-start:var(--n-space-s)!important;cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}`;let k=0;const y=e=>`nord-radio-${e}-${k++}`;let $=class extends(m(u(p(r)))){constructor(){super(...arguments),this.inputId=y("input"),this.hintId=y("hint"),this.errorId=y("error"),this.hintSlot=new f(this,{slotName:"hint",render:()=>this.hint?o`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:e,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new f(this,{slotName:"label",render:()=>this.label?o`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:e,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):e.htmlFor=this.inputId}}),this.errorSlot=new f(this,{slotName:"error",render:()=>this.error?o`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:e,syncLightDom:e=>{e.id=this.hintId}}),this.inputSlot=new l(this,{render:()=>o`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${a(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" name="${h(this.name)}" .value="${h(this.value)}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${h(this.getDescribedBy())}" aria-invalid="${h(this.getInvalid())}" form="${h(this._formId)}">`}),this.checked=!1,this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}render(){return o`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?o`<div class="n-dot"></div>`:e}</div><div class="n-expand"><div class="n-label-container">${t=this.hideLabel,n=()=>o`<slot name="label"></slot><slot name="label-internal"></slot>`,i=e=>o`<nord-visually-hidden>${e}</nord-visually-hidden>`,t?i(n()):n()}<div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint"></slot><slot name="hint-internal"></slot></div></div><div class="n-caption n-error" role="alert" ?hidden="${!this.hasError}"><slot name="error"></slot><slot name="error-internal"></slot></div></div></div>`;var t,n,i}handleCheckedChange(e){!e&&this.checked&&this.uncheckSiblings()}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){e.stopPropagation();const t=e.target;this.checked=t.checked,super.handleChange(e)}};$.styles=[b,v,g],n([s({type:Boolean,reflect:!0})],$.prototype,"checked",void 0),n([c("checked")],$.prototype,"handleCheckedChange",null),$=n([i("nord-radio")],$);var _=$;export{_ as default};
 //# sourceMappingURL=Radio.js.map

package/lib/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../src/common/controllers/LightSlotController.ts","../src/radio/Radio.ts","../src/common/directives/wrapIf.ts"],"sourcesContent":["import { nothing, ReactiveControllerHost } from \"lit\"\nimport { LightDomController } from \"./LightDomController.js\"\nimport { SlotController } from \"./SlotController.js\"\n\ntype LightSlotOptions = {\n  slotName: string\n  render: () => unknown\n  syncLightDom: (element: Element) => void\n}\n\n/**\n * Handles cases where a component needs to render to light DOM,\n * and potentially sync component properties to user-supplied content.\n */\nexport class LightSlotController extends SlotController {\n  private renderHook: Comment\n  private lightDom: LightDomController\n\n  constructor(host: ReactiveControllerHost & HTMLElement, private options: LightSlotOptions) {\n    super(host, options.slotName)\n\n    // we need a node to hook onto for rendering\n    // without this, multiple controllers rendering to the light DOM\n    // will overwrite each others' content\n    this.renderHook = document.createComment(this.slotName)\n\n    this.lightDom = new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })\n  }\n\n  hostConnected() {\n    super.hostConnected()\n    this.host.appendChild(this.renderHook)\n    this.syncLightDom()\n  }\n\n  protected override onChange = () => {\n    this.syncLightDom()\n  }\n\n  private syncLightDom() {\n    const node = this.content\n\n    if (node) {\n      this.options.syncLightDom(node)\n    }\n  }\n}\n","import { html, LitElement, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { LightSlotController } from \"../common/controllers/LightSlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { wrapIf } from \"../common/directives/wrapIf.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Radio.css\"\n\nlet id = 0\nconst createId = (suffix: string) => `nord-radio-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n  return element.localName === \"label\"\n}\n\n/**\n * Radio buttons are graphical user interface elements that allow user to choose only one option from\n * a predefined set of mutually exclusive options.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-radio\")\nexport default class Radio extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override inputId = createId(\"input\")\n  protected override hintId = createId(\"hint\")\n  protected override errorId = createId(\"error\")\n\n  /**\n   * For accessibility reasons, we render some parts of the component to the light DOM.\n   */\n  protected override hintSlot = new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected override labelSlot = new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })\n\n  protected override errorSlot = new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected inputSlot = new LightDomController(this, {\n    render: () =>\n      html`\n        <input\n          slot=\"input\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          ${ref(this.focusableRef)}\n          class=\"n-input\"\n          id=${this.inputId}\n          type=\"radio\"\n          name=${cond(this.name)}\n          .value=${cond(this.value)}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-describedby=${cond(this.getDescribedBy())}\n          aria-invalid=${cond(this.getInvalid())}\n          form=${cond(this._formId)}\n        />\n      `,\n  })\n\n  // eslint-disable-next-line class-methods-use-this\n  protected override get formValue() {\n    // opt out of formdata event, since radio button is in light dom\n    return undefined\n  }\n\n  /**\n   * Controls whether the checkbox is checked or not.\n   */\n  @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n  render() {\n    return html`\n      <div class=\"n-flex\">\n        <div class=\"n-input-container\" @change=${this.handleChange}>\n          <slot name=\"input\"></slot>\n          ${this.checked ? html`<div class=\"n-dot\"></div>` : nothing}\n        </div>\n        <div class=\"n-expand\">\n          <div class=\"n-label-container\">\n            ${wrapIf(\n              this.hideLabel,\n              () => html`\n                <slot name=\"label\"></slot>\n                <slot name=\"label-internal\"></slot>\n              `,\n              content => html`<nord-visually-hidden>${content}</nord-visually-hidden>`\n            )}\n            <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n              <slot name=\"hint\"></slot>\n              <slot name=\"hint-internal\"></slot>\n            </div>\n          </div>\n          <div class=\"n-caption n-error\" role=\"alert\" ?hidden=${!this.hasError}>\n            <slot name=\"error\"></slot>\n            <slot name=\"error-internal\"></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"checked\")\n  protected handleCheckedChange(previousChecked: boolean) {\n    // if this component was previous unchecked but is now checked,\n    // then we need to uncheck any radios in the same group\n    if (!previousChecked && this.checked) {\n      this.uncheckSiblings()\n    }\n  }\n\n  private uncheckSiblings() {\n    const root = this.getRootNode() as Document | ShadowRoot\n\n    root.querySelectorAll<Radio>(`nord-radio[name=\"${this.name}\"]`).forEach(radio => {\n      if (radio !== this) {\n        radio.checked = false\n      }\n    })\n  }\n\n  protected handleChange(e: Event): void {\n    e.stopPropagation()\n    const target = e.target as HTMLInputElement\n\n    this.checked = target.checked\n    super.handleChange(e)\n  }\n\n  private handleBlur = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"blur\", { bubbles: false, cancelable: true }))\n  }\n\n  private handleFocus = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"focus\", { bubbles: false, cancelable: true }))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-radio\": Radio\n  }\n}\n","// some clever typing so that TS knows what happens if you pass true/false values\nexport function wrapIf<TInner, TWrapper>(\n  condition: false,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner\nexport function wrapIf<TInner, TWrapper>(\n  condition: true,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TWrapper\nexport function wrapIf<TInner, TWrapper>(\n  condition: unknown,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner | TWrapper\n\n/**\n * @returns if condition is truthy, return result of wrapper, passing result of inner as arg. if falsy, return result of inner\n */\nexport function wrapIf<TInner, TWrapper>(condition: any, inner: () => TInner, wrapper: (innards: TInner) => TWrapper) {\n  return condition ? wrapper(inner()) : inner()\n}\n"],"names":["LightSlotController","SlotController","constructor","host","options","super","slotName","this","onChange","syncLightDom","renderHook","document","createComment","lightDom","LightDomController","render","hasContent","nothing","renderOptions","renderBefore","hostConnected","appendChild","node","content","id","createId","suffix","Radio","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","inputId","hintId","errorId","hintSlot","hint","html","element","labelSlot","label","localName","isLabel","console","warn","htmlFor","errorSlot","error","inputSlot","handleBlur","handleFocus","ref","focusableRef","cond","name","value","checked","disabled","required","getDescribedBy","getInvalid","_formId","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","formValue","handleChange","condition","hideLabel","inner","wrapper","hasHint","hasError","handleCheckedChange","previousChecked","uncheckSiblings","getRootNode","querySelectorAll","forEach","radio","target","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Radio.js","sources":["../src/common/controllers/LightSlotController.ts","../src/radio/Radio.ts","../src/common/directives/wrapIf.ts"],"sourcesContent":["import { nothing, ReactiveControllerHost } from \"lit\"\nimport { LightDomController } from \"./LightDomController.js\"\nimport { SlotController } from \"./SlotController.js\"\n\ntype LightSlotOptions = {\n  slotName: string\n  render: () => unknown\n  syncLightDom: (element: Element) => void\n}\n\n/**\n * Handles cases where a component needs to render to light DOM,\n * and potentially sync component properties to user-supplied content.\n */\nexport class LightSlotController extends SlotController {\n  private renderHook: Comment\n  private lightDom: LightDomController\n\n  constructor(host: ReactiveControllerHost & HTMLElement, private options: LightSlotOptions) {\n    super(host, options.slotName)\n\n    // we need a node to hook onto for rendering\n    // without this, multiple controllers rendering to the light DOM\n    // will overwrite each others' content\n    this.renderHook = document.createComment(this.slotName)\n\n    this.lightDom = new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })\n  }\n\n  hostConnected() {\n    super.hostConnected()\n    this.host.appendChild(this.renderHook)\n    this.syncLightDom()\n  }\n\n  protected override onChange = () => {\n    this.syncLightDom()\n  }\n\n  private syncLightDom() {\n    const node = this.content\n\n    if (node) {\n      this.options.syncLightDom(node)\n    }\n  }\n}\n","import { html, LitElement, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { LightSlotController } from \"../common/controllers/LightSlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { wrapIf } from \"../common/directives/wrapIf.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Radio.css\"\n\nlet id = 0\nconst createId = (suffix: string) => `nord-radio-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n  return element.localName === \"label\"\n}\n\n/**\n * Radio buttons are graphical user interface elements that allow user to choose only one option from\n * a predefined set of mutually exclusive options.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-radio\")\nexport default class Radio extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override inputId = createId(\"input\")\n  protected override hintId = createId(\"hint\")\n  protected override errorId = createId(\"error\")\n\n  /**\n   * For accessibility reasons, we render some parts of the component to the light DOM.\n   */\n  protected override hintSlot = new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected override labelSlot = new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })\n\n  protected override errorSlot = new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })\n\n  protected inputSlot = new LightDomController(this, {\n    render: () =>\n      html`\n        <input\n          slot=\"input\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          ${ref(this.focusableRef)}\n          class=\"n-input\"\n          id=${this.inputId}\n          type=\"radio\"\n          name=${cond(this.name)}\n          .value=${cond(this.value)}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-describedby=${cond(this.getDescribedBy())}\n          aria-invalid=${cond(this.getInvalid())}\n          form=${cond(this._formId)}\n        />\n      `,\n  })\n\n  // eslint-disable-next-line class-methods-use-this\n  protected override get formValue() {\n    // opt out of formdata event, since radio button is in light dom\n    return undefined\n  }\n\n  /**\n   * Controls whether the checkbox is checked or not.\n   */\n  @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n  render() {\n    return html`\n      <div class=\"n-flex\">\n        <div class=\"n-input-container\" @change=${this.handleChange}>\n          <slot name=\"input\"></slot>\n          ${this.checked ? html`<div class=\"n-dot\"></div>` : nothing}\n        </div>\n        <div class=\"n-expand\">\n          <div class=\"n-label-container\">\n            ${wrapIf(\n              this.hideLabel,\n              () => html`\n                <slot name=\"label\"></slot>\n                <slot name=\"label-internal\"></slot>\n              `,\n              content => html`<nord-visually-hidden>${content}</nord-visually-hidden>`\n            )}\n            <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n              <slot name=\"hint\"></slot>\n              <slot name=\"hint-internal\"></slot>\n            </div>\n          </div>\n          <div class=\"n-caption n-error\" role=\"alert\" ?hidden=${!this.hasError}>\n            <slot name=\"error\"></slot>\n            <slot name=\"error-internal\"></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"checked\")\n  protected handleCheckedChange(previousChecked: boolean) {\n    // if this component was previous unchecked but is now checked,\n    // then we need to uncheck any radios in the same group\n    if (!previousChecked && this.checked) {\n      this.uncheckSiblings()\n    }\n  }\n\n  private uncheckSiblings() {\n    const root = this.getRootNode() as Document | ShadowRoot\n\n    root.querySelectorAll<Radio>(`nord-radio[name=\"${this.name}\"]`).forEach(radio => {\n      if (radio !== this) {\n        radio.checked = false\n      }\n    })\n  }\n\n  protected handleChange(e: Event): void {\n    e.stopPropagation()\n    const target = e.target as HTMLInputElement\n\n    this.checked = target.checked\n    super.handleChange(e)\n  }\n\n  private handleBlur = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"blur\", { bubbles: false, cancelable: true }))\n  }\n\n  private handleFocus = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event(\"focus\", { bubbles: false, cancelable: true }))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-radio\": Radio\n  }\n}\n","// some clever typing so that TS knows what happens if you pass true/false values\nexport function wrapIf<TInner, TWrapper>(\n  condition: false,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner\nexport function wrapIf<TInner, TWrapper>(\n  condition: true,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TWrapper\nexport function wrapIf<TInner, TWrapper>(\n  condition: unknown,\n  inner: () => TInner,\n  wrapper: (inner: TInner) => TWrapper\n): TInner | TWrapper\n\n/**\n * @returns if condition is truthy, return result of wrapper, passing result of inner as arg. if falsy, return result of inner\n */\nexport function wrapIf<TInner, TWrapper>(condition: any, inner: () => TInner, wrapper: (innards: TInner) => TWrapper) {\n  return condition ? wrapper(inner()) : inner()\n}\n"],"names":["LightSlotController","SlotController","constructor","host","options","super","slotName","this","onChange","syncLightDom","renderHook","document","createComment","lightDom","LightDomController","render","hasContent","nothing","renderOptions","renderBefore","hostConnected","appendChild","node","content","id","createId","suffix","Radio","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","inputId","hintId","errorId","hintSlot","hint","html","element","labelSlot","label","localName","isLabel","console","warn","htmlFor","errorSlot","error","inputSlot","handleBlur","handleFocus","ref","focusableRef","cond","name","value","checked","disabled","required","getDescribedBy","getInvalid","_formId","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","formValue","handleChange","condition","hideLabel","inner","wrapper","hasHint","hasError","handleCheckedChange","previousChecked","uncheckSiblings","getRootNode","querySelectorAll","forEach","radio","target","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":"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"}

package/lib/Range.js

@@ -1,2 +1,2 @@
-import{i as r,x as e,_ as n,e as a,s as o}from"./query-assigned-elements-92ce7494.js";import{n as t}from"./ref-99418ab4.js";import{o as i}from"./class-map-512f0bc1.js";import{n as s}from"./property-c78323b1.js";import{l as c}from"./if-defined-cccde88f.js";import{N as l}from"./events-d9666e88.js";import{F as d}from"./FocusableMixin-d30213b4.js";import{F as b}from"./FormAssociatedMixin-a278fda4.js";import{I as g}from"./InputMixin-83b5bd46.js";import{R as m,s as u}from"./TextField-2d778949.js";import{A as h}from"./AutocompleteMixin-5a7e10b2.js";import{D as p}from"./DirectionController-f35f5476.js";import{s as v}from"./Component-2253424f.js";import{s as f}from"./FormField-87551be2.js";import"./directive-e9ce14b4.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./VisuallyHidden.js";const _=r`:host{--_n-range-progress:0%;--_n-range-thumb-focus-ring:0 0 0 1px var(--n-color-accent);--_n-range-thumb-color:var(--n-color-text-on-accent);--_n-range-thumb-border-size:1px;--_n-range-thumb-border-color:var(--n-color-border-strong);--_n-range-gradient-direction:right;--_n-range-thumb-size:var(--n-range-thumb-size, 20px);--_n-range-track-color-active:var(--n-range-track-color-active, var(--n-color-accent));--_n-range-track-color-inactive:var(--n-range-track-color-inactive, var(--n-color-border-strong));--_n-range-track-size:var(--n-range-track-size, 3px)}.n-range{-webkit-appearance:none;appearance:none;inline-size:100%;background:linear-gradient(to var(--_n-range-gradient-direction),var(--_n-range-track-color-active) 0,var(--_n-range-track-color-active) var(--_n-range-progress),var(--_n-range-track-color-inactive) var(--_n-range-progress));border-radius:var(--n-border-radius-s)}.n-range.is-rtl{--_n-range-gradient-direction:left}.n-range::-webkit-slider-runnable-track{inline-size:100%;block-size:var(--_n-range-track-size)}.n-range::-webkit-slider-thumb{block-size:var(--_n-range-thumb-size);inline-size:var(--_n-range-thumb-size);box-shadow:var(--n-box-shadow),var(--n-box-shadow);border-radius:var(--n-border-radius-circle);background:var(--_n-range-thumb-color);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);cursor:pointer;-webkit-appearance:none;margin-block-start:calc(calc(var(--_n-range-thumb-size) - var(--_n-range-track-size))/ 2 * -1)}.n-range::-moz-range-track{border:var(--n-space-s) solid var(--n-color-surface);inline-size:100%;block-size:var(--_n-range-track-size)}.n-range::-moz-range-thumb{block-size:var(--_n-range-thumb-size);inline-size:var(--_n-range-thumb-size);box-shadow:var(--n-box-shadow);border-radius:var(--n-border-radius-circle);background:var(--_n-range-thumb-color);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);cursor:pointer;appearance:none;margin-block-start:calc(calc(var(--_n-range-thumb-size) - var(--_n-range-track-size))/ 2 * -1)}.n-label-container{margin-block-end:0;inline-size:100%}label{display:flex!important}.n-range-output{font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);font-size:var(--n-font-size-m);margin-inline-start:auto}.n-range:focus{outline:0}.n-label-container:hover+.n-input-container .n-input:disabled,.n-range:disabled{opacity:.5}.n-range:disabled::-webkit-slider-thumb,.n-range[readonly]::-webkit-slider-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:disabled::-moz-range-thumb,.n-range[readonly]::-moz-range-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:focus::-webkit-slider-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}.n-range:focus::-moz-range-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}`;let z=class extends(b(h(m(g(d(o)))))){constructor(){super(...arguments),this.direction=new p(this),this.min=0,this.max=10,this.step=1,this.expand=!1}render(){const r=Number(this.value)||0,n=Math.max(0,(r-this.min)/(this.max-this.min));return e`<div class="n-input-container">${this.renderLabel(e`<span class="n-range-output" aria-hidden="true">${r}</span>`)} <input ${t(this.focusableRef)} id="${this.inputId}" type="range" class="${i({"n-range":!0,"is-rtl":this.direction.isRTL})}" name="${c(this.name)}" min="${this.min}" step="${this.step}" max="${this.max}" style="${`--_n-range-progress: ${100*n}%`}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" .value="${this.value?this.value:"0"}" @input="${this.handleInput}" @change="${this.handleChange}" aria-describedby="${c(this.getDescribedBy())}" aria-invalid="${c(this.getInvalid())}"></div>${this.renderError()}`}handleInput(r){r.stopPropagation();const e=r.target;if(this.readonly)return r.preventDefault(),void(e.value=this.value);this.value=e.value,this.dispatchEvent(new l("input"))}};z.styles=[v,f,u,_],n([s()],z.prototype,"min",void 0),n([s()],z.prototype,"max",void 0),n([s()],z.prototype,"step",void 0),n([s({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),z=n([a("nord-range")],z);var k=z;export{k as default};
+import{i as r,x as e,_ as n,e as a,s as o}from"./query-assigned-elements-92ce7494.js";import{n as t}from"./ref-99418ab4.js";import{o as i}from"./class-map-512f0bc1.js";import{n as s}from"./property-c78323b1.js";import{l as c}from"./if-defined-cccde88f.js";import{N as l}from"./events-d9666e88.js";import{F as d}from"./FocusableMixin-d30213b4.js";import{F as b}from"./FormAssociatedMixin-3fa55d53.js";import{I as m}from"./InputMixin-83b5bd46.js";import{R as g,s as u}from"./TextField-2d778949.js";import{A as h}from"./AutocompleteMixin-5a7e10b2.js";import{D as p}from"./DirectionController-f35f5476.js";import{s as v}from"./Component-2253424f.js";import{s as f}from"./FormField-87551be2.js";import"./directive-e9ce14b4.js";import"./FormDataController-592ff3dd.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./VisuallyHidden.js";const _=r`:host{--_n-range-progress:0%;--_n-range-thumb-focus-ring:0 0 0 1px var(--n-color-accent);--_n-range-thumb-color:var(--n-color-text-on-accent);--_n-range-thumb-border-size:1px;--_n-range-thumb-border-color:var(--n-color-border-strong);--_n-range-gradient-direction:right;--_n-range-thumb-size:var(--n-range-thumb-size, 20px);--_n-range-track-color-active:var(--n-range-track-color-active, var(--n-color-accent));--_n-range-track-color-inactive:var(--n-range-track-color-inactive, var(--n-color-border-strong));--_n-range-track-size:var(--n-range-track-size, 3px)}.n-range{-webkit-appearance:none;appearance:none;inline-size:100%;background:linear-gradient(to var(--_n-range-gradient-direction),var(--_n-range-track-color-active) 0,var(--_n-range-track-color-active) var(--_n-range-progress),var(--_n-range-track-color-inactive) var(--_n-range-progress));border-radius:var(--n-border-radius-s)}.n-range.is-rtl{--_n-range-gradient-direction:left}.n-range::-webkit-slider-runnable-track{inline-size:100%;block-size:var(--_n-range-track-size)}.n-range::-webkit-slider-thumb{block-size:var(--_n-range-thumb-size);inline-size:var(--_n-range-thumb-size);box-shadow:var(--n-box-shadow),var(--n-box-shadow);border-radius:var(--n-border-radius-circle);background:var(--_n-range-thumb-color);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);cursor:pointer;-webkit-appearance:none;margin-block-start:calc(calc(var(--_n-range-thumb-size) - var(--_n-range-track-size))/ 2 * -1)}.n-range::-moz-range-track{border:var(--n-space-s) solid var(--n-color-surface);inline-size:100%;block-size:var(--_n-range-track-size)}.n-range::-moz-range-thumb{block-size:var(--_n-range-thumb-size);inline-size:var(--_n-range-thumb-size);box-shadow:var(--n-box-shadow);border-radius:var(--n-border-radius-circle);background:var(--_n-range-thumb-color);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);cursor:pointer;appearance:none;margin-block-start:calc(calc(var(--_n-range-thumb-size) - var(--_n-range-track-size))/ 2 * -1)}.n-label-container{margin-block-end:0;inline-size:100%}label{display:flex!important}.n-range-output{font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);font-size:var(--n-font-size-m);margin-inline-start:auto}.n-range:focus{outline:0}.n-label-container:hover+.n-input-container .n-input:disabled,.n-range:disabled{opacity:.5}.n-range:disabled::-webkit-slider-thumb,.n-range[readonly]::-webkit-slider-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:disabled::-moz-range-thumb,.n-range[readonly]::-moz-range-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:focus::-webkit-slider-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}.n-range:focus::-moz-range-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}`;let z=class extends(b(h(g(m(d(o)))))){constructor(){super(...arguments),this.direction=new p(this),this.min=0,this.max=10,this.step=1,this.expand=!1}render(){const r=Number(this.value)||0,n=Math.max(0,(r-this.min)/(this.max-this.min));return e`<div class="n-input-container">${this.renderLabel(e`<span class="n-range-output" aria-hidden="true">${r}</span>`)} <input ${t(this.focusableRef)} id="${this.inputId}" type="range" class="${i({"n-range":!0,"is-rtl":this.direction.isRTL})}" name="${c(this.name)}" min="${this.min}" step="${this.step}" max="${this.max}" style="${`--_n-range-progress: ${100*n}%`}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" .value="${this.value?this.value:"0"}" @input="${this.handleInput}" @change="${this.handleChange}" aria-describedby="${c(this.getDescribedBy())}" aria-invalid="${c(this.getInvalid())}"></div>${this.renderError()}`}handleInput(r){r.stopPropagation();const e=r.target;if(this.readonly)return r.preventDefault(),void(e.value=this.value);this.value=e.value,this.dispatchEvent(new l("input"))}};z.styles=[v,f,u,_],n([s({reflect:!0,type:Number})],z.prototype,"min",void 0),n([s({reflect:!0,type:Number})],z.prototype,"max",void 0),n([s({reflect:!0,type:Number})],z.prototype,"step",void 0),n([s({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),z=n([a("nord-range")],z);var k=z;export{k as default};
 //# sourceMappingURL=Range.js.map

package/lib/Range.js.map

@@ -1 +1 @@
-{"version":3,"file":"Range.js","sources":["../src/range/Range.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Range.css\"\n\n/**\n * Range input lets user specify a numeric value using a slider which\n * must be no less than a given value, and no more than another given value.\n *\n * @status new\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n *\n * @cssprop [--n-range-thumb-size=20px] - Controls the size of the thumb.\n * @cssprop [--n-range-track-color-active=var(--n-color-accent)] - Controls the color of the portion of the track that represents the current value.\n * @cssprop [--n-range-track-color-inactive=var(--n-color-border-strong)] - Controls the color of the portion of the track that represents the remaining value.\n * @cssprop [--n-range-track-size=3px] - Controls the height of the track.\n */\n@customElement(\"nord-range\")\nexport default class Range extends FormAssociatedMixin(\n  AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  private direction = new DirectionController(this)\n\n  /**\n   * Minimum value for the range slider.\n   */\n  @property() min: number = 0\n\n  /**\n   * Maximum value for the range slider.\n   */\n  @property() max: number = 10\n\n  /**\n   * Step amount for the range slider.\n   */\n  @property() step: number = 1\n\n  /**\n   * Controls whether the input expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const value = Number(this.value) || 0\n    const percent = Math.max(0, (value - this.min) / (this.max - this.min))\n\n    return html`\n      <div class=\"n-input-container\">\n        ${this.renderLabel(html`<span class=\"n-range-output\" aria-hidden=\"true\">${value}</span>`)}\n\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          type=\"range\"\n          class=${classMap({\n            \"n-range\": true,\n            \"is-rtl\": this.direction.isRTL,\n          })}\n          name=${ifDefined(this.name)}\n          min=${this.min}\n          step=${this.step}\n          max=${this.max}\n          style=${`--_n-range-progress: ${percent * 100}%`}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          ?readonly=${this.readonly}\n          .value=${this.value ? this.value : \"0\"}\n          @input=${this.handleInput}\n          @change=${this.handleChange}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n        />\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  protected handleInput(e: Event) {\n    e.stopPropagation()\n    const target = e.target as HTMLInputElement\n\n    if (this.readonly) {\n      e.preventDefault()\n      target.value = this.value\n      return\n    }\n\n    this.value = target.value\n\n    /**\n     * Fired as the user types into the input.\n     */\n    this.dispatchEvent(new NordEvent(\"input\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-range\": Range\n  }\n}\n"],"names":["Range","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","direction","DirectionController","min","max","step","expand","render","value","Number","percent","Math","html","renderLabel","ref","focusableRef","inputId","classMap","isRTL","ifDefined","name","disabled","required","readonly","handleInput","handleChange","getDescribedBy","getInvalid","renderError","e","stopPropagation","target","preventDefault","dispatchEvent","NordEvent","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","prototype","reflect","type","Boolean","customElement"],"mappings":"g0HAmCe,IAAMA,EAAN,cAAoBC,EACjCC,EAAkBC,EAAcC,EAAWC,EAAeC,QAD7C,WAAAC,uBAKLC,KAAAC,UAAY,IAAIC,EAAoBF,MAKhCA,KAAGG,IAAW,EAKdH,KAAGI,IAAW,GAKdJ,KAAIK,KAAW,EAKiBL,KAAMM,QAAG,CAuDtD,CArDC,MAAAC,GACE,MAAMC,EAAQC,OAAOT,KAAKQ,QAAU,EAC9BE,EAAUC,KAAKP,IAAI,GAAII,EAAQR,KAAKG,MAAQH,KAAKI,IAAMJ,KAAKG,MAElE,OAAOS,CAAI,kCAELZ,KAAKa,YAAYD,CAAI,mDAAmDJ,sBAGtEM,EAAId,KAAKe,qBACNf,KAAKgB,gCAEFC,EAAS,CACf,WAAW,EACX,SAAUjB,KAAKC,UAAUiB,kBAEpBC,EAAUnB,KAAKoB,eAChBpB,KAAKG,cACJH,KAAKK,cACNL,KAAKI,eACH,wBAAkC,IAAVM,oBACpBV,KAAKqB,wBACLrB,KAAKsB,wBACLtB,KAAKuB,qBACRvB,KAAKQ,MAAQR,KAAKQ,MAAQ,gBAC1BR,KAAKwB,yBACJxB,KAAKyB,mCACIN,EAAUnB,KAAK0B,oCACnBP,EAAUnB,KAAK2B,wBAIhC3B,KAAK4B,eAEV,CAES,WAAAJ,CAAYK,GACpBA,EAAEC,kBACF,MAAMC,EAASF,EAAEE,OAEjB,GAAI/B,KAAKuB,SAGP,OAFAM,EAAEG,sBACFD,EAAOvB,MAAQR,KAAKQ,OAItBR,KAAKQ,MAAQuB,EAAOvB,MAKpBR,KAAKiC,cAAc,IAAIC,EAAU,SAClC,GA5EM1C,EAAM2C,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAOrDC,EAAA,CAAXC,KAA0BjD,EAAAkD,UAAA,WAAA,GAKfF,EAAA,CAAXC,KAA2BjD,EAAAkD,UAAA,WAAA,GAKhBF,EAAA,CAAXC,KAA2BjD,EAAAkD,UAAA,YAAA,GAKgBF,EAAA,CAA3CC,EAAS,CAAEE,SAAS,EAAMC,KAAMC,WAAyBrD,EAAAkD,UAAA,cAAA,GAzBvClD,EAAKgD,EAAA,CADzBM,EAAc,eACMtD,SAAAA"}
+{"version":3,"file":"Range.js","sources":["../src/range/Range.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Range.css\"\n\n/**\n * Range input lets user specify a numeric value using a slider which\n * must be no less than a given value, and no more than another given value.\n *\n * @status new\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n *\n * @cssprop [--n-range-thumb-size=20px] - Controls the size of the thumb.\n * @cssprop [--n-range-track-color-active=var(--n-color-accent)] - Controls the color of the portion of the track that represents the current value.\n * @cssprop [--n-range-track-color-inactive=var(--n-color-border-strong)] - Controls the color of the portion of the track that represents the remaining value.\n * @cssprop [--n-range-track-size=3px] - Controls the height of the track.\n */\n@customElement(\"nord-range\")\nexport default class Range extends FormAssociatedMixin(\n  AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  private direction = new DirectionController(this)\n\n  /**\n   * Minimum value for the range slider.\n   */\n  @property({ reflect: true, type: Number }) min: number = 0\n\n  /**\n   * Maximum value for the range slider.\n   */\n  @property({ reflect: true, type: Number }) max: number = 10\n\n  /**\n   * Step amount for the range slider.\n   */\n  @property({ reflect: true, type: Number }) step: number = 1\n\n  /**\n   * Controls whether the input expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const value = Number(this.value) || 0\n    const percent = Math.max(0, (value - this.min) / (this.max - this.min))\n\n    return html`\n      <div class=\"n-input-container\">\n        ${this.renderLabel(html`<span class=\"n-range-output\" aria-hidden=\"true\">${value}</span>`)}\n\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          type=\"range\"\n          class=${classMap({\n            \"n-range\": true,\n            \"is-rtl\": this.direction.isRTL,\n          })}\n          name=${ifDefined(this.name)}\n          min=${this.min}\n          step=${this.step}\n          max=${this.max}\n          style=${`--_n-range-progress: ${percent * 100}%`}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          ?readonly=${this.readonly}\n          .value=${this.value ? this.value : \"0\"}\n          @input=${this.handleInput}\n          @change=${this.handleChange}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n        />\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  protected handleInput(e: Event) {\n    e.stopPropagation()\n    const target = e.target as HTMLInputElement\n\n    if (this.readonly) {\n      e.preventDefault()\n      target.value = this.value\n      return\n    }\n\n    this.value = target.value\n\n    /**\n     * Fired as the user types into the input.\n     */\n    this.dispatchEvent(new NordEvent(\"input\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-range\": Range\n  }\n}\n"],"names":["Range","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","direction","DirectionController","min","max","step","expand","render","value","Number","percent","Math","html","renderLabel","ref","focusableRef","inputId","classMap","isRTL","ifDefined","name","disabled","required","readonly","handleInput","handleChange","getDescribedBy","getInvalid","renderError","e","stopPropagation","target","preventDefault","dispatchEvent","NordEvent","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","reflect","type","prototype","Boolean","customElement"],"mappings":"y2HAmCe,IAAMA,EAAN,cAAoBC,EACjCC,EAAkBC,EAAcC,EAAWC,EAAeC,QAD7C,WAAAC,uBAKLC,KAAAC,UAAY,IAAIC,EAAoBF,MAKDA,KAAGG,IAAW,EAKdH,KAAGI,IAAW,GAKdJ,KAAIK,KAAW,EAKdL,KAAMM,QAAG,CAuDtD,CArDC,MAAAC,GACE,MAAMC,EAAQC,OAAOT,KAAKQ,QAAU,EAC9BE,EAAUC,KAAKP,IAAI,GAAII,EAAQR,KAAKG,MAAQH,KAAKI,IAAMJ,KAAKG,MAElE,OAAOS,CAAI,kCAELZ,KAAKa,YAAYD,CAAI,mDAAmDJ,sBAGtEM,EAAId,KAAKe,qBACNf,KAAKgB,gCAEFC,EAAS,CACf,WAAW,EACX,SAAUjB,KAAKC,UAAUiB,kBAEpBC,EAAUnB,KAAKoB,eAChBpB,KAAKG,cACJH,KAAKK,cACNL,KAAKI,eACH,wBAAkC,IAAVM,oBACpBV,KAAKqB,wBACLrB,KAAKsB,wBACLtB,KAAKuB,qBACRvB,KAAKQ,MAAQR,KAAKQ,MAAQ,gBAC1BR,KAAKwB,yBACJxB,KAAKyB,mCACIN,EAAUnB,KAAK0B,oCACnBP,EAAUnB,KAAK2B,wBAIhC3B,KAAK4B,eAEV,CAES,WAAAJ,CAAYK,GACpBA,EAAEC,kBACF,MAAMC,EAASF,EAAEE,OAEjB,GAAI/B,KAAKuB,SAGP,OAFAM,EAAEG,sBACFD,EAAOvB,MAAQR,KAAKQ,OAItBR,KAAKQ,MAAQuB,EAAOvB,MAKpBR,KAAKiC,cAAc,IAAIC,EAAU,SAClC,GA5EM1C,EAAM2C,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAOtBC,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMlC,UAAyBjB,EAAAoD,UAAA,WAAA,GAKfJ,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMlC,UAA0BjB,EAAAoD,UAAA,WAAA,GAKhBJ,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMlC,UAA0BjB,EAAAoD,UAAA,YAAA,GAKfJ,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAME,WAAyBrD,EAAAoD,UAAA,cAAA,GAzBvCpD,EAAKgD,EAAA,CADzBM,EAAc,eACMtD,SAAAA"}

package/lib/Select.js

@@ -1,2 +1,2 @@
-import{i as o,x as t,_ as e,e as n,s as r}from"./query-assigned-elements-92ce7494.js";import{n as i}from"./property-c78323b1.js";import{l as s}from"./if-defined-cccde88f.js";import{n as a}from"./ref-99418ab4.js";import"./Button.js";import l from"./Icon.js";import{I as c}from"./InputMixin-83b5bd46.js";import{F as d}from"./FocusableMixin-d30213b4.js";import{F as p}from"./FormAssociatedMixin-a278fda4.js";import{A as b}from"./AutocompleteMixin-5a7e10b2.js";import{S as u}from"./SizeMixin-ab074eff.js";import{s as m}from"./Component-2253424f.js";import{s as h}from"./FormField-87551be2.js";import{S as v}from"./SlotController-d733c575.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";import"./LightDomController-5388d84c.js";import"./cond-bb9ee891.js";import"./Spinner.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";var f=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z" fill="currentColor"/></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const x=o`:host{--_n-select-block-size:var(--n-select-block-size, var(--n-space-xl))}.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--_n-select-block-size);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}option{color:initial}nord-button{--n-button-text-align:start}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--_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-label-container:hover+.n-select-container nord-button nord-icon,select:hover+nord-button nord-icon{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;l.registerIcon(f);let g=class extends(u(p(b(c(d(r)))))){constructor(){super(...arguments),this.defaultSlot=new v(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const o=this.options,e=this.getButtonText(o);return t`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&t`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${o.map((o=>this.renderOption(o)))}</select><nord-button size="${this.size}" tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="icon"></slot>${e}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(o){const t=o.find((o=>o.value===this.value.toString()));return t?t.text:this.placeholder?this.placeholder:o[0]?o[0].text:""}renderOption(o){return t`<option value="${s(o.value)}" ?disabled="${o.disabled}" .selected="${o.value===this.value.toString()}">${o.text}</option>`}};g.styles=[m,h,x],e([i({reflect:!0,type:Boolean})],g.prototype,"expand",void 0),g=e([n("nord-select")],g);var j=g;export{j as default};
+import{i as o,x as t,_ as e,e as n,s as r}from"./query-assigned-elements-92ce7494.js";import{n as i}from"./property-c78323b1.js";import{l as s}from"./if-defined-cccde88f.js";import{n as a}from"./ref-99418ab4.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-83b5bd46.js";import{F as c}from"./FocusableMixin-d30213b4.js";import{F as p}from"./FormAssociatedMixin-3fa55d53.js";import{A as b}from"./AutocompleteMixin-5a7e10b2.js";import{S as u}from"./SizeMixin-ab074eff.js";import{s as m}from"./Component-2253424f.js";import{s as h}from"./FormField-87551be2.js";import{S as v}from"./SlotController-d733c575.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";import"./LightDomController-5388d84c.js";import"./cond-bb9ee891.js";import"./Spinner.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./FormDataController-592ff3dd.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";var f=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z" fill="currentColor"/></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const x=o`:host{--_n-select-block-size:var(--n-select-block-size, var(--n-space-xl))}.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--_n-select-block-size);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}option{color:initial}nord-button{--n-button-text-align:start}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--_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-label-container:hover+.n-select-container nord-button nord-icon,select:hover+nord-button nord-icon{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;l.registerIcon(f);let g=class extends(u(p(b(d(c(r)))))){constructor(){super(...arguments),this.defaultSlot=new v(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const o=this.options,e=this.getButtonText(o);return t`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&t`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${o.map((o=>this.renderOption(o)))}</select><nord-button size="${this.size}" tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="icon"></slot>${e}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(o){const t=o.find((o=>o.value===this.value.toString()));return t?t.text:this.placeholder?this.placeholder:o[0]?o[0].text:""}renderOption(o){return t`<option value="${s(o.value)}" ?disabled="${o.disabled}" .selected="${o.value===this.value.toString()}">${o.text}</option>`}};g.styles=[m,h,x],e([i({reflect:!0,type:Boolean})],g.prototype,"expand",void 0),g=e([n("nord-select")],g);var j=g;export{j as default};
 //# sourceMappingURL=Select.js.map

package/lib/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../icons/lib/assets/interface-dropdown-small.js","../src/select/Select.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n","/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport * as dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nIcon.registerIcon(dropdownIcon)\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n * @slot icon - Used to place an icon at the start of select.\n *\n * @cssprop [--n-select-block-size=var(--n-space-xl)] - Controls the block size, or height, of the select using our [spacing tokens](/tokens/#space).\n */\n@customElement(\"nord-select\")\nexport default class Select extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.value || undefined\n  }\n\n  private defaultSlot = new SlotController(this)\n\n  protected inputId = \"select\"\n\n  /**\n   * Controls whether the select expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const slottedOptions = this.options\n    const buttonText = this.getButtonText(slottedOptions)\n\n    return html`\n      <slot></slot>\n      ${this.renderLabel()}\n\n      <div class=\"n-select-container\">\n        <select\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          autocomplete=${this.autocomplete as any}\n        >\n          ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n          ${slottedOptions.map(option => this.renderOption(option))}\n        </select>\n\n        <nord-button\n          size=${this.size}\n          tabindex=\"-1\"\n          ?disabled=${this.disabled}\n          ?expand=${this.expand}\n          aria-hidden=\"true\"\n          type=\"button\"\n        >\n          <slot slot=\"start\" name=\"icon\"></slot>\n          ${buttonText}\n          <nord-icon slot=\"end\" name=\"interface-dropdown-small\"></nord-icon>\n        </nord-button>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private get options() {\n    return Array.from(this.querySelectorAll(\"option\"))\n  }\n\n  private getButtonText(options: HTMLOptionElement[]): string {\n    const selected = options.find(option => option.value === this.value.toString())\n\n    if (selected) {\n      return selected.text\n    }\n\n    if (this.placeholder) {\n      return this.placeholder\n    }\n\n    if (options[0]) {\n      return options[0].text\n    }\n\n    return \"\"\n  }\n\n  private renderOption(option: HTMLOptionElement) {\n    return html`\n      <option\n        value=${ifDefined(option.value)}\n        ?disabled=${option.disabled}\n        .selected=${option.value === this.value.toString()}\n      >\n        ${option.text}\n      </option>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-select\": Select\n  }\n}\n"],"names":["Icon","registerIcon","dropdownIcon","Select","SizeMixin","FormAssociatedMixin","AutocompleteMixin","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","inputId","expand","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","placeholder","map","option","renderOption","size","renderError","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"q9BAAe,waACM,gCACD,wqDCmBpBA,EAAKC,aAAaC,GAiBH,IAAMC,EAAN,cAAqBC,EAClCC,EAAoBC,EAAkBC,EAAWC,EAAeC,QADnD,WAAAC,uBASLC,KAAAC,YAAc,IAAIC,EAAeF,MAE/BA,KAAOG,QAAG,SAKwBH,KAAMI,QAAG,CA8EtD,CAzFC,aAAuBC,GACrB,OAAOL,KAAKM,YAASC,CACtB,CAWD,MAAAC,GACE,MAAMC,EAAiBT,KAAKU,QACtBC,EAAaX,KAAKY,cAAcH,GAEtC,OAAOI,CAAI,gBAEPb,KAAKc,wDAIDC,EAAIf,KAAKgB,qBACNhB,KAAKG,uBACEH,KAAKiB,wBACLjB,KAAKkB,mBACVC,EAAUnB,KAAKoB,mBACZpB,KAAKqB,yBACNrB,KAAKsB,kCACKH,EAAUnB,KAAKuB,oCACnBJ,EAAUnB,KAAKwB,gCACfxB,KAAKyB,iBAElBzB,KAAK0B,aAAeb,CAAI,oDAAwCb,KAAKM,UAASN,KAAK0B,0BACnFjB,EAAekB,KAAIC,GAAU5B,KAAK6B,aAAaD,mCAI1C5B,KAAK8B,kCAEA9B,KAAKiB,sBACPjB,KAAKI,kFAKbO,0FAKJX,KAAK+B,eAEV,CAED,WAAYrB,GACV,OAAOsB,MAAMC,KAAKjC,KAAKkC,iBAAiB,UACzC,CAEO,aAAAtB,CAAcF,GACpB,MAAMyB,EAAWzB,EAAQ0B,MAAKR,GAAUA,EAAOtB,QAAUN,KAAKM,MAAM+B,aAEpE,OAAIF,EACKA,EAASG,KAGdtC,KAAK0B,YACA1B,KAAK0B,YAGVhB,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,EACR,CAEO,YAAAT,CAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,EAAOtB,sBACbsB,EAAOX,wBACPW,EAAOtB,QAAUN,KAAKM,MAAM+B,eAEtCT,EAAOU,eAGd,GA1FM9C,EAAM+C,OAAG,CAACC,EAAgBC,EAAgBC,GAaLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBvD,EAAAwD,UAAA,cAAA,GAhBvCxD,EAAMmD,EAAA,CAD1BM,EAAc,gBACMzD,SAAAA"}
+{"version":3,"file":"Select.js","sources":["../../icons/lib/assets/interface-dropdown-small.js","../src/select/Select.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n","/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport * as dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nIcon.registerIcon(dropdownIcon)\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n * @slot icon - Used to place an icon at the start of select.\n *\n * @cssprop [--n-select-block-size=var(--n-space-xl)] - Controls the block size, or height, of the select using our [spacing tokens](/tokens/#space).\n */\n@customElement(\"nord-select\")\nexport default class Select extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.value || undefined\n  }\n\n  private defaultSlot = new SlotController(this)\n\n  protected inputId = \"select\"\n\n  /**\n   * Controls whether the select expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const slottedOptions = this.options\n    const buttonText = this.getButtonText(slottedOptions)\n\n    return html`\n      <slot></slot>\n      ${this.renderLabel()}\n\n      <div class=\"n-select-container\">\n        <select\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          autocomplete=${this.autocomplete as any}\n        >\n          ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n          ${slottedOptions.map(option => this.renderOption(option))}\n        </select>\n\n        <nord-button\n          size=${this.size}\n          tabindex=\"-1\"\n          ?disabled=${this.disabled}\n          ?expand=${this.expand}\n          aria-hidden=\"true\"\n          type=\"button\"\n        >\n          <slot slot=\"start\" name=\"icon\"></slot>\n          ${buttonText}\n          <nord-icon slot=\"end\" name=\"interface-dropdown-small\"></nord-icon>\n        </nord-button>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private get options() {\n    return Array.from(this.querySelectorAll(\"option\"))\n  }\n\n  private getButtonText(options: HTMLOptionElement[]): string {\n    const selected = options.find(option => option.value === this.value.toString())\n\n    if (selected) {\n      return selected.text\n    }\n\n    if (this.placeholder) {\n      return this.placeholder\n    }\n\n    if (options[0]) {\n      return options[0].text\n    }\n\n    return \"\"\n  }\n\n  private renderOption(option: HTMLOptionElement) {\n    return html`\n      <option\n        value=${ifDefined(option.value)}\n        ?disabled=${option.disabled}\n        .selected=${option.value === this.value.toString()}\n      >\n        ${option.text}\n      </option>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-select\": Select\n  }\n}\n"],"names":["Icon","registerIcon","dropdownIcon","Select","SizeMixin","FormAssociatedMixin","AutocompleteMixin","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","inputId","expand","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","placeholder","map","option","renderOption","size","renderError","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"8/BAAe,waACM,gCACD,wqDCmBpBA,EAAKC,aAAaC,GAiBH,IAAMC,EAAN,cAAqBC,EAClCC,EAAoBC,EAAkBC,EAAWC,EAAeC,QADnD,WAAAC,uBASLC,KAAAC,YAAc,IAAIC,EAAeF,MAE/BA,KAAOG,QAAG,SAKwBH,KAAMI,QAAG,CA8EtD,CAzFC,aAAuBC,GACrB,OAAOL,KAAKM,YAASC,CACtB,CAWD,MAAAC,GACE,MAAMC,EAAiBT,KAAKU,QACtBC,EAAaX,KAAKY,cAAcH,GAEtC,OAAOI,CAAI,gBAEPb,KAAKc,wDAIDC,EAAIf,KAAKgB,qBACNhB,KAAKG,uBACEH,KAAKiB,wBACLjB,KAAKkB,mBACVC,EAAUnB,KAAKoB,mBACZpB,KAAKqB,yBACNrB,KAAKsB,kCACKH,EAAUnB,KAAKuB,oCACnBJ,EAAUnB,KAAKwB,gCACfxB,KAAKyB,iBAElBzB,KAAK0B,aAAeb,CAAI,oDAAwCb,KAAKM,UAASN,KAAK0B,0BACnFjB,EAAekB,KAAIC,GAAU5B,KAAK6B,aAAaD,mCAI1C5B,KAAK8B,kCAEA9B,KAAKiB,sBACPjB,KAAKI,kFAKbO,0FAKJX,KAAK+B,eAEV,CAED,WAAYrB,GACV,OAAOsB,MAAMC,KAAKjC,KAAKkC,iBAAiB,UACzC,CAEO,aAAAtB,CAAcF,GACpB,MAAMyB,EAAWzB,EAAQ0B,MAAKR,GAAUA,EAAOtB,QAAUN,KAAKM,MAAM+B,aAEpE,OAAIF,EACKA,EAASG,KAGdtC,KAAK0B,YACA1B,KAAK0B,YAGVhB,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,EACR,CAEO,YAAAT,CAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,EAAOtB,sBACbsB,EAAOX,wBACPW,EAAOtB,QAAUN,KAAKM,MAAM+B,eAEtCT,EAAOU,eAGd,GA1FM9C,EAAM+C,OAAG,CAACC,EAAgBC,EAAgBC,GAaLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBvD,EAAAwD,UAAA,cAAA,GAhBvCxD,EAAMmD,EAAA,CAD1BM,EAAc,gBACMzD,SAAAA"}

package/lib/Tag.js

@@ -0,0 +1,2 @@
+import{i as o,x as e,_ as n,e as r,s as t}from"./query-assigned-elements-92ce7494.js";import{n as a}from"./property-c78323b1.js";import{l as i}from"./if-defined-cccde88f.js";import{n as c}from"./ref-99418ab4.js";import{c as s}from"./interface-checked-small-07292940.js";import{c as l}from"./interface-close-small-f26b0299.js";import d from"./Icon.js";import{I as b}from"./InputMixin-83b5bd46.js";import{F as v}from"./FocusableMixin-d30213b4.js";import{N as p}from"./events-d9666e88.js";import{F as h}from"./FormDataController-592ff3dd.js";import{LocalizeController as u}from"./LocalizeController.js";import{s as m}from"./Component-2253424f.js";import"./directive-e9ce14b4.js";import"./state-d31c6912.js";import"./cond-bb9ee891.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const g=o`:host{--_n-tag-background-color:var(--n-color-nav-hover);--_n-tag-border-color:var(--n-color-border-neutral);--_n-tag-checkbox-size:var(--n-size-icon-s);--_n-tag-checkbox-accent-color:var(--n-color-accent);--_n-tag-checkbox-border-color:var(--n-color-border-hover);--_n-tag-font-size:var(--n-font-size-m);display:inline;vertical-align:middle}.n-expand{flex:1}.n-tag{border-radius:var(--n-border-radius-s);border:1px solid var(--_n-tag-border-color);background:var(--_n-tag-background-color);font-size:var(--_n-tag-font-size);font-family:var(--n-font-family);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-tight);letter-spacing:0;min-block-size:1.75rem;padding:0 var(--n-space-s);color:var(--n-color-text);gap:calc(var(--n-space-xs) * 1.5);align-items:center;display:inline-flex;white-space:nowrap;position:relative}.n-input-container{position:relative}input{appearance:none;background:var(--n-color-active);border:1px solid var(--_n-tag-checkbox-border-color);border-radius:var(--n-border-radius-s);display:block;inline-size:var(--_n-tag-checkbox-size);block-size:var(--_n-tag-checkbox-size);cursor:pointer}:host(:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-border-color:var(--n-color-border-strong);box-shadow:var(--n-box-shadow)}:host([variant=selectable]) .n-tag:hover{--_n-tag-border-color:var(--n-color-border-hover)}.n-tag:has(input:checked){--_n-tag-background-color:var(--n-color-button)}input:checked{--_n-tag-checkbox-border-color:var(--n-color-accent);background:var(--_n-tag-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important}:host([variant=selectable]:focus-within) .n-tag{box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host(:not([disabled])) label:active{opacity:.8;transform:translateY(1px);transition:none}nord-icon.icon-checked{--_n-icon-size:var(--n-size-icon-xxs);display:none;position:absolute;color:var(--n-color-text-on-accent);inset:calc(var(--n-space-xs)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked~nord-icon.icon-checked{display:block}label{-webkit-user-select:none;user-select:none;cursor:pointer}.n-remove-button{-webkit-appearance:none;appearance:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border:0;color:var(--n-color-text);border-radius:calc(var(--n-border-radius-s) - 1px);background:0 0;margin-block-start:calc(var(--n-space-xs) * -1);margin-block-end:calc(var(--n-space-xs) * -1);margin-inline-start:0;margin-inline-end:calc(var(--n-space-s) * -1);padding:calc(var(--n-space-s) + 1px)}.n-remove-button nord-icon{--_n-icon-size:var(--n-size-icon-xxs);color:var(--n-color-icon)}.n-remove-button:hover{background:var(--n-color-surface-lowered)}.n-remove-button:hover nord-icon{color:var(--n-color-icon-hover)}.n-remove-button:focus-visible{outline:0!important}.n-remove-button:focus{outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host(:not([disabled])) .n-remove-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([disabled]:not([variant=default])) .n-tag{--_n-tag-background-color:var(--n-color-surface-lowered);--_n-tag-border-color:var(--_n-tag-background-color);color:var(--n-color-text-weaker);cursor:default;opacity:.5}:host([disabled]) input{background:var(--_n-tag-checkbox-accent-color);cursor:default;opacity:1}:host([disabled]) input:not(:checked){--_n-tag-checkbox-accent-color:var(--n-color-background);--_n-tag-checkbox-border-color:var(--n-color-border-hover)}:host([disabled]) .n-remove-button{cursor:default}:host([disabled]) .n-remove-button:hover{background:0 0}:host([disabled]) .n-remove-button:hover nord-icon{color:var(--n-color-icon)}:host([disabled]:is([variant=selectable],[variant=removable])) .n-tag{box-shadow:none}:host([size="s"]) .n-tag{--_n-tag-font-size:var(--n-font-size-s)}`;d.registerIcon(s),d.registerIcon(l);let f=class extends(function(o){class e extends o{connectedCallback(){super.connectedCallback(),e._warningLogged||(console.warn(`NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,"font-weight:bold","font-weight:normal"),e._warningLogged=!0)}}return e._warningLogged=!1,e}(b(v(t)))){constructor(){super(...arguments),this.localize=new u(this),this.formData=new h(this,{value:()=>this.formValue}),this.inputId="input",this.variant="default",this.checked=!1,this.size="m"}get formValue(){return"selectable"===this.variant&&this.checked?this.value||"on":void 0}handleChange(o){const e=o.target;this.checked=e.checked,o.stopPropagation(),this.dispatchEvent(new p("change"))}handleRemove(){this.dispatchEvent(new p("remove"))}render(){switch(this.variant){case"selectable":return this.renderSelectableTag();case"removable":return this.renderRemovableTag();default:return this.renderStaticTag()}}renderStaticTag(){return e`<div class="n-tag"><slot></slot></div>`}renderRemovableTag(){return e`<div class="n-tag"><slot></slot><button class="n-remove-button" @click="${this.handleRemove}" ?disabled="${this.disabled}"><nord-icon name="interface-close-small" label="${this.localize.term("removeLabel")}"></nord-icon></button></div>`}renderSelectableTag(){return e`<label for="${this.inputId}" class="n-tag"><div class="n-input-container"><input ${c(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${i(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small"></nord-icon></div><div class="n-expand"><slot></slot></div></label>`}};f.styles=[m,g],n([a({reflect:!0})],f.prototype,"variant",void 0),n([a({reflect:!0,type:Boolean})],f.prototype,"checked",void 0),n([a({reflect:!0})],f.prototype,"size",void 0),f=n([r("nord-tag")],f);var k=f;export{k as default};
+//# sourceMappingURL=Tag.js.map

package/lib/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sources":["../src/tag/Tag.ts","../src/common/mixins/DraftComponentMixin.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport * as checkedIcon from \"@nordhealth/icons/lib/assets/interface-checked-small.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\nimport Icon from \"../icon/Icon.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FormDataController } from \"../common/controllers/FormDataController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tag.css\"\n\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(closeIcon)\n\n/**\n * Tags represent a set of keywords that help label, categorize,\n * and organize objects. Commonly used to signify the attributes of an object.\n *\n * @status draft\n * @category text\n * @slot - The tag content.\n *\n * @localization removeLabel - Accessible label for the remove button.\n */\n@customElement(\"nord-tag\")\nexport default class Tag extends DraftComponentMixin(InputMixin(FocusableMixin(LitElement))) {\n  static styles = [componentStyle, style]\n\n  private localize = new LocalizeController<\"nord-tag\">(this)\n\n  protected formData = new FormDataController(this, { value: () => this.formValue })\n\n  protected get formValue() {\n    return this.variant === \"selectable\" && this.checked ? this.value || \"on\" : undefined\n  }\n\n  protected inputId = \"input\"\n\n  /**\n   * The behavioral variant of the tag.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"removable\" | \"selectable\" = \"default\"\n\n  /**\n   * Controls whether the tag is checked or not (only relevant when variant is set to `selectable`).\n   */\n  @property({ reflect: true, type: Boolean }) checked: boolean = false\n\n  /**\n   * The size of the tag. This affects the font-size.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" = \"m\"\n\n  protected handleChange(e: Event) {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n\n    e.stopPropagation()\n\n    /**\n     * Fired whenever the input's value is changed via user interaction.\n     */\n    this.dispatchEvent(new NordEvent(\"change\"))\n  }\n\n  protected handleRemove() {\n    /**\n     * Fired when the remove button is activated. This event should be used to remove the tag from the DOM.\n     */\n    this.dispatchEvent(new NordEvent(\"remove\"))\n  }\n\n  render() {\n    switch (this.variant) {\n      case \"selectable\":\n        return this.renderSelectableTag()\n      case \"removable\":\n        return this.renderRemovableTag()\n      case \"default\":\n      default:\n        return this.renderStaticTag()\n    }\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  private renderStaticTag() {\n    return html`\n      <div class=\"n-tag\">\n        <slot></slot>\n      </div>\n    `\n  }\n\n  private renderRemovableTag() {\n    return html`\n      <div class=\"n-tag\">\n        <slot></slot>\n        <button class=\"n-remove-button\" @click=${this.handleRemove} ?disabled=${this.disabled}>\n          <nord-icon name=\"interface-close-small\" label=${this.localize.term(\"removeLabel\")}></nord-icon>\n        </button>\n      </div>\n    `\n  }\n\n  private renderSelectableTag() {\n    return html`\n      <label for=${this.inputId} class=\"n-tag\">\n        <div class=\"n-input-container\">\n          <input\n            ${ref(this.focusableRef)}\n            class=\"n-input\"\n            id=${this.inputId}\n            type=\"checkbox\"\n            name=${ifDefined(this.name)}\n            .value=${this.value}\n            .checked=${this.checked}\n            ?disabled=${this.disabled}\n            @change=${this.handleChange}\n          />\n          <nord-icon class=\"icon-checked\" name=\"interface-checked-small\"></nord-icon>\n        </div>\n        <div class=\"n-expand\">\n          <slot></slot>\n        </div>\n      </label>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-tag\": Tag\n  }\n}\n","import { LitElement } from \"lit\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport function DraftComponentMixin<T extends Constructable<LitElement>>(superClass: T): T {\n  class DraftComponent extends superClass {\n    private static _warningLogged = false\n\n    connectedCallback() {\n      super.connectedCallback()\n\n      if (process.env.NODE_ENV !== \"development\" && !DraftComponent._warningLogged) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,\n          \"font-weight:bold\",\n          \"font-weight:normal\"\n        )\n        DraftComponent._warningLogged = true\n      }\n    }\n  }\n\n  return DraftComponent\n}\n"],"names":["Icon","registerIcon","checkedIcon","closeIcon","Tag","superClass","DraftComponent","connectedCallback","super","_warningLogged","console","warn","this","localName","DraftComponentMixin","InputMixin","FocusableMixin","LitElement","constructor","localize","LocalizeController","formData","FormDataController","value","formValue","inputId","variant","checked","size","undefined","handleChange","e","target","stopPropagation","dispatchEvent","NordEvent","handleRemove","render","renderSelectableTag","renderRemovableTag","renderStaticTag","html","disabled","term","ref","focusableRef","ifDefined","name","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"+4JAiBAA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAaH,IAAMC,EAAN,cC3BT,SAAmEC,GACvE,MAAMC,UAAuBD,EAG3B,iBAAAE,GACEC,MAAMD,oBAEyCD,EAAeG,iBAE5DC,QAAQC,KACN,WAAWC,KAAKC,0EAChB,mBACA,sBAEFP,EAAeG,gBAAiB,EAEnC,EAGH,OAjBiBH,EAAcG,gBAAG,EAiB3BH,CACT,CDOiCQ,CAAoBC,EAAWC,EAAeC,MAAhE,WAAAC,uBAGLN,KAAAO,SAAW,IAAIC,EAA+BR,MAE5CA,KAAAS,SAAW,IAAIC,EAAmBV,KAAM,CAAEW,MAAO,IAAMX,KAAKY,YAM5DZ,KAAOa,QAAG,QAKSb,KAAOc,QAA2C,UAKnCd,KAAOe,SAAY,EAKlCf,KAAIgB,KAAc,GA4EhD,CA/FC,aAAcJ,GACZ,MAAwB,eAAjBZ,KAAKc,SAA4Bd,KAAKe,QAAUf,KAAKW,OAAS,UAAOM,CAC7E,CAmBS,YAAAC,CAAaC,GACrB,MAAMC,EAASD,EAAEC,OACjBpB,KAAKe,QAAUK,EAAOL,QAEtBI,EAAEE,kBAKFrB,KAAKsB,cAAc,IAAIC,EAAU,UAClC,CAES,YAAAC,GAIRxB,KAAKsB,cAAc,IAAIC,EAAU,UAClC,CAED,MAAAE,GACE,OAAQzB,KAAKc,SACX,IAAK,aACH,OAAOd,KAAK0B,sBACd,IAAK,YACH,OAAO1B,KAAK2B,qBAEd,QACE,OAAO3B,KAAK4B,kBAEjB,CAGO,eAAAA,GACN,OAAOC,CAAI,wCAKZ,CAEO,kBAAAF,GACN,OAAOE,CAAI,2EAGkC7B,KAAKwB,4BAA0BxB,KAAK8B,4DAC3B9B,KAAKO,SAASwB,KAAK,6CAI1E,CAEO,mBAAAL,GACN,OAAOG,CAAI,eACI7B,KAAKa,gEAGVmB,EAAIhC,KAAKiC,qCAENjC,KAAKa,kCAEHqB,EAAUlC,KAAKmC,kBACbnC,KAAKW,oBACHX,KAAKe,uBACJf,KAAK8B,sBACP9B,KAAKkB,kJASxB,GApGM1B,EAAA4C,OAAS,CAACC,EAAgBC,GAeJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmEjD,EAAAkD,UAAA,eAAA,GAK5CH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAmCpD,EAAAkD,UAAA,eAAA,GAKvCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6BjD,EAAAkD,UAAA,YAAA,GA1B/BlD,EAAG+C,EAAA,CADvBM,EAAc,aACMrD,SAAAA"}