@nordhealth/components 5.0.0-alpha.0 → 5.0.0

package/lib/LocalizeController.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizeController.js","sources":["../src/localization/LocalizeController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type {\n  Translation,\n  WellKnownKeys,\n} from './translation.js'\nimport { isServer } from 'lit'\nimport {\n  fallback,\n  resolveTranslation,\n  subscribeToDocumentLang,\n  subscribeToTranslationRegistration,\n} from './translation.js'\n\n// Use fallback (en) as source of truth for valid translation keys\ntype FallbackType = typeof fallback\n\n// helper types...\n\n// used to match any function\ntype Func = (...args: any[]) => any\n\n// if object property is function, use return type, else value type\ntype Result<Type, Key extends keyof Type> = Type[Key] extends Func ? ReturnType<Type[Key]> : Type[Key]\n\n// if object property is function,\ntype FuncParams<Type, K extends keyof Type> = Type[K] extends Func ? Parameters<Type[K]> : []\n\nfunction noop() {\n  // this function is intentionally left blank\n}\n\nexport class LocalizeController<TComponentName extends Exclude<keyof Translation, WellKnownKeys>>\nimplements ReactiveController {\n  private unsubscribeDocumentLang?: ReturnType<typeof subscribeToDocumentLang>\n  private unsubscribeTranslationRegistration?: ReturnType<typeof subscribeToTranslationRegistration>\n  private observer?: MutationObserver\n  private resolvedTranslation: Translation\n\n  constructor(\n    private host: ReactiveControllerHost & HTMLElement,\n    private options = { onLangChange: noop },\n  ) {\n    host.addController(this)\n    this.resolvedTranslation = resolveTranslation(this.lang)\n  }\n\n  /**\n   * The lang of the document or element, with element taking precedence\n   */\n  get lang() {\n    if (isServer) {\n      return this.host.lang || 'en-US'\n    }\n\n    return this.host.lang || document.documentElement.lang\n  }\n\n  /**\n   * The lang of the translation being applied.\n   * This may not match the document/element lang, in case of fallback translation\n   */\n  get resolvedLang() {\n    return this.resolvedTranslation.$lang\n  }\n\n  hostConnected() {\n    // Always subscribe to translation registration changes (for when new translations are registered)\n    this.unsubscribeTranslationRegistration = subscribeToTranslationRegistration(this.handleLangChange)\n\n    // Re-resolve translation now that the host is connected and attributes are set\n    // This handles cases where the lang attribute is set after the constructor runs (e.g., in Vue)\n    const resolved = resolveTranslation(this.lang)\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n    }\n\n    // If the host has its own `lang` attribute, create a local observer to watch for changes to that attribute\n    if (this.host.getAttribute('lang')) {\n      this.observer = new MutationObserver(this.handleLangChange)\n      this.observer.observe(this.host, {\n        attributes: true,\n        attributeFilter: ['lang'],\n      })\n    }\n    else {\n      // Otherwise, also subscribe to document language changes\n      this.unsubscribeDocumentLang = subscribeToDocumentLang(this.handleLangChange)\n    }\n\n    this.options.onLangChange()\n  }\n\n  hostDisconnected() {\n    this.unsubscribeDocumentLang?.()\n    this.unsubscribeTranslationRegistration?.()\n    this.observer?.disconnect()\n  }\n\n  term<Key extends keyof FallbackType[TComponentName]>(\n    key: Key,\n    ...args: FuncParams<FallbackType[TComponentName], Key>\n  ): Result<FallbackType[TComponentName], Key> {\n    const { resolvedTranslation, resolvedLang } = this\n    const component = this.host.localName as TComponentName\n\n    // Cast to specific component type to satisfy TS that key is valid for this component\n    const componentTranslation = resolvedTranslation[component] as FallbackType[TComponentName] | undefined\n\n    if (componentTranslation == null) {\n      console.warn(`NORD: Missing translations for component \\`${component}\\` in lang: \\`${resolvedLang}\\``)\n    }\n    else if (componentTranslation[key] == null) {\n      console.warn(\n        `NORD: Missing translation key \\`${String(key)}\\` for component \\`${component}\\` in lang \\`${resolvedLang}\\``,\n      )\n    }\n\n    const fallbackComponentTranslation = fallback[component] as FallbackType[TComponentName]\n    const translationValue = (componentTranslation?.[key] ?? fallbackComponentTranslation[key]) as Result<FallbackType[TComponentName], Key>\n    return typeof translationValue === 'function' ? translationValue(...args) : translationValue\n  }\n\n  private handleLangChange = () => {\n    const resolved = resolveTranslation(this.lang)\n\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n\n      this.options.onLangChange()\n      this.host.requestUpdate()\n    }\n  }\n}\n"],"names":["noop","LocalizeController","constructor","host","options","onLangChange","this","handleLangChange","resolved","resolveTranslation","lang","resolvedTranslation","requestUpdate","addController","isServer","document","documentElement","resolvedLang","$lang","hostConnected","unsubscribeTranslationRegistration","subscribeToTranslationRegistration","getAttribute","observer","MutationObserver","observe","attributes","attributeFilter","unsubscribeDocumentLang","subscribeToDocumentLang","hostDisconnected","_a","call","_b","_c","disconnect","term","key","args","component","localName","componentTranslation","console","warn","String","fallbackComponentTranslation","fallback","translationValue"],"mappings":"kxBA2BA,SAASA,IAET,OAEaC,EAOX,WAAAC,CACUC,EACAC,EAAU,CAAEC,aAAcL,IAD1BM,KAAIH,KAAJA,EACAG,KAAOF,QAAPA,EAkFFE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,gBACX,EAxFDT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,KACpD,CAKD,QAAIA,GACF,OAAII,EACKR,KAAKH,KAAKO,MAAQ,QAGpBJ,KAAKH,KAAKO,MAAQK,SAASC,gBAAgBN,IACnD,CAMD,gBAAIO,GACF,OAAOX,KAAKK,oBAAoBO,KACjC,CAED,aAAAC,GAEEb,KAAKc,mCAAqCC,EAAmCf,KAAKC,kBAIlF,MAAMC,EAAWC,EAAmBH,KAAKI,MACrCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,GAIzBF,KAAKH,KAAKmB,aAAa,SACzBhB,KAAKiB,SAAW,IAAIC,iBAAiBlB,KAAKC,kBAC1CD,KAAKiB,SAASE,QAAQnB,KAAKH,KAAM,CAC/BuB,YAAY,EACZC,gBAAiB,CAAC,WAKpBrB,KAAKsB,wBAA0BC,EAAwBvB,KAAKC,kBAG9DD,KAAKF,QAAQC,cACd,CAED,gBAAAyB,aAC8B,QAA5BC,EAAAzB,KAAKsB,+BAAuB,IAAAG,GAAAA,EAAAC,KAAA1B,MACW,QAAvC2B,EAAA3B,KAAKc,0CAAkC,IAAAa,GAAAA,EAAAD,KAAA1B,MACxB,QAAf4B,EAAA5B,KAAKiB,gBAAU,IAAAW,GAAAA,EAAAC,YAChB,CAED,IAAAC,CACEC,KACGC,SAEH,MAAM3B,oBAAEA,EAAmBM,aAAEA,GAAiBX,KACxCiC,EAAYjC,KAAKH,KAAKqC,UAGtBC,EAAuB9B,EAAoB4B,GAErB,MAAxBE,EACFC,QAAQC,KAAK,8CAA8CJ,kBAA0BtB,OAEjD,MAA7BwB,EAAqBJ,IAC5BK,QAAQC,KACN,mCAAmCC,OAAOP,wBAA0BE,iBAAyBtB,OAIjG,MAAM4B,EAA+BC,EAASP,GACxCQ,EAAmD,UAA/BN,aAAA,EAAAA,EAAuBJ,UAAQ,IAAAN,EAAAA,EAAAc,EAA6BR,GACtF,MAAmC,mBAArBU,EAAkCA,KAAoBT,GAAQS,CAC7E"}
+{"version":3,"file":"LocalizeController.js","sources":["../src/localization/LocalizeController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type {\n  Translation,\n  WellKnownKeys,\n} from './translation.js'\nimport { isServer } from 'lit'\nimport {\n  fallback,\n  resolveTranslation,\n  subscribeToDocumentLang,\n  subscribeToTranslationRegistration,\n} from './translation.js'\n\n// Use fallback (en) as source of truth for valid translation keys\ntype FallbackType = typeof fallback\n\n// helper types...\n\n// used to match any function\ntype Func = (...args: any[]) => any\n\n// if object property is function, use return type, else value type\ntype Result<Type, Key extends keyof Type> = Type[Key] extends Func ? ReturnType<Type[Key]> : Type[Key]\n\n// if object property is function,\ntype FuncParams<Type, K extends keyof Type> = Type[K] extends Func ? Parameters<Type[K]> : []\n\nfunction noop() {\n  // this function is intentionally left blank\n}\n\nexport class LocalizeController<TComponentName extends Exclude<keyof Translation, WellKnownKeys>>\nimplements ReactiveController {\n  private unsubscribeDocumentLang?: ReturnType<typeof subscribeToDocumentLang>\n  private unsubscribeTranslationRegistration?: ReturnType<typeof subscribeToTranslationRegistration>\n  private observer?: MutationObserver\n  private resolvedTranslation: Translation\n\n  constructor(\n    private host: ReactiveControllerHost & HTMLElement,\n    private options = { onLangChange: noop },\n  ) {\n    host.addController(this)\n    this.resolvedTranslation = resolveTranslation(this.lang)\n  }\n\n  /**\n   * The lang of the document or element, with element taking precedence\n   */\n  get lang() {\n    if (isServer) {\n      return this.host.lang || 'en-US'\n    }\n\n    return this.host.lang || document.documentElement.lang\n  }\n\n  /**\n   * The lang of the translation being applied.\n   * This may not match the document/element lang, in case of fallback translation\n   */\n  get resolvedLang() {\n    return this.resolvedTranslation.$lang\n  }\n\n  hostConnected() {\n    // Always subscribe to translation registration changes (for when new translations are registered)\n    this.unsubscribeTranslationRegistration = subscribeToTranslationRegistration(this.handleLangChange)\n\n    // Re-resolve translation now that the host is connected and attributes are set\n    // This handles cases where the lang attribute is set after the constructor runs (e.g., in Vue)\n    const resolved = resolveTranslation(this.lang)\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n    }\n\n    // If the host has its own `lang` attribute, create a local observer to watch for changes to that attribute\n    if (this.host.getAttribute('lang')) {\n      this.observer = new MutationObserver(this.handleLangChange)\n      this.observer.observe(this.host, {\n        attributes: true,\n        attributeFilter: ['lang'],\n      })\n    }\n    else {\n      // Otherwise, also subscribe to document language changes\n      this.unsubscribeDocumentLang = subscribeToDocumentLang(this.handleLangChange)\n    }\n\n    this.options.onLangChange()\n  }\n\n  hostDisconnected() {\n    this.unsubscribeDocumentLang?.()\n    this.unsubscribeTranslationRegistration?.()\n    this.observer?.disconnect()\n  }\n\n  term<Key extends keyof FallbackType[TComponentName]>(\n    key: Key,\n    ...args: FuncParams<FallbackType[TComponentName], Key>\n  ): Result<FallbackType[TComponentName], Key> {\n    const { resolvedTranslation, resolvedLang } = this\n    const component = this.host.localName as TComponentName\n\n    // Cast to specific component type to satisfy TS that key is valid for this component\n    const componentTranslation = resolvedTranslation[component] as FallbackType[TComponentName] | undefined\n\n    if (componentTranslation == null) {\n      console.warn(`NORD: Missing translations for component \\`${component}\\` in lang: \\`${resolvedLang}\\``)\n    }\n    else if (componentTranslation[key] == null) {\n      console.warn(\n        `NORD: Missing translation key \\`${String(key)}\\` for component \\`${component}\\` in lang \\`${resolvedLang}\\``,\n      )\n    }\n\n    const fallbackComponentTranslation = fallback[component] as FallbackType[TComponentName]\n    const translationValue = (componentTranslation?.[key] ?? fallbackComponentTranslation[key]) as Result<FallbackType[TComponentName], Key>\n    return typeof translationValue === 'function' ? translationValue(...args) : translationValue\n  }\n\n  private handleLangChange = () => {\n    const resolved = resolveTranslation(this.lang)\n\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n\n      this.options.onLangChange()\n      this.host.requestUpdate()\n    }\n  }\n}\n"],"names":["noop","LocalizeController","constructor","host","options","onLangChange","this","handleLangChange","resolved","resolveTranslation","lang","resolvedTranslation","requestUpdate","addController","isServer","document","documentElement","resolvedLang","$lang","hostConnected","unsubscribeTranslationRegistration","subscribeToTranslationRegistration","getAttribute","observer","MutationObserver","observe","attributes","attributeFilter","unsubscribeDocumentLang","subscribeToDocumentLang","hostDisconnected","_a","call","_b","_c","disconnect","term","key","args","component","localName","componentTranslation","console","warn","String","fallbackComponentTranslation","fallback","translationValue"],"mappings":"8yBA2BA,SAASA,IAET,OAEaC,EAOX,WAAAC,CACUC,EACAC,EAAU,CAAEC,aAAcL,IAD1BM,KAAIH,KAAJA,EACAG,KAAOF,QAAPA,EAkFFE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,gBACX,EAxFDT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,KACpD,CAKD,QAAIA,GACF,OAAII,EACKR,KAAKH,KAAKO,MAAQ,QAGpBJ,KAAKH,KAAKO,MAAQK,SAASC,gBAAgBN,IACnD,CAMD,gBAAIO,GACF,OAAOX,KAAKK,oBAAoBO,KACjC,CAED,aAAAC,GAEEb,KAAKc,mCAAqCC,EAAmCf,KAAKC,kBAIlF,MAAMC,EAAWC,EAAmBH,KAAKI,MACrCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,GAIzBF,KAAKH,KAAKmB,aAAa,SACzBhB,KAAKiB,SAAW,IAAIC,iBAAiBlB,KAAKC,kBAC1CD,KAAKiB,SAASE,QAAQnB,KAAKH,KAAM,CAC/BuB,YAAY,EACZC,gBAAiB,CAAC,WAKpBrB,KAAKsB,wBAA0BC,EAAwBvB,KAAKC,kBAG9DD,KAAKF,QAAQC,cACd,CAED,gBAAAyB,aAC8B,QAA5BC,EAAAzB,KAAKsB,+BAAuB,IAAAG,GAAAA,EAAAC,KAAA1B,MACW,QAAvC2B,EAAA3B,KAAKc,0CAAkC,IAAAa,GAAAA,EAAAD,KAAA1B,MACxB,QAAf4B,EAAA5B,KAAKiB,gBAAU,IAAAW,GAAAA,EAAAC,YAChB,CAED,IAAAC,CACEC,KACGC,SAEH,MAAM3B,oBAAEA,EAAmBM,aAAEA,GAAiBX,KACxCiC,EAAYjC,KAAKH,KAAKqC,UAGtBC,EAAuB9B,EAAoB4B,GAErB,MAAxBE,EACFC,QAAQC,KAAK,8CAA8CJ,kBAA0BtB,OAEjD,MAA7BwB,EAAqBJ,IAC5BK,QAAQC,KACN,mCAAmCC,OAAOP,wBAA0BE,iBAAyBtB,OAIjG,MAAM4B,EAA+BC,EAASP,GACxCQ,EAAmD,UAA/BN,aAAA,EAAAA,EAAuBJ,UAAQ,IAAAN,EAAAA,EAAAc,EAA6BR,GACtF,MAAmC,mBAArBU,EAAkCA,KAAoBT,GAAQS,CAC7E"}

package/lib/Message.js

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as i,html as t,LitElement as r}from"lit";import{property as e,customElement as a}from"lit/decorators.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{ref as n}from"lit/directives/ref.js";import{F as l}from"./FocusableMixin-BlQLNPdJ.js";import{s as c}from"./Component-BJ5O5n8k.js";import{s as m}from"./DropdownItem-BYbOLth6.js";import{LocalizeController as p}from"./LocalizeController.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";const d=i`:host{--_n-message-border-color:var(--n-message-border-color,var(--n-color-border));border-block-end:1px solid var(--_n-message-border-color);padding:var(--n-space-s)}.n-message{align-items:flex-start;color:var(--n-color-text);flex-direction:column;font-size:var(--n-font-size-m);gap:var(--n-space-xs);margin:0;padding-inline-start:var(--n-space-xl);position:relative}.n-message,slot[name=footer]{font-weight:var(--n-font-weight);line-height:var(--n-line-height-heading)}slot[name=footer]{color:var(--n-color-text-weaker);font-size:var(--n-font-size-s)}:host([highlight]) .n-message:after{background:var(--n-color-accent);block-size:100%;border-radius:var(--n-border-radius-s);content:"";filter:brightness(150%);inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:.15;position:absolute;z-index:var(--n-index-deep)}.n-unread{background:var(--n-color-accent);border-radius:var(--n-border-radius-circle);inset-block-start:calc(var(--n-space-s) + var(--n-space-xs));inset-inline-start:var(--n-space-m);min-block-size:var(--n-size-icon-xxs);min-inline-size:var(--n-size-icon-xxs);position:absolute}`;let f=class extends(l(r)){constructor(){super(...arguments),this.localize=new p(this)}render(){return(this.href?o=>t`<a href="${s(this.href)}" ${n(this.focusableRef)} class="n-dropdown-item n-message">${o}</a>`:o=>t`<button ${n(this.focusableRef)} class="n-dropdown-item n-message">${o}</button>`)(t`<div role="img" class="n-unread" aria-label="${this.localize.term("unreadLabel")}" ?hidden="${!this.unread}"></div><slot></slot><slot name="footer"></slot>`)}};f.styles=[c,m,d],o([e({reflect:!0})],f.prototype,"href",void 0),o([e({reflect:!0,type:Boolean})],f.prototype,"highlight",void 0),o([e({reflect:!0,type:Boolean})],f.prototype,"unread",void 0),f=o([a("nord-message")],f);var z=f;export{z as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as i,html as t,LitElement as r}from"lit";import{property as e,customElement as a}from"lit/decorators.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{ref as n}from"lit/directives/ref.js";import{F as l}from"./FocusableMixin-BlQLNPdJ.js";import{s as c}from"./Component-BJ5O5n8k.js";import{s as m}from"./DropdownItem-BYbOLth6.js";import{LocalizeController as p}from"./LocalizeController.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";const d=i`:host{--_n-message-border-color:var(--n-message-border-color,var(--n-color-border));border-block-end:1px solid var(--_n-message-border-color);padding:var(--n-space-s)}.n-message{align-items:flex-start;color:var(--n-color-text);flex-direction:column;font-size:var(--n-font-size-m);gap:var(--n-space-xs);margin:0;padding-inline-start:var(--n-space-xl);position:relative}.n-message,slot[name=footer]{font-weight:var(--n-font-weight);line-height:var(--n-line-height-heading)}slot[name=footer]{color:var(--n-color-text-weaker);font-size:var(--n-font-size-s)}:host([highlight]) .n-message:after{background:var(--n-color-accent);block-size:100%;border-radius:var(--n-border-radius-s);content:"";filter:brightness(150%);inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:.15;position:absolute;z-index:var(--n-index-deep)}.n-unread{background:var(--n-color-accent);border-radius:var(--n-border-radius-circle);inset-block-start:calc(var(--n-space-s) + var(--n-space-xs));inset-inline-start:var(--n-space-m);min-block-size:var(--n-size-icon-xxs);min-inline-size:var(--n-size-icon-xxs);position:absolute}`;let f=class extends(l(r)){constructor(){super(...arguments),this.localize=new p(this)}render(){return(this.href?o=>t`<a href="${s(this.href)}" ${n(this.focusableRef)} class="n-dropdown-item n-message">${o}</a>`:o=>t`<button ${n(this.focusableRef)} class="n-dropdown-item n-message">${o}</button>`)(t`<div role="img" class="n-unread" aria-label="${this.localize.term("unreadLabel")}" ?hidden="${!this.unread}"></div><slot></slot><slot name="footer"></slot>`)}};f.styles=[c,m,d],o([e({reflect:!0})],f.prototype,"href",void 0),o([e({reflect:!0,type:Boolean})],f.prototype,"highlight",void 0),o([e({reflect:!0,type:Boolean})],f.prototype,"unread",void 0),f=o([a("nord-message")],f);var z=f;export{z as default};
 //# sourceMappingURL=Message.js.map

package/lib/Message.js.map

@@ -1 +1 @@
-{"version":3,"file":"Message.js","sources":["../src/message/Message.ts"],"sourcesContent":["import type { TemplateResult } from 'lit'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport itemStyle from '../dropdown-item/DropdownItem.css'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Message.css'\n\n/**\n * Message represents a specific item within a collection,\n * such as notifications, tasks or conversations. Message\n * can be placed directly inside a dropdown component.\n *\n * @status ready\n * @category action\n * @slot - The message content.\n * @slot footer - Used to place content after the message. Typically used for a timestamp.\n *\n * @cssprop [--n-message-border-color=var(--n-color-border)] - Controls the border color of the message, using our [color tokens](/tokens/#color).\n *\n * @localization unreadLabel - Label for the unread messages.\n */\n@customElement('nord-message')\nexport default class Message extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, itemStyle, style]\n\n  private localize = new LocalizeController<'nord-message'>(this)\n\n  /**\n   * The url the message should link to.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Highlight the message visually. This is meant for highlighting\n   * a new message that just appeared. Highlight style should be removed\n   * after the user has seen the message and there’s been a timeout of\n   * e.g. 30 seconds.\n   */\n  @property({ reflect: true, type: Boolean }) highlight?: boolean\n\n  /**\n   * Mark the message as unread. By default messages are read.\n   */\n  @property({ reflect: true, type: Boolean }) unread?: boolean\n\n  // TODO: dropdown-item and message component have the same logic\n  // for determining if it renders a link vs button. Perhaps we\n  // can later see if both can use a mixin or similar instead?\n  render() {\n    const link = (content: TemplateResult) =>\n      html`<a href=${ifDefined(this.href)} ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</a>`\n    const button = (content: TemplateResult) =>\n      html`<button ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</button>`\n\n    const container = this.href ? link : button\n\n    return container(html`\n      <div role=\"img\" class=\"n-unread\" aria-label=${this.localize.term('unreadLabel')} ?hidden=${!this.unread}></div>\n      <slot></slot>\n      <slot name=\"footer\"></slot>\n    `)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-message': Message\n  }\n}\n"],"names":["Message","FocusableMixin","LitElement","constructor","this","localize","LocalizeController","render","href","content","html","ifDefined","ref","focusableRef","term","unread","styles","componentStyle","itemStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"urEA2Be,IAAMA,EAAN,cAAsBC,EAAeC,IAArC,WAAAC,uBAGLC,KAAAC,SAAW,IAAIC,EAAmCF,KAqC3D,CAdC,MAAAG,GAQE,OAFkBH,KAAKI,KALTC,GACZC,CAAI,YAAWC,EAAUP,KAAKI,UAASI,EAAIR,KAAKS,mDAAmDJ,QACrFA,GACdC,CAAI,WAAWE,EAAIR,KAAKS,mDAAmDJ,cAI5DC,CAAI,gDAC2BN,KAAKC,SAASS,KAAK,6BAA2BV,KAAKW,yDAIpG,GAtCMf,EAAMgB,OAAG,CAACC,EAAgBC,EAAWC,GAOfC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBtB,EAAAuB,UAAA,YAAA,GAQEH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA8BzB,EAAAuB,UAAA,iBAAA,GAKnBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA2BzB,EAAAuB,UAAA,cAAA,GArBzCvB,EAAOoB,EAAA,CAD3BM,EAAc,iBACM1B,SAAAA"}
+{"version":3,"file":"Message.js","sources":["../src/message/Message.ts"],"sourcesContent":["import type { TemplateResult } from 'lit'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport itemStyle from '../dropdown-item/DropdownItem.css'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Message.css'\n\n/**\n * Message represents a specific item within a collection,\n * such as notifications, tasks or conversations. Message\n * can be placed directly inside a dropdown component.\n *\n * @status ready\n * @category action\n * @slot - The message content.\n * @slot footer - Used to place content after the message. Typically used for a timestamp.\n *\n * @cssprop [--n-message-border-color=var(--n-color-border)] - Controls the border color of the message, using our [color tokens](/tokens/#color).\n *\n * @localization unreadLabel - Label for the unread messages.\n */\n@customElement('nord-message')\nexport default class Message extends FocusableMixin(LitElement) {\n  static styles = [componentStyle, itemStyle, style]\n\n  private localize = new LocalizeController<'nord-message'>(this)\n\n  /**\n   * The url the message should link to.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * Highlight the message visually. This is meant for highlighting\n   * a new message that just appeared. Highlight style should be removed\n   * after the user has seen the message and there’s been a timeout of\n   * e.g. 30 seconds.\n   */\n  @property({ reflect: true, type: Boolean }) highlight?: boolean\n\n  /**\n   * Mark the message as unread. By default messages are read.\n   */\n  @property({ reflect: true, type: Boolean }) unread?: boolean\n\n  // TODO: dropdown-item and message component have the same logic\n  // for determining if it renders a link vs button. Perhaps we\n  // can later see if both can use a mixin or similar instead?\n  render() {\n    const link = (content: TemplateResult) =>\n      html`<a href=${ifDefined(this.href)} ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</a>`\n    const button = (content: TemplateResult) =>\n      html`<button ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</button>`\n\n    const container = this.href ? link : button\n\n    return container(html`\n      <div role=\"img\" class=\"n-unread\" aria-label=${this.localize.term('unreadLabel')} ?hidden=${!this.unread}></div>\n      <slot></slot>\n      <slot name=\"footer\"></slot>\n    `)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-message': Message\n  }\n}\n"],"names":["Message","FocusableMixin","LitElement","constructor","this","localize","LocalizeController","render","href","content","html","ifDefined","ref","focusableRef","term","unread","styles","componentStyle","itemStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"mtEA2Be,IAAMA,EAAN,cAAsBC,EAAeC,IAArC,WAAAC,uBAGLC,KAAAC,SAAW,IAAIC,EAAmCF,KAqC3D,CAdC,MAAAG,GAQE,OAFkBH,KAAKI,KALTC,GACZC,CAAI,YAAWC,EAAUP,KAAKI,UAASI,EAAIR,KAAKS,mDAAmDJ,QACrFA,GACdC,CAAI,WAAWE,EAAIR,KAAKS,mDAAmDJ,cAI5DC,CAAI,gDAC2BN,KAAKC,SAASS,KAAK,6BAA2BV,KAAKW,yDAIpG,GAtCMf,EAAMgB,OAAG,CAACC,EAAgBC,EAAWC,GAOfC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBtB,EAAAuB,UAAA,YAAA,GAQEH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA8BzB,EAAAuB,UAAA,iBAAA,GAKnBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA2BzB,EAAAuB,UAAA,cAAA,GArBzCvB,EAAOoB,EAAA,CAD3BM,EAAc,iBACM1B,SAAAA"}

package/lib/Meter.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,html as r,nothing as a,LitElement as i}from"lit";import{property as n,customElement as o}from"lit/decorators.js";import{i as s}from"./light-dom-styles-DXsbiKU9.js";import{D as l}from"./DraftComponentMixin-4qug5Rky.js";const m=t`nord-meter{--_n-meter-size:var(--n-meter-size,var(--n-space-s));--_n-meter-border-radius:var(--n-meter-border-radius,var(--n-border-radius-s));--_n-meter-color:var(--n-meter-color,var(--n-color-accent));display:block;font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);inline-size:100%}nord-meter,nord-meter *,nord-meter :after,nord-meter :before{box-sizing:border-box}nord-meter .n-meter-header{align-items:baseline;display:flex;font-size:var(--n-font-size-s);gap:var(--n-space-s);justify-content:space-between;line-height:var(--n-line-height-tight);margin-block-end:var(--n-space-s)}nord-meter .n-meter-label{color:var(--n-color-text)}nord-meter .n-meter-value{color:var(--n-color-text-weaker);text-align:end}nord-meter .n-meter-track{background-color:var(--n-color-surface-lowered);block-size:var(--_n-meter-size);border-radius:var(--_n-meter-border-radius);overflow:hidden}nord-meter .n-meter-indicator{background-color:var(--_n-meter-color);block-size:100%;border-radius:var(--_n-meter-border-radius);transition:inline-size var(--n-transition-slowly)}@media (prefers-reduced-motion:reduce){nord-meter .n-meter-indicator{transition:none}}`;function d(e,t,r){return Math.min(Math.max(e,t),r)}let c=class extends(l(i)){constructor(){super(...arguments),this.value=0,this.min=0,this.max=100,this.label=""}get bounds(){const e=Number.isNaN(this.min)?0:this.min,t=Number.isNaN(this.max)?e:this.max;return e<=t?{min:e,max:t}:{min:t,max:e}}get clampedValue(){const{min:e,max:t}=this.bounds;return d(Number.isNaN(this.value)?e:this.value,e,t)}get percentage(){const{min:e,max:t}=this.bounds,r=(this.clampedValue-e)/(t-e)*100;return d(Number.isNaN(r)?0:r,0,100)}get formattedValue(){return this.format?new Intl.NumberFormat(this.locale,this.format).format(this.clampedValue):new Intl.NumberFormat(this.locale,{style:"percent"}).format(this.percentage/100)}connectedCallback(){super.connectedCallback(),s(this,m)}createRenderRoot(){return this}updated(){const{min:e,max:t}=this.bounds;this.setAttribute("role","meter"),this.setAttribute("aria-valuenow",String(this.clampedValue)),this.setAttribute("aria-valuemin",String(e)),this.setAttribute("aria-valuemax",String(t)),this.setAttribute("aria-valuetext",this.formattedValue),this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label")}render(){return r`${this.label?r`<div class="n-meter-header" aria-hidden="true"><span class="n-meter-label">${this.label}</span> <span class="n-meter-value">${this.formattedValue}</span></div>`:a}<div class="n-meter-track" part="track"><div class="n-meter-indicator" part="indicator" style="inline-size:${this.percentage}"></div></div>`}};e([n({reflect:!0,type:Number})],c.prototype,"value",void 0),e([n({reflect:!0,type:Number})],c.prototype,"min",void 0),e([n({reflect:!0,type:Number})],c.prototype,"max",void 0),e([n()],c.prototype,"label",void 0),e([n({attribute:!1})],c.prototype,"format",void 0),e([n()],c.prototype,"locale",void 0),c=e([o("nord-meter")],c);var u=c;export{u as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,html as r,nothing as a,LitElement as i}from"lit";import{property as n,customElement as o}from"lit/decorators.js";import{i as s}from"./light-dom-styles-DXsbiKU9.js";import{D as l}from"./DraftComponentMixin-4qug5Rky.js";const m=t`nord-meter{--_n-meter-size:var(--n-meter-size,var(--n-space-s));--_n-meter-border-radius:var(--n-meter-border-radius,var(--n-border-radius-s));--_n-meter-color:var(--n-meter-color,var(--n-color-accent));display:block;font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);inline-size:100%}nord-meter,nord-meter *,nord-meter :after,nord-meter :before{box-sizing:border-box}nord-meter .n-meter-header{align-items:baseline;display:flex;font-size:var(--n-font-size-s);gap:var(--n-space-s);justify-content:space-between;line-height:var(--n-line-height-tight);margin-block-end:var(--n-space-s)}nord-meter .n-meter-label{color:var(--n-color-text)}nord-meter .n-meter-value{color:var(--n-color-text-weaker);text-align:end}nord-meter .n-meter-track{background-color:var(--n-color-surface-lowered);block-size:var(--_n-meter-size);border-radius:var(--_n-meter-border-radius);overflow:hidden}nord-meter .n-meter-indicator{background-color:var(--_n-meter-color);block-size:100%;border-radius:var(--_n-meter-border-radius);transition:inline-size var(--n-transition-slowly)}@media (prefers-reduced-motion:reduce){nord-meter .n-meter-indicator{transition:none}}`;function d(e,t,r){return Math.min(Math.max(e,t),r)}let c=class extends(l(i)){constructor(){super(...arguments),this.value=0,this.min=0,this.max=100,this.label=""}get bounds(){const e=Number.isNaN(this.min)?0:this.min,t=Number.isNaN(this.max)?e:this.max;return e<=t?{min:e,max:t}:{min:t,max:e}}get clampedValue(){const{min:e,max:t}=this.bounds;return d(Number.isNaN(this.value)?e:this.value,e,t)}get percentage(){const{min:e,max:t}=this.bounds,r=(this.clampedValue-e)/(t-e)*100;return d(Number.isNaN(r)?0:r,0,100)}get formattedValue(){return this.format?new Intl.NumberFormat(this.locale,this.format).format(this.clampedValue):new Intl.NumberFormat(this.locale,{style:"percent"}).format(this.percentage/100)}connectedCallback(){super.connectedCallback(),s(this,m)}createRenderRoot(){return this}updated(){const{min:e,max:t}=this.bounds;this.setAttribute("role","meter"),this.setAttribute("aria-valuenow",String(this.clampedValue)),this.setAttribute("aria-valuemin",String(e)),this.setAttribute("aria-valuemax",String(t)),this.setAttribute("aria-valuetext",this.formattedValue),this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label")}render(){return r`${this.label?r`<div class="n-meter-header" aria-hidden="true"><span class="n-meter-label">${this.label}</span> <span class="n-meter-value">${this.formattedValue}</span></div>`:a}<div class="n-meter-track" part="track"><div class="n-meter-indicator" part="indicator" style="${`inline-size: ${this.percentage}%`}"></div></div>`}};e([n({reflect:!0,type:Number})],c.prototype,"value",void 0),e([n({reflect:!0,type:Number})],c.prototype,"min",void 0),e([n({reflect:!0,type:Number})],c.prototype,"max",void 0),e([n()],c.prototype,"label",void 0),e([n({attribute:!1})],c.prototype,"format",void 0),e([n()],c.prototype,"locale",void 0),c=e([o("nord-meter")],c);var u=c;export{u as default};
 //# sourceMappingURL=Meter.js.map

package/lib/Meter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Meter.js","sources":["../src/meter/Meter.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport style from './Meter.css'\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max)\n}\n\n/**\n * Meter is a graphical display of a numeric value within a known range,\n * such as disk usage, a battery level or a score. Unlike Progress Bar, it\n * represents a static measurement rather than the completion of a task.\n *\n * @status draft\n * @category feedback\n * @lightDom true\n *\n * @part track - The track which holds the indicator.\n * @part indicator - The filled portion of the track representing the value.\n *\n * @cssprop [--n-meter-size=var(--n-space-s)] - Controls the thickness of the meter, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-meter-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-meter-color=var(--n-color-accent)] - Controls the color of the indicator, using [color tokens](/tokens/#color).\n */\n@customElement('nord-meter')\nexport default class Meter extends DraftComponentMixin(LitElement) {\n  /**\n   * The current value. Must be between `min` and `max`.\n   */\n  @property({ reflect: true, type: Number }) value = 0\n\n  /**\n   * The minimum value. If `min` is greater than `max`, the two are swapped so\n   * the range is always well-formed.\n   */\n  @property({ reflect: true, type: Number }) min = 0\n\n  /**\n   * The maximum value. If `min` is greater than `max`, the two are swapped so\n   * the range is always well-formed.\n   */\n  @property({ reflect: true, type: Number }) max = 100\n\n  /**\n   * A label describing what the meter represents. Shown above the meter and\n   * exposed to assistive technology.\n   */\n  @property() label = ''\n\n  /**\n   * Options used to format the displayed and announced value with\n   * `Intl.NumberFormat`. When omitted, the value is shown as a percentage of\n   * the range so the text stays in sync with the indicator fill.\n   */\n  @property({ attribute: false }) format?: Intl.NumberFormatOptions\n\n  /**\n   * The locale used by `Intl.NumberFormat` when formatting the value.\n   * Defaults to the runtime locale.\n   */\n  @property() locale?: string\n\n  /**\n   * The effective range bounds, normalised so `min <= max` even if the\n   * properties are set the other way round (a degenerate `min > max` would\n   * otherwise produce NaN/negative fills).\n   */\n  private get bounds(): { min: number, max: number } {\n    const min = Number.isNaN(this.min) ? 0 : this.min\n    const max = Number.isNaN(this.max) ? min : this.max\n    return min <= max ? { min, max } : { min: max, max: min }\n  }\n\n  /** The value clamped to the `min`/`max` range. */\n  private get clampedValue(): number {\n    const { min, max } = this.bounds\n    return clamp(Number.isNaN(this.value) ? min : this.value, min, max)\n  }\n\n  /** The value as a percentage (0–100) of the range, clamped. */\n  private get percentage(): number {\n    const { min, max } = this.bounds\n    const raw = ((this.clampedValue - min) / (max - min)) * 100\n    return clamp(Number.isNaN(raw) ? 0 : raw, 0, 100)\n  }\n\n  /**\n   * The human-readable value used for display and `aria-valuetext`. Always\n   * derived from the clamped value so the announced/displayed text stays in\n   * sync with the indicator fill (never raw or NaN).\n   */\n  private get formattedValue(): string {\n    if (this.format) {\n      return new Intl.NumberFormat(this.locale, this.format).format(this.clampedValue)\n    }\n\n    return new Intl.NumberFormat(this.locale, { style: 'percent' }).format(this.percentage / 100)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  // Render into the light DOM so the role/value semantics are exposed directly\n  // and assistive tech reads the label reliably (no shadow boundary).\n  protected createRenderRoot() {\n    return this\n  }\n\n  protected updated() {\n    // Meter is a non-interactive measurement, so the ARIA lives on the host.\n    const { min, max } = this.bounds\n    this.setAttribute('role', 'meter')\n    this.setAttribute('aria-valuenow', String(this.clampedValue))\n    this.setAttribute('aria-valuemin', String(min))\n    this.setAttribute('aria-valuemax', String(max))\n    this.setAttribute('aria-valuetext', this.formattedValue)\n\n    if (this.label) {\n      this.setAttribute('aria-label', this.label)\n    }\n    else {\n      this.removeAttribute('aria-label')\n    }\n  }\n\n  render() {\n    return html`\n      ${this.label\n        ? html`<div class=\"n-meter-header\" aria-hidden=\"true\">\n            <span class=\"n-meter-label\">${this.label}</span>\n            <span class=\"n-meter-value\">${this.formattedValue}</span>\n          </div>`\n        : nothing}\n      <div class=\"n-meter-track\" part=\"track\">\n        <div\n          class=\"n-meter-indicator\"\n          part=\"indicator\"\n          style=\"inline-size: ${this.percentage}%\"\n        ></div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-meter': Meter\n  }\n}\n"],"names":["clamp","value","min","max","Math","Meter","DraftComponentMixin","LitElement","constructor","this","label","bounds","Number","isNaN","clampedValue","percentage","raw","formattedValue","format","Intl","NumberFormat","locale","style","connectedCallback","super","injectLightDomStyles","createRenderRoot","updated","setAttribute","String","removeAttribute","render","html","nothing","__decorate","property","reflect","type","prototype","attribute","customElement"],"mappings":"k7CAOA,SAASA,EAAMC,EAAeC,EAAaC,GACzC,OAAOC,KAAKF,IAAIE,KAAKD,IAAIF,EAAOC,GAAMC,EACxC,CAmBe,IAAME,EAAN,cAAoBC,EAAoBC,IAAxC,WAAAC,uBAI8BC,KAAKR,MAAG,EAMRQ,KAAGP,IAAG,EAMNO,KAAGN,IAAG,IAMrCM,KAAKC,MAAG,EAiGrB,CA7EC,UAAYC,GACV,MAAMT,EAAMU,OAAOC,MAAMJ,KAAKP,KAAO,EAAIO,KAAKP,IACxCC,EAAMS,OAAOC,MAAMJ,KAAKN,KAAOD,EAAMO,KAAKN,IAChD,OAAOD,GAAOC,EAAM,CAAED,MAAKC,OAAQ,CAAED,IAAKC,EAAKA,IAAKD,EACrD,CAGD,gBAAYY,GACV,MAAMZ,IAAEA,EAAGC,IAAEA,GAAQM,KAAKE,OAC1B,OAAOX,EAAMY,OAAOC,MAAMJ,KAAKR,OAASC,EAAMO,KAAKR,MAAOC,EAAKC,EAChE,CAGD,cAAYY,GACV,MAAMb,IAAEA,EAAGC,IAAEA,GAAQM,KAAKE,OACpBK,GAAQP,KAAKK,aAAeZ,IAAQC,EAAMD,GAAQ,IACxD,OAAOF,EAAMY,OAAOC,MAAMG,GAAO,EAAIA,EAAK,EAAG,IAC9C,CAOD,kBAAYC,GACV,OAAIR,KAAKS,OACA,IAAIC,KAAKC,aAAaX,KAAKY,OAAQZ,KAAKS,QAAQA,OAAOT,KAAKK,cAG9D,IAAIK,KAAKC,aAAaX,KAAKY,OAAQ,CAAEC,MAAO,YAAaJ,OAAOT,KAAKM,WAAa,IAC1F,CAED,iBAAAQ,GACEC,MAAMD,oBACNE,EAAqBhB,KAAMa,EAC5B,CAIS,gBAAAI,GACR,OAAOjB,IACR,CAES,OAAAkB,GAER,MAAMzB,IAAEA,EAAGC,IAAEA,GAAQM,KAAKE,OAC1BF,KAAKmB,aAAa,OAAQ,SAC1BnB,KAAKmB,aAAa,gBAAiBC,OAAOpB,KAAKK,eAC/CL,KAAKmB,aAAa,gBAAiBC,OAAO3B,IAC1CO,KAAKmB,aAAa,gBAAiBC,OAAO1B,IAC1CM,KAAKmB,aAAa,iBAAkBnB,KAAKQ,gBAErCR,KAAKC,MACPD,KAAKmB,aAAa,aAAcnB,KAAKC,OAGrCD,KAAKqB,gBAAgB,aAExB,CAED,MAAAC,GACE,OAAOC,CAAI,GACPvB,KAAKC,MACHsB,CAAI,8EAC4BvB,KAAKC,4CACLD,KAAKQ,8BAErCgB,+GAKsBxB,KAAKM,0BAIlC,GAlH0CmB,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMzB,UAAmBP,EAAAiC,UAAA,aAAA,GAMTJ,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMzB,UAAiBP,EAAAiC,UAAA,WAAA,GAMPJ,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMzB,UAAmBP,EAAAiC,UAAA,WAAA,GAMxCJ,EAAA,CAAXC,KAAqB9B,EAAAiC,UAAA,aAAA,GAOUJ,EAAA,CAA/BC,EAAS,CAAEI,WAAW,KAA0ClC,EAAAiC,UAAA,cAAA,GAMrDJ,EAAA,CAAXC,KAA0B9B,EAAAiC,UAAA,cAAA,GAnCRjC,EAAK6B,EAAA,CADzBM,EAAc,eACMnC,SAAAA"}
+{"version":3,"file":"Meter.js","sources":["../src/meter/Meter.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport style from './Meter.css'\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max)\n}\n\n/**\n * Meter is a graphical display of a numeric value within a known range,\n * such as disk usage, a battery level or a score. Unlike Progress Bar, it\n * represents a static measurement rather than the completion of a task.\n *\n * @status draft\n * @category feedback\n * @lightDom true\n *\n * @part track - The track which holds the indicator.\n * @part indicator - The filled portion of the track representing the value.\n *\n * @cssprop [--n-meter-size=var(--n-space-s)] - Controls the thickness of the meter, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-meter-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-meter-color=var(--n-color-accent)] - Controls the color of the indicator, using [color tokens](/tokens/#color).\n */\n@customElement('nord-meter')\nexport default class Meter extends DraftComponentMixin(LitElement) {\n  /**\n   * The current value. Must be between `min` and `max`.\n   */\n  @property({ reflect: true, type: Number }) value = 0\n\n  /**\n   * The minimum value. If `min` is greater than `max`, the two are swapped so\n   * the range is always well-formed.\n   */\n  @property({ reflect: true, type: Number }) min = 0\n\n  /**\n   * The maximum value. If `min` is greater than `max`, the two are swapped so\n   * the range is always well-formed.\n   */\n  @property({ reflect: true, type: Number }) max = 100\n\n  /**\n   * A label describing what the meter represents. Shown above the meter and\n   * exposed to assistive technology.\n   */\n  @property() label = ''\n\n  /**\n   * Options used to format the displayed and announced value with\n   * `Intl.NumberFormat`. When omitted, the value is shown as a percentage of\n   * the range so the text stays in sync with the indicator fill.\n   */\n  @property({ attribute: false }) format?: Intl.NumberFormatOptions\n\n  /**\n   * The locale used by `Intl.NumberFormat` when formatting the value.\n   * Defaults to the runtime locale.\n   */\n  @property() locale?: string\n\n  /**\n   * The effective range bounds, normalised so `min <= max` even if the\n   * properties are set the other way round (a degenerate `min > max` would\n   * otherwise produce NaN/negative fills).\n   */\n  private get bounds(): { min: number, max: number } {\n    const min = Number.isNaN(this.min) ? 0 : this.min\n    const max = Number.isNaN(this.max) ? min : this.max\n    return min <= max ? { min, max } : { min: max, max: min }\n  }\n\n  /** The value clamped to the `min`/`max` range. */\n  private get clampedValue(): number {\n    const { min, max } = this.bounds\n    return clamp(Number.isNaN(this.value) ? min : this.value, min, max)\n  }\n\n  /** The value as a percentage (0–100) of the range, clamped. */\n  private get percentage(): number {\n    const { min, max } = this.bounds\n    const raw = ((this.clampedValue - min) / (max - min)) * 100\n    return clamp(Number.isNaN(raw) ? 0 : raw, 0, 100)\n  }\n\n  /**\n   * The human-readable value used for display and `aria-valuetext`. Always\n   * derived from the clamped value so the announced/displayed text stays in\n   * sync with the indicator fill (never raw or NaN).\n   */\n  private get formattedValue(): string {\n    if (this.format) {\n      return new Intl.NumberFormat(this.locale, this.format).format(this.clampedValue)\n    }\n\n    return new Intl.NumberFormat(this.locale, { style: 'percent' }).format(this.percentage / 100)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  // Render into the light DOM so the role/value semantics are exposed directly\n  // and assistive tech reads the label reliably (no shadow boundary).\n  protected createRenderRoot() {\n    return this\n  }\n\n  protected updated() {\n    // Meter is a non-interactive measurement, so the ARIA lives on the host.\n    const { min, max } = this.bounds\n    this.setAttribute('role', 'meter')\n    this.setAttribute('aria-valuenow', String(this.clampedValue))\n    this.setAttribute('aria-valuemin', String(min))\n    this.setAttribute('aria-valuemax', String(max))\n    this.setAttribute('aria-valuetext', this.formattedValue)\n\n    if (this.label) {\n      this.setAttribute('aria-label', this.label)\n    }\n    else {\n      this.removeAttribute('aria-label')\n    }\n  }\n\n  render() {\n    return html`\n      ${this.label\n        ? html`<div class=\"n-meter-header\" aria-hidden=\"true\">\n            <span class=\"n-meter-label\">${this.label}</span>\n            <span class=\"n-meter-value\">${this.formattedValue}</span>\n          </div>`\n        : nothing}\n      <div class=\"n-meter-track\" part=\"track\">\n        <div\n          class=\"n-meter-indicator\"\n          part=\"indicator\"\n          style=${`inline-size: ${this.percentage}%`}\n        ></div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-meter': Meter\n  }\n}\n"],"names":["clamp","value","min","max","Math","Meter","DraftComponentMixin","LitElement","constructor","this","label","bounds","Number","isNaN","clampedValue","percentage","raw","formattedValue","format","Intl","NumberFormat","locale","style","connectedCallback","super","injectLightDomStyles","createRenderRoot","updated","setAttribute","String","removeAttribute","render","html","nothing","__decorate","property","reflect","type","prototype","attribute","customElement"],"mappings":"k7CAOA,SAASA,EAAMC,EAAeC,EAAaC,GACzC,OAAOC,KAAKF,IAAIE,KAAKD,IAAIF,EAAOC,GAAMC,EACxC,CAmBe,IAAME,EAAN,cAAoBC,EAAoBC,IAAxC,WAAAC,uBAI8BC,KAAKR,MAAG,EAMRQ,KAAGP,IAAG,EAMNO,KAAGN,IAAG,IAMrCM,KAAKC,MAAG,EAiGrB,CA7EC,UAAYC,GACV,MAAMT,EAAMU,OAAOC,MAAMJ,KAAKP,KAAO,EAAIO,KAAKP,IACxCC,EAAMS,OAAOC,MAAMJ,KAAKN,KAAOD,EAAMO,KAAKN,IAChD,OAAOD,GAAOC,EAAM,CAAED,MAAKC,OAAQ,CAAED,IAAKC,EAAKA,IAAKD,EACrD,CAGD,gBAAYY,GACV,MAAMZ,IAAEA,EAAGC,IAAEA,GAAQM,KAAKE,OAC1B,OAAOX,EAAMY,OAAOC,MAAMJ,KAAKR,OAASC,EAAMO,KAAKR,MAAOC,EAAKC,EAChE,CAGD,cAAYY,GACV,MAAMb,IAAEA,EAAGC,IAAEA,GAAQM,KAAKE,OACpBK,GAAQP,KAAKK,aAAeZ,IAAQC,EAAMD,GAAQ,IACxD,OAAOF,EAAMY,OAAOC,MAAMG,GAAO,EAAIA,EAAK,EAAG,IAC9C,CAOD,kBAAYC,GACV,OAAIR,KAAKS,OACA,IAAIC,KAAKC,aAAaX,KAAKY,OAAQZ,KAAKS,QAAQA,OAAOT,KAAKK,cAG9D,IAAIK,KAAKC,aAAaX,KAAKY,OAAQ,CAAEC,MAAO,YAAaJ,OAAOT,KAAKM,WAAa,IAC1F,CAED,iBAAAQ,GACEC,MAAMD,oBACNE,EAAqBhB,KAAMa,EAC5B,CAIS,gBAAAI,GACR,OAAOjB,IACR,CAES,OAAAkB,GAER,MAAMzB,IAAEA,EAAGC,IAAEA,GAAQM,KAAKE,OAC1BF,KAAKmB,aAAa,OAAQ,SAC1BnB,KAAKmB,aAAa,gBAAiBC,OAAOpB,KAAKK,eAC/CL,KAAKmB,aAAa,gBAAiBC,OAAO3B,IAC1CO,KAAKmB,aAAa,gBAAiBC,OAAO1B,IAC1CM,KAAKmB,aAAa,iBAAkBnB,KAAKQ,gBAErCR,KAAKC,MACPD,KAAKmB,aAAa,aAAcnB,KAAKC,OAGrCD,KAAKqB,gBAAgB,aAExB,CAED,MAAAC,GACE,OAAOC,CAAI,GACPvB,KAAKC,MACHsB,CAAI,8EAC4BvB,KAAKC,4CACLD,KAAKQ,8BAErCgB,mGAKQ,gBAAgBxB,KAAKM,6BAIpC,GAlH0CmB,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMzB,UAAmBP,EAAAiC,UAAA,aAAA,GAMTJ,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMzB,UAAiBP,EAAAiC,UAAA,WAAA,GAMPJ,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMzB,UAAmBP,EAAAiC,UAAA,WAAA,GAMxCJ,EAAA,CAAXC,KAAqB9B,EAAAiC,UAAA,aAAA,GAOUJ,EAAA,CAA/BC,EAAS,CAAEI,WAAW,KAA0ClC,EAAAiC,UAAA,cAAA,GAMrDJ,EAAA,CAAXC,KAA0B9B,EAAAiC,UAAA,cAAA,GAnCRjC,EAAK6B,EAAA,CADzBM,EAAc,eACMnC,SAAAA"}

package/lib/Modal.js

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as i}from"./interface-close-small-CnpAFMO3.js";import{css as n,LitElement as e,html as t}from"lit";import{query as a,property as l,customElement as s}from"lit/decorators.js";import{classMap as r}from"lit/directives/class-map.js";import{S as d}from"./SlotController-Z6eG7LSZ.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as p}from"./events-Bv6wNHwJ.js";import{s as m}from"./Component-BJ5O5n8k.js";import h from"./Icon.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as u}from"./ModalController.js";import"./Footer.js";import"./EventController-BBOmvfLa.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";const f=n`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline,var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block,var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size,620px);color:var(--n-color-text);inset:0;position:fixed;transition:visibility var(--n-transition-slowly);visibility:hidden;z-index:var(--n-index-modal)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{background:var(--n-color-overlay);inset:0;overflow-y:auto;padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));position:fixed;transition:opacity var(--n-transition-slowly)}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{--n-footer-padding-inline:var(--_n-modal-padding-inline);--n-footer-background-color:#0000;--n-footer-box-shadow:none;background:var(--n-color-surface);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-modal);display:flex;flex-direction:column;inline-size:100%;margin:auto;max-inline-size:var(--_n-modal-max-inline-size);position:relative;transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-overflow-hidden{overflow:hidden}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{opacity:0;transform:translateY(-10px) scale(.97)}.n-modal:focus{outline:none}.n-modal-body{flex:1}.n-body-padded{display:block;padding-block:var(--n-space-l) var(--n-space-xl);padding-inline:var(--_n-modal-padding-inline)}.n-modal-header{align-items:start;background:var(--n-color-header);border-block-end:1px solid var(--n-color-border);display:flex;gap:var(--n-space-m)}.n-padded{padding-block:var(--_n-modal-padding-block);padding-inline:var(--_n-modal-padding-inline)}.n-close{align-items:center;background-color:initial;block-size:var(--n-space-xl);border:none;color:var(--n-color-text);cursor:pointer;display:flex;inline-size:var(--n-space-xl);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);justify-content:center;position:relative;transition:color var(--n-transition-quickly)}.n-close,.n-close:after{border-radius:var(--n-border-radius)}.n-close:after{content:"";display:block;inset:calc(var(--n-space-s)*-1);position:absolute}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{box-shadow:var(--_n-modal-focus-ring);outline:none}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline,var(--n-space-l))}:host([size=s]){--_n-modal-padding-inline:var(--n-modal-padding-inline,var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size,440px)}:host([size=l]){--_n-modal-padding-inline:var(--n-modal-padding-inline,var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size,940px)}:host([size=xl]){--_n-modal-padding-inline:var(--n-modal-padding-inline,var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size,none)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important;margin:0!important;padding:0!important}slot[name=footer]{flex-direction:column;gap:var(--n-space-xs);inline-size:100%}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:column;--_n-button-group-max-inline-size:100%}@media (min-width:489px){slot[name=footer]{align-items:center;flex-direction:row;gap:var(--n-space-s);justify-content:flex-end}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){block-size:auto;inline-size:100%}`;h.registerIcon(i);class b extends p{constructor(o){super("cancel",{cancelable:!0}),Object.defineProperty(this,"trigger",{value:o,enumerable:!0,writable:!1})}}class g extends p{constructor(o){super("close"),Object.defineProperty(this,"trigger",{value:o,enumerable:!0,writable:!1})}}let x=class extends e{constructor(){super(...arguments),this.defaultSlot=new d(this),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new u(this,{isOpen:()=>this.open,onDismiss:o=>this.handleDismiss(o),isLightDismissEnabled:()=>!this.persistent,dialog:()=>this.modal,backdrop:()=>this.backdrop,close:(o,i)=>this.close(o,i)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1,this.persistent=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog")}disconnectedCallback(){super.disconnectedCallback(),this.lastTrigger=void 0}showModal(){this.open=!0}close(o,i){this.open=!1,null!=o&&(this.returnValue=o);const n=null!=i?i:this.lastTrigger;this.dispatchEvent(new g(n)),this.lastTrigger=void 0}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return t`<div class="n-modal-backdrop"><div class="${r({"n-modal":!0,"n-overflow-hidden":this.featureSlot.hasContent&&this.defaultSlot.isEmpty&&this.footerSlot.isEmpty})}" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${o=>this.handleDismiss(o)}" ?hidden="${this.persistent}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="${this.defaultSlot.isEmpty?"":"n-body-padded"}"></slot></div><nord-footer ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></nord-footer></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(o){this.dispatchEvent(new b(o))&&(this.lastTrigger=o,this.close())}};x.styles=[m,f],o([a(".n-modal",!0)],x.prototype,"modal",void 0),o([a(".n-modal-backdrop",!0)],x.prototype,"backdrop",void 0),o([l({type:Boolean,reflect:!0})],x.prototype,"open",void 0),o([l({reflect:!0})],x.prototype,"size",void 0),o([l({attribute:!1})],x.prototype,"returnValue",void 0),o([l({type:Boolean,reflect:!0})],x.prototype,"scrollable",void 0),o([l({type:Boolean,reflect:!0})],x.prototype,"persistent",void 0),o([c("open","updated")],x.prototype,"handleOpenUpdated",null),x=o([s("nord-modal")],x);var z=x;export{b as ModalCancelEvent,g as ModalCloseEvent,z as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as i}from"./interface-close-small-CnpAFMO3.js";import{css as n,LitElement as t,html as e}from"lit";import{query as a,property as l,customElement as s}from"lit/decorators.js";import{classMap as r}from"lit/directives/class-map.js";import{S as d}from"./SlotController-Z6eG7LSZ.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as p}from"./events-Bv6wNHwJ.js";import{s as m}from"./Component-BJ5O5n8k.js";import h from"./Icon.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as u}from"./ModalController.js";import"./Footer.js";import"./EventController-BBOmvfLa.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./LightDismissController-wcL1ziJa.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.js";import"./ScrollbarController-BFC67Y2x.js";const f=n`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline,var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block,var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size,620px);color:var(--n-color-text);inset:0;position:fixed;transition:visibility var(--n-transition-slowly);visibility:hidden;z-index:var(--n-index-modal)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{background:var(--n-color-overlay);inset:0;overflow-y:auto;padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));position:fixed;transition:opacity var(--n-transition-slowly)}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{--n-footer-padding-inline:var(--_n-modal-padding-inline);--n-footer-background-color:#0000;--n-footer-box-shadow:none;background:var(--n-color-surface);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-modal);display:flex;flex-direction:column;inline-size:100%;margin:auto;max-inline-size:var(--_n-modal-max-inline-size);position:relative;transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-overflow-hidden{overflow:hidden}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{opacity:0;transform:translateY(-10px) scale(.97)}.n-modal:focus{outline:none}.n-modal-body{flex:1}.n-body-padded{display:block;padding-block:var(--n-space-l) var(--n-space-xl);padding-inline:var(--_n-modal-padding-inline)}.n-modal-header{align-items:start;background:var(--n-color-header);border-block-end:1px solid var(--n-color-border);display:flex;gap:var(--n-space-m)}.n-padded{padding-block:var(--_n-modal-padding-block);padding-inline:var(--_n-modal-padding-inline)}.n-close{align-items:center;background-color:initial;block-size:var(--n-space-xl);border:none;color:var(--n-color-text);cursor:pointer;display:flex;inline-size:var(--n-space-xl);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);justify-content:center;position:relative;transition:color var(--n-transition-quickly)}.n-close,.n-close:after{border-radius:var(--n-border-radius)}.n-close:after{content:"";display:block;inset:calc(var(--n-space-s)*-1);position:absolute}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{box-shadow:var(--_n-modal-focus-ring);outline:none}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline,var(--n-space-l))}:host([size=s]){--_n-modal-padding-inline:var(--n-modal-padding-inline,var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size,440px)}:host([size=l]){--_n-modal-padding-inline:var(--n-modal-padding-inline,var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size,940px)}:host([size=xl]){--_n-modal-padding-inline:var(--n-modal-padding-inline,var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size,none)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important;margin:0!important;padding:0!important}slot[name=footer]{flex-direction:column;gap:var(--n-space-xs);inline-size:100%}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:column;--_n-button-group-max-inline-size:100%}@media (min-width:489px){slot[name=footer]{align-items:center;flex-direction:row;gap:var(--n-space-s);justify-content:flex-end}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){block-size:auto;inline-size:100%}`;h.registerIcon(i);class b extends p{constructor(o){super("cancel",{cancelable:!0}),Object.defineProperty(this,"trigger",{value:o,enumerable:!0,writable:!1})}}class g extends p{constructor(o){super("close"),Object.defineProperty(this,"trigger",{value:o,enumerable:!0,writable:!1})}}let x=class extends t{constructor(){super(...arguments),this.defaultSlot=new d(this),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new u(this,{isOpen:()=>this.open,onDismiss:o=>this.handleDismiss(o),isLightDismissEnabled:()=>!this.persistent,dialog:()=>this.modal,backdrop:()=>this.backdrop,close:(o,i)=>this.close(o,i)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1,this.persistent=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog")}disconnectedCallback(){super.disconnectedCallback(),this.lastTrigger=void 0}showModal(){this.open=!0}close(o,i){this.open=!1,null!=o&&(this.returnValue=o);const n=null!=i?i:this.lastTrigger;this.dispatchEvent(new g(n)),this.lastTrigger=void 0}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return e`<div class="n-modal-backdrop"><div class="${r({"n-modal":!0,"n-overflow-hidden":this.featureSlot.hasContent&&this.defaultSlot.isEmpty&&this.footerSlot.isEmpty})}" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${o=>this.handleDismiss(o)}" ?hidden="${this.persistent}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="${this.defaultSlot.isEmpty?"":"n-body-padded"}"></slot></div><nord-footer ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></nord-footer></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(o){this.dispatchEvent(new b(o))&&(this.lastTrigger=o,this.close())}};x.styles=[m,f],o([a(".n-modal",!0)],x.prototype,"modal",void 0),o([a(".n-modal-backdrop",!0)],x.prototype,"backdrop",void 0),o([l({type:Boolean,reflect:!0})],x.prototype,"open",void 0),o([l({reflect:!0})],x.prototype,"size",void 0),o([l({attribute:!1})],x.prototype,"returnValue",void 0),o([l({type:Boolean,reflect:!0})],x.prototype,"scrollable",void 0),o([l({type:Boolean,reflect:!0})],x.prototype,"persistent",void 0),o([c("open","updated")],x.prototype,"handleOpenUpdated",null),x=o([s("nord-modal")],x);var z=x;export{b as ModalCancelEvent,g as ModalCloseEvent,z as default};
 //# sourceMappingURL=Modal.js.map

package/lib/Modal.js.map

@@ -1 +1 @@
-{"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 * Event dispatched when a modal is about to be dismissed.\n * The `trigger` property contains the original event that caused the dismiss.\n */\nexport class ModalCancelEvent extends NordEvent {\n  declare trigger: Event\n\n  constructor(trigger: Event) {\n    super('cancel', { cancelable: true })\n    Object.defineProperty(this, 'trigger', {\n      value: trigger,\n      enumerable: true,\n      writable: false,\n    })\n  }\n}\n\n/**\n * Event dispatched when a modal is closed.\n * The `trigger` property contains the original event that caused the close, if available.\n */\nexport class ModalCloseEvent extends NordEvent {\n  declare trigger: Event | undefined\n\n  constructor(trigger?: Event) {\n    super('close')\n    Object.defineProperty(this, 'trigger', {\n      value: trigger,\n      enumerable: true,\n      writable: false,\n    })\n  }\n}\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 {ModalCancelEvent} cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. The event includes a trigger property containing the original event that caused the dismiss. Call preventDefault() on the event to prevent the modal closing.\n * @fires {ModalCloseEvent} close - Dispatched when a modal is closed for any reason. The event includes an optional trigger property containing the original event that caused the close, if the modal was closed by a user action.\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 lastTrigger?: Event\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: (e: Event) => this.handleDismiss(e),\n    isLightDismissEnabled: () => !this.persistent,\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: (returnValue, trigger) => this.close(returnValue, trigger),\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  /**\n   * When true, the modal will not close when clicking the backdrop or pressing Escape,\n   * and the close button will be hidden. Only programmatic close or custom action buttons\n   * can dismiss the modal.\n   */\n  @property({ type: Boolean, reflect: true }) persistent = false\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.setAttribute('role', 'dialog')\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    // Clear trigger reference when modal is removed from DOM to prevent memory leaks\n    this.lastTrigger = undefined\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   * @param trigger An optional event that triggered the close.\n   */\n  close(returnValue?: string, trigger?: Event) {\n    this.open = false\n\n    if (returnValue != null) {\n      this.returnValue = returnValue\n    }\n\n    const closeTrigger = trigger ?? this.lastTrigger\n    this.dispatchEvent(new ModalCloseEvent(closeTrigger))\n    this.lastTrigger = undefined\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          <!-- eslint-disable-next-line @nordhealth/no-unknown-legacy-classes -->\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=${(e: Event) => this.handleDismiss(e)} ?hidden=${this.persistent}>\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(trigger: Event) {\n    // allow cancelling of close\n    const allowed = this.dispatchEvent(new ModalCancelEvent(trigger))\n\n    if (allowed) {\n      this.lastTrigger = trigger\n      this.close()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-modal': Modal\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","ModalCancelEvent","NordEvent","constructor","trigger","super","cancelable","Object","defineProperty","this","value","enumerable","writable","ModalCloseEvent","Modal","LitElement","defaultSlot","SlotController","headerSlot","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","e","handleDismiss","isLightDismissEnabled","persistent","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","setAttribute","disconnectedCallback","lastTrigger","undefined","showModal","closeTrigger","dispatchEvent","focus","options","preventScroll","render","html","classMap","hasContent","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","styles","componentStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"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"}
+{"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 * Event dispatched when a modal is about to be dismissed.\n * The `trigger` property contains the original event that caused the dismiss.\n */\nexport class ModalCancelEvent extends NordEvent {\n  declare trigger: Event\n\n  constructor(trigger: Event) {\n    super('cancel', { cancelable: true })\n    Object.defineProperty(this, 'trigger', {\n      value: trigger,\n      enumerable: true,\n      writable: false,\n    })\n  }\n}\n\n/**\n * Event dispatched when a modal is closed.\n * The `trigger` property contains the original event that caused the close, if available.\n */\nexport class ModalCloseEvent extends NordEvent {\n  declare trigger: Event | undefined\n\n  constructor(trigger?: Event) {\n    super('close')\n    Object.defineProperty(this, 'trigger', {\n      value: trigger,\n      enumerable: true,\n      writable: false,\n    })\n  }\n}\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 {ModalCancelEvent} cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. The event includes a trigger property containing the original event that caused the dismiss. Call preventDefault() on the event to prevent the modal closing.\n * @fires {ModalCloseEvent} close - Dispatched when a modal is closed for any reason. The event includes an optional trigger property containing the original event that caused the close, if the modal was closed by a user action.\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 lastTrigger?: Event\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: (e: Event) => this.handleDismiss(e),\n    isLightDismissEnabled: () => !this.persistent,\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: (returnValue, trigger) => this.close(returnValue, trigger),\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  /**\n   * When true, the modal will not close when clicking the backdrop or pressing Escape,\n   * and the close button will be hidden. Only programmatic close or custom action buttons\n   * can dismiss the modal.\n   */\n  @property({ type: Boolean, reflect: true }) persistent = false\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.setAttribute('role', 'dialog')\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    // Clear trigger reference when modal is removed from DOM to prevent memory leaks\n    this.lastTrigger = undefined\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   * @param trigger An optional event that triggered the close.\n   */\n  close(returnValue?: string, trigger?: Event) {\n    this.open = false\n\n    if (returnValue != null) {\n      this.returnValue = returnValue\n    }\n\n    const closeTrigger = trigger ?? this.lastTrigger\n    this.dispatchEvent(new ModalCloseEvent(closeTrigger))\n    this.lastTrigger = undefined\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          <!-- eslint-disable-next-line @nordhealth/no-unknown-legacy-classes -->\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=${(e: Event) => this.handleDismiss(e)} ?hidden=${this.persistent}>\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(trigger: Event) {\n    // allow cancelling of close\n    const allowed = this.dispatchEvent(new ModalCancelEvent(trigger))\n\n    if (allowed) {\n      this.lastTrigger = trigger\n      this.close()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-modal': Modal\n  }\n}\n"],"names":["Icon","registerIcon","closeIcon","ModalCancelEvent","NordEvent","constructor","trigger","super","cancelable","Object","defineProperty","this","value","enumerable","writable","ModalCloseEvent","Modal","LitElement","defaultSlot","SlotController","headerSlot","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","e","handleDismiss","isLightDismissEnabled","persistent","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","setAttribute","disconnectedCallback","lastTrigger","undefined","showModal","closeTrigger","dispatchEvent","focus","options","preventScroll","render","html","classMap","hasContent","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","styles","componentStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"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"}

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 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).filter((t=>"nord-toast-group"!==t.localName));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.isLightDismissEnabled()&&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,t)},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};
+import{E as t}from"./EventController-BBOmvfLa.js";import{L as s}from"./LightDismissController-wcL1ziJa.js";import{S as i}from"./ScrollbarController-BFC67Y2x.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.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).filter((t=>"nord-toast-group"!==t.localName));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.isLightDismissEnabled()&&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,t)},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 */\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    // Toasts are non-modal, always-accessible feedback: they render in the top\n    // layer above modals and must stay interactive, so never make them inert.\n    const elements = getElementsAround(this.host).filter(element => element.localName !== 'nord-toast-group')\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: (trigger: Event) => void\n  close: (returnValue?: string, trigger?: Event) => void\n  isLightDismissEnabled: () => boolean\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 = (trigger: Event) => {\n    if (this.host.contains(trigger.target as Node) && this.options.isLightDismissEnabled()) {\n      this.options.onDismiss(trigger)\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, e)\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","filter","localName","ModalController","options","trackLastButton","e","target","lastButton","polyfillSubmitter","submitter","handleTransitionEnd","isOpen","scrollBar","unlockScroll","handleLightDismiss","trigger","contains","isLightDismissEnabled","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","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    // Toasts are non-modal, always-accessible feedback: they render in the top\n    // layer above modals and must stay interactive, so never make them inert.\n    const elements = getElementsAround(this.host).filter(element => element.localName !== 'nord-toast-group')\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: (trigger: Event) => void\n  close: (returnValue?: string, trigger?: Event) => void\n  isLightDismissEnabled: () => boolean\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 = (trigger: Event) => {\n    if (this.host.contains(trigger.target as Node) && this.options.isLightDismissEnabled()) {\n      this.options.onDismiss(trigger)\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, e)\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","filter","localName","ModalController","options","trackLastButton","e","target","lastButton","polyfillSubmitter","submitter","handleTransitionEnd","isOpen","scrollBar","unlockScroll","handleLightDismiss","trigger","contains","isLightDismissEnabled","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","activeElement","querySelector","focus","unblock","pop","backdrop","scrollTop","_b","items","length","item","index","indexOf","splice"],"mappings":"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"}

package/lib/NavItem.js

@@ -1,2 +1,2 @@
-import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,nothing as a,LitElement as i}from"lit";import{query as o,state as r,property as s,customElement as l}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{ref as v}from"lit/directives/ref.js";import{D as c}from"./DirectionController-ChvNGESZ.js";import{S as p}from"./SlotController-Z6eG7LSZ.js";import{o as h}from"./observe-D0n0zOfU.js";import{c as u}from"./cond-CI1KbneT.js";import{N as b}from"./events-Bv6wNHwJ.js";import{F as m}from"./FocusableMixin-BlQLNPdJ.js";import{s as g}from"./Component-BJ5O5n8k.js";import"./Popout-DpN7PP9h.js";import"./Tooltip.js";import"./EventController-BBOmvfLa.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./fsm-Bq5jMQrK.js";const f=e`:host{--_n-nav-item-box-shadow:none;--n-nav-item-color:var(--n-color-text-weak);--n-nav-item-background:#0000;--n-nav-item-border-radius:var(--n-border-radius-s);--n-nav-item-padding-block:var(--n-space-s);--n-nav-item-padding-inline:var(--n-space-s);--n-nav-item-line-height:var(--n-line-height-tight);--n-nav-item-icon-gap:calc(var(--n-space-s)*1.4);--n-nav-item-color-hover:var(--n-color-text);--n-nav-item-background-hover:var(--n-color-nav-hover);--n-nav-item-color-active:var(--n-color-text-on-accent);--n-nav-item-background-active:var(--n-color-accent);--n-nav-item-color-expanded:var(--n-color-text-weak);--n-nav-item-background-expanded:var(--n-color-accent);--n-nav-item-expanded-overlay-opacity:0.12;--n-nav-item-expanded-overlay-filter:brightness(150%)}.n-nav-item{align-items:center;appearance:none;background:var(--n-nav-item-background);border:0;border-radius:var(--n-nav-item-border-radius);box-shadow:var(--_n-nav-item-box-shadow);color:var(--n-nav-item-color);cursor:pointer;display:flex;font-family:inherit;font-size:inherit;inline-size:100%;line-height:var(--n-nav-item-line-height);margin-block-end:1px;max-inline-size:100%;min-block-size:32px;padding-block-end:var(--n-nav-item-padding-block);padding-block-start:var(--n-nav-item-padding-block);padding-inline-end:var(--n-nav-item-padding-inline);padding-inline-start:var(--n-nav-item-padding-inline);position:relative;text-align:start;text-decoration:none;user-select:none;z-index:var(--n-index-default)}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:none;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-nav-item-background-hover);color:var(--n-nav-item-color-hover)}.n-nav-item:active{opacity:.7}.n-nav-content{align-items:center;display:flex;flex:1;min-inline-size:0}.n-nav-label{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:none;background:var(--n-nav-item-background-active);color:var(--n-nav-item-color-active);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=true]{--_n-nav-item-box-shadow:none;background:#0000;color:var(--n-nav-item-color-expanded);font-weight:var(--n-font-weight)}:host([active]) .n-nav-item[aria-expanded=true]:hover{color:var(--n-nav-item-color-hover)}:host([active]) .n-nav-item[aria-expanded=true]: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=true]:after{background:var(--n-nav-item-background-expanded);block-size:100%;border-radius:var(--n-nav-item-border-radius);content:"";filter:var(--n-nav-item-expanded-overlay-filter);inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:var(--n-nav-item-expanded-overlay-opacity);position:absolute;z-index:var(--n-index-deep)}:host([active]) .n-rail-host .n-nav-item[aria-expanded=true]:after{background:var(--n-nav-item-background-active)}.n-nav-icon{flex-shrink:0;margin-inline-end:var(--n-nav-item-icon-gap)}slot.n-nav-icon{align-items:center;display:inline-flex}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + var(--n-space-s)*1.3)}.n-rail-host{--n-nav-item-expanded-overlay-opacity:1;--n-nav-item-expanded-overlay-filter:none;position:relative}.n-rail-item{--_n-rail-size:32px;block-size:var(--_n-rail-size);inline-size:var(--_n-rail-size);justify-content:center;min-inline-size:var(--_n-rail-size);padding:0}.n-rail-item .n-nav-icon{margin-inline-end:0}.n-rail-fallback{font-weight:var(--n-font-weight-active)}.n-rail-subnav-indicator{block-size:5px;color:var(--n-rail-subnav-indicator-color,var(--n-color-border-strong));inline-size:5px;inset-block-end:calc(var(--n-space-xs)/2);inset-inline-end:calc(var(--n-space-xs)/2);pointer-events:none;position:absolute}.n-rtl .n-rail-subnav-indicator{transform:scaleX(-1)}.n-rail-host:hover .n-rail-subnav-indicator{color:var(--n-rail-subnav-indicator-color,var(--n-color-border-strong))}.n-rail-host:has(nord-popout[open]) .n-rail-subnav-indicator{color:var(--n-rail-subnav-indicator-color-active,var(--n-color-border-hover))}.n-rail-host:has(nord-popout[open]) .n-rail-item{background:var(--n-nav-item-background-expanded)}.n-nav-badge.n-rail-badge{block-size:var(--n-rail-badge-size,5px);color:#0000;font-size:0;inline-size:var(--n-rail-badge-size,5px);inset-block-start:3px;inset-inline-end:2px;margin:0;min-inline-size:var(--n-rail-badge-size,5px);overflow:hidden;padding:0;position:absolute}.n-rail-slotted-end{inset-block-start:0;inset-inline-end:8px;pointer-events:none;position:absolute}.n-rail-flyout-body{background:var(--n-rail-flyout-background,var(--n-color-surface));border-radius:var(--n-border-radius-s);box-shadow:var(--n-rail-flyout-box-shadow,var(--n-box-shadow-popout));min-inline-size:var(--n-rail-flyout-min-inline-size,220px);padding:var(--n-rail-flyout-padding,var(--n-space-s))}.n-rail-host nord-popout{--n-popout-background:#0000;--n-popout-box-shadow:none;transform:translate(var(--n-rail-flyout-offset-inline,0),var(--n-rail-flyout-offset-block,0))}.n-rtl .n-rail-host nord-popout{transform:translate(calc(var(--n-rail-flyout-offset-inline, 0)*-1),var(--n-rail-flyout-offset-block,0))}.n-rail-flyout-body ::slotted(nord-nav-group){margin-inline-start:0}.n-nav-badge{background:var(--n-nav-badge-background,var(--n-color-status-notification));border-radius:var(--n-nav-badge-border-radius,var(--n-border-radius-pill));color:var(--n-nav-badge-color,#fff);display:inline-block;font-feature-settings:var(--n-font-features-reduced);font-size:var(--n-nav-badge-font-size,var(--n-font-size-xs));font-weight:var(--n-nav-badge-font-weight,var(--n-font-weight));line-height:var(--n-nav-badge-line-height,1);margin-inline-start:var(--n-nav-badge-margin-inline-start,var(--n-space-xs));min-inline-size:var(--n-nav-badge-min-inline-size,20px);padding-block-end:var(--n-nav-badge-padding-block,var(--n-space-xs));padding-block-start:var(--n-nav-badge-padding-block,var(--n-space-xs));padding-inline-end:var(--n-nav-badge-padding-inline,calc(var(--n-space-s)/2));padding-inline-start:var(--n-nav-badge-padding-inline,calc(var(--n-space-s)/2));text-align:center}`;let x=0,y=0;const k="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){},removeEventListener(){}};let w=class extends(m(i)){constructor(){super(...arguments),this.subnavSlot=new p(this,"subnav"),this.iconSlot=new p(this,"icon"),this.railTooltipSlot=new p(this,"rail-tooltip"),this.direction=new c(this),this.tooltipId="n-nav-rail-tip-"+ ++x,this.popoutId="n-nav-rail-pop-"+ ++y,this.railCollapsed=!1,this.active=!1,this.open=!1,this.handleViewportChange=()=>this.updateRailState()}get hasSubNav(){return this.subnavSlot.hasContent}connectedCallback(){super.connectedCallback(),this.startObservingLayout(),k.addEventListener("change",this.handleViewportChange)}disconnectedCallback(){super.disconnectedCallback(),this.stopObservingLayout(),k.removeEventListener("change",this.handleViewportChange)}startObservingLayout(){this.observedLayout=this.closest("nord-layout"),this.observedLayout&&(this.updateRailState(),this.layoutObserver=new MutationObserver((()=>this.updateRailState())),this.layoutObserver.observe(this.observedLayout,{attributes:!0,attributeFilter:["nav-open","collapse-mode"]}))}stopObservingLayout(){var n,e;null===(n=this.layoutObserver)||void 0===n||n.disconnect(),this.layoutObserver=void 0,this.observedLayout=void 0,this.railCollapsed=!1,null===(e=this.popoutEl)||void 0===e||e.hide()}updateRailState(){var n,e;if(!this.observedLayout)return;const t=!!!(null===(n=this.parentElement)||void 0===n?void 0:n.closest("nord-nav-item"))&&k.matches&&"rail"===this.observedLayout.getAttribute("collapse-mode")&&!this.observedLayout.hasAttribute("nav-open");t||null===(e=this.popoutEl)||void 0===e||e.hide(),this.railCollapsed=t}render(){if(this.railCollapsed)return this.renderRail();const n=t`${this.renderLeadingIcon()}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:a}<slot name="end"></slot></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>`}renderLeadingIcon(){return this.iconSlot.hasContent?t`<slot name="icon" class="n-nav-icon"></slot>`:this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}renderRail(){const n=this.renderLeadingIcon(),e=n===a?t`<span class="n-rail-fallback">${this.textInitial}</span>`:n,i=this.badge?t`<span class="n-nav-badge n-rail-badge">${this.badge}</span>`:a;return this.subnavSlot.hasContent?this.renderRailFlyout(e,i):t`<div role="listitem" class="n-rail-host">${this.href?t`<a class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-current="${u(this.active,"page")}" aria-describedby="${this.tooltipId}" href="${this.href}">${e}${i}</a>`:t`<button class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-describedby="${this.tooltipId}">${e}${i}</button>`}<slot name="end" class="n-rail-slotted-end"></slot><nord-tooltip id="${this.tooltipId}" position="inline-end">${this.railTooltipSlot.hasContent?t`<slot name="rail-tooltip"></slot>`:t`<slot></slot>`}</nord-tooltip></div>`}renderRailFlyout(n,e){return t`<div role="listitem" class="n-rail-host"><button class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-controls="${this.popoutId}" aria-describedby="${this.tooltipId}">${n}${e} <svg class="n-rail-subnav-indicator" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="5" height="5" viewBox="0 0 5 5" fill="none"><path d="M4.29388 3.79388V0.500991C4.29388 0.0555387 3.75531 -0.167545 3.44033 0.147438L0.147437 3.44033C-0.167545 3.75531 0.0555386 4.29388 0.500991 4.29388H3.79388C4.07003 4.29388 4.29388 4.07003 4.29388 3.79388Z" fill="currentColor"/></svg></button><slot name="end" class="n-rail-slotted-end"></slot><nord-tooltip id="${this.tooltipId}" position="inline-end">${this.railTooltipSlot.hasContent?t`<slot name="rail-tooltip"></slot>`:t`<slot></slot>`}</nord-tooltip><nord-popout id="${this.popoutId}" position="inline-end" always-floating><div class="n-rail-flyout-body"><slot name="${this.subnavSlot.slotName}"></slot></div></nord-popout></div>`}get textInitial(){var n,e;return(null!==(e=null===(n=this.textContent)||void 0===n?void 0:n.trim())&&void 0!==e?e:"").charAt(0).toUpperCase()}renderLink(n){return t`<a class="n-nav-item" ${v(this.focusableRef)} aria-current="${u(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"}" ${v(this.focusableRef)}>${n}<nord-icon size="xxs" class="${d({"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" ${v(this.focusableRef)}>${n}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new b("toggle"))}handleActiveChange(){this.active&&!this.hasSubNav&&this.dispatchEvent(new b("activate"))}};w.styles=[g,f],n([o("nord-popout")],w.prototype,"popoutEl",void 0),n([r()],w.prototype,"railCollapsed",void 0),n([s({type:Boolean,reflect:!0})],w.prototype,"active",void 0),n([s({reflect:!0})],w.prototype,"icon",void 0),n([s({reflect:!0})],w.prototype,"href",void 0),n([s({reflect:!0})],w.prototype,"badge",void 0),n([s({reflect:!0,type:Boolean})],w.prototype,"open",void 0),n([h("active","updated")],w.prototype,"handleActiveChange",null),w=n([l("nord-nav-item")],w);var $=w;export{$ as default};
+import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,nothing as a,LitElement as i}from"lit";import{query as o,state as r,property as s,customElement as l}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{ref as v}from"lit/directives/ref.js";import{D as c}from"./DirectionController-ChvNGESZ.js";import{S as p}from"./SlotController-Z6eG7LSZ.js";import{o as h}from"./observe-D0n0zOfU.js";import{c as u}from"./cond-CI1KbneT.js";import{N as b}from"./events-Bv6wNHwJ.js";import{F as m}from"./FocusableMixin-BlQLNPdJ.js";import{s as g}from"./Component-BJ5O5n8k.js";import"./Popout-CFtFoCaA.js";import"./Tooltip.js";import"./EventController-BBOmvfLa.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-wcL1ziJa.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.js";import"./ScrollbarController-BFC67Y2x.js";import"./fsm-Bq5jMQrK.js";const f=e`:host{--_n-nav-item-box-shadow:none;--n-nav-item-color:var(--n-color-text-weak);--n-nav-item-background:#0000;--n-nav-item-border-radius:var(--n-border-radius-s);--n-nav-item-padding-block:var(--n-space-s);--n-nav-item-padding-inline:var(--n-space-s);--n-nav-item-line-height:var(--n-line-height-tight);--n-nav-item-icon-gap:calc(var(--n-space-s)*1.4);--n-nav-item-color-hover:var(--n-color-text);--n-nav-item-background-hover:var(--n-color-nav-hover);--n-nav-item-color-active:var(--n-color-text-on-accent);--n-nav-item-background-active:var(--n-color-accent);--n-nav-item-color-expanded:var(--n-color-text-weak);--n-nav-item-background-expanded:var(--n-color-accent);--n-nav-item-expanded-overlay-opacity:0.12;--n-nav-item-expanded-overlay-filter:brightness(150%)}.n-nav-item{align-items:center;appearance:none;background:var(--n-nav-item-background);border:0;border-radius:var(--n-nav-item-border-radius);box-shadow:var(--_n-nav-item-box-shadow);color:var(--n-nav-item-color);cursor:pointer;display:flex;font-family:inherit;font-size:inherit;inline-size:100%;line-height:var(--n-nav-item-line-height);margin-block-end:1px;max-inline-size:100%;min-block-size:32px;padding-block-end:var(--n-nav-item-padding-block);padding-block-start:var(--n-nav-item-padding-block);padding-inline-end:var(--n-nav-item-padding-inline);padding-inline-start:var(--n-nav-item-padding-inline);position:relative;text-align:start;text-decoration:none;user-select:none;z-index:var(--n-index-default)}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:none;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-nav-item-background-hover);color:var(--n-nav-item-color-hover)}.n-nav-item:active{opacity:.7}.n-nav-content{align-items:center;display:flex;flex:1;min-inline-size:0}.n-nav-label{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:none;background:var(--n-nav-item-background-active);color:var(--n-nav-item-color-active);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=true]{--_n-nav-item-box-shadow:none;background:#0000;color:var(--n-nav-item-color-expanded);font-weight:var(--n-font-weight)}:host([active]) .n-nav-item[aria-expanded=true]:hover{color:var(--n-nav-item-color-hover)}:host([active]) .n-nav-item[aria-expanded=true]: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=true]:after{background:var(--n-nav-item-background-expanded);block-size:100%;border-radius:var(--n-nav-item-border-radius);content:"";filter:var(--n-nav-item-expanded-overlay-filter);inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:var(--n-nav-item-expanded-overlay-opacity);position:absolute;z-index:var(--n-index-deep)}:host([active]) .n-rail-host .n-nav-item[aria-expanded=true]:after{background:var(--n-nav-item-background-active)}.n-nav-icon{flex-shrink:0;margin-inline-end:var(--n-nav-item-icon-gap)}slot.n-nav-icon{align-items:center;display:inline-flex}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + var(--n-space-s)*1.3)}.n-rail-host{--n-nav-item-expanded-overlay-opacity:1;--n-nav-item-expanded-overlay-filter:none;position:relative}.n-rail-item{--_n-rail-size:32px;block-size:var(--_n-rail-size);inline-size:var(--_n-rail-size);justify-content:center;min-inline-size:var(--_n-rail-size);padding:0}.n-rail-item .n-nav-icon{margin-inline-end:0}.n-rail-fallback{font-weight:var(--n-font-weight-active)}.n-rail-subnav-indicator{block-size:5px;color:var(--n-rail-subnav-indicator-color,var(--n-color-border-strong));inline-size:5px;inset-block-end:calc(var(--n-space-xs)/2);inset-inline-end:calc(var(--n-space-xs)/2);pointer-events:none;position:absolute}.n-rtl .n-rail-subnav-indicator{transform:scaleX(-1)}.n-rail-host:hover .n-rail-subnav-indicator{color:var(--n-rail-subnav-indicator-color,var(--n-color-border-strong))}.n-rail-host:has(nord-popout[open]) .n-rail-subnav-indicator{color:var(--n-rail-subnav-indicator-color-active,var(--n-color-border-hover))}.n-rail-host:has(nord-popout[open]) .n-rail-item{background:var(--n-nav-item-background-expanded)}.n-nav-badge.n-rail-badge{block-size:var(--n-rail-badge-size,5px);color:#0000;font-size:0;inline-size:var(--n-rail-badge-size,5px);inset-block-start:3px;inset-inline-end:2px;margin:0;min-inline-size:var(--n-rail-badge-size,5px);overflow:hidden;padding:0;position:absolute}.n-rail-slotted-end{inset-block-start:0;inset-inline-end:8px;pointer-events:none;position:absolute}.n-rail-flyout-body{background:var(--n-rail-flyout-background,var(--n-color-surface));border-radius:var(--n-border-radius-s);box-shadow:var(--n-rail-flyout-box-shadow,var(--n-box-shadow-popout));min-inline-size:var(--n-rail-flyout-min-inline-size,220px);padding:var(--n-rail-flyout-padding,var(--n-space-s))}.n-rail-host nord-popout{--n-popout-background:#0000;--n-popout-box-shadow:none;transform:translate(var(--n-rail-flyout-offset-inline,0),var(--n-rail-flyout-offset-block,0))}.n-rtl .n-rail-host nord-popout{transform:translate(calc(var(--n-rail-flyout-offset-inline, 0)*-1),var(--n-rail-flyout-offset-block,0))}.n-rail-flyout-body ::slotted(nord-nav-group){margin-inline-start:0}.n-nav-badge{background:var(--n-nav-badge-background,var(--n-color-status-notification));border-radius:var(--n-nav-badge-border-radius,var(--n-border-radius-pill));color:var(--n-nav-badge-color,#fff);display:inline-block;font-feature-settings:var(--n-font-features-reduced);font-size:var(--n-nav-badge-font-size,var(--n-font-size-xs));font-weight:var(--n-nav-badge-font-weight,var(--n-font-weight));line-height:var(--n-nav-badge-line-height,1);margin-inline-start:var(--n-nav-badge-margin-inline-start,var(--n-space-xs));min-inline-size:var(--n-nav-badge-min-inline-size,20px);padding-block-end:var(--n-nav-badge-padding-block,var(--n-space-xs));padding-block-start:var(--n-nav-badge-padding-block,var(--n-space-xs));padding-inline-end:var(--n-nav-badge-padding-inline,calc(var(--n-space-s)/2));padding-inline-start:var(--n-nav-badge-padding-inline,calc(var(--n-space-s)/2));text-align:center}`;let x=0,y=0;const k="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){},removeEventListener(){}};let w=class extends(m(i)){constructor(){super(...arguments),this.subnavSlot=new p(this,"subnav"),this.iconSlot=new p(this,"icon"),this.railTooltipSlot=new p(this,"rail-tooltip"),this.direction=new c(this),this.tooltipId="n-nav-rail-tip-"+ ++x,this.popoutId="n-nav-rail-pop-"+ ++y,this.railCollapsed=!1,this.active=!1,this.open=!1,this.handleViewportChange=()=>this.updateRailState()}get hasSubNav(){return this.subnavSlot.hasContent}connectedCallback(){super.connectedCallback(),this.startObservingLayout(),k.addEventListener("change",this.handleViewportChange)}disconnectedCallback(){super.disconnectedCallback(),this.stopObservingLayout(),k.removeEventListener("change",this.handleViewportChange)}startObservingLayout(){this.observedLayout=this.closest("nord-layout"),this.observedLayout&&(this.updateRailState(),this.layoutObserver=new MutationObserver((()=>this.updateRailState())),this.layoutObserver.observe(this.observedLayout,{attributes:!0,attributeFilter:["nav-open","collapse-mode"]}))}stopObservingLayout(){var n,e;null===(n=this.layoutObserver)||void 0===n||n.disconnect(),this.layoutObserver=void 0,this.observedLayout=void 0,this.railCollapsed=!1,null===(e=this.popoutEl)||void 0===e||e.hide()}updateRailState(){var n,e;if(!this.observedLayout)return;const t=!!!(null===(n=this.parentElement)||void 0===n?void 0:n.closest("nord-nav-item"))&&k.matches&&"rail"===this.observedLayout.getAttribute("collapse-mode")&&!this.observedLayout.hasAttribute("nav-open");t||null===(e=this.popoutEl)||void 0===e||e.hide(),this.railCollapsed=t}render(){if(this.railCollapsed)return this.renderRail();const n=t`${this.renderLeadingIcon()}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:a}<slot name="end"></slot></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>`}renderLeadingIcon(){return this.iconSlot.hasContent?t`<slot name="icon" class="n-nav-icon"></slot>`:this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}renderRail(){const n=this.renderLeadingIcon(),e=n===a?t`<span class="n-rail-fallback">${this.textInitial}</span>`:n,i=this.badge?t`<span class="n-nav-badge n-rail-badge">${this.badge}</span>`:a;return this.subnavSlot.hasContent?this.renderRailFlyout(e,i):t`<div role="listitem" class="n-rail-host">${this.href?t`<a class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-current="${u(this.active,"page")}" aria-describedby="${this.tooltipId}" href="${this.href}">${e}${i}</a>`:t`<button class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-describedby="${this.tooltipId}">${e}${i}</button>`}<slot name="end" class="n-rail-slotted-end"></slot><nord-tooltip id="${this.tooltipId}" position="inline-end">${this.railTooltipSlot.hasContent?t`<slot name="rail-tooltip"></slot>`:t`<slot></slot>`}</nord-tooltip></div>`}renderRailFlyout(n,e){return t`<div role="listitem" class="n-rail-host"><button class="n-nav-item n-rail-item" ${v(this.focusableRef)} aria-controls="${this.popoutId}" aria-describedby="${this.tooltipId}">${n}${e} <svg class="n-rail-subnav-indicator" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="5" height="5" viewBox="0 0 5 5" fill="none"><path d="M4.29388 3.79388V0.500991C4.29388 0.0555387 3.75531 -0.167545 3.44033 0.147438L0.147437 3.44033C-0.167545 3.75531 0.0555386 4.29388 0.500991 4.29388H3.79388C4.07003 4.29388 4.29388 4.07003 4.29388 3.79388Z" fill="currentColor"/></svg></button><slot name="end" class="n-rail-slotted-end"></slot><nord-tooltip id="${this.tooltipId}" position="inline-end">${this.railTooltipSlot.hasContent?t`<slot name="rail-tooltip"></slot>`:t`<slot></slot>`}</nord-tooltip><nord-popout id="${this.popoutId}" position="inline-end" always-floating><div class="n-rail-flyout-body"><slot name="${this.subnavSlot.slotName}"></slot></div></nord-popout></div>`}get textInitial(){var n,e;return(null!==(e=null===(n=this.textContent)||void 0===n?void 0:n.trim())&&void 0!==e?e:"").charAt(0).toUpperCase()}renderLink(n){return t`<a class="n-nav-item" ${v(this.focusableRef)} aria-current="${u(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"}" ${v(this.focusableRef)}>${n}<nord-icon size="xxs" class="${d({"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" ${v(this.focusableRef)}>${n}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new b("toggle"))}handleActiveChange(){this.active&&!this.hasSubNav&&this.dispatchEvent(new b("activate"))}};w.styles=[g,f],n([o("nord-popout")],w.prototype,"popoutEl",void 0),n([r()],w.prototype,"railCollapsed",void 0),n([s({type:Boolean,reflect:!0})],w.prototype,"active",void 0),n([s({reflect:!0})],w.prototype,"icon",void 0),n([s({reflect:!0})],w.prototype,"href",void 0),n([s({reflect:!0})],w.prototype,"badge",void 0),n([s({reflect:!0,type:Boolean})],w.prototype,"open",void 0),n([h("active","updated")],w.prototype,"handleActiveChange",null),w=n([l("nord-nav-item")],w);var $=w;export{$ 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 type { TemplateResult } from 'lit'\nimport type Popout from '../popout/Popout.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } 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\nimport '../popout/Popout.js'\nimport '../tooltip/Tooltip.js'\n\nlet railTooltipIdCounter = 0\nlet railPopoutIdCounter = 0\n\n// Mirrors the layout's wide-viewport breakpoint so nav items only\n// switch to icon-only rendering when the layout actually shows the rail.\nconst railMediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n        removeEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\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 icon - Slot for a custom leading icon element. Use when the `icon` attribute isn't enough — for example, an icon wrapped in a styled badge or circular frame. When set, it takes priority over the `icon` attribute and is shown in both the expanded nav and the collapsed rail.\n * @slot end - Trailing content rendered after the label inside the item's flex row. The slotted element flows naturally — it claims its real width and the label flex-shrinks to make room. Use for a custom badge, count pill, action icon, etc. when the `badge` attribute's plain text isn't enough.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @slot rail-tooltip - Full content of the rail-mode tooltip. When provided, it replaces the default label projection — write the tooltip's content directly (label + count + keyboard shortcut etc., bound to whatever reactive state you like). When absent, the tooltip falls back to the item's default-slot label. Only rendered in rail mode.\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 * @cssprop [--n-nav-item-color=var(--n-color-text-weak)] - Text color in the default state.\n * @cssprop [--n-nav-item-background=transparent] - Background color in the default state.\n * @cssprop [--n-nav-item-border-radius=var(--n-border-radius-s)] - Border radius of the item and its active-parent overlay.\n * @cssprop [--n-nav-item-padding-block=var(--n-space-s)] - Block-axis (top/bottom) padding.\n * @cssprop [--n-nav-item-padding-inline=var(--n-space-s)] - Inline-axis (start/end) padding.\n * @cssprop [--n-nav-item-line-height=var(--n-line-height-tight)] - Line height of the item's text.\n * @cssprop [--n-nav-item-icon-gap=calc(var(--n-space-s) * 1.4)] - Inline gap between the leading icon (the `icon` attribute or `icon` slot) and the item's text.\n * @cssprop [--n-nav-item-color-hover=var(--n-color-text)] - Text color on hover.\n * @cssprop [--n-nav-item-background-hover=var(--n-color-nav-hover)] - Background color on hover.\n * @cssprop [--n-nav-item-color-active=var(--n-color-text-on-accent)] - Text color when the item is `active`.\n * @cssprop [--n-nav-item-background-active=var(--n-color-accent)] - Background color when the item is `active`.\n * @cssprop [--n-nav-item-color-expanded=var(--n-color-text-weak)] - Text color when the item is an active parent (its subnav is expanded).\n * @cssprop [--n-nav-item-background-expanded=var(--n-color-accent)] - Background color of the overlay drawn behind an active-parent item.\n * @cssprop [--n-nav-item-expanded-overlay-opacity=0.12] - Opacity of the active-parent overlay. Set to `1` for a solid background.\n * @cssprop [--n-nav-item-expanded-overlay-filter=brightness(150%)] - Filter applied to the active-parent overlay. Set to `none` to disable.\n * @cssprop [--n-rail-flyout-background=var(--n-color-surface)] - Background colour of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-box-shadow=var(--n-box-shadow-popout)] - Box-shadow of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-min-inline-size=220px] - Minimum inline size (width in LTR) of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-padding=var(--n-space-s)] - Padding of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-offset-inline=0] - Extra inline-axis offset applied to the rail flyout (positive values push it away from the rail in LTR; mirrored in RTL).\n * @cssprop [--n-rail-flyout-offset-block=0] - Extra block-axis offset applied to the rail flyout (positive values push it downward).\n * @cssprop [--n-rail-subnav-indicator-color=var(--n-color-border-strong)] - Colour of the small triangle indicator drawn in the bottom-inline-end corner of rail items that have a subnav (default + hover state).\n * @cssprop [--n-rail-subnav-indicator-color-active=var(--n-color-border-hover)] - Colour of the triangle indicator while the item's flyout popout is open.\n * @cssprop [--n-nav-badge-background=var(--n-color-status-notification)] - Background colour of the built-in `badge` attribute pill (`.n-nav-badge`).\n * @cssprop [--n-nav-badge-color=#fff] - Text colour of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-size=var(--n-font-size-xs)] - Font size of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-weight=var(--n-font-weight)] - Font weight of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-line-height=1] - Line height of the built-in `badge` attribute pill. Combined with `--n-nav-badge-padding-block` this controls the pill's effective block size.\n * @cssprop [--n-nav-badge-padding-block=var(--n-space-xs)] - Block-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-padding-inline=calc(var(--n-space-s) / 2)] - Inline-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-border-radius=var(--n-border-radius-pill)] - Border radius of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-min-inline-size=20px] - Minimum inline size (width in LTR) of the built-in `badge` attribute pill — sets a visual floor for single-digit counts.\n * @cssprop [--n-nav-badge-margin-inline-start=var(--n-space-xs)] - Inline-start margin separating the badge from the preceding label inside the nav-item's flex row.\n * @cssprop [--n-rail-badge-size=5px] - Diameter of the rail-mode dot the badge collapses into when the layout is in `collapse-mode=\"rail\"` and not `nav-open`.\n *\n * @parent Navigation\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 iconSlot = new SlotController(this, 'icon')\n  private railTooltipSlot = new SlotController(this, 'rail-tooltip')\n  private direction = new DirectionController(this)\n\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement | null\n  private readonly tooltipId = `n-nav-rail-tip-${++railTooltipIdCounter}`\n  private readonly popoutId = `n-nav-rail-pop-${++railPopoutIdCounter}`\n\n  @query('nord-popout') private popoutEl?: Popout\n\n  /**\n   * Reflects whether the ancestor layout is in rail-collapsed state\n   * (i.e. `collapse-mode=\"rail\"` and `nav-open` is absent).\n   * @internal\n   */\n  @state() private railCollapsed = false\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  connectedCallback() {\n    super.connectedCallback()\n    this.startObservingLayout()\n    railMediaQuery.addEventListener('change', this.handleViewportChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.stopObservingLayout()\n    railMediaQuery.removeEventListener('change', this.handleViewportChange)\n  }\n\n  private handleViewportChange = () => this.updateRailState()\n\n  private startObservingLayout() {\n    this.observedLayout = this.closest<HTMLElement>('nord-layout')\n    if (!this.observedLayout) {\n      return\n    }\n    this.updateRailState()\n    this.layoutObserver = new MutationObserver(() => this.updateRailState())\n    this.layoutObserver.observe(this.observedLayout, {\n      attributes: true,\n      attributeFilter: ['nav-open', 'collapse-mode'],\n    })\n  }\n\n  private stopObservingLayout() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.railCollapsed = false\n    this.popoutEl?.hide()\n  }\n\n  private updateRailState() {\n    if (!this.observedLayout) {\n      return\n    }\n    // Subnav children render inside a flyout popover when rail-collapsed;\n    // they should keep their full layout, not collapse to icons themselves.\n    const isNested = !!this.parentElement?.closest('nord-nav-item')\n    const next = !isNested\n      && railMediaQuery.matches\n      && this.observedLayout.getAttribute('collapse-mode') === 'rail'\n      && !this.observedLayout.hasAttribute('nav-open')\n    if (!next) {\n      this.popoutEl?.hide()\n    }\n    this.railCollapsed = next\n  }\n\n  render() {\n    if (this.railCollapsed) {\n      return this.renderRail()\n    }\n\n    const innards = html`\n      ${this.renderLeadingIcon()}\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        <slot name=\"end\"></slot>\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  // Resolves the leading icon shown in both the expanded nav and the rail:\n  // a slotted custom icon wins over the `icon` attribute, which wins over nothing.\n  private renderLeadingIcon(): TemplateResult | typeof nothing {\n    if (this.iconSlot.hasContent) {\n      return html`<slot name=\"icon\" class=\"n-nav-icon\"></slot>`\n    }\n    if (this.icon) {\n      return html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>`\n    }\n    return nothing\n  }\n\n  private renderRail(): TemplateResult {\n    const leadingIcon = this.renderLeadingIcon()\n    // Rail is icon-only, so when there's no icon at all we fall back to the\n    // first letter of the label rather than rendering an empty button.\n    const iconEl = leadingIcon === nothing\n      ? html`<span class=\"n-rail-fallback\">${this.textInitial}</span>`\n      : leadingIcon\n    const badge = this.badge ? html`<span class=\"n-nav-badge n-rail-badge\">${this.badge}</span>` : nothing\n\n    if (this.subnavSlot.hasContent) {\n      return this.renderRailFlyout(iconEl, badge)\n    }\n\n    return html`\n      <div role=\"listitem\" class=\"n-rail-host\">\n        ${this.href\n          ? html`\n              <a\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-current=${cond(this.active, 'page')}\n                aria-describedby=${this.tooltipId}\n                href=${this.href}\n              >\n                ${iconEl}${badge}\n              </a>\n            `\n          : html`\n              <button\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-describedby=${this.tooltipId}\n              >\n                ${iconEl}${badge}\n              </button>\n            `}\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\">\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n      </div>\n    `\n  }\n\n  private renderRailFlyout(iconEl: TemplateResult, badge: TemplateResult | typeof nothing): TemplateResult {\n    // Click-only: nord-popout's getToggle() listens for click on the\n    // [aria-controls={popoutId}] target. Hover used to open as well, but\n    // that conflicted with the popout's click-to-toggle (hover opened, then\n    // the click was treated as a close).\n    // The tooltip still shows on hover so the icon has an accessible label\n    // — nord-tooltip listens for mouseover/focusin on [aria-describedby].\n    return html`\n      <div role=\"listitem\" class=\"n-rail-host\">\n        <button\n          class=\"n-nav-item n-rail-item\"\n          ${ref(this.focusableRef)}\n          aria-controls=${this.popoutId}\n          aria-describedby=${this.tooltipId}\n        >\n          ${iconEl}${badge}\n          <svg\n            class=\"n-rail-subnav-indicator\"\n            aria-hidden=\"true\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"5\"\n            height=\"5\"\n            viewBox=\"0 0 5 5\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M4.29388 3.79388V0.500991C4.29388 0.0555387 3.75531 -0.167545 3.44033 0.147438L0.147437 3.44033C-0.167545 3.75531 0.0555386 4.29388 0.500991 4.29388H3.79388C4.07003 4.29388 4.29388 4.07003 4.29388 3.79388Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </button>\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\">\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n        <nord-popout id=${this.popoutId} position=\"inline-end\" always-floating>\n          <div class=\"n-rail-flyout-body\">\n            <slot name=${this.subnavSlot.slotName}></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private get textInitial(): string {\n    const text = this.textContent?.trim() ?? ''\n    return text.charAt(0).toUpperCase()\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":["railTooltipIdCounter","railPopoutIdCounter","railMediaQuery","matchMedia","matches","addEventListener","removeEventListener","NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","iconSlot","railTooltipSlot","direction","DirectionController","tooltipId","popoutId","railCollapsed","active","open","handleViewportChange","updateRailState","hasSubNav","hasContent","connectedCallback","super","startObservingLayout","disconnectedCallback","stopObservingLayout","observedLayout","closest","layoutObserver","MutationObserver","observe","attributes","attributeFilter","_a","disconnect","undefined","_b","popoutEl","hide","next","parentElement","getAttribute","hasAttribute","render","renderRail","innards","html","renderLeadingIcon","badge","nothing","element","renderToggle","href","renderLink","renderButton","slotName","icon","leadingIcon","iconEl","textInitial","renderRailFlyout","ref","focusableRef","cond","textContent","trim","charAt","toUpperCase","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","handleActiveChange","styles","componentStyle","style","__decorate","query","prototype","state","property","type","Boolean","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import type { TemplateResult } from 'lit'\nimport type Popout from '../popout/Popout.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } 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\nimport '../popout/Popout.js'\nimport '../tooltip/Tooltip.js'\n\nlet railTooltipIdCounter = 0\nlet railPopoutIdCounter = 0\n\n// Mirrors the layout's wide-viewport breakpoint so nav items only\n// switch to icon-only rendering when the layout actually shows the rail.\nconst railMediaQuery\n  = typeof matchMedia !== 'undefined'\n    ? matchMedia('(min-width: 768px)')\n    : ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n        removeEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\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 icon - Slot for a custom leading icon element. Use when the `icon` attribute isn't enough — for example, an icon wrapped in a styled badge or circular frame. When set, it takes priority over the `icon` attribute and is shown in both the expanded nav and the collapsed rail.\n * @slot end - Trailing content rendered after the label inside the item's flex row. The slotted element flows naturally — it claims its real width and the label flex-shrinks to make room. Use for a custom badge, count pill, action icon, etc. when the `badge` attribute's plain text isn't enough.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @slot rail-tooltip - Full content of the rail-mode tooltip. When provided, it replaces the default label projection — write the tooltip's content directly (label + count + keyboard shortcut etc., bound to whatever reactive state you like). When absent, the tooltip falls back to the item's default-slot label. Only rendered in rail mode.\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 * @cssprop [--n-nav-item-color=var(--n-color-text-weak)] - Text color in the default state.\n * @cssprop [--n-nav-item-background=transparent] - Background color in the default state.\n * @cssprop [--n-nav-item-border-radius=var(--n-border-radius-s)] - Border radius of the item and its active-parent overlay.\n * @cssprop [--n-nav-item-padding-block=var(--n-space-s)] - Block-axis (top/bottom) padding.\n * @cssprop [--n-nav-item-padding-inline=var(--n-space-s)] - Inline-axis (start/end) padding.\n * @cssprop [--n-nav-item-line-height=var(--n-line-height-tight)] - Line height of the item's text.\n * @cssprop [--n-nav-item-icon-gap=calc(var(--n-space-s) * 1.4)] - Inline gap between the leading icon (the `icon` attribute or `icon` slot) and the item's text.\n * @cssprop [--n-nav-item-color-hover=var(--n-color-text)] - Text color on hover.\n * @cssprop [--n-nav-item-background-hover=var(--n-color-nav-hover)] - Background color on hover.\n * @cssprop [--n-nav-item-color-active=var(--n-color-text-on-accent)] - Text color when the item is `active`.\n * @cssprop [--n-nav-item-background-active=var(--n-color-accent)] - Background color when the item is `active`.\n * @cssprop [--n-nav-item-color-expanded=var(--n-color-text-weak)] - Text color when the item is an active parent (its subnav is expanded).\n * @cssprop [--n-nav-item-background-expanded=var(--n-color-accent)] - Background color of the overlay drawn behind an active-parent item.\n * @cssprop [--n-nav-item-expanded-overlay-opacity=0.12] - Opacity of the active-parent overlay. Set to `1` for a solid background.\n * @cssprop [--n-nav-item-expanded-overlay-filter=brightness(150%)] - Filter applied to the active-parent overlay. Set to `none` to disable.\n * @cssprop [--n-rail-flyout-background=var(--n-color-surface)] - Background colour of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-box-shadow=var(--n-box-shadow-popout)] - Box-shadow of the rail-mode subnav flyout container.\n * @cssprop [--n-rail-flyout-min-inline-size=220px] - Minimum inline size (width in LTR) of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-padding=var(--n-space-s)] - Padding of the rail-mode subnav flyout body.\n * @cssprop [--n-rail-flyout-offset-inline=0] - Extra inline-axis offset applied to the rail flyout (positive values push it away from the rail in LTR; mirrored in RTL).\n * @cssprop [--n-rail-flyout-offset-block=0] - Extra block-axis offset applied to the rail flyout (positive values push it downward).\n * @cssprop [--n-rail-subnav-indicator-color=var(--n-color-border-strong)] - Colour of the small triangle indicator drawn in the bottom-inline-end corner of rail items that have a subnav (default + hover state).\n * @cssprop [--n-rail-subnav-indicator-color-active=var(--n-color-border-hover)] - Colour of the triangle indicator while the item's flyout popout is open.\n * @cssprop [--n-nav-badge-background=var(--n-color-status-notification)] - Background colour of the built-in `badge` attribute pill (`.n-nav-badge`).\n * @cssprop [--n-nav-badge-color=#fff] - Text colour of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-size=var(--n-font-size-xs)] - Font size of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-font-weight=var(--n-font-weight)] - Font weight of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-line-height=1] - Line height of the built-in `badge` attribute pill. Combined with `--n-nav-badge-padding-block` this controls the pill's effective block size.\n * @cssprop [--n-nav-badge-padding-block=var(--n-space-xs)] - Block-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-padding-inline=calc(var(--n-space-s) / 2)] - Inline-axis padding of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-border-radius=var(--n-border-radius-pill)] - Border radius of the built-in `badge` attribute pill.\n * @cssprop [--n-nav-badge-min-inline-size=20px] - Minimum inline size (width in LTR) of the built-in `badge` attribute pill — sets a visual floor for single-digit counts.\n * @cssprop [--n-nav-badge-margin-inline-start=var(--n-space-xs)] - Inline-start margin separating the badge from the preceding label inside the nav-item's flex row.\n * @cssprop [--n-rail-badge-size=5px] - Diameter of the rail-mode dot the badge collapses into when the layout is in `collapse-mode=\"rail\"` and not `nav-open`.\n *\n * @parent Navigation\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 iconSlot = new SlotController(this, 'icon')\n  private railTooltipSlot = new SlotController(this, 'rail-tooltip')\n  private direction = new DirectionController(this)\n\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement | null\n  private readonly tooltipId = `n-nav-rail-tip-${++railTooltipIdCounter}`\n  private readonly popoutId = `n-nav-rail-pop-${++railPopoutIdCounter}`\n\n  @query('nord-popout') private popoutEl?: Popout\n\n  /**\n   * Reflects whether the ancestor layout is in rail-collapsed state\n   * (i.e. `collapse-mode=\"rail\"` and `nav-open` is absent).\n   * @internal\n   */\n  @state() private railCollapsed = false\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  connectedCallback() {\n    super.connectedCallback()\n    this.startObservingLayout()\n    railMediaQuery.addEventListener('change', this.handleViewportChange)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.stopObservingLayout()\n    railMediaQuery.removeEventListener('change', this.handleViewportChange)\n  }\n\n  private handleViewportChange = () => this.updateRailState()\n\n  private startObservingLayout() {\n    this.observedLayout = this.closest<HTMLElement>('nord-layout')\n    if (!this.observedLayout) {\n      return\n    }\n    this.updateRailState()\n    this.layoutObserver = new MutationObserver(() => this.updateRailState())\n    this.layoutObserver.observe(this.observedLayout, {\n      attributes: true,\n      attributeFilter: ['nav-open', 'collapse-mode'],\n    })\n  }\n\n  private stopObservingLayout() {\n    this.layoutObserver?.disconnect()\n    this.layoutObserver = undefined\n    this.observedLayout = undefined\n    this.railCollapsed = false\n    this.popoutEl?.hide()\n  }\n\n  private updateRailState() {\n    if (!this.observedLayout) {\n      return\n    }\n    // Subnav children render inside a flyout popover when rail-collapsed;\n    // they should keep their full layout, not collapse to icons themselves.\n    const isNested = !!this.parentElement?.closest('nord-nav-item')\n    const next = !isNested\n      && railMediaQuery.matches\n      && this.observedLayout.getAttribute('collapse-mode') === 'rail'\n      && !this.observedLayout.hasAttribute('nav-open')\n    if (!next) {\n      this.popoutEl?.hide()\n    }\n    this.railCollapsed = next\n  }\n\n  render() {\n    if (this.railCollapsed) {\n      return this.renderRail()\n    }\n\n    const innards = html`\n      ${this.renderLeadingIcon()}\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        <slot name=\"end\"></slot>\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  // Resolves the leading icon shown in both the expanded nav and the rail:\n  // a slotted custom icon wins over the `icon` attribute, which wins over nothing.\n  private renderLeadingIcon(): TemplateResult | typeof nothing {\n    if (this.iconSlot.hasContent) {\n      return html`<slot name=\"icon\" class=\"n-nav-icon\"></slot>`\n    }\n    if (this.icon) {\n      return html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>`\n    }\n    return nothing\n  }\n\n  private renderRail(): TemplateResult {\n    const leadingIcon = this.renderLeadingIcon()\n    // Rail is icon-only, so when there's no icon at all we fall back to the\n    // first letter of the label rather than rendering an empty button.\n    const iconEl = leadingIcon === nothing\n      ? html`<span class=\"n-rail-fallback\">${this.textInitial}</span>`\n      : leadingIcon\n    const badge = this.badge ? html`<span class=\"n-nav-badge n-rail-badge\">${this.badge}</span>` : nothing\n\n    if (this.subnavSlot.hasContent) {\n      return this.renderRailFlyout(iconEl, badge)\n    }\n\n    return html`\n      <div role=\"listitem\" class=\"n-rail-host\">\n        ${this.href\n          ? html`\n              <a\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-current=${cond(this.active, 'page')}\n                aria-describedby=${this.tooltipId}\n                href=${this.href}\n              >\n                ${iconEl}${badge}\n              </a>\n            `\n          : html`\n              <button\n                class=\"n-nav-item n-rail-item\"\n                ${ref(this.focusableRef)}\n                aria-describedby=${this.tooltipId}\n              >\n                ${iconEl}${badge}\n              </button>\n            `}\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\">\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n      </div>\n    `\n  }\n\n  private renderRailFlyout(iconEl: TemplateResult, badge: TemplateResult | typeof nothing): TemplateResult {\n    // Click-only: nord-popout's getToggle() listens for click on the\n    // [aria-controls={popoutId}] target. Hover used to open as well, but\n    // that conflicted with the popout's click-to-toggle (hover opened, then\n    // the click was treated as a close).\n    // The tooltip still shows on hover so the icon has an accessible label\n    // — nord-tooltip listens for mouseover/focusin on [aria-describedby].\n    return html`\n      <div role=\"listitem\" class=\"n-rail-host\">\n        <button\n          class=\"n-nav-item n-rail-item\"\n          ${ref(this.focusableRef)}\n          aria-controls=${this.popoutId}\n          aria-describedby=${this.tooltipId}\n        >\n          ${iconEl}${badge}\n          <svg\n            class=\"n-rail-subnav-indicator\"\n            aria-hidden=\"true\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"5\"\n            height=\"5\"\n            viewBox=\"0 0 5 5\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M4.29388 3.79388V0.500991C4.29388 0.0555387 3.75531 -0.167545 3.44033 0.147438L0.147437 3.44033C-0.167545 3.75531 0.0555386 4.29388 0.500991 4.29388H3.79388C4.07003 4.29388 4.29388 4.07003 4.29388 3.79388Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </button>\n        <slot name=\"end\" class=\"n-rail-slotted-end\"></slot>\n        <nord-tooltip id=${this.tooltipId} position=\"inline-end\">\n          ${this.railTooltipSlot.hasContent\n            ? html`<slot name=\"rail-tooltip\"></slot>`\n            : html`<slot></slot>`}\n        </nord-tooltip>\n        <nord-popout id=${this.popoutId} position=\"inline-end\" always-floating>\n          <div class=\"n-rail-flyout-body\">\n            <slot name=${this.subnavSlot.slotName}></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private get textInitial(): string {\n    const text = this.textContent?.trim() ?? ''\n    return text.charAt(0).toUpperCase()\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":["railTooltipIdCounter","railPopoutIdCounter","railMediaQuery","matchMedia","matches","addEventListener","removeEventListener","NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","iconSlot","railTooltipSlot","direction","DirectionController","tooltipId","popoutId","railCollapsed","active","open","handleViewportChange","updateRailState","hasSubNav","hasContent","connectedCallback","super","startObservingLayout","disconnectedCallback","stopObservingLayout","observedLayout","closest","layoutObserver","MutationObserver","observe","attributes","attributeFilter","_a","disconnect","undefined","_b","popoutEl","hide","next","parentElement","getAttribute","hasAttribute","render","renderRail","innards","html","renderLeadingIcon","badge","nothing","element","renderToggle","href","renderLink","renderButton","slotName","icon","leadingIcon","iconEl","textInitial","renderRailFlyout","ref","focusableRef","cond","textContent","trim","charAt","toUpperCase","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","handleActiveChange","styles","componentStyle","style","__decorate","query","prototype","state","property","type","Boolean","reflect","customElement"],"mappings":"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"}

package/lib/NavToggle.js

@@ -1,2 +1,2 @@
-import"./tslib.es6-CmLYFWVC.js";export{N as default}from"./NavToggle-BY83xpx0.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-BJ5O5n8k.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";
+import"./tslib.es6-CmLYFWVC.js";export{N as default}from"./NavToggle-BY83xpx0.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-BJ5O5n8k.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";
 //# sourceMappingURL=NavToggle.js.map