@nordhealth/components 4.12.0 → 4.12.2

package/lib/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport style from \"./Modal.css\"\nimport { ModalController } from \"./ModalController.js\"\n\nimport \"../footer/Footer.js\"\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n *\n * @status ready\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot feature - Slot for full bleed content like an image.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\n *\n * @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the header of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n *\n * @localization closeLabel - Accessible label for the close button.\n */\n@customElement(\"nord-modal\")\nexport default class Modal extends LitElement {\n  static styles = [componentStyle, style]\n\n  @query(\".n-modal\", true) private modal!: HTMLDivElement\n  @query(\".n-modal-backdrop\", true) private backdrop!: HTMLDivElement\n\n  private defaultSlot = new SlotController(this)\n  private headerSlot = new SlotController(this, \"header\")\n  private featureSlot = new SlotController(this, \"feature\")\n  private footerSlot = new SlotController(this, \"footer\")\n\n  private localize = new LocalizeController<\"nord-modal\">(this)\n  private modalController = new ModalController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.handleDismiss(),\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: returnValue => this.close(returnValue),\n  })\n\n  /**\n   * Controls whether the modal is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /**\n   * Controls the max-width of the modal when open.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" | \"xl\" = \"m\"\n\n  /**\n   * The reason why the modal was closed. This typically indicates\n   * which button the user pressed to close the modal, though any value\n   * can be supplied if the modal is programmatically closed.\n   */\n  @property({ attribute: false }) returnValue: string = \"\"\n\n  /**\n   * By default if a modal is too big for the browser window,\n   * the entire modal will scroll. This setting changes that behavior\n   * so that the body of the modal scrolls instead, with the modal\n   * itself remaining fixed.\n   */\n  @property({ type: Boolean, reflect: true }) scrollable = false\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.setAttribute(\"role\", \"dialog\")\n  }\n\n  /**\n   * Show the modal, automatically moving focus to the modal or a child\n   * element with an `autofocus` attribute.\n   */\n  showModal() {\n    this.open = true\n  }\n\n  /**\n   * Programmatically close the modal.\n   * @param returnValue An optional value to indicate why the modal was closed.\n   */\n  close(returnValue?: string) {\n    this.open = false\n\n    if (returnValue != null) {\n      this.returnValue = returnValue\n    }\n\n    this.dispatchEvent(new NordEvent(\"close\"))\n  }\n\n  /**\n   * Programmatically focus the modal.\n   * @param options An object which controls aspects of the focusing process.\n   */\n  focus(options?: FocusOptions) {\n    this.modal.focus({ preventScroll: true, ...options })\n  }\n\n  render() {\n    return html`\n      <div class=\"n-modal-backdrop\">\n        <div\n          class=${classMap({\n            \"n-modal\": true,\n            \"n-overflow-hidden\": this.featureSlot.hasContent && this.defaultSlot.isEmpty && this.footerSlot.isEmpty,\n          })}\n          tabindex=\"0\"\n        >\n          <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n            <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n            <button class=\"n-close\" @click=${this.handleDismiss}>\n              <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term(\"closeLabel\")}></nord-icon>\n            </button>\n          </div>\n\n          <div class=\"n-modal-body\">\n            <slot\n              name=${this.featureSlot.slotName}\n              class=${this.headerSlot.isEmpty ? \"n-rounded-top\" : \"\"}\n              ?hidden=${this.featureSlot.isEmpty}\n            ></slot>\n            <slot class=${this.defaultSlot.isEmpty ? \"\" : \"n-body-padded\"}></slot>\n          </div>\n\n          <nord-footer ?hidden=${this.footerSlot.isEmpty}>\n            <slot name=${this.footerSlot.slotName}></slot>\n          </nord-footer>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"open\", \"updated\")\n  protected handleOpenUpdated(prev: boolean) {\n    if (this.open) {\n      this.modalController.block()\n    } else if (prev === true) {\n      this.modalController.unblock()\n    }\n  }\n\n  private handleDismiss() {\n    // allow cancelling of close\n    const allowed = this.dispatchEvent(new NordEvent(\"cancel\", { cancelable: true }))\n\n    if (allowed) {\n      this.close()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-modal\": Modal\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","Modal","LitElement","constructor","this","defaultSlot","SlotController","headerSlot","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","handleDismiss","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","super","setAttribute","showModal","dispatchEvent","NordEvent","focus","options","preventScroll","render","html","classMap","hasContent","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","cancelable","styles","componentStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"guKAiBAA,EAAKC,aAAaC,GAuBH,IAAMC,EAAN,cAAoBC,EAApB,WAAAC,uBAMLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAUG,WAAG,IAAID,EAAeF,KAAM,UACtCA,KAAWI,YAAG,IAAIF,EAAeF,KAAM,WACvCA,KAAUK,WAAG,IAAIH,EAAeF,KAAM,UAEtCA,KAAAM,SAAW,IAAIC,EAAiCP,MAChDA,KAAAQ,gBAAkB,IAAIC,EAAgBT,KAAM,CAClDU,OAAQ,IAAMV,KAAKW,KACnBC,UAAW,IAAMZ,KAAKa,gBACtBC,OAAQ,IAAMd,KAAKe,MACnBC,SAAU,IAAMhB,KAAKgB,SACrBC,MAAOC,GAAelB,KAAKiB,MAAMC,KAMSlB,KAAIW,MAAG,EAKtBX,KAAImB,KAA2B,IAO5BnB,KAAWkB,YAAW,GAQVlB,KAAUoB,YAAG,CAyF1D,CAvFC,iBAAAC,GACEC,MAAMD,oBAENrB,KAAKuB,aAAa,OAAQ,SAC3B,CAMD,SAAAC,GACExB,KAAKW,MAAO,CACb,CAMD,KAAAM,CAAMC,GACJlB,KAAKW,MAAO,EAEO,MAAfO,IACFlB,KAAKkB,YAAcA,GAGrBlB,KAAKyB,cAAc,IAAIC,EAAU,SAClC,CAMD,KAAAC,CAAMC,GACJ5B,KAAKe,MAAMY,MAAM,CAAEE,eAAe,KAASD,GAC5C,CAED,MAAAE,GACE,OAAOC,CAAI,6CAGGC,EAAS,CACf,WAAW,EACX,oBAAqBhC,KAAKI,YAAY6B,YAAcjC,KAAKC,YAAYiC,SAAWlC,KAAKK,WAAW6B,8EAI9ClC,KAAKG,WAAW+B,yCACpClC,KAAKG,WAAWgC,oDACbnC,KAAKa,0EACqBb,KAAKM,SAAS8B,KAAK,mFAMrEpC,KAAKI,YAAY+B,oBAChBnC,KAAKG,WAAW+B,QAAU,gBAAkB,gBAC1ClC,KAAKI,YAAY8B,gCAEflC,KAAKC,YAAYiC,QAAU,GAAK,uDAGzBlC,KAAKK,WAAW6B,wBACxBlC,KAAKK,WAAW8B,6CAKtC,CAGS,iBAAAE,CAAkBC,GACtBtC,KAAKW,KACPX,KAAKQ,gBAAgB+B,SACH,IAATD,GACTtC,KAAKQ,gBAAgBgC,SAExB,CAEO,aAAA3B,GAEUb,KAAKyB,cAAc,IAAIC,EAAU,SAAU,CAAEe,YAAY,MAGvEzC,KAAKiB,OAER,GAlIMpB,EAAA6C,OAAS,CAACC,EAAgBC,GAEAC,EAAA,CAAhCC,EAAM,YAAY,IAAoCjD,EAAAkD,UAAA,aAAA,GACbF,EAAA,CAAzCC,EAAM,qBAAqB,IAAuCjD,EAAAkD,UAAA,gBAAA,GAmBvBF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAoBtD,EAAAkD,UAAA,YAAA,GAK3BF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAA0CtD,EAAAkD,UAAA,YAAA,GAO/BF,EAAA,CAA/BG,EAAS,CAAEI,WAAW,KAAiCvD,EAAAkD,UAAA,mBAAA,GAQZF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAA0BtD,EAAAkD,UAAA,kBAAA,GAyEpDF,EAAA,CADTQ,EAAQ,OAAQ,YAOhBxD,EAAAkD,UAAA,oBAAA,MA1HkBlD,EAAKgD,EAAA,CADzBS,EAAc,eACMzD,SAAAA"}
+{"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { NordEvent } from '../common/events.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Modal.css'\nimport { ModalController } from './ModalController.js'\n\nimport '../footer/Footer.js'\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n *\n * @status ready\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot feature - Slot for full bleed content like an image.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\n *\n * @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the header of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n *\n * @localization closeLabel - Accessible label for the close button.\n */\n@customElement('nord-modal')\nexport default class Modal extends LitElement {\n  static styles = [componentStyle, style]\n\n  @query('.n-modal', true) private modal!: HTMLDivElement\n  @query('.n-modal-backdrop', true) private backdrop!: HTMLDivElement\n\n  private defaultSlot = new SlotController(this)\n  private headerSlot = new SlotController(this, 'header')\n  private featureSlot = new SlotController(this, 'feature')\n  private footerSlot = new SlotController(this, 'footer')\n\n  private localize = new LocalizeController<'nord-modal'>(this)\n  private modalController = new ModalController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.handleDismiss(),\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: returnValue => this.close(returnValue),\n  })\n\n  /**\n   * Controls whether the modal is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /**\n   * Controls the max-width of the modal when open.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' | 'xl' = 'm'\n\n  /**\n   * The reason why the modal was closed. This typically indicates\n   * which button the user pressed to close the modal, though any value\n   * can be supplied if the modal is programmatically closed.\n   */\n  @property({ attribute: false }) returnValue: string = ''\n\n  /**\n   * By default if a modal is too big for the browser window,\n   * the entire modal will scroll. This setting changes that behavior\n   * so that the body of the modal scrolls instead, with the modal\n   * itself remaining fixed.\n   */\n  @property({ type: Boolean, reflect: true }) scrollable = false\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.setAttribute('role', 'dialog')\n  }\n\n  /**\n   * Show the modal, automatically moving focus to the modal or a child\n   * element with an `autofocus` attribute.\n   */\n  showModal() {\n    this.open = true\n  }\n\n  /**\n   * Programmatically close the modal.\n   * @param returnValue An optional value to indicate why the modal was closed.\n   */\n  close(returnValue?: string) {\n    this.open = false\n\n    if (returnValue != null) {\n      this.returnValue = returnValue\n    }\n\n    this.dispatchEvent(new NordEvent('close'))\n  }\n\n  /**\n   * Programmatically focus the modal.\n   * @param options An object which controls aspects of the focusing process.\n   */\n  focus(options?: FocusOptions) {\n    this.modal.focus({ preventScroll: true, ...options })\n  }\n\n  render() {\n    return html`\n      <div class=\"n-modal-backdrop\">\n        <div\n          class=${classMap({\n            'n-modal': true,\n            'n-overflow-hidden': this.featureSlot.hasContent && this.defaultSlot.isEmpty && this.footerSlot.isEmpty,\n          })}\n          tabindex=\"0\"\n        >\n          <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n            <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n            <button class=\"n-close\" @click=${this.handleDismiss}>\n              <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term('closeLabel')}></nord-icon>\n            </button>\n          </div>\n\n          <div class=\"n-modal-body\">\n            <slot\n              name=${this.featureSlot.slotName}\n              class=${this.headerSlot.isEmpty ? 'n-rounded-top' : ''}\n              ?hidden=${this.featureSlot.isEmpty}\n            ></slot>\n            <slot class=${this.defaultSlot.isEmpty ? '' : 'n-body-padded'}></slot>\n          </div>\n\n          <nord-footer ?hidden=${this.footerSlot.isEmpty}>\n            <slot name=${this.footerSlot.slotName}></slot>\n          </nord-footer>\n        </div>\n      </div>\n    `\n  }\n\n  @observe('open', 'updated')\n  protected handleOpenUpdated(prev: boolean) {\n    if (this.open) {\n      this.modalController.block()\n    }\n    else if (prev === true) {\n      this.modalController.unblock()\n    }\n  }\n\n  private handleDismiss() {\n    // allow cancelling of close\n    const allowed = this.dispatchEvent(new NordEvent('cancel', { cancelable: true }))\n\n    if (allowed) {\n      this.close()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-modal': Modal\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","Modal","LitElement","constructor","this","defaultSlot","SlotController","headerSlot","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","handleDismiss","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","super","setAttribute","showModal","dispatchEvent","NordEvent","focus","options","preventScroll","render","html","classMap","hasContent","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","cancelable","styles","componentStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"guKAiBAA,EAAKC,aAAaC,GAuBH,IAAMC,EAAN,cAAoBC,EAApB,WAAAC,uBAMLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAUG,WAAG,IAAID,EAAeF,KAAM,UACtCA,KAAWI,YAAG,IAAIF,EAAeF,KAAM,WACvCA,KAAUK,WAAG,IAAIH,EAAeF,KAAM,UAEtCA,KAAAM,SAAW,IAAIC,EAAiCP,MAChDA,KAAAQ,gBAAkB,IAAIC,EAAgBT,KAAM,CAClDU,OAAQ,IAAMV,KAAKW,KACnBC,UAAW,IAAMZ,KAAKa,gBACtBC,OAAQ,IAAMd,KAAKe,MACnBC,SAAU,IAAMhB,KAAKgB,SACrBC,MAAOC,GAAelB,KAAKiB,MAAMC,KAMSlB,KAAIW,MAAG,EAKtBX,KAAImB,KAA2B,IAO5BnB,KAAWkB,YAAW,GAQVlB,KAAUoB,YAAG,CA0F1D,CAxFC,iBAAAC,GACEC,MAAMD,oBAENrB,KAAKuB,aAAa,OAAQ,SAC3B,CAMD,SAAAC,GACExB,KAAKW,MAAO,CACb,CAMD,KAAAM,CAAMC,GACJlB,KAAKW,MAAO,EAEO,MAAfO,IACFlB,KAAKkB,YAAcA,GAGrBlB,KAAKyB,cAAc,IAAIC,EAAU,SAClC,CAMD,KAAAC,CAAMC,GACJ5B,KAAKe,MAAMY,MAAM,CAAEE,eAAe,KAASD,GAC5C,CAED,MAAAE,GACE,OAAOC,CAAI,6CAGGC,EAAS,CACf,WAAW,EACX,oBAAqBhC,KAAKI,YAAY6B,YAAcjC,KAAKC,YAAYiC,SAAWlC,KAAKK,WAAW6B,8EAI9ClC,KAAKG,WAAW+B,yCACpClC,KAAKG,WAAWgC,oDACbnC,KAAKa,0EACqBb,KAAKM,SAAS8B,KAAK,mFAMrEpC,KAAKI,YAAY+B,oBAChBnC,KAAKG,WAAW+B,QAAU,gBAAkB,gBAC1ClC,KAAKI,YAAY8B,gCAEflC,KAAKC,YAAYiC,QAAU,GAAK,uDAGzBlC,KAAKK,WAAW6B,wBACxBlC,KAAKK,WAAW8B,6CAKtC,CAGS,iBAAAE,CAAkBC,GACtBtC,KAAKW,KACPX,KAAKQ,gBAAgB+B,SAEL,IAATD,GACPtC,KAAKQ,gBAAgBgC,SAExB,CAEO,aAAA3B,GAEUb,KAAKyB,cAAc,IAAIC,EAAU,SAAU,CAAEe,YAAY,MAGvEzC,KAAKiB,OAER,GAnIMpB,EAAA6C,OAAS,CAACC,EAAgBC,GAEAC,EAAA,CAAhCC,EAAM,YAAY,IAAoCjD,EAAAkD,UAAA,aAAA,GACbF,EAAA,CAAzCC,EAAM,qBAAqB,IAAuCjD,EAAAkD,UAAA,gBAAA,GAmBvBF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAoBtD,EAAAkD,UAAA,YAAA,GAK3BF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAA0CtD,EAAAkD,UAAA,YAAA,GAO/BF,EAAA,CAA/BG,EAAS,CAAEI,WAAW,KAAiCvD,EAAAkD,UAAA,mBAAA,GAQZF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAA0BtD,EAAAkD,UAAA,kBAAA,GAyEpDF,EAAA,CADTQ,EAAQ,OAAQ,YAQhBxD,EAAAkD,UAAA,oBAAA,MA3HkBlD,EAAKgD,EAAA,CADzBS,EAAc,eACMzD,SAAAA"}

package/lib/ModalController.js

@@ -1,2 +1,2 @@
-import{E as t}from"./EventController-BBOmvfLa.js";import{L as s}from"./LightDismissController-4pH8cdko.js";import{S as e}from"./ScrollbarController-C5CMxfb3.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";function i(t,s){t.forEach((t=>((t,s)=>{if(s){const s=t.getAttribute("inert");null!==s&&t.setAttribute("data-n-inert",s),t.setAttribute("inert","")}else{const s=t.getAttribute("data-n-inert");null!==s?(t.setAttribute("inert",s),t.removeAttribute("data-n-inert")):t.removeAttribute("inert")}})(t,s)))}function o(t){const s=[];let e=t.nextElementSibling;for(;e;)s.push(e),e=e.nextElementSibling;for(e=t.previousElementSibling;e;)s.push(e),e=e.previousElementSibling;return t.parentElement&&t.parentElement!==document.body&&s.push(...o(t.parentElement)),s}class n{constructor(t){this.host=t,this.inertElements=[],t.addController(this)}hostDisconnected(){this.release()}trap(){const t=o(this.host);i(t,!0),this.inertElements=t}release(){i(this.inertElements,!1),this.inertElements=[]}}class r{constructor(i,o){this.host=i,this.trackLastButton=t=>{const s=t.target;"button"===s.localName&&(this.lastButton=s)},this.polyfillSubmitter=t=>{t.submitter=this.lastButton},this.handleTransitionEnd=t=>{this.options.isOpen()||t.target!==this.host||this.scrollBar.unlockScroll()},this.handleLightDismiss=t=>{this.host.contains(t.target)&&this.options.onDismiss(t)},this.handleSubmit=t=>{this.lastButton=void 0;const s=t.target,e=t.submitter,i="dialog"===s.method,o="dialog"===s.getAttribute("method");o&&!i&&t.preventDefault(),(o||i)&&this.options.close(null==e?void 0:e.value)},i.addController(this),this.options=o,this.scrollBar=new e(i),this.focusTrap=new n(i),this.events=new t(i),this.lightDismiss=new s(i,{isOpen:o.isOpen,isDismissible:t=>t!==o.dialog(),onDismiss:this.handleLightDismiss})}hostConnected(){window.SubmitEvent||(this.events.listen(this.host,"click",this.trackLastButton,!0),this.events.listen(this.host,"submit",this.polyfillSubmitter,!0)),this.events.listen(this.host,"transitionend",this.handleTransitionEnd),this.events.listen(this.host,"submit",this.handleSubmit)}hostDisconnected(){r.openModals.remove(this)}block(){var t;null===(t=r.openModals.top)||void 0===t||t.focusTrap.release(),r.openModals.push(this),this.scrollBar.lockScroll(),this.trigger=document.activeElement;(this.host.querySelector("[autofocus]")||this.host).focus(),this.focusTrap.trap()}unblock(){var t,s;r.openModals.top===this&&(r.openModals.pop(),this.options.backdrop().scrollTop=0,this.focusTrap.release(),null===(t=this.trigger)||void 0===t||t.focus(),this.trigger=void 0,null===(s=r.openModals.top)||void 0===s||s.focusTrap.trap())}}r.openModals=new class{constructor(){this.items=[]}get length(){return this.items.length}get top(){return this.items[this.length-1]}push(t){this.items.push(t)}pop(){return this.items.pop()}remove(t){const s=this.items.indexOf(t);-1!==s&&this.items.splice(s,1)}};export{r as ModalController};
+import{E as t}from"./EventController-BBOmvfLa.js";import{L as s}from"./LightDismissController-4pH8cdko.js";import{S as i}from"./ScrollbarController-BFC67Y2x.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";function e(t,s){t.forEach((t=>function(t,s){if(s){const s=t.getAttribute("inert");null!==s&&t.setAttribute("data-n-inert",s),t.setAttribute("inert","")}else{const s=t.getAttribute("data-n-inert");null!==s?(t.setAttribute("inert",s),t.removeAttribute("data-n-inert")):t.removeAttribute("inert")}}(t,s)))}function o(t){const s=[];let i=t.nextElementSibling;for(;i;)s.push(i),i=i.nextElementSibling;for(i=t.previousElementSibling;i;)s.push(i),i=i.previousElementSibling;return t.parentElement&&t.parentElement!==document.body&&s.push(...o(t.parentElement)),s}class n{constructor(t){this.host=t,this.inertElements=[],t.addController(this)}hostDisconnected(){this.release()}trap(){const t=o(this.host);e(t,!0),this.inertElements=t}release(){e(this.inertElements,!1),this.inertElements=[]}}class r{constructor(e,o){this.host=e,this.trackLastButton=t=>{const s=t.target;"button"===s.localName&&(this.lastButton=s)},this.polyfillSubmitter=t=>{t.submitter=this.lastButton},this.handleTransitionEnd=t=>{this.options.isOpen()||t.target!==this.host||this.scrollBar.unlockScroll()},this.handleLightDismiss=t=>{this.host.contains(t.target)&&this.options.onDismiss(t)},this.handleSubmit=t=>{this.lastButton=void 0;const s=t.target,i=t.submitter,e="dialog"===s.method,o="dialog"===s.getAttribute("method");o&&!e&&t.preventDefault(),(o||e)&&this.options.close(null==i?void 0:i.value)},e.addController(this),this.options=o,this.scrollBar=new i(e),this.focusTrap=new n(e),this.events=new t(e),this.lightDismiss=new s(e,{isOpen:o.isOpen,isDismissible:t=>t!==o.dialog(),onDismiss:this.handleLightDismiss})}hostConnected(){window.SubmitEvent||(this.events.listen(this.host,"click",this.trackLastButton,!0),this.events.listen(this.host,"submit",this.polyfillSubmitter,!0)),this.events.listen(this.host,"transitionend",this.handleTransitionEnd),this.events.listen(this.host,"submit",this.handleSubmit)}hostDisconnected(){r.openModals.remove(this)}block(){var t;null===(t=r.openModals.top)||void 0===t||t.focusTrap.release(),r.openModals.push(this),this.scrollBar.lockScroll(),this.trigger=document.activeElement;(this.host.querySelector("[autofocus]")||this.host).focus(),this.focusTrap.trap()}unblock(){var t,s;r.openModals.top===this&&(r.openModals.pop(),this.options.backdrop().scrollTop=0,this.focusTrap.release(),null===(t=this.trigger)||void 0===t||t.focus(),this.trigger=void 0,null===(s=r.openModals.top)||void 0===s||s.focusTrap.trap())}}r.openModals=new class{constructor(){this.items=[]}get length(){return this.items.length}get top(){return this.items[this.length-1]}push(t){this.items.push(t)}pop(){return this.items.pop()}remove(t){const s=this.items.indexOf(t);-1!==s&&this.items.splice(s,1)}};export{r as ModalController};
 //# sourceMappingURL=ModalController.js.map

package/lib/ModalController.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalController.js","sources":["../src/common/inert.ts","../src/common/controllers/FocusTrapController.ts","../src/modal/ModalController.ts"],"sourcesContent":["/**\n * Set or remove the `inert` attribute on an element.\n *\n * @param element The element to set or remove the `inert` attribute on.\n * @param enabled Whether to set or remove the `inert` attribute.\n */\nconst setInertAttribute = (element: Element, enabled: boolean) => {\n  if (enabled) {\n    const current = element.getAttribute(\"inert\")\n\n    // store previous value\n    if (current !== null) {\n      element.setAttribute(\"data-n-inert\", current)\n    }\n\n    element.setAttribute(\"inert\", \"\")\n  } else {\n    const current = element.getAttribute(\"data-n-inert\")\n\n    // restore previous value if necessary\n    if (current !== null) {\n      element.setAttribute(\"inert\", current)\n      element.removeAttribute(\"data-n-inert\")\n    } else {\n      element.removeAttribute(\"inert\")\n    }\n  }\n}\n\n/**\n * Set or remove the `inert` attribute on all given elements.\n *\n * @param elements The elements to set or remove the `inert` attribute on.\n * @param enabled Whether to set or remove the `inert` attribute.\n */\nexport function setInertAttributes(elements: Element[], enabled: boolean) {\n  elements.forEach(element => setInertAttribute(element, enabled))\n}\n\n/**\n * Get all siblings of an element, including the siblings of its parents.\n * Use this to find all elements that should be inert when a modal is open.\n * And then use `setInertAttributes` to set or remove the `inert` attribute\n * on all of them.\n */\nexport function getElementsAround(element: Element): Element[] {\n  const elements = []\n  let next = element.nextElementSibling\n\n  while (next) {\n    elements.push(next)\n    next = next.nextElementSibling\n  }\n\n  next = element.previousElementSibling\n\n  while (next) {\n    elements.push(next)\n    next = next.previousElementSibling\n  }\n\n  if (element.parentElement && element.parentElement !== document.body) {\n    elements.push(...getElementsAround(element.parentElement))\n  }\n\n  return elements\n}\n","import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { getElementsAround, setInertAttributes } from \"../../common/inert.js\"\n\nexport class FocusTrapController implements ReactiveController {\n  private inertElements: Element[] = []\n\n  constructor(private host: ReactiveControllerHost & HTMLElement) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.release()\n  }\n\n  trap() {\n    const elements = getElementsAround(this.host)\n\n    setInertAttributes(elements, true)\n    this.inertElements = elements\n  }\n\n  release() {\n    setInertAttributes(this.inertElements, false)\n    this.inertElements = []\n  }\n}\n","/* eslint-disable max-classes-per-file */\nimport { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { FocusTrapController } from \"../common/controllers/FocusTrapController.js\"\nimport { LightDismissController, LightDismissOptions } from \"../common/controllers/LightDismissController.js\"\nimport { ScrollbarController } from \"../common/controllers/ScrollbarController.js\"\n\nclass Stack<T> {\n  private items: T[] = []\n\n  get length() {\n    return this.items.length\n  }\n\n  get top(): T | undefined {\n    return this.items[this.length - 1]\n  }\n\n  push(item: T) {\n    this.items.push(item)\n  }\n\n  pop() {\n    return this.items.pop()\n  }\n\n  remove(item: T) {\n    const index = this.items.indexOf(item)\n\n    if (index !== -1) {\n      this.items.splice(index, 1)\n    }\n  }\n}\n\nconst isButton = (element: Element): element is HTMLButtonElement => element.localName === \"button\"\n\ntype ModalControllerOptions = {\n  isOpen: LightDismissOptions[\"isOpen\"]\n  onDismiss: LightDismissOptions[\"onDismiss\"]\n  close: (returnValue?: string) => void\n  backdrop: () => HTMLElement\n  dialog: () => HTMLElement\n}\n\nexport class ModalController implements ReactiveController {\n  private static openModals = new Stack<ModalController>()\n\n  private scrollBar: ScrollbarController\n  private focusTrap: FocusTrapController\n  private lightDismiss: LightDismissController\n  private events: EventController\n  private options: ModalControllerOptions\n\n  private trigger?: HTMLElement\n  private lastButton?: HTMLButtonElement\n\n  constructor(\n    private host: ReactiveControllerHost & HTMLElement,\n    options: ModalControllerOptions\n  ) {\n    host.addController(this)\n    this.options = options\n\n    this.scrollBar = new ScrollbarController(host)\n    this.focusTrap = new FocusTrapController(host)\n    this.events = new EventController(host)\n    this.lightDismiss = new LightDismissController(host, {\n      isOpen: options.isOpen,\n      isDismissible: node => node !== options.dialog(),\n      onDismiss: this.handleLightDismiss,\n    })\n  }\n\n  hostConnected() {\n    // if submit event is not supported, let's do a basic polyfill\n    if (!window.SubmitEvent) {\n      this.events.listen(this.host, \"click\", this.trackLastButton, true)\n      this.events.listen(this.host, \"submit\", this.polyfillSubmitter, true)\n    }\n\n    this.events.listen(this.host, \"transitionend\", this.handleTransitionEnd)\n    this.events.listen(this.host, \"submit\", this.handleSubmit)\n  }\n\n  hostDisconnected(): void {\n    ModalController.openModals.remove(this)\n  }\n\n  block() {\n    // if there is already a modal open, release its focus trap\n    ModalController.openModals.top?.focusTrap.release()\n\n    // add this modal to the stack of open modals\n    ModalController.openModals.push(this)\n\n    // hide scrollbar and prevent scroll on body\n    this.scrollBar.lockScroll()\n\n    // store the element that was focused prior to modal opening\n    this.trigger = document.activeElement as HTMLElement\n\n    // handle initial (auto)focus\n    const focusTarget = this.host.querySelector<HTMLElement>(\"[autofocus]\") || this.host\n    focusTarget.focus()\n\n    // finally, we should enable the focus trap\n    this.focusTrap.trap()\n  }\n\n  unblock() {\n    // it does not make sense to unblock a modal if it is not the top-most modal\n    if (ModalController.openModals.top !== this) {\n      return\n    }\n\n    ModalController.openModals.pop()\n\n    // ensure modal is scrolled to top ready for re-open\n    this.options.backdrop().scrollTop = 0\n\n    // we need to release the focus trap...\n    this.focusTrap.release()\n\n    // ...before we can return focus to the trigger\n    this.trigger?.focus()\n    this.trigger = undefined\n\n    // if there are still modals open, enable the next modal's focus trap\n    ModalController.openModals.top?.focusTrap.trap()\n  }\n\n  /**\n   * capture the last button clicked, so that we can polyfill `submitter` property in submit event\n   */\n  private trackLastButton = (e: Event) => {\n    const target = e.target as HTMLElement\n\n    if (isButton(target)) {\n      this.lastButton = target\n    }\n  }\n\n  private polyfillSubmitter = (e: Event) => {\n    // @ts-expect-error submitter is readonly, but this is only called if SubmitEvent is not supported\n    e.submitter = this.lastButton\n  }\n\n  private handleTransitionEnd = (e: TransitionEvent) => {\n    // scrollbar should only be restored when the modal has transitioned,\n    // that way we avoid awkward double scrollbars.\n    if (!this.options.isOpen() && e.target === this.host) {\n      this.scrollBar.unlockScroll()\n    }\n  }\n\n  private handleLightDismiss = (e: Event) => {\n    if (this.host.contains(e.target as Node)) {\n      this.options.onDismiss(e)\n    }\n  }\n\n  private handleSubmit = (e: SubmitEvent) => {\n    this.lastButton = undefined\n\n    const target = e.target as HTMLFormElement\n    const submitter = e.submitter as HTMLButtonElement\n\n    const isDialogProperty = target.method === \"dialog\"\n    const isDialogAttr = target.getAttribute(\"method\") === \"dialog\"\n\n    // if they mismatch, it means \"dialog\" method is not supported,\n    // so we should polyfill the fact it does not do a full submit\n    if (isDialogAttr && !isDialogProperty) {\n      e.preventDefault()\n    }\n\n    if (isDialogAttr || isDialogProperty) {\n      this.options.close(submitter?.value)\n    }\n  }\n}\n"],"names":["setInertAttributes","elements","enabled","forEach","element","current","getAttribute","setAttribute","removeAttribute","setInertAttribute","getElementsAround","next","nextElementSibling","push","previousElementSibling","parentElement","document","body","FocusTrapController","constructor","host","this","inertElements","addController","hostDisconnected","release","trap","ModalController","options","trackLastButton","e","target","localName","lastButton","polyfillSubmitter","submitter","handleTransitionEnd","isOpen","scrollBar","unlockScroll","handleLightDismiss","contains","onDismiss","handleSubmit","undefined","isDialogProperty","method","isDialogAttr","preventDefault","close","value","ScrollbarController","focusTrap","events","EventController","lightDismiss","LightDismissController","isDismissible","node","dialog","hostConnected","window","SubmitEvent","listen","openModals","remove","block","_a","top","lockScroll","trigger","activeElement","querySelector","focus","unblock","pop","backdrop","scrollTop","_b","items","length","item","index","indexOf","splice"],"mappings":"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"}
+{"version":3,"file":"ModalController.js","sources":["../src/common/inert.ts","../src/common/controllers/FocusTrapController.ts","../src/modal/ModalController.ts"],"sourcesContent":["/**\n * Set or remove the `inert` attribute on an element.\n *\n * @param element The element to set or remove the `inert` attribute on.\n * @param enabled Whether to set or remove the `inert` attribute.\n */\nfunction setInertAttribute(element: Element, enabled: boolean) {\n  if (enabled) {\n    const current = element.getAttribute('inert')\n\n    // store previous value\n    if (current !== null) {\n      element.setAttribute('data-n-inert', current)\n    }\n\n    element.setAttribute('inert', '')\n  }\n  else {\n    const current = element.getAttribute('data-n-inert')\n\n    // restore previous value if necessary\n    if (current !== null) {\n      element.setAttribute('inert', current)\n      element.removeAttribute('data-n-inert')\n    }\n    else {\n      element.removeAttribute('inert')\n    }\n  }\n}\n\n/**\n * Set or remove the `inert` attribute on all given elements.\n *\n * @param elements The elements to set or remove the `inert` attribute on.\n * @param enabled Whether to set or remove the `inert` attribute.\n */\nexport function setInertAttributes(elements: Element[], enabled: boolean) {\n  elements.forEach(element => setInertAttribute(element, enabled))\n}\n\n/**\n * Get all siblings of an element, including the siblings of its parents.\n * Use this to find all elements that should be inert when a modal is open.\n * And then use `setInertAttributes` to set or remove the `inert` attribute\n * on all of them.\n */\nexport function getElementsAround(element: Element): Element[] {\n  const elements = []\n  let next = element.nextElementSibling\n\n  while (next) {\n    elements.push(next)\n    next = next.nextElementSibling\n  }\n\n  next = element.previousElementSibling\n\n  while (next) {\n    elements.push(next)\n    next = next.previousElementSibling\n  }\n\n  if (element.parentElement && element.parentElement !== document.body) {\n    elements.push(...getElementsAround(element.parentElement))\n  }\n\n  return elements\n}\n","import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { getElementsAround, setInertAttributes } from '../../common/inert.js'\n\nexport class FocusTrapController implements ReactiveController {\n  private inertElements: Element[] = []\n\n  constructor(private host: ReactiveControllerHost & HTMLElement) {\n    host.addController(this)\n  }\n\n  hostDisconnected() {\n    this.release()\n  }\n\n  trap() {\n    const elements = getElementsAround(this.host)\n\n    setInertAttributes(elements, true)\n    this.inertElements = elements\n  }\n\n  release() {\n    setInertAttributes(this.inertElements, false)\n    this.inertElements = []\n  }\n}\n","import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type { LightDismissOptions } from '../common/controllers/LightDismissController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { FocusTrapController } from '../common/controllers/FocusTrapController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { ScrollbarController } from '../common/controllers/ScrollbarController.js'\n\nclass Stack<T> {\n  private items: T[] = []\n\n  get length() {\n    return this.items.length\n  }\n\n  get top(): T | undefined {\n    return this.items[this.length - 1]\n  }\n\n  push(item: T) {\n    this.items.push(item)\n  }\n\n  pop() {\n    return this.items.pop()\n  }\n\n  remove(item: T) {\n    const index = this.items.indexOf(item)\n\n    if (index !== -1) {\n      this.items.splice(index, 1)\n    }\n  }\n}\n\nconst isButton = (element: Element): element is HTMLButtonElement => element.localName === 'button'\n\ninterface ModalControllerOptions {\n  isOpen: LightDismissOptions['isOpen']\n  onDismiss: LightDismissOptions['onDismiss']\n  close: (returnValue?: string) => void\n  backdrop: () => HTMLElement\n  dialog: () => HTMLElement\n}\n\nexport class ModalController implements ReactiveController {\n  private static openModals = new Stack<ModalController>()\n\n  private scrollBar: ScrollbarController\n  private focusTrap: FocusTrapController\n  private lightDismiss: LightDismissController\n  private events: EventController\n  private options: ModalControllerOptions\n\n  private trigger?: HTMLElement\n  private lastButton?: HTMLButtonElement\n\n  constructor(\n    private host: ReactiveControllerHost & HTMLElement,\n    options: ModalControllerOptions,\n  ) {\n    host.addController(this)\n    this.options = options\n\n    this.scrollBar = new ScrollbarController(host)\n    this.focusTrap = new FocusTrapController(host)\n    this.events = new EventController(host)\n    this.lightDismiss = new LightDismissController(host, {\n      isOpen: options.isOpen,\n      isDismissible: node => node !== options.dialog(),\n      onDismiss: this.handleLightDismiss,\n    })\n  }\n\n  hostConnected() {\n    // if submit event is not supported, let's do a basic polyfill\n    if (!window.SubmitEvent) {\n      this.events.listen(this.host, 'click', this.trackLastButton, true)\n      this.events.listen(this.host, 'submit', this.polyfillSubmitter, true)\n    }\n\n    this.events.listen(this.host, 'transitionend', this.handleTransitionEnd)\n    this.events.listen(this.host, 'submit', this.handleSubmit)\n  }\n\n  hostDisconnected(): void {\n    ModalController.openModals.remove(this)\n  }\n\n  block() {\n    // if there is already a modal open, release its focus trap\n    ModalController.openModals.top?.focusTrap.release()\n\n    // add this modal to the stack of open modals\n    ModalController.openModals.push(this)\n\n    // hide scrollbar and prevent scroll on body\n    this.scrollBar.lockScroll()\n\n    // store the element that was focused prior to modal opening\n    this.trigger = document.activeElement as HTMLElement\n\n    // handle initial (auto)focus\n    const focusTarget = this.host.querySelector<HTMLElement>('[autofocus]') || this.host\n    focusTarget.focus()\n\n    // finally, we should enable the focus trap\n    this.focusTrap.trap()\n  }\n\n  unblock() {\n    // it does not make sense to unblock a modal if it is not the top-most modal\n    if (ModalController.openModals.top !== this) {\n      return\n    }\n\n    ModalController.openModals.pop()\n\n    // ensure modal is scrolled to top ready for re-open\n    this.options.backdrop().scrollTop = 0\n\n    // we need to release the focus trap...\n    this.focusTrap.release()\n\n    // ...before we can return focus to the trigger\n    this.trigger?.focus()\n    this.trigger = undefined\n\n    // if there are still modals open, enable the next modal's focus trap\n    ModalController.openModals.top?.focusTrap.trap()\n  }\n\n  /**\n   * capture the last button clicked, so that we can polyfill `submitter` property in submit event\n   */\n  private trackLastButton = (e: Event) => {\n    const target = e.target as HTMLElement\n\n    if (isButton(target)) {\n      this.lastButton = target\n    }\n  }\n\n  private polyfillSubmitter = (e: Event) => {\n    // @ts-expect-error submitter is readonly, but this is only called if SubmitEvent is not supported\n    e.submitter = this.lastButton\n  }\n\n  private handleTransitionEnd = (e: TransitionEvent) => {\n    // scrollbar should only be restored when the modal has transitioned,\n    // that way we avoid awkward double scrollbars.\n    if (!this.options.isOpen() && e.target === this.host) {\n      this.scrollBar.unlockScroll()\n    }\n  }\n\n  private handleLightDismiss = (e: Event) => {\n    if (this.host.contains(e.target as Node)) {\n      this.options.onDismiss(e)\n    }\n  }\n\n  private handleSubmit = (e: SubmitEvent) => {\n    this.lastButton = undefined\n\n    const target = e.target as HTMLFormElement\n    const submitter = e.submitter as HTMLButtonElement\n\n    const isDialogProperty = target.method === 'dialog'\n    const isDialogAttr = target.getAttribute('method') === 'dialog'\n\n    // if they mismatch, it means \"dialog\" method is not supported,\n    // so we should polyfill the fact it does not do a full submit\n    if (isDialogAttr && !isDialogProperty) {\n      e.preventDefault()\n    }\n\n    if (isDialogAttr || isDialogProperty) {\n      this.options.close(submitter?.value)\n    }\n  }\n}\n"],"names":["setInertAttributes","elements","enabled","forEach","element","current","getAttribute","setAttribute","removeAttribute","setInertAttribute","getElementsAround","next","nextElementSibling","push","previousElementSibling","parentElement","document","body","FocusTrapController","constructor","host","this","inertElements","addController","hostDisconnected","release","trap","ModalController","options","trackLastButton","e","target","localName","lastButton","polyfillSubmitter","submitter","handleTransitionEnd","isOpen","scrollBar","unlockScroll","handleLightDismiss","contains","onDismiss","handleSubmit","undefined","isDialogProperty","method","isDialogAttr","preventDefault","close","value","ScrollbarController","focusTrap","events","EventController","lightDismiss","LightDismissController","isDismissible","node","dialog","hostConnected","window","SubmitEvent","listen","openModals","remove","block","_a","top","lockScroll","trigger","activeElement","querySelector","focus","unblock","pop","backdrop","scrollTop","_b","items","length","item","index","indexOf","splice"],"mappings":"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"}

package/lib/NavGroup.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as i,LitElement as n,html as t,nothing as r}from"lit";import{property as o,customElement as s}from"lit/decorators.js";import"./Icon.js";import{s as a}from"./Component-DSU3Qp0O.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./observe-D0n0zOfU.js";const l=i`:host{color:var(--n-color-text-weak);font-weight:var(--n-font-weight);line-height:var(--n-line-height-tight);white-space:nowrap;text-overflow:ellipsis;user-select:none}[role=list]{margin-block-end:var(--n-space-m);min-inline-size:100%;list-style:none;appearance:none;border:0;box-sizing:border-box;margin:0;padding:0}.n-heading{min-inline-size:100%;color:var(--n-color-nav-heading);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);line-height:var(--n-line-height-tight);padding-inline-start:var(--n-space-s);margin-block-start:var(--n-space-m);margin-block-end:var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let d=class extends n{render(){return t`${this.heading?t`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:r}<div role="list" aria-labelledby="${this.heading?"heading":r}"><slot></slot></div>`}};d.styles=[a,l],e([o({reflect:!0})],d.prototype,"heading",void 0),d=e([s("nord-nav-group")],d);var h=d;export{h as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as i,LitElement as n,html as t,nothing as r}from"lit";import{property as o,customElement as s}from"lit/decorators.js";import{s as a}from"./Component-DSU3Qp0O.js";import"./Icon.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const l=i`:host{color:var(--n-color-text-weak);font-weight:var(--n-font-weight);line-height:var(--n-line-height-tight);white-space:nowrap;text-overflow:ellipsis;user-select:none}[role=list]{margin-block-end:var(--n-space-m);min-inline-size:100%;list-style:none;appearance:none;border:0;box-sizing:border-box;margin:0;padding:0}.n-heading{min-inline-size:100%;color:var(--n-color-nav-heading);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);line-height:var(--n-line-height-tight);padding-inline-start:var(--n-space-s);margin-block-start:var(--n-space-m);margin-block-end:var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let d=class extends n{render(){return t`${this.heading?t`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:r}<div role="list" aria-labelledby="${this.heading?"heading":r}"><slot></slot></div>`}};d.styles=[a,l],e([o({reflect:!0})],d.prototype,"heading",void 0),d=e([s("nord-nav-group")],d);var h=d;export{h as default};
 //# sourceMappingURL=NavGroup.js.map

package/lib/NavGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavGroup.js","sources":["../src/nav-group/NavGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport \"../icon/Icon.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./NavGroup.css\"\n\n/**\n * Navigation group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status ready\n * @slot - The default slot used for the nav items.\n *\n * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\n */\n@customElement(\"nord-nav-group\")\nexport default class NavGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * Heading and accessible label for the nav group\n   */\n  @property({ reflect: true }) heading?: string\n\n  render() {\n    return html`\n      ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n      <div role=\"list\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-group\": NavGroup\n  }\n}\n"],"names":["NavGroup","LitElement","render","html","this","heading","nothing","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"siCAmBe,IAAMA,EAAN,cAAuBC,EAQpC,MAAAC,GACE,OAAOC,CAAI,GACPC,KAAKC,QAAUF,CAAI,wDAAwDC,KAAKC,cAAgBC,sCAC/DF,KAAKC,QAAU,UAAYC,wBAIjE,GAdMN,EAAAO,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAwBZ,EAAAa,UAAA,eAAA,GAN1Bb,EAAQU,EAAA,CAD5BI,EAAc,mBACMd,SAAAA"}
+{"version":3,"file":"NavGroup.js","sources":["../src/nav-group/NavGroup.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport style from './NavGroup.css'\nimport '../icon/Icon.js'\n\n/**\n * Navigation group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status ready\n * @slot - The default slot used for the nav items.\n *\n * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\n */\n@customElement('nord-nav-group')\nexport default class NavGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * Heading and accessible label for the nav group\n   */\n  @property({ reflect: true }) heading?: string\n\n  render() {\n    return html`\n      ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n      <div role=\"list\" aria-labelledby=${this.heading ? 'heading' : nothing}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-nav-group': NavGroup\n  }\n}\n"],"names":["NavGroup","LitElement","render","html","this","heading","nothing","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"siCAmBe,IAAMA,EAAN,cAAuBC,EAQpC,MAAAC,GACE,OAAOC,CAAI,GACPC,KAAKC,QAAUF,CAAI,wDAAwDC,KAAKC,cAAgBC,sCAC/DF,KAAKC,QAAU,UAAYC,wBAIjE,GAdMN,EAAAO,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAwBZ,EAAAa,UAAA,eAAA,GAN1Bb,EAAQU,EAAA,CAD5BI,EAAc,mBACMd,SAAAA"}

package/lib/NavItem.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as n,html as t,nothing as o,LitElement as a}from"lit";import{property as i,customElement as r}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{ref as c}from"lit/directives/ref.js";import{D as l}from"./DirectionController-ChvNGESZ.js";import{S as v}from"./SlotController-Z6eG7LSZ.js";import{c as d}from"./cond-CI1KbneT.js";import{N as p}from"./events-Bv6wNHwJ.js";import{F as h}from"./FocusableMixin-BlQLNPdJ.js";import{s as m}from"./Component-DSU3Qp0O.js";import{o as f}from"./observe-D0n0zOfU.js";import"./EventController-BBOmvfLa.js";const b=n`:host{--_n-nav-item-box-shadow:none}.n-nav-item{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:32px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;max-inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--_n-nav-item-box-shadow);position:relative;z-index:var(--n-index-default)}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-nav-item:focus{--_n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent)}}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-nav-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([badge]) .n-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-inline-size:calc(100% - calc(var(--n-space-m) + var(--n-space-m)));margin-block-end:-3px}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}:host([active]) .n-nav-item[aria-expanded]{--_n-nav-item-box-shadow:none;color:var(--n-color-text-weak);font-weight:var(--n-font-weight);background:0 0}:host([active]) .n-nav-item[aria-expanded]:focus-visible{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) .n-nav-item[aria-expanded]::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.12;background:var(--n-color-accent);filter:brightness(150%)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-notification);color:#fff;font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;position:absolute;margin-block-start:-2px;margin-inline-start:calc(var(--n-space-s)/ 1.5);font-size:var(--n-font-size-xs);display:inline-block}`;let u=class extends(h(a)){constructor(){super(...arguments),this.subnavSlot=new v(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}get hasSubNav(){return this.subnavSlot.hasContent}render(){const e=t`${this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:o}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:o}</div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),t`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return t`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${d(this.active,"page")}" href="${this.href||""}">${e}</a>`}renderToggle(e){return t`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${e}<nord-icon size="xxs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return t`<button class="n-nav-item" ${c(this.focusableRef)}>${e}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}handleActiveChange(){this.active&&!this.hasSubNav&&this.dispatchEvent(new p("activate"))}};u.styles=[m,b],e([i({type:Boolean,reflect:!0})],u.prototype,"active",void 0),e([i({reflect:!0})],u.prototype,"icon",void 0),e([i({reflect:!0})],u.prototype,"href",void 0),e([i({reflect:!0})],u.prototype,"badge",void 0),e([i({reflect:!0,type:Boolean})],u.prototype,"open",void 0),e([f("active","updated")],u.prototype,"handleActiveChange",null),u=e([r("nord-nav-item")],u);var g=u;export{g as default};
+import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,nothing as o,LitElement as a}from"lit";import{property as i,customElement as r}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{ref as c}from"lit/directives/ref.js";import{D as l}from"./DirectionController-ChvNGESZ.js";import{S as v}from"./SlotController-Z6eG7LSZ.js";import{o as d}from"./observe-D0n0zOfU.js";import{c as p}from"./cond-CI1KbneT.js";import{N as h}from"./events-Bv6wNHwJ.js";import{F as m}from"./FocusableMixin-BlQLNPdJ.js";import{s as f}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const b=e`:host{--_n-nav-item-box-shadow:none}.n-nav-item{user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:32px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;max-inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--_n-nav-item-box-shadow);position:relative;z-index:var(--n-index-default)}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-nav-item:focus{--_n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent)}}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-nav-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([badge]) .n-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-inline-size:calc(100% - calc(var(--n-space-m) + var(--n-space-m)));margin-block-end:-3px}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}:host([active]) .n-nav-item[aria-expanded]{--_n-nav-item-box-shadow:none;color:var(--n-color-text-weak);font-weight:var(--n-font-weight);background:0 0}:host([active]) .n-nav-item[aria-expanded]:focus-visible{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) .n-nav-item[aria-expanded]::after{content:'';position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.12;background:var(--n-color-accent);filter:brightness(150%)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-notification);color:#fff;font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;position:absolute;margin-block-start:-2px;margin-inline-start:calc(var(--n-space-s)/ 1.5);font-size:var(--n-font-size-xs);display:inline-block}`;let u=class extends(m(a)){constructor(){super(...arguments),this.subnavSlot=new v(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}get hasSubNav(){return this.subnavSlot.hasContent}render(){const n=t`${this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:o}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:o}</div>`;let e;return e=this.subnavSlot.hasContent?this.renderToggle(n):this.href?this.renderLink(n):this.renderButton(n),t`<div role="listitem">${e}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(n){return t`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${p(this.active,"page")}" href="${this.href||""}">${n}</a>`}renderToggle(n){return t`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${n}<nord-icon size="xxs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(n){return t`<button class="n-nav-item" ${c(this.focusableRef)}>${n}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new h("toggle"))}handleActiveChange(){this.active&&!this.hasSubNav&&this.dispatchEvent(new h("activate"))}};u.styles=[f,b],n([i({type:Boolean,reflect:!0})],u.prototype,"active",void 0),n([i({reflect:!0})],u.prototype,"icon",void 0),n([i({reflect:!0})],u.prototype,"href",void 0),n([i({reflect:!0})],u.prototype,"badge",void 0),n([i({reflect:!0,type:Boolean})],u.prototype,"open",void 0),n([d("active","updated")],u.prototype,"handleActiveChange",null),u=n([r("nord-nav-item")],u);var g=u;export{g as default};
 //# sourceMappingURL=NavItem.js.map

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 *\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires activate - Dispatched whenever a nav item has been marked as active\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":"8jHA2Be,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"}
+{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import type { TemplateResult } from 'lit'\nimport { html, LitElement, nothing } 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 { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './NavItem.css'\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 *\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires activate - Dispatched whenever a nav item has been marked as active\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    }\n    else if (this.href) {\n      element = this.renderLink(innards)\n    }\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":"6gHA4Be,IAAMA,EAAN,cAAsBC,EAAeC,IAArC,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBTL,KAAIM,MAAG,CA+EpD,CA1EC,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,EAYJ,OATEA,EADEf,KAAKC,WAAWO,WACRR,KAAKgB,aAAaN,GAErBV,KAAKiB,KACFjB,KAAKkB,WAAWR,GAGhBV,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,GA7GMhC,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,GA0E9CL,EAAA,CADTM,EAAQ,SAAU,YAKlB3C,EAAA0C,UAAA,qBAAA,MA9GkB1C,EAAOqC,EAAA,CAD3BO,EAAc,kBACM5C,SAAAA"}

package/lib/{NavToggle-D-udBTou.js → NavToggle-DL74d1aQ.js}

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as t,html as n,LitElement as i}from"lit";import{customElement as r}from"lit/decorators.js";import{ref as e}from"lit/directives/ref.js";import{classMap as l}from"lit/directives/class-map.js";import{LocalizeController as s}from"./LocalizeController.js";import{D as a}from"./DirectionController-ChvNGESZ.js";import{F as c}from"./FocusableMixin-BlQLNPdJ.js";import"./Button.js";import m from"./Icon.js";import"./VisuallyHidden.js";import{s as g}from"./Component-DSU3Qp0O.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>',tags:"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron",title:d});const h="navigation-toggle";var p=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>',tags:"nordicon navigation hamburger menu toggle navigation three lines",title:h});const u=t`: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}}`;m.registerIcon(p),m.registerIcon(v);let f=class extends(c(i)){constructor(){super(...arguments),this.direction=new a(this),this.localization=new s(this)}render(){return n`<nord-button variant="plain" ${e(this.focusableRef)} class="${l({"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=[g,u],f=o([r("nord-nav-toggle")],f);var w=f;export{w as N,v as l};
-//# sourceMappingURL=NavToggle-D-udBTou.js.map
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as t,html as n,LitElement as i}from"lit";import{customElement as r}from"lit/decorators.js";import{classMap as e}from"lit/directives/class-map.js";import{ref as l}from"lit/directives/ref.js";import{D as s}from"./DirectionController-ChvNGESZ.js";import{F as a}from"./FocusableMixin-BlQLNPdJ.js";import{s as c}from"./Component-DSU3Qp0O.js";import m from"./Icon.js";import{LocalizeController as g}from"./LocalizeController.js";import"./Button.js";import"./VisuallyHidden.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>',tags:"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron",title:d});const h="navigation-toggle";var p=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>',tags:"nordicon navigation hamburger menu toggle navigation three lines",title:h});const u=t`: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}}`;m.registerIcon(p),m.registerIcon(v);let f=class extends(a(i)){constructor(){super(...arguments),this.direction=new s(this),this.localization=new g(this)}render(){return n`<nord-button variant="plain" ${l(this.focusableRef)} class="${e({"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=[c,u],f=o([r("nord-nav-toggle")],f);var w=f;export{w as N,v as l};
+//# sourceMappingURL=NavToggle-DL74d1aQ.js.map

package/lib/NavToggle-DL74d1aQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavToggle-DL74d1aQ.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 =\n  \"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 =\n  \"nordicon navigation hamburger menu toggle navigation three lines\";\n","import * as lockIcon from '@nordhealth/icons/lib/assets/navigation-toggle-lock.js'\nimport * as unlockIcon from '@nordhealth/icons/lib/assets/navigation-toggle.js'\nimport { html, LitElement } 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 { DirectionController } from '../common/controllers/DirectionController.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './NavToggle.css'\n\nimport '../button/Button.js'\nimport '../visually-hidden/VisuallyHidden.js'\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 ready\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":"8gBACO,MAAMA,EAAQ,qEADN,oTAGb,0GCFK,MAAMA,EAAQ,gEADN,kMAGb,yjBCeFC,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"./tslib.es6-CmLYFWVC.js";import"lit";import"lit/decorators.js";import"lit/directives/ref.js";import"lit/directives/class-map.js";export{N as default}from"./NavToggle-D-udBTou.js";import"./LocalizeController.js";import"./DirectionController-ChvNGESZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./Button.js";import"./Icon.js";import"./VisuallyHidden.js";import"./Component-DSU3Qp0O.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"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./cond-CI1KbneT.js";import"./Spinner.js";import"lit/directives/if-defined.js";import"./InputMixin-LetXsCyv.js";import"./SlotController-Z6eG7LSZ.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./observe-D0n0zOfU.js";
+import"./tslib.es6-CmLYFWVC.js";export{N as default}from"./NavToggle-DL74d1aQ.js";import"lit";import"lit/decorators.js";import"lit/directives/class-map.js";import"lit/directives/ref.js";import"./DirectionController-ChvNGESZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./Component-DSU3Qp0O.js";import"./Icon.js";import"./LocalizeController.js";import"./Button.js";import"./VisuallyHidden.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";
 //# sourceMappingURL=NavToggle.js.map

package/lib/Navigation.js

@@ -1,2 +1,2 @@
-import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as a,html as t,nothing as e}from"lit";import{property as r,customElement as i}from"lit/decorators.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{s}from"./Component-DSU3Qp0O.js";import{E as d}from"./EventController-BBOmvfLa.js";const c=o`: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(var(--_n-navigation-background-color) 30%,rgba(255,255,255,0)) center top,linear-gradient(rgba(255,255,255,0),var(--_n-navigation-background-color) 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 a{constructor(){super(...arguments),this.headerSlot=new l(this,"header"),this.events=new d(this),this.allowItemsToRemainOpen=!1,this.stickyFooter=!1,this.handleActivate=n=>{var o,a;const t=n.target,e=new Set;let r=null===(o=t.parentElement)||void 0===o?void 0:o.closest("nord-nav-item");for(;r;)e.add(r),r=null===(a=r.parentElement)||void 0===a?void 0:a.closest("nord-nav-item");for(const n of this.querySelectorAll("nord-nav-item"))if(n!==t){const o=e.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 t`<slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><div class="n-navigation-main"><nav><slot></slot></nav>${this.stickyFooter?e:t`<slot name="footer"></slot>`}</div>${this.stickyFooter?t`<slot name="footer"></slot>`:e}`}};v.styles=[s,c],n([r({type:Boolean,reflect:!0,attribute:"sticky-footer"})],v.prototype,"stickyFooter",void 0),v=n([i("nord-navigation")],v);var g=v;export{g as default};
+import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as a,html as t,nothing as e}from"lit";import{property as r,customElement as i}from"lit/decorators.js";import{E as l}from"./EventController-BBOmvfLa.js";import{S as s}from"./SlotController-Z6eG7LSZ.js";import{s as d}from"./Component-DSU3Qp0O.js";const c=o`: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(var(--_n-navigation-background-color) 30%,rgb(255,255,255,0)) center top,linear-gradient(rgb(255,255,255,0),var(--_n-navigation-background-color) 70%) center bottom,radial-gradient(farthest-side at 50% 0,rgb(0,0,0,.1),rgb(0,0,0,0)) center top,radial-gradient(farthest-side at 50% 100%,rgb(0,0,0,.1),rgb(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 a{constructor(){super(...arguments),this.headerSlot=new s(this,"header"),this.events=new l(this),this.allowItemsToRemainOpen=!1,this.stickyFooter=!1,this.handleActivate=n=>{var o,a;const t=n.target,e=new Set;let r=null===(o=t.parentElement)||void 0===o?void 0:o.closest("nord-nav-item");for(;r;)e.add(r),r=null===(a=r.parentElement)||void 0===a?void 0:a.closest("nord-nav-item");for(const n of this.querySelectorAll("nord-nav-item"))if(n!==t){const o=e.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 t`<slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><div class="n-navigation-main"><nav><slot></slot></nav>${this.stickyFooter?e:t`<slot name="footer"></slot>`}</div>${this.stickyFooter?t`<slot name="footer"></slot>`:e}`}};v.styles=[d,c],n([r({type:Boolean,reflect:!0,attribute:"sticky-footer"})],v.prototype,"stickyFooter",void 0),v=n([i("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, 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 * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\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":"6+GA2Be,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"}
+{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["import type NavItem from '../nav-item/NavItem.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { EventController } from '../common/controllers/EventController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Navigation.css'\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 * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\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":"4+GA0Be,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{_ as i}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as t,LitElement as n}from"lit";import{customElement as r}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{ref as a}from"lit/directives/ref.js";import"./Stack.js";import"./Icon.js";import{N as e}from"./NotificationMixin-DOUQsx7N.js";import{s as l}from"./Component-DSU3Qp0O.js";import{LocalizeController as c}from"./LocalizeController.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./observe-D0n0zOfU.js";import"./events-Bv6wNHwJ.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(n)){constructor(){super(...arguments),this.localize=new c(this)}render(){return t`<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=[l,m],d=i([r("nord-notification")],d);var p=d;export{p as default};
+import{_ as i}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as t,LitElement as n}from"lit";import{customElement as r}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{ref as a}from"lit/directives/ref.js";import{N as e}from"./NotificationMixin-DOUQsx7N.js";import{s as l}from"./Component-DSU3Qp0O.js";import{LocalizeController as c}from"./LocalizeController.js";import"./Stack.js";import"./Icon.js";import"./events-Bv6wNHwJ.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"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.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:rgb(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(n)){constructor(){super(...arguments),this.localize=new c(this)}render(){return t`<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=[l,m],d=i([r("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 ready\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":"yxGAwBe,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 { html, LitElement } 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 { NotificationMixin } from '../common/mixins/NotificationMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Notification.css'\nimport '../stack/Stack.js'\nimport '../icon/Icon.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 ready\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":"wxGAwBe,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/NotificationGroup.js

@@ -1,2 +1,2 @@
-import{_ as i}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as t,html as o}from"lit";import{customElement as e}from"lit/decorators.js";import{s as a}from"./Component-DSU3Qp0O.js";const s=n`:host{--_n-notification-group-mask:linear-gradient(black 95%, transparent 100%);position:fixed;inset-inline-end:0;inset-block-start:0;inset-block-end:0;z-index:var(--n-index-modal);-webkit-mask-image:var(--_n-notification-group-mask);mask-image:var(--_n-notification-group-mask);pointer-events:none}.n-notification-group{display:flex;flex-direction:column;align-items:end;gap:var(--n-space-m);margin:var(--n-space-m)}::slotted(nord-notification){pointer-events:auto;inline-size:100%;max-inline-size:400px}`;let r=class extends t{render(){return o`<div class="n-notification-group"><slot></slot></div>`}};r.styles=[a,s],r=i([e("nord-notification-group")],r);var l=r;export{l as default};
+import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as i,LitElement as t,html as o}from"lit";import{customElement as e}from"lit/decorators.js";import{s}from"./Component-DSU3Qp0O.js";const a=i`:host{--_n-notification-group-mask:linear-gradient(black 95%, transparent 100%);position:fixed;inset-inline-end:0;inset-block-start:0;inset-block-end:0;z-index:var(--n-index-modal);mask-image:var(--_n-notification-group-mask);pointer-events:none}.n-notification-group{display:flex;flex-direction:column;align-items:end;gap:var(--n-space-m);margin:var(--n-space-m)}::slotted(nord-notification){pointer-events:auto;inline-size:100%;max-inline-size:400px}`;let r=class extends t{render(){return o`<div class="n-notification-group"><slot></slot></div>`}};r.styles=[s,a],r=n([e("nord-notification-group")],r);var l=r;export{l as default};
 //# sourceMappingURL=NotificationGroup.js.map

package/lib/NotificationGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationGroup.js","sources":["../src/notification-group/NotificationGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./NotificationGroup.css\"\n\n/**\n * Notification group is used to position and style a group of notifications.\n *\n * @status ready\n * @category feedback\n * @slot - Default slot in which to place notifications.\n *\n * @fires {NordEvent} dismiss - Fired when a notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.\n */\n@customElement(\"nord-notification-group\")\nexport default class NotificationGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`\n      <div class=\"n-notification-group\">\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-notification-group\": NotificationGroup\n  }\n}\n"],"names":["NotificationGroup","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"msBAgBe,IAAMA,EAAN,cAAgCC,EAG7C,MAAAC,GACE,OAAOC,CAAI,uDAKZ,GARMH,EAAAI,OAAS,CAACC,EAAgBC,GADdN,EAAiBO,EAAA,CADrCC,EAAc,4BACMR,SAAAA"}
+{"version":3,"file":"NotificationGroup.js","sources":["../src/notification-group/NotificationGroup.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './NotificationGroup.css'\n\n/**\n * Notification group is used to position and style a group of notifications.\n *\n * @status ready\n * @category feedback\n * @slot - Default slot in which to place notifications.\n *\n * @fires {NordEvent} dismiss - Fired when a notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.\n */\n@customElement('nord-notification-group')\nexport default class NotificationGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`\n      <div class=\"n-notification-group\">\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-notification-group': NotificationGroup\n  }\n}\n"],"names":["NotificationGroup","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"yoBAgBe,IAAMA,EAAN,cAAgCC,EAG7C,MAAAC,GACE,OAAOC,CAAI,uDAKZ,GARMH,EAAAI,OAAS,CAACC,EAAgBC,GADdN,EAAiBO,EAAA,CADrCC,EAAc,4BACMR,SAAAA"}

package/lib/NotificationMixin-DOUQsx7N.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationMixin-DOUQsx7N.js","sources":["../src/common/mixins/NotificationMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { state } from \"lit/decorators.js\"\nimport type { Ref } from \"lit/directives/ref.js\"\nimport { createRef } from \"lit/directives/ref.js\"\nimport { animation, NordEvent } from \"../events.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class NotificationMixinInterface {\n  protected dismissed: boolean\n  protected notificationRef: Ref<HTMLElement>\n  dismiss(): Promise<void>\n}\n\nexport function NotificationMixin<T extends Constructor<LitElement>>(\n  superClass: T\n): Constructor<NotificationMixinInterface> & T {\n  class NotificationElement extends superClass {\n    protected notificationRef = createRef<HTMLElement>()\n\n    @state() protected dismissed = false\n\n    /**\n     * Programmatically dismiss the notification.\n     * The returned promise resolves when notification's exit animation is complete.\n     */\n    async dismiss() {\n      if (this.notificationRef.value) {\n        this.dismissed = true\n        await animation(this.notificationRef.value)\n        this.dispatchEvent(new NordEvent(\"dismiss\"))\n      }\n    }\n  }\n\n  return NotificationElement as unknown as Constructor<NotificationMixinInterface> & T\n}\n"],"names":["NotificationMixin","superClass","NotificationElement","constructor","this","notificationRef","createRef","dismissed","dismiss","value","animation","dispatchEvent","NordEvent","__decorate","state","prototype"],"mappings":"wLAeM,SAAUA,EACdC,GAEA,MAAMC,UAA4BD,EAAlC,WAAAE,uBACYC,KAAeC,gBAAGC,IAETF,KAASG,WAAG,CAahC,CAPC,aAAMC,GACAJ,KAAKC,gBAAgBI,QACvBL,KAAKG,WAAY,QACXG,EAAUN,KAAKC,gBAAgBI,OACrCL,KAAKO,cAAc,IAAIC,EAAU,YAEpC,EAGH,OAfqBC,EAAA,CAAlBC,KAAmCZ,EAAAa,UAAA,iBAAA,GAe/Bb,CACT"}
+{"version":3,"file":"NotificationMixin-DOUQsx7N.js","sources":["../src/common/mixins/NotificationMixin.ts"],"sourcesContent":["import type { LitElement } from 'lit'\nimport type { Ref } from 'lit/directives/ref.js'\nimport { state } from 'lit/decorators.js'\nimport { createRef } from 'lit/directives/ref.js'\nimport { animation, NordEvent } from '../events.js'\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class NotificationMixinInterface {\n  protected dismissed: boolean\n  protected notificationRef: Ref<HTMLElement>\n  dismiss(): Promise<void>\n}\n\nexport function NotificationMixin<T extends Constructor<LitElement>>(\n  superClass: T,\n): Constructor<NotificationMixinInterface> & T {\n  class NotificationElement extends superClass {\n    protected notificationRef = createRef<HTMLElement>()\n\n    @state() protected dismissed = false\n\n    /**\n     * Programmatically dismiss the notification.\n     * The returned promise resolves when notification's exit animation is complete.\n     */\n    async dismiss() {\n      if (this.notificationRef.value) {\n        this.dismissed = true\n        await animation(this.notificationRef.value)\n        this.dispatchEvent(new NordEvent('dismiss'))\n      }\n    }\n  }\n\n  return NotificationElement as unknown as Constructor<NotificationMixinInterface> & T\n}\n"],"names":["NotificationMixin","superClass","NotificationElement","constructor","this","notificationRef","createRef","dismissed","dismiss","value","animation","dispatchEvent","NordEvent","__decorate","state","prototype"],"mappings":"wLAcM,SAAUA,EACdC,GAEA,MAAMC,UAA4BD,EAAlC,WAAAE,uBACYC,KAAeC,gBAAGC,IAETF,KAASG,WAAG,CAahC,CAPC,aAAMC,GACAJ,KAAKC,gBAAgBI,QACvBL,KAAKG,WAAY,QACXG,EAAUN,KAAKC,gBAAgBI,OACrCL,KAAKO,cAAc,IAAIC,EAAU,YAEpC,EAGH,OAfqBC,EAAA,CAAlBC,KAAmCZ,EAAAa,UAAA,iBAAA,GAe/Bb,CACT"}

package/lib/Popout-k_ddK22Q.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{o,a as i,s as e,h as s,l as n,c as a,b as r,f as l}from"./positioning-DDh0UNgJ.js";import{css as h,html as p,LitElement as d}from"lit";import{property as c,query as m,state as u,customElement as g}from"lit/decorators.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{E as f}from"./EventController-BBOmvfLa.js";import{L as y}from"./LightDismissController-4pH8cdko.js";import{S as w}from"./ScrollbarController-BFC67Y2x.js";import{o as b}from"./observe-D0n0zOfU.js";import{N as E,t as x}from"./events-Bv6wNHwJ.js";import{s as C}from"./Component-DSU3Qp0O.js";function k(o){class i extends o{constructor(){super(...arguments),this.open=!1,this.align="start",this.position="block-end"}}return t([c({type:Boolean,reflect:!0})],i.prototype,"open",void 0),t([c({reflect:!0})],i.prototype,"align",void 0),t([c({reflect:!0})],i.prototype,"position",void 0),i}const A=h`: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(:not([always-floating])){position:fixed;inset:0;overflow-y:auto;opacity:1;background:0 0;transition:background var(--n-transition-mobile)}:host([open]:not([always-floating])){pointer-events:auto;background:var(--n-color-overlay)}:host([open]:not([always-floating])) .n-popout{transform:translateY(0)}:host(:not([always-floating])) .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}`,P="undefined"==typeof matchMedia?{matches:!1,addEventListener(){}}:matchMedia("(max-width: 35.9375em)");let S=class extends(k(d)){constructor(){super(...arguments),this.scrollBar=new w(this),this.dismiss=new y(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this.popout&&t!==this.targetElement}),this.events=new f(this),this.direction=new v(this),this.smallViewport=P.matches,this.id="",this.alwaysFloating=!1,this.enableScroll=()=>{this.open||this.scrollBar.unlockScroll()},this.updatePosition=async()=>{var t;if(!this.anchorElement)return;const r={strategy:"fixed"};"auto"===this.position?r.middleware=[o(8),i({alignment:this.align,padding:8}),e({padding:8}),s()]:(r.placement=n(this.position,this.align,this.direction.dir),r.middleware=[o(8),l(),e({padding:8}),s()]);const{x:h,y:p,placement:d,middlewareData:c}=await a(this.anchorElement,this,r);this.computedPosition=d,this.style.setProperty("--_n-popout-position-x",`${h}px`),this.style.setProperty("--_n-popout-position-y",`${p}px`),(null===(t=c.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):!this.smallViewport||this.alwaysFloating?this.updatePosition().then((()=>this.show())):this.show()},this.handleMediaQueryChange=()=>{var t;this.smallViewport=P.matches,null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),(!this.smallViewport||this.alwaysFloating)&&this.open&&this.anchorElement?(this.cleanupAutoUpdate=r(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 E("open")),x(this.popout))}async hide(t=!0){var o,i;return this.open?(this.open=!1,null===(o=this.cleanupAutoUpdate)||void 0===o||o.call(this),this.dispatchEvent(new E("close")),t&&(null===(i=this.targetElement)||void 0===i||i.focus({preventScroll:!0})),x(this.popout)):Promise.resolve()}firstUpdated(){this.smallViewport&&!this.alwaysFloating||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.events.listen(P,"change",this.handleMediaQueryChange),this.initializeElements()}disconnectedCallback(){var t,o;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),null===(o=this.targetElement)||void 0===o||o.removeAttribute("aria-expanded")}render(){return p`<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.initializeElements():console.warn("NORD: popout requires an id attribute and value")}initializeElements(){this.targetElement=this.getToggle(),this.anchorElement=this.getAnchor(),this.events.listen(this.targetElement,"click",this.toggleOpen)}handleOpenChange(){var t,o;null===(t=this.targetElement)||void 0===t||t.setAttribute("aria-expanded",`${this.open}`),this.open?this.smallViewport&&!this.alwaysFloating?this.scrollBar.lockScroll():this.anchorElement&&(this.cleanupAutoUpdate=r(this.anchorElement,this,this.updatePosition)):null===(o=this.cleanupAutoUpdate)||void 0===o||o.call(this)}handleAnchorChange(){var t;null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.anchorElement=this.getAnchor(),this.open&&(!this.smallViewport||this.alwaysFloating)&&this.anchorElement&&(this.cleanupAutoUpdate=r(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}};S.styles=[C,A],t([m(".n-popout",!0)],S.prototype,"popout",void 0),t([u()],S.prototype,"computedPosition",void 0),t([u()],S.prototype,"smallViewport",void 0),t([c({reflect:!0})],S.prototype,"id",void 0),t([c({reflect:!0})],S.prototype,"anchor",void 0),t([c({reflect:!0,type:Boolean,attribute:"always-floating"})],S.prototype,"alwaysFloating",void 0),t([b("id")],S.prototype,"handleIdChange",null),t([b("open")],S.prototype,"handleOpenChange",null),t([b("anchor")],S.prototype,"handleAnchorChange",null),S=t([g("nord-popout")],S);var j=S;export{k as F,j as P};
+//# sourceMappingURL=Popout-k_ddK22Q.js.map

package/lib/Popout-k_ddK22Q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popout-k_ddK22Q.js","sources":["../src/common/mixins/FloatingComponentMixin.ts","../src/popout/Popout.ts"],"sourcesContent":["import type { Alignment } from '@floating-ui/dom'\nimport type { LitElement } from 'lit'\nimport type { LogicalSide } from '../positioning.js'\nimport { property } from 'lit/decorators.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 | 'auto'\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     * You can also set it to `auto` for automatic positioning depending on\n     * which side has the most space available.\n     */\n    @property({ reflect: true }) position: 'block-end' | 'block-start' | 'inline-start' | 'inline-end' | 'auto'\n      = 'block-end'\n  }\n\n  return FloatingElement\n}\n","import type {\n  ComputePositionConfig,\n  Placement,\n} from '@floating-ui/dom'\nimport {\n  autoPlacement,\n  autoUpdate,\n  computePosition,\n  flip,\n  hide,\n  offset,\n  shift,\n} from '@floating-ui/dom'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { ScrollbarController } from '../common/controllers/ScrollbarController.js'\n\nimport { observe } from '../common/decorators/observe.js'\nimport { NordEvent, transition } from '../common/events.js'\nimport { FloatingMixin } from '../common/mixins/FloatingComponentMixin.js'\nimport { logicalToPhysical } from '../common/positioning.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Popout.css'\n\n/*\n * The breakpoint width to switch between \"sheet\" design and floating design\n */\nconst mediaQuery\n  = typeof matchMedia === 'undefined'\n    ? ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n    : 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 !== 'click'),\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\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   * Set to true to always display the popout as a floating overlay, even on smaller viewports.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'always-floating' }) alwaysFloating: boolean = false\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 || this.alwaysFloating) {\n      this.updatePosition()\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.events.listen(mediaQuery, 'change', this.handleMediaQueryChange)\n\n    this.initializeElements()\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      console.warn('NORD: popout requires an id attribute and value')\n    }\n    else {\n      this.initializeElements()\n    }\n  }\n\n  private initializeElements() {\n    this.targetElement = this.getToggle()\n    this.anchorElement = this.getAnchor()\n\n    this.events.listen(this.targetElement, 'click', this.toggleOpen)\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 && !this.alwaysFloating) {\n        // hide scrollbar and prevent scroll on body\n        this.scrollBar.lockScroll()\n      }\n      else if (this.anchorElement) {\n        this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n      }\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.alwaysFloating) && 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 computePositionConfig: ComputePositionConfig = {\n      strategy: 'fixed',\n    }\n\n    if (this.position === 'auto') {\n      computePositionConfig.middleware = [\n        offset(8),\n        autoPlacement({ alignment: this.align, padding: 8 }),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ]\n    }\n    else {\n      computePositionConfig.placement = logicalToPhysical(this.position, this.align, this.direction.dir)\n      computePositionConfig.middleware = [\n        offset(8),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ]\n    }\n\n    const { x, y, placement, middlewareData } = await computePosition(this.anchorElement, this, computePositionConfig)\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    }\n    else if (!this.smallViewport || this.alwaysFloating) {\n      this.updatePosition().then(() => this.show())\n    }\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.alwaysFloating) && this.open && this.anchorElement) {\n      this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n      this.scrollBar.unlockScroll()\n    }\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","matches","addEventListener","Popout","LitElement","scrollBar","ScrollbarController","dismiss","LightDismissController","isOpen","onDismiss","e","hide","isDismissible","node","popout","targetElement","events","EventController","direction","DirectionController","smallViewport","id","alwaysFloating","enableScroll","unlockScroll","updatePosition","async","anchorElement","computePositionConfig","strategy","middleware","offset","autoPlacement","alignment","padding","shift","placement","logicalToPhysical","dir","flip","x","y","middlewareData","computePosition","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","then","show","handleMediaQueryChange","cleanupAutoUpdate","call","autoUpdate","lockScroll","Promise","resolve","updateComplete","dispatchEvent","NordEvent","transition","moveFocusToButton","_b","focus","preventScroll","firstUpdated","connectedCallback","super","listen","initializeElements","disconnectedCallback","removeAttribute","render","html","handleIdChange","removeEventListener","console","warn","getToggle","getAnchor","handleOpenChange","setAttribute","handleAnchorChange","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","anchor","styles","componentStyle","query","state","attribute","observe","customElement"],"mappings":"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"}

package/lib/Popout.js

@@ -1,2 +1,2 @@
-import"./tslib.es6-CmLYFWVC.js";import"lit";import"lit/decorators.js";import"./positioning-CsfLhMSW.js";import"./LightDismissController-4pH8cdko.js";import"./ScrollbarController-C5CMxfb3.js";import"./events-Bv6wNHwJ.js";export{P as default}from"./Popout-DBLHeeXk.js";import"./Component-DSU3Qp0O.js";import"./DirectionController-ChvNGESZ.js";import"./observe-D0n0zOfU.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";
+import"./tslib.es6-CmLYFWVC.js";import"./positioning-DDh0UNgJ.js";import"lit";import"lit/decorators.js";import"./DirectionController-ChvNGESZ.js";import"./EventController-BBOmvfLa.js";import"./LightDismissController-4pH8cdko.js";import"./ScrollbarController-BFC67Y2x.js";import"./observe-D0n0zOfU.js";import"./events-Bv6wNHwJ.js";export{P as default}from"./Popout-k_ddK22Q.js";import"./Component-DSU3Qp0O.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";
 //# sourceMappingURL=Popout.js.map

package/lib/Progress.js

@@ -1,2 +1,2 @@
-import{_ as s}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as o,html as t,svg as e}from"lit";import{property as i,state as n,customElement as a}from"lit/decorators.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{c}from"./cond-CI1KbneT.js";import{s as h}from"./Component-DSU3Qp0O.js";const g=r`:host{--_n-progress-color:var(--n-progress-color, var(--n-color-accent));--_n-progress-size:var(--n-size-icon-m);--_n-progress-background:var(--n-color-background);inline-size:var(--_n-progress-size);block-size:var(--_n-progress-size);display:inline-flex;position:relative}:host([size=xs]){--_n-progress-size:var(--n-size-icon-xs)}:host([size="s"]){--_n-progress-size:var(--n-size-icon-s)}:host([size="l"]){--_n-progress-size:var(--n-size-icon-l)}:host([size=xl]){--_n-progress-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-progress-size:var(--n-size-icon-xxl)}:host([color=success]){--_n-progress-color:var(--n-color-status-success)}:host([color=warning]){--_n-progress-color:var(--n-color-status-warning)}:host([color=danger]){--_n-progress-color:var(--n-color-status-danger)}:host([color=highlight]){--_n-progress-color:var(--n-color-status-highlight)}:host([color=info]){--_n-progress-color:var(--n-color-status-info)}:host svg{inline-size:100%;block-size:100%}`,d=11.25,p=11.25;let m=0;let _=class extends o{constructor(){super(),this.size="m",this.progress=0,this._animatedProgress=0,this._animationId=null,this._targetProgress=0,this._instanceId=0,this._instanceId=m++}connectedCallback(){super.connectedCallback(),this._animatedProgress=this.progress,this._targetProgress=this.progress}disconnectedCallback(){super.disconnectedCallback(),null!==this._animationId&&(cancelAnimationFrame(this._animationId),this._animationId=null)}updated(s){s.has("progress")&&(this._targetProgress=Math.max(0,Math.min(100,this.progress)),this._animate())}_animate(){null!==this._animationId&&cancelAnimationFrame(this._animationId);const s=()=>{const r=this._targetProgress-this._animatedProgress;if(Math.abs(r)<.5)return this._animatedProgress=this._targetProgress,void(this._animationId=null);this._animatedProgress+=.15*r,this._animationId=requestAnimationFrame(s)};this._animationId=requestAnimationFrame(s)}get _clampedProgress(){return Math.max(0,Math.min(100,this._animatedProgress))}get _isSemanticColor(){var s;return["success","warning","danger","highlight","info"].includes(null!==(s=this.color)&&void 0!==s?s:"")}get _customColorStyle(){if(this.color&&!this._isSemanticColor)return`--_n-progress-color:${this.color}`}render(){const s=Boolean(this.label),r=function(s){const r=Math.max(0,Math.min(100,s));if(0===r)return"";if(100===r)return"M11.25,5.25\n            A6,6 0 1 1 11.25,17.25\n            A6,6 0 1 1 11.25,5.25 Z";const o=r/100*360,t=(-90+o)*(Math.PI/180);return`M11.25,11.25\n          L11.25,5.25\n          A6,6 0 ${o>180?1:0},1 ${d+6*Math.cos(t)},${p+6*Math.sin(t)}\n          Z`}(this._clampedProgress),o=`n-progress-clip-${this._instanceId}`;return t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.5 22.5" fill="none" role="${c(s,"progressbar")}" aria-label="${l(this.label)}" aria-valuenow="${c(s,Math.round(this._clampedProgress))}" aria-valuemin="${c(s,"0")}" aria-valuemax="${c(s,"100")}" aria-hidden="${c(!s,"true")}" style="${l(this._customColorStyle)}"><g clip-path="url(#${o})"><rect x="1.25" y="1.25" width="20" height="20" rx="10" fill="var(--_n-progress-background)"/><circle cx="${d}" cy="${p}" r="${9}" fill="var(--_n-progress-background)" stroke="var(--_n-progress-color)" stroke-width="2"/>${e`<path fill="var(--_n-progress-color)" d="${r}">`}</g><rect x="0.625" y="0.625" width="21.25" height="21.25" rx="10.625" stroke="var(--_n-progress-background)" stroke-width="1.25"/><defs><clipPath id="${o}"><rect x="1.25" y="1.25" width="20" height="20" rx="10" fill="white"/></clipPath></defs></svg>`}};_.styles=[h,g],s([i({reflect:!0})],_.prototype,"size",void 0),s([i({reflect:!0})],_.prototype,"color",void 0),s([i({reflect:!0})],_.prototype,"label",void 0),s([i({reflect:!0,type:Number})],_.prototype,"progress",void 0),s([n()],_.prototype,"_animatedProgress",void 0),_=s([a("nord-progress")],_);var u=_;export{u as default};
+import{_ as s}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as o,html as t,svg as e}from"lit";import{property as i,state as n,customElement as a}from"lit/decorators.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{c}from"./cond-CI1KbneT.js";import{s as h}from"./Component-DSU3Qp0O.js";const g=r`:host{--_n-progress-color:var(--n-progress-color, var(--n-color-accent));--_n-progress-size:var(--n-size-icon-m);--_n-progress-background:var(--n-color-background);inline-size:var(--_n-progress-size);block-size:var(--_n-progress-size);display:inline-flex;position:relative}:host([size=xs]){--_n-progress-size:var(--n-size-icon-xs)}:host([size='s']){--_n-progress-size:var(--n-size-icon-s)}:host([size='l']){--_n-progress-size:var(--n-size-icon-l)}:host([size=xl]){--_n-progress-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-progress-size:var(--n-size-icon-xxl)}:host([color=success]){--_n-progress-color:var(--n-color-status-success)}:host([color=warning]){--_n-progress-color:var(--n-color-status-warning)}:host([color=danger]){--_n-progress-color:var(--n-color-status-danger)}:host([color=highlight]){--_n-progress-color:var(--n-color-status-highlight)}:host([color=info]){--_n-progress-color:var(--n-color-status-info)}:host svg{inline-size:100%;block-size:100%}`,d=11.25,p=11.25;let m=0;let _=class extends o{constructor(){super(),this.size="m",this.progress=0,this._animatedProgress=0,this._animationId=null,this._targetProgress=0,this._instanceId=0,this._instanceId=m++}connectedCallback(){super.connectedCallback(),this._animatedProgress=this.progress,this._targetProgress=this.progress}disconnectedCallback(){super.disconnectedCallback(),null!==this._animationId&&(cancelAnimationFrame(this._animationId),this._animationId=null)}updated(s){s.has("progress")&&(this._targetProgress=Math.max(0,Math.min(100,this.progress)),this._animate())}_animate(){null!==this._animationId&&cancelAnimationFrame(this._animationId);const s=()=>{const r=this._targetProgress-this._animatedProgress;if(Math.abs(r)<.5)return this._animatedProgress=this._targetProgress,void(this._animationId=null);this._animatedProgress+=.15*r,this._animationId=requestAnimationFrame(s)};this._animationId=requestAnimationFrame(s)}get _clampedProgress(){return Math.max(0,Math.min(100,this._animatedProgress))}get _isSemanticColor(){var s;return["success","warning","danger","highlight","info"].includes(null!==(s=this.color)&&void 0!==s?s:"")}get _customColorStyle(){if(this.color&&!this._isSemanticColor)return`--_n-progress-color:${this.color}`}render(){const s=Boolean(this.label),r=function(s){const r=Math.max(0,Math.min(100,s));if(0===r)return"";if(100===r)return"M11.25,5.25\n            A6,6 0 1 1 11.25,17.25\n            A6,6 0 1 1 11.25,5.25 Z";const o=r/100*360,t=(-90+o)*(Math.PI/180);return`M11.25,11.25\n          L11.25,5.25\n          A6,6 0 ${o>180?1:0},1 ${d+6*Math.cos(t)},${p+6*Math.sin(t)}\n          Z`}(this._clampedProgress),o=`n-progress-clip-${this._instanceId}`;return t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.5 22.5" fill="none" role="${c(s,"progressbar")}" aria-label="${l(this.label)}" aria-valuenow="${c(s,Math.round(this._clampedProgress))}" aria-valuemin="${c(s,"0")}" aria-valuemax="${c(s,"100")}" aria-hidden="${c(!s,"true")}" style="${l(this._customColorStyle)}"><g clip-path="url(#${o})"><rect x="1.25" y="1.25" width="20" height="20" rx="10" fill="var(--_n-progress-background)"/><circle cx="${d}" cy="${p}" r="${9}" fill="var(--_n-progress-background)" stroke="var(--_n-progress-color)" stroke-width="2"/>${e`<path fill="var(--_n-progress-color)" d="${r}">`}</g><rect x="0.625" y="0.625" width="21.25" height="21.25" rx="10.625" stroke="var(--_n-progress-background)" stroke-width="1.25"/><defs><clipPath id="${o}"><rect x="1.25" y="1.25" width="20" height="20" rx="10" fill="white"/></clipPath></defs></svg>`}};_.styles=[h,g],s([i({reflect:!0})],_.prototype,"size",void 0),s([i({reflect:!0})],_.prototype,"color",void 0),s([i({reflect:!0})],_.prototype,"label",void 0),s([i({reflect:!0,type:Number})],_.prototype,"progress",void 0),s([n()],_.prototype,"_animatedProgress",void 0),_=s([a("nord-progress")],_);var u=_;export{u as default};
 //# sourceMappingURL=Progress.js.map