@nordhealth/components 5.0.0-alpha.0 → 5.0.1

package/lib/LocalizeController.js

@@ -1,2 +1,2 @@
-import{isServer as t}from"lit";import{resolveTranslation as o,subscribeToTranslationRegistration as i,subscribeToDocumentLang as n}from"./translation.js";import s from"./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";function a(){}class l{constructor(t,i={onLangChange:a}){this.host=t,this.options=i,this.handleLangChange=()=>{const t=o(this.lang);this.resolvedTranslation!==t&&(this.resolvedTranslation=t,this.options.onLangChange(),this.host.requestUpdate())},t.addController(this),this.resolvedTranslation=o(this.lang)}get lang(){return t?this.host.lang||"en-US":this.host.lang||document.documentElement.lang}get resolvedLang(){return this.resolvedTranslation.$lang}hostConnected(){this.unsubscribeTranslationRegistration=i(this.handleLangChange);const t=o(this.lang);this.resolvedTranslation!==t&&(this.resolvedTranslation=t),this.host.getAttribute("lang")?(this.observer=new MutationObserver(this.handleLangChange),this.observer.observe(this.host,{attributes:!0,attributeFilter:["lang"]})):this.unsubscribeDocumentLang=n(this.handleLangChange),this.options.onLangChange()}hostDisconnected(){var t,o,i;null===(t=this.unsubscribeDocumentLang)||void 0===t||t.call(this),null===(o=this.unsubscribeTranslationRegistration)||void 0===o||o.call(this),null===(i=this.observer)||void 0===i||i.disconnect()}term(t,...o){var i;const{resolvedTranslation:n,resolvedLang:a}=this,l=this.host.localName,r=n[l];null==r?console.warn(`NORD: Missing translations for component \`${l}\` in lang: \`${a}\``):null==r[t]&&console.warn(`NORD: Missing translation key \`${String(t)}\` for component \`${l}\` in lang \`${a}\``);const e=s[l],h=null!==(i=null==r?void 0:r[t])&&void 0!==i?i:e[t];return"function"==typeof h?h(...o):h}}export{l as LocalizeController};
+import{isServer as t}from"lit";import{resolveTranslation as o,subscribeToTranslationRegistration as i,subscribeToDocumentLang as n}from"./translation.js";import s from"./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"./localization24.js";function a(){}class l{constructor(t,i={onLangChange:a}){this.host=t,this.options=i,this.handleLangChange=()=>{const t=o(this.lang);this.resolvedTranslation!==t&&(this.resolvedTranslation=t,this.options.onLangChange(),this.host.requestUpdate())},t.addController(this),this.resolvedTranslation=o(this.lang)}get lang(){return t?this.host.lang||"en-US":this.host.lang||document.documentElement.lang}get resolvedLang(){return this.resolvedTranslation.$lang}hostConnected(){this.unsubscribeTranslationRegistration=i(this.handleLangChange);const t=o(this.lang);this.resolvedTranslation!==t&&(this.resolvedTranslation=t),this.host.getAttribute("lang")?(this.observer=new MutationObserver(this.handleLangChange),this.observer.observe(this.host,{attributes:!0,attributeFilter:["lang"]})):this.unsubscribeDocumentLang=n(this.handleLangChange),this.options.onLangChange()}hostDisconnected(){var t,o,i;null===(t=this.unsubscribeDocumentLang)||void 0===t||t.call(this),null===(o=this.unsubscribeTranslationRegistration)||void 0===o||o.call(this),null===(i=this.observer)||void 0===i||i.disconnect()}term(t,...o){var i;const{resolvedTranslation:n,resolvedLang:a}=this,l=this.host.localName,r=n[l];null==r?console.warn(`NORD: Missing translations for component \`${l}\` in lang: \`${a}\``):null==r[t]&&console.warn(`NORD: Missing translation key \`${String(t)}\` for component \`${l}\` in lang \`${a}\``);const e=s[l],h=null!==(i=null==r?void 0:r[t])&&void 0!==i?i:e[t];return"function"==typeof h?h(...o):h}}export{l as LocalizeController};
 //# sourceMappingURL=LocalizeController.js.map

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":"00BA2BA,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";import"./localization24.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":"+uEA2Be,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"./localization24.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/NavGroup.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,LitElement as i,html as a,nothing as s}from"lit";import{property as o,customElement as n}from"lit/decorators.js";import{s as r}from"./Component-BJ5O5n8k.js";import"./Icon.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const l=t`:host{color:var(--n-color-text-weak);font-weight:var(--n-font-weight);line-height:var(--n-line-height-tight);text-overflow:ellipsis;user-select:none;white-space:nowrap}[role=list]{appearance:none;border:0;box-sizing:border-box;list-style:none;margin-block-end:var(--n-space-m);margin:0;min-inline-size:100%;padding:0}.n-heading{color:var(--n-color-nav-heading);display:var(--n-nav-group-heading-display,block);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);line-height:var(--n-line-height-tight);margin-block-end:var(--n-space-s);margin-block-start:var(--n-space-m);min-inline-size:100%;overflow:hidden;padding-inline-start:var(--n-space-s);text-overflow:ellipsis;white-space:nowrap}:host([data-rail-collapsed]) .n-heading{display:none}:host([slot=subnav][data-rail-collapsed]) .n-heading{display:block;margin-block-start:var(--n-space-s)}`,d="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){},removeEventListener(){}};let h=class extends i{constructor(){super(...arguments),this.handleViewportChange=()=>this.updateRailState()}connectedCallback(){super.connectedCallback(),this.startObservingLayout(),d.addEventListener("change",this.handleViewportChange)}disconnectedCallback(){super.disconnectedCallback(),this.stopObservingLayout(),d.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 e;null===(e=this.layoutObserver)||void 0===e||e.disconnect(),this.layoutObserver=void 0,this.observedLayout=void 0,this.toggleAttribute("data-rail-collapsed",!1)}updateRailState(){if(!this.observedLayout)return;const e=d.matches&&"rail"===this.observedLayout.getAttribute("collapse-mode")&&!this.observedLayout.hasAttribute("nav-open");this.toggleAttribute("data-rail-collapsed",e)}render(){return a`${this.heading?a`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:s}<div role="list" aria-labelledby="${this.heading?"heading":s}"><slot></slot></div>`}};h.styles=[r,l],e([o({reflect:!0})],h.prototype,"heading",void 0),h=e([n("nord-nav-group")],h);var c=h;export{c as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{i as t}from"./context-provider-D8lrPLVi.js";import{css as i,LitElement as a,html as s,nothing as o}from"lit";import{property as n,customElement as r}from"lit/decorators.js";import{s as l}from"./Component-BJ5O5n8k.js";import{navListContext as d}from"./nav-context.js";import"./Icon.js";import"./context-request-event-CCRlXoeR.js";import"./create-context-CJ69ntlY.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const h=i`:host{color:var(--n-color-text-weak);font-weight:var(--n-font-weight);line-height:var(--n-line-height-tight);text-overflow:ellipsis;user-select:none;white-space:nowrap}[role=list]{appearance:none;border:0;box-sizing:border-box;list-style:none;margin-block-end:var(--n-space-m);margin:0;min-inline-size:100%;padding:0}.n-heading{color:var(--n-color-nav-heading);display:var(--n-nav-group-heading-display,block);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);line-height:var(--n-line-height-tight);margin-block-end:var(--n-space-s);margin-block-start:var(--n-space-m);min-inline-size:100%;overflow:hidden;padding-inline-start:var(--n-space-s);text-overflow:ellipsis;white-space:nowrap}:host([data-rail-collapsed]) .n-heading{display:none}:host([slot=subnav][data-rail-collapsed]) .n-heading{display:block;margin-block-start:var(--n-space-s)}`,c="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){},removeEventListener(){}};let p=class extends a{constructor(){super(...arguments),this.listProvider=new t(this,{context:d,initialValue:!0}),this.handleViewportChange=()=>this.updateRailState()}connectedCallback(){super.connectedCallback(),this.startObservingLayout(),c.addEventListener("change",this.handleViewportChange)}disconnectedCallback(){super.disconnectedCallback(),this.stopObservingLayout(),c.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 e;null===(e=this.layoutObserver)||void 0===e||e.disconnect(),this.layoutObserver=void 0,this.observedLayout=void 0,this.toggleAttribute("data-rail-collapsed",!1)}updateRailState(){if(!this.observedLayout)return;const e=c.matches&&"rail"===this.observedLayout.getAttribute("collapse-mode")&&!this.observedLayout.hasAttribute("nav-open");this.toggleAttribute("data-rail-collapsed",e)}render(){return s`${this.heading?s`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:o}<div role="list" aria-labelledby="${this.heading?"heading":o}"><slot></slot></div>`}};p.styles=[l,h],e([n({reflect:!0})],p.prototype,"heading",void 0),p=e([r("nord-nav-group")],p);var v=p;export{v as default};
 //# sourceMappingURL=NavGroup.js.map

package/lib/NavGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavGroup.js","sources":["../src/nav-group/NavGroup.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport style from './NavGroup.css'\nimport '../icon/Icon.js'\n\n// Mirrors the layout's wide-viewport breakpoint. Used to drive the\n// `data-rail-collapsed` attribute below — Safari doesn't support\n// `:host-context()`, so we propagate the layout's rail state via an\n// observed attribute on the host instead.\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 group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status ready\n * @slot - The default slot used for the nav items.\n *\n * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-nav-group-heading-display=block] - Controls the `display` of the group's heading. Set to `none` to hide it — useful for a `slot=\"subnav\"` group whose heading repeats the parent item's label inline; the heading is still shown in the rail flyout where it titles the projected list.\n *\n * @parent Navigation\n */\n@customElement('nord-nav-group')\nexport default class NavGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement | null\n\n  /**\n   * Heading and accessible label for the nav group\n   */\n  @property({ reflect: true }) heading?: string\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.toggleAttribute('data-rail-collapsed', false)\n  }\n\n  private updateRailState() {\n    if (!this.observedLayout) {\n      return\n    }\n    const next = railMediaQuery.matches\n      && this.observedLayout.getAttribute('collapse-mode') === 'rail'\n      && !this.observedLayout.hasAttribute('nav-open')\n    this.toggleAttribute('data-rail-collapsed', next)\n  }\n\n  render() {\n    return html`\n      ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n      <div role=\"list\" aria-labelledby=${this.heading ? 'heading' : nothing}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-nav-group': NavGroup\n  }\n}\n"],"names":["railMediaQuery","matchMedia","matches","addEventListener","removeEventListener","NavGroup","LitElement","constructor","this","handleViewportChange","updateRailState","connectedCallback","super","startObservingLayout","disconnectedCallback","stopObservingLayout","observedLayout","closest","layoutObserver","MutationObserver","observe","attributes","attributeFilter","_a","disconnect","undefined","toggleAttribute","next","getAttribute","hasAttribute","render","html","heading","nothing","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"mvCAWMA,EACoB,oBAAfC,WACLA,WAAW,sBACV,CACCC,SAAS,EACT,gBAAAC,GAEC,EACD,mBAAAC,GAEC,GAmBM,IAAMC,EAAN,cAAuBC,EAAvB,WAAAC,uBAuBLC,KAAoBC,qBAAG,IAAMD,KAAKE,iBAwC3C,CApDC,iBAAAC,GACEC,MAAMD,oBACNH,KAAKK,uBACLb,EAAeG,iBAAiB,SAAUK,KAAKC,qBAChD,CAED,oBAAAK,GACEF,MAAME,uBACNN,KAAKO,sBACLf,EAAeI,oBAAoB,SAAUI,KAAKC,qBACnD,CAIO,oBAAAI,GACNL,KAAKQ,eAAiBR,KAAKS,QAAqB,eAC3CT,KAAKQ,iBAGVR,KAAKE,kBACLF,KAAKU,eAAiB,IAAIC,kBAAiB,IAAMX,KAAKE,oBACtDF,KAAKU,eAAeE,QAAQZ,KAAKQ,eAAgB,CAC/CK,YAAY,EACZC,gBAAiB,CAAC,WAAY,mBAEjC,CAEO,mBAAAP,SACe,QAArBQ,EAAAf,KAAKU,sBAAgB,IAAAK,GAAAA,EAAAC,aACrBhB,KAAKU,oBAAiBO,EACtBjB,KAAKQ,oBAAiBS,EACtBjB,KAAKkB,gBAAgB,uBAAuB,EAC7C,CAEO,eAAAhB,GACN,IAAKF,KAAKQ,eACR,OAEF,MAAMW,EAAO3B,EAAeE,SAC+B,SAAtDM,KAAKQ,eAAeY,aAAa,mBAChCpB,KAAKQ,eAAea,aAAa,YACvCrB,KAAKkB,gBAAgB,sBAAuBC,EAC7C,CAED,MAAAG,GACE,OAAOC,CAAI,GACPvB,KAAKwB,QAAUD,CAAI,wDAAwDvB,KAAKwB,cAAgBC,sCAC/DzB,KAAKwB,QAAU,UAAYC,wBAIjE,GA7DM5B,EAAA6B,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAwBlC,EAAAmC,UAAA,eAAA,GAT1BnC,EAAQgC,EAAA,CAD5BI,EAAc,mBACMpC,SAAAA"}
+{"version":3,"file":"NavGroup.js","sources":["../src/nav-group/NavGroup.ts"],"sourcesContent":["import { ContextProvider } from '@lit/context'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport { navListContext } from './nav-context.js'\nimport style from './NavGroup.css'\nimport '../icon/Icon.js'\n\n// Mirrors the layout's wide-viewport breakpoint. Used to drive the\n// `data-rail-collapsed` attribute below — Safari doesn't support\n// `:host-context()`, so we propagate the layout's rail state via an\n// observed attribute on the host instead.\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 group includes all the actions or items in a single\n * group and is used for grouping items into related categories.\n *\n * @category navigation\n * @status ready\n * @slot - The default slot used for the nav items.\n *\n * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-nav-group-heading-display=block] - Controls the `display` of the group's heading. Set to `none` to hide it — useful for a `slot=\"subnav\"` group whose heading repeats the parent item's label inline; the heading is still shown in the rail flyout where it titles the projected list.\n *\n * @parent Navigation\n */\n@customElement('nord-nav-group')\nexport default class NavGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  // Exposes `role=\"list\"` to slotted nav-items so they know to emit\n  // `role=\"listitem\"`. See nav-context.ts.\n  private listProvider = new ContextProvider(this, { context: navListContext, initialValue: true })\n\n  private layoutObserver?: MutationObserver\n  private observedLayout?: HTMLElement | null\n\n  /**\n   * Heading and accessible label for the nav group\n   */\n  @property({ reflect: true }) heading?: string\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.toggleAttribute('data-rail-collapsed', false)\n  }\n\n  private updateRailState() {\n    if (!this.observedLayout) {\n      return\n    }\n    const next = railMediaQuery.matches\n      && this.observedLayout.getAttribute('collapse-mode') === 'rail'\n      && !this.observedLayout.hasAttribute('nav-open')\n    this.toggleAttribute('data-rail-collapsed', next)\n  }\n\n  render() {\n    return html`\n      ${this.heading ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-heading\">${this.heading}</p>` : nothing}\n      <div role=\"list\" aria-labelledby=${this.heading ? 'heading' : nothing}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-nav-group': NavGroup\n  }\n}\n"],"names":["railMediaQuery","matchMedia","matches","addEventListener","removeEventListener","NavGroup","LitElement","constructor","this","listProvider","ContextProvider","context","navListContext","initialValue","handleViewportChange","updateRailState","connectedCallback","super","startObservingLayout","disconnectedCallback","stopObservingLayout","observedLayout","closest","layoutObserver","MutationObserver","observe","attributes","attributeFilter","_a","disconnect","undefined","toggleAttribute","next","getAttribute","hasAttribute","render","html","heading","nothing","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"y6CAaMA,EACoB,oBAAfC,WACLA,WAAW,sBACV,CACCC,SAAS,EACT,gBAAAC,GAEC,EACD,mBAAAC,GAEC,GAmBM,IAAMC,EAAN,cAAuBC,EAAvB,WAAAC,uBAKLC,KAAAC,aAAe,IAAIC,EAAgBF,KAAM,CAAEG,QAASC,EAAgBC,cAAc,IAsBlFL,KAAoBM,qBAAG,IAAMN,KAAKO,iBAwC3C,CApDC,iBAAAC,GACEC,MAAMD,oBACNR,KAAKU,uBACLlB,EAAeG,iBAAiB,SAAUK,KAAKM,qBAChD,CAED,oBAAAK,GACEF,MAAME,uBACNX,KAAKY,sBACLpB,EAAeI,oBAAoB,SAAUI,KAAKM,qBACnD,CAIO,oBAAAI,GACNV,KAAKa,eAAiBb,KAAKc,QAAqB,eAC3Cd,KAAKa,iBAGVb,KAAKO,kBACLP,KAAKe,eAAiB,IAAIC,kBAAiB,IAAMhB,KAAKO,oBACtDP,KAAKe,eAAeE,QAAQjB,KAAKa,eAAgB,CAC/CK,YAAY,EACZC,gBAAiB,CAAC,WAAY,mBAEjC,CAEO,mBAAAP,SACe,QAArBQ,EAAApB,KAAKe,sBAAgB,IAAAK,GAAAA,EAAAC,aACrBrB,KAAKe,oBAAiBO,EACtBtB,KAAKa,oBAAiBS,EACtBtB,KAAKuB,gBAAgB,uBAAuB,EAC7C,CAEO,eAAAhB,GACN,IAAKP,KAAKa,eACR,OAEF,MAAMW,EAAOhC,EAAeE,SAC+B,SAAtDM,KAAKa,eAAeY,aAAa,mBAChCzB,KAAKa,eAAea,aAAa,YACvC1B,KAAKuB,gBAAgB,sBAAuBC,EAC7C,CAED,MAAAG,GACE,OAAOC,CAAI,GACP5B,KAAK6B,QAAUD,CAAI,wDAAwD5B,KAAK6B,cAAgBC,sCAC/D9B,KAAK6B,QAAU,UAAYC,wBAIjE,GAjEMjC,EAAAkC,OAAS,CAACC,EAAgBC,GAYJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAwBvC,EAAAwC,UAAA,eAAA,GAb1BxC,EAAQqC,EAAA,CAD5BI,EAAc,mBACMzC,SAAAA"}

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{s as e}from"./context-consumer-BJVUulGf.js";import{css as t,html as i,nothing as a,LitElement as o}from"lit";import{query as r,state as s,property as l,customElement as d}from"lit/decorators.js";import{classMap as v}from"lit/directives/class-map.js";import{ifDefined as c}from"lit/directives/if-defined.js";import{ref as p}from"lit/directives/ref.js";import{D as h}from"./DirectionController-ChvNGESZ.js";import{S as u}from"./SlotController-Z6eG7LSZ.js";import{o as b}from"./observe-D0n0zOfU.js";import{c as m}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as f}from"./FocusableMixin-BlQLNPdJ.js";import{s as x}from"./Component-BJ5O5n8k.js";import{navListContext as y}from"./nav-context.js";import"./Popout-B6Hirj3y.js";import"./Tooltip.js";import"./context-request-event-CCRlXoeR.js";import"./EventController-BBOmvfLa.js";import"./create-context-CJ69ntlY.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 k=t`: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 w=0,$=0;const z="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){},removeEventListener(){}};let C=class extends(f(o)){constructor(){super(...arguments),this.subnavSlot=new u(this,"subnav"),this.iconSlot=new u(this,"icon"),this.railTooltipSlot=new u(this,"rail-tooltip"),this.direction=new h(this),this.tooltipId="n-nav-rail-tip-"+ ++w,this.popoutId="n-nav-rail-pop-"+ ++$,this.railCollapsed=!1,this.inList=!1,this.listConsumer=new e(this,{context:y,subscribe:!0,callback:n=>{this.inList=!0===n}}),this.active=!1,this.open=!1,this.handleViewportChange=()=>this.updateRailState()}get hasSubNav(){return this.subnavSlot.hasContent}connectedCallback(){super.connectedCallback(),this.startObservingLayout(),z.addEventListener("change",this.handleViewportChange)}disconnectedCallback(){super.disconnectedCallback(),this.stopObservingLayout(),z.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"))&&z.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=i`${this.renderLeadingIcon()}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?i`<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),i`<div role="${m(this.inList,"listitem")}">${e}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLeadingIcon(){return this.iconSlot.hasContent?i`<slot name="icon" class="n-nav-icon"></slot>`:this.icon?i`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}renderRail(){const n=this.renderLeadingIcon(),e=n===a?i`<span class="n-rail-fallback">${this.textInitial}</span>`:n,t=this.badge?i`<span class="n-nav-badge n-rail-badge">${this.badge}</span>`:a;return this.subnavSlot.hasContent?this.renderRailFlyout(e,t):i`<div role="${m(this.inList,"listitem")}" class="n-rail-host">${this.href?i`<a class="n-nav-item n-rail-item" ${p(this.focusableRef)} aria-current="${m(this.active,"page")}" aria-describedby="${this.tooltipId}" href="${this.href}">${e}${t}</a>`:i`<button class="n-nav-item n-rail-item" ${p(this.focusableRef)} aria-describedby="${this.tooltipId}">${e}${t}</button>`}<slot name="end" class="n-rail-slotted-end"></slot><nord-tooltip id="${this.tooltipId}" position="inline-end" side-offset="${c(this.sideOffset)}" align-offset="${c(this.alignOffset)}">${this.railTooltipSlot.hasContent?i`<slot name="rail-tooltip"></slot>`:i`<slot></slot>`}</nord-tooltip></div>`}renderRailFlyout(n,e){return i`<div role="${m(this.inList,"listitem")}" class="n-rail-host"><button class="n-nav-item n-rail-item" ${p(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" side-offset="${c(this.sideOffset)}" align-offset="${c(this.alignOffset)}">${this.railTooltipSlot.hasContent?i`<slot name="rail-tooltip"></slot>`:i`<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 i`<a class="n-nav-item" ${p(this.focusableRef)} aria-current="${m(this.active,"page")}" href="${this.href||""}">${n}</a>`}renderToggle(n){return i`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${p(this.focusableRef)}>${n}<nord-icon size="xxs" class="${v({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(n){return i`<button class="n-nav-item" ${p(this.focusableRef)}>${n}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new g("toggle"))}handleActiveChange(){this.active&&!this.hasSubNav&&this.dispatchEvent(new g("activate"))}};C.styles=[x,k],n([r("nord-popout")],C.prototype,"popoutEl",void 0),n([s()],C.prototype,"railCollapsed",void 0),n([s()],C.prototype,"inList",void 0),n([l({type:Boolean,reflect:!0})],C.prototype,"active",void 0),n([l({reflect:!0})],C.prototype,"icon",void 0),n([l({reflect:!0})],C.prototype,"href",void 0),n([l({reflect:!0})],C.prototype,"badge",void 0),n([l({reflect:!0,type:Boolean})],C.prototype,"open",void 0),n([l({reflect:!0,type:Number,attribute:"side-offset"})],C.prototype,"sideOffset",void 0),n([l({reflect:!0,type:Number,attribute:"align-offset"})],C.prototype,"alignOffset",void 0),n([b("active","updated")],C.prototype,"handleActiveChange",null),C=n([d("nord-nav-item")],C);var L=C;export{L as default};
 //# sourceMappingURL=NavItem.js.map