@aotearoan/neon 23.3.0 → 23.3.1

package/dist/common/utils/NeonClosableUtils.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var n=Object.defineProperty;var o=(s,e,t)=>e in s?n(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var i=(s,e,t)=>o(s,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class a{constructor(e,t){i(this,"target");i(this,"closeCallback");i(this,"_open",!1);this.target=e,this.closeCallback=t,document.addEventListener("keydown",this.escapeKeyListener.bind(this),{passive:!0}),document.addEventListener("mousedown",this.handleOutsideClick.bind(this),{passive:!0}),document.addEventListener("touchstart",this.handleOutsideClick.bind(this),{passive:!0})}open(){this._open=!0,document.body.classList.add("neon-closable--open")}destroy(){document.removeEventListener("keydown",this.escapeKeyListener.bind(this)),document.removeEventListener("mousedown",this.handleOutsideClick.bind(this)),document.removeEventListener("touchstart",this.handleOutsideClick.bind(this))}escapeKeyListener(e){e.key==="Escape"&&this.close()}close(){this.closeCallback(),this._open&&(document.body.classList.remove("neon-closable--open"),this._open=!1)}handleOutsideClick(e){const t=e.target&&e.target;return t&&!this.target.contains(t)&&this.close(),!0}}exports.NeonClosableUtils=a;
+"use strict";var n=Object.defineProperty;var o=(s,e,t)=>e in s?n(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var i=(s,e,t)=>o(s,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class a{constructor(e,t){i(this,"target");i(this,"closeCallback");i(this,"_open",!1);this.target=e,this.closeCallback=t,document.addEventListener("keydown",this.escapeKeyListener.bind(this),{passive:!0}),document.addEventListener("mousedown",this.handleOutsideClick.bind(this),{passive:!0}),document.addEventListener("touchstart",this.handleOutsideClick.bind(this),{passive:!0})}open(){this._open=!0,document.body.classList.add("neon-closable--open")}destroy(){this.close(),document.removeEventListener("keydown",this.escapeKeyListener.bind(this)),document.removeEventListener("mousedown",this.handleOutsideClick.bind(this)),document.removeEventListener("touchstart",this.handleOutsideClick.bind(this))}escapeKeyListener(e){e.key==="Escape"&&this.close()}close(){this.closeCallback(),this._open&&(document.body.classList.remove("neon-closable--open"),this._open=!1)}handleOutsideClick(e){const t=e.target&&e.target;return t&&!this.target.contains(t)&&this.close(),!0}}exports.NeonClosableUtils=a;
 //# sourceMappingURL=NeonClosableUtils.cjs.js.map

package/dist/common/utils/NeonClosableUtils.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonClosableUtils.cjs.js","sources":["../../../src/common/utils/NeonClosableUtils.ts"],"sourcesContent":["/**\n * Utility class for assisting with closing events for popup containers like modals, dropdowns, selects & drawers.\n * Detects click & touch events outside the popup element as well as escape key triggers.\n */\nexport class NeonClosableUtils {\n  private readonly target: HTMLElement;\n  private readonly closeCallback: () => void;\n  private _open = false;\n\n  /**\n   * Initialise utility to listen to keyboard, mouse & touch events.\n   *\n   * @param target The popup <em>closable</em> element.\n   * @param closeCallback Callback function triggered when an event fires that should close the target\n   * element.\n   */\n  public constructor(target: HTMLElement, closeCallback: () => void) {\n    this.target = target;\n    this.closeCallback = closeCallback;\n    document.addEventListener('keydown', this.escapeKeyListener.bind(this), { passive: true });\n    document.addEventListener('mousedown', this.handleOutsideClick.bind(this), { passive: true });\n    document.addEventListener('touchstart', this.handleOutsideClick.bind(this), { passive: true });\n  }\n\n  /**\n   * Inform the class that the target is now open. This adds the global <em>neon-closable--open</em> class to the\n   * document body to prevent page scrolling while a popup is open.\n   */\n  public open() {\n    this._open = true;\n    document.body.classList.add('neon-closable--open');\n  }\n\n  /**\n   * Destroy the listeners. Call this in the parent component's onUnmounted method.\n   */\n  public destroy() {\n    document.removeEventListener('keydown', this.escapeKeyListener.bind(this));\n    document.removeEventListener('mousedown', this.handleOutsideClick.bind(this));\n    document.removeEventListener('touchstart', this.handleOutsideClick.bind(this));\n  }\n\n  escapeKeyListener(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.close();\n    }\n  }\n\n  /**\n   * Handle closing of the target element. This triggers the closeCallback & removes the global\n   * <em>neon-closable--open</em> class from the document body.\n   */\n  public close() {\n    this.closeCallback();\n\n    if (this._open) {\n      document.body.classList.remove('neon-closable--open');\n      this._open = false;\n    }\n  }\n\n  private handleOutsideClick(event: MouseEvent | TouchEvent) {\n    const target = event.target && (event.target as Element);\n    if (target && !this.target.contains(target)) {\n      this.close();\n    }\n    return true;\n  }\n}\n"],"names":["NeonClosableUtils","target","closeCallback","__publicField","event"],"mappings":"oPAIO,MAAMA,CAAkB,CAYtB,YAAYC,EAAqBC,EAA2B,CAXlDC,EAAA,eACAA,EAAA,sBACTA,EAAA,aAAQ,IAUd,KAAK,OAASF,EACd,KAAK,cAAgBC,EACrB,SAAS,iBAAiB,UAAW,KAAK,kBAAkB,KAAK,IAAI,EAAG,CAAE,QAAS,GAAM,EACzF,SAAS,iBAAiB,YAAa,KAAK,mBAAmB,KAAK,IAAI,EAAG,CAAE,QAAS,GAAM,EAC5F,SAAS,iBAAiB,aAAc,KAAK,mBAAmB,KAAK,IAAI,EAAG,CAAE,QAAS,GAAM,CAC/F,CAMO,MAAO,CACZ,KAAK,MAAQ,GACb,SAAS,KAAK,UAAU,IAAI,qBAAqB,CACnD,CAKO,SAAU,CACf,SAAS,oBAAoB,UAAW,KAAK,kBAAkB,KAAK,IAAI,CAAC,EACzE,SAAS,oBAAoB,YAAa,KAAK,mBAAmB,KAAK,IAAI,CAAC,EAC5E,SAAS,oBAAoB,aAAc,KAAK,mBAAmB,KAAK,IAAI,CAAC,CAC/E,CAEA,kBAAkBE,EAAsB,CAClCA,EAAM,MAAQ,UAChB,KAAK,MAAA,CAET,CAMO,OAAQ,CACb,KAAK,cAAA,EAED,KAAK,QACP,SAAS,KAAK,UAAU,OAAO,qBAAqB,EACpD,KAAK,MAAQ,GAEjB,CAEQ,mBAAmBA,EAAgC,CACzD,MAAMH,EAASG,EAAM,QAAWA,EAAM,OACtC,OAAIH,GAAU,CAAC,KAAK,OAAO,SAASA,CAAM,GACxC,KAAK,MAAA,EAEA,EACT,CACF"}
+{"version":3,"file":"NeonClosableUtils.cjs.js","sources":["../../../src/common/utils/NeonClosableUtils.ts"],"sourcesContent":["/**\n * Utility class for assisting with closing events for popup containers like modals, dropdowns, selects & drawers.\n * Detects click & touch events outside the popup element as well as escape key triggers.\n */\nexport class NeonClosableUtils {\n  private readonly target: HTMLElement;\n  private readonly closeCallback: () => void;\n  private _open = false;\n\n  /**\n   * Initialise utility to listen to keyboard, mouse & touch events.\n   *\n   * @param target The popup <em>closable</em> element.\n   * @param closeCallback Callback function triggered when an event fires that should close the target\n   * element.\n   */\n  public constructor(target: HTMLElement, closeCallback: () => void) {\n    this.target = target;\n    this.closeCallback = closeCallback;\n    document.addEventListener('keydown', this.escapeKeyListener.bind(this), { passive: true });\n    document.addEventListener('mousedown', this.handleOutsideClick.bind(this), { passive: true });\n    document.addEventListener('touchstart', this.handleOutsideClick.bind(this), { passive: true });\n  }\n\n  /**\n   * Inform the class that the target is now open. This adds the global <em>neon-closable--open</em> class to the\n   * document body to prevent page scrolling while a popup is open.\n   */\n  public open() {\n    this._open = true;\n    document.body.classList.add('neon-closable--open');\n  }\n\n  /**\n   * Destroy the listeners. Call this in the parent component's onUnmounted method.\n   */\n  public destroy() {\n    this.close();\n    document.removeEventListener('keydown', this.escapeKeyListener.bind(this));\n    document.removeEventListener('mousedown', this.handleOutsideClick.bind(this));\n    document.removeEventListener('touchstart', this.handleOutsideClick.bind(this));\n  }\n\n  escapeKeyListener(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.close();\n    }\n  }\n\n  /**\n   * Handle closing of the target element. This triggers the closeCallback & removes the global\n   * <em>neon-closable--open</em> class from the document body.\n   */\n  public close() {\n    this.closeCallback();\n\n    if (this._open) {\n      document.body.classList.remove('neon-closable--open');\n      this._open = false;\n    }\n  }\n\n  private handleOutsideClick(event: MouseEvent | TouchEvent) {\n    const target = event.target && (event.target as Element);\n    if (target && !this.target.contains(target)) {\n      this.close();\n    }\n    return true;\n  }\n}\n"],"names":["NeonClosableUtils","target","closeCallback","__publicField","event"],"mappings":"oPAIO,MAAMA,CAAkB,CAYtB,YAAYC,EAAqBC,EAA2B,CAXlDC,EAAA,eACAA,EAAA,sBACTA,EAAA,aAAQ,IAUd,KAAK,OAASF,EACd,KAAK,cAAgBC,EACrB,SAAS,iBAAiB,UAAW,KAAK,kBAAkB,KAAK,IAAI,EAAG,CAAE,QAAS,GAAM,EACzF,SAAS,iBAAiB,YAAa,KAAK,mBAAmB,KAAK,IAAI,EAAG,CAAE,QAAS,GAAM,EAC5F,SAAS,iBAAiB,aAAc,KAAK,mBAAmB,KAAK,IAAI,EAAG,CAAE,QAAS,GAAM,CAC/F,CAMO,MAAO,CACZ,KAAK,MAAQ,GACb,SAAS,KAAK,UAAU,IAAI,qBAAqB,CACnD,CAKO,SAAU,CACf,KAAK,MAAA,EACL,SAAS,oBAAoB,UAAW,KAAK,kBAAkB,KAAK,IAAI,CAAC,EACzE,SAAS,oBAAoB,YAAa,KAAK,mBAAmB,KAAK,IAAI,CAAC,EAC5E,SAAS,oBAAoB,aAAc,KAAK,mBAAmB,KAAK,IAAI,CAAC,CAC/E,CAEA,kBAAkBE,EAAsB,CAClCA,EAAM,MAAQ,UAChB,KAAK,MAAA,CAET,CAMO,OAAQ,CACb,KAAK,cAAA,EAED,KAAK,QACP,SAAS,KAAK,UAAU,OAAO,qBAAqB,EACpD,KAAK,MAAQ,GAEjB,CAEQ,mBAAmBA,EAAgC,CACzD,MAAMH,EAASG,EAAM,QAAWA,EAAM,OACtC,OAAIH,GAAU,CAAC,KAAK,OAAO,SAASA,CAAM,GACxC,KAAK,MAAA,EAEA,EACT,CACF"}

package/dist/common/utils/NeonClosableUtils.es.js

@@ -26,7 +26,7 @@ class d {
    * Destroy the listeners. Call this in the parent component's onUnmounted method.
    */
   destroy() {
-    document.removeEventListener("keydown", this.escapeKeyListener.bind(this)), document.removeEventListener("mousedown", this.handleOutsideClick.bind(this)), document.removeEventListener("touchstart", this.handleOutsideClick.bind(this));
+    this.close(), document.removeEventListener("keydown", this.escapeKeyListener.bind(this)), document.removeEventListener("mousedown", this.handleOutsideClick.bind(this)), document.removeEventListener("touchstart", this.handleOutsideClick.bind(this));
   }
   escapeKeyListener(e) {
     e.key === "Escape" && this.close();

package/dist/common/utils/NeonClosableUtils.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonClosableUtils.es.js","sources":["../../../src/common/utils/NeonClosableUtils.ts"],"sourcesContent":["/**\n * Utility class for assisting with closing events for popup containers like modals, dropdowns, selects & drawers.\n * Detects click & touch events outside the popup element as well as escape key triggers.\n */\nexport class NeonClosableUtils {\n  private readonly target: HTMLElement;\n  private readonly closeCallback: () => void;\n  private _open = false;\n\n  /**\n   * Initialise utility to listen to keyboard, mouse & touch events.\n   *\n   * @param target The popup <em>closable</em> element.\n   * @param closeCallback Callback function triggered when an event fires that should close the target\n   * element.\n   */\n  public constructor(target: HTMLElement, closeCallback: () => void) {\n    this.target = target;\n    this.closeCallback = closeCallback;\n    document.addEventListener('keydown', this.escapeKeyListener.bind(this), { passive: true });\n    document.addEventListener('mousedown', this.handleOutsideClick.bind(this), { passive: true });\n    document.addEventListener('touchstart', this.handleOutsideClick.bind(this), { passive: true });\n  }\n\n  /**\n   * Inform the class that the target is now open. This adds the global <em>neon-closable--open</em> class to the\n   * document body to prevent page scrolling while a popup is open.\n   */\n  public open() {\n    this._open = true;\n    document.body.classList.add('neon-closable--open');\n  }\n\n  /**\n   * Destroy the listeners. Call this in the parent component's onUnmounted method.\n   */\n  public destroy() {\n    document.removeEventListener('keydown', this.escapeKeyListener.bind(this));\n    document.removeEventListener('mousedown', this.handleOutsideClick.bind(this));\n    document.removeEventListener('touchstart', this.handleOutsideClick.bind(this));\n  }\n\n  escapeKeyListener(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.close();\n    }\n  }\n\n  /**\n   * Handle closing of the target element. This triggers the closeCallback & removes the global\n   * <em>neon-closable--open</em> class from the document body.\n   */\n  public close() {\n    this.closeCallback();\n\n    if (this._open) {\n      document.body.classList.remove('neon-closable--open');\n      this._open = false;\n    }\n  }\n\n  private handleOutsideClick(event: MouseEvent | TouchEvent) {\n    const target = event.target && (event.target as Element);\n    if (target && !this.target.contains(target)) {\n      this.close();\n    }\n    return true;\n  }\n}\n"],"names":["NeonClosableUtils","target","closeCallback","__publicField","event"],"mappings":";;;AAIO,MAAMA,EAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYtB,YAAYC,GAAqBC,GAA2B;AAXlD,IAAAC,EAAA;AACA,IAAAA,EAAA;AACT,IAAAA,EAAA,eAAQ;AAUd,SAAK,SAASF,GACd,KAAK,gBAAgBC,GACrB,SAAS,iBAAiB,WAAW,KAAK,kBAAkB,KAAK,IAAI,GAAG,EAAE,SAAS,IAAM,GACzF,SAAS,iBAAiB,aAAa,KAAK,mBAAmB,KAAK,IAAI,GAAG,EAAE,SAAS,IAAM,GAC5F,SAAS,iBAAiB,cAAc,KAAK,mBAAmB,KAAK,IAAI,GAAG,EAAE,SAAS,IAAM;AAAA,EAC/F;AAAA;AAAA;AAAA;AAAA;AAAA,EAMO,OAAO;AACZ,SAAK,QAAQ,IACb,SAAS,KAAK,UAAU,IAAI,qBAAqB;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA,EAKO,UAAU;AACf,aAAS,oBAAoB,WAAW,KAAK,kBAAkB,KAAK,IAAI,CAAC,GACzE,SAAS,oBAAoB,aAAa,KAAK,mBAAmB,KAAK,IAAI,CAAC,GAC5E,SAAS,oBAAoB,cAAc,KAAK,mBAAmB,KAAK,IAAI,CAAC;AAAA,EAC/E;AAAA,EAEA,kBAAkBE,GAAsB;AACtC,IAAIA,EAAM,QAAQ,YAChB,KAAK,MAAA;AAAA,EAET;AAAA;AAAA;AAAA;AAAA;AAAA,EAMO,QAAQ;AACb,SAAK,cAAA,GAED,KAAK,UACP,SAAS,KAAK,UAAU,OAAO,qBAAqB,GACpD,KAAK,QAAQ;AAAA,EAEjB;AAAA,EAEQ,mBAAmBA,GAAgC;AACzD,UAAMH,IAASG,EAAM,UAAWA,EAAM;AACtC,WAAIH,KAAU,CAAC,KAAK,OAAO,SAASA,CAAM,KACxC,KAAK,MAAA,GAEA;AAAA,EACT;AACF;"}
+{"version":3,"file":"NeonClosableUtils.es.js","sources":["../../../src/common/utils/NeonClosableUtils.ts"],"sourcesContent":["/**\n * Utility class for assisting with closing events for popup containers like modals, dropdowns, selects & drawers.\n * Detects click & touch events outside the popup element as well as escape key triggers.\n */\nexport class NeonClosableUtils {\n  private readonly target: HTMLElement;\n  private readonly closeCallback: () => void;\n  private _open = false;\n\n  /**\n   * Initialise utility to listen to keyboard, mouse & touch events.\n   *\n   * @param target The popup <em>closable</em> element.\n   * @param closeCallback Callback function triggered when an event fires that should close the target\n   * element.\n   */\n  public constructor(target: HTMLElement, closeCallback: () => void) {\n    this.target = target;\n    this.closeCallback = closeCallback;\n    document.addEventListener('keydown', this.escapeKeyListener.bind(this), { passive: true });\n    document.addEventListener('mousedown', this.handleOutsideClick.bind(this), { passive: true });\n    document.addEventListener('touchstart', this.handleOutsideClick.bind(this), { passive: true });\n  }\n\n  /**\n   * Inform the class that the target is now open. This adds the global <em>neon-closable--open</em> class to the\n   * document body to prevent page scrolling while a popup is open.\n   */\n  public open() {\n    this._open = true;\n    document.body.classList.add('neon-closable--open');\n  }\n\n  /**\n   * Destroy the listeners. Call this in the parent component's onUnmounted method.\n   */\n  public destroy() {\n    this.close();\n    document.removeEventListener('keydown', this.escapeKeyListener.bind(this));\n    document.removeEventListener('mousedown', this.handleOutsideClick.bind(this));\n    document.removeEventListener('touchstart', this.handleOutsideClick.bind(this));\n  }\n\n  escapeKeyListener(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.close();\n    }\n  }\n\n  /**\n   * Handle closing of the target element. This triggers the closeCallback & removes the global\n   * <em>neon-closable--open</em> class from the document body.\n   */\n  public close() {\n    this.closeCallback();\n\n    if (this._open) {\n      document.body.classList.remove('neon-closable--open');\n      this._open = false;\n    }\n  }\n\n  private handleOutsideClick(event: MouseEvent | TouchEvent) {\n    const target = event.target && (event.target as Element);\n    if (target && !this.target.contains(target)) {\n      this.close();\n    }\n    return true;\n  }\n}\n"],"names":["NeonClosableUtils","target","closeCallback","__publicField","event"],"mappings":";;;AAIO,MAAMA,EAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYtB,YAAYC,GAAqBC,GAA2B;AAXlD,IAAAC,EAAA;AACA,IAAAA,EAAA;AACT,IAAAA,EAAA,eAAQ;AAUd,SAAK,SAASF,GACd,KAAK,gBAAgBC,GACrB,SAAS,iBAAiB,WAAW,KAAK,kBAAkB,KAAK,IAAI,GAAG,EAAE,SAAS,IAAM,GACzF,SAAS,iBAAiB,aAAa,KAAK,mBAAmB,KAAK,IAAI,GAAG,EAAE,SAAS,IAAM,GAC5F,SAAS,iBAAiB,cAAc,KAAK,mBAAmB,KAAK,IAAI,GAAG,EAAE,SAAS,IAAM;AAAA,EAC/F;AAAA;AAAA;AAAA;AAAA;AAAA,EAMO,OAAO;AACZ,SAAK,QAAQ,IACb,SAAS,KAAK,UAAU,IAAI,qBAAqB;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA,EAKO,UAAU;AACf,SAAK,MAAA,GACL,SAAS,oBAAoB,WAAW,KAAK,kBAAkB,KAAK,IAAI,CAAC,GACzE,SAAS,oBAAoB,aAAa,KAAK,mBAAmB,KAAK,IAAI,CAAC,GAC5E,SAAS,oBAAoB,cAAc,KAAK,mBAAmB,KAAK,IAAI,CAAC;AAAA,EAC/E;AAAA,EAEA,kBAAkBE,GAAsB;AACtC,IAAIA,EAAM,QAAQ,YAChB,KAAK,MAAA;AAAA,EAET;AAAA;AAAA;AAAA;AAAA;AAAA,EAMO,QAAQ;AACb,SAAK,cAAA,GAED,KAAK,UACP,SAAS,KAAK,UAAU,OAAO,qBAAqB,GACpD,KAAK,QAAQ;AAAA,EAEjB;AAAA,EAEQ,mBAAmBA,GAAgC;AACzD,UAAMH,IAASG,EAAM,UAAWA,EAAM;AACtC,WAAIH,KAAU,CAAC,KAAK,OAAO,SAASA,CAAM,KACxC,KAAK,MAAA,GAEA;AAAA,EACT;AACF;"}

package/dist/components/layout/modal/NeonModal.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),r=require("../../../common/utils/NeonClosableUtils.cjs.js"),c=require("../../user-input/button/NeonButton.vue.cjs.js"),d=e.defineComponent({name:"NeonDrawer",components:{NeonButton:c},props:{open:{type:Boolean,required:!0},dismissible:{type:Boolean,default:!0},opaque:{type:Boolean,default:!1},showTopNav:{type:Boolean,default:!1}},emits:["close"],setup(o,{emit:a}){const l=e.ref(null),s=e.ref(null),i=()=>{a("close")},t=()=>{o.open&&o.dismissible&&i()};return e.onMounted(()=>{o.dismissible&&(s.value=l.value&&new r.NeonClosableUtils(l.value,t)||null)}),e.onUnmounted(()=>{var n;(n=s.value)==null||n.destroy()}),e.watch(()=>o.open,n=>{var u;n&&((u=s.value)==null||u.open())},{immediate:!0}),{modal:l,close:t}}});module.exports=d;
+"use strict";const e=require("vue"),c=require("../../../common/utils/NeonClosableUtils.cjs.js"),d=require("../../user-input/button/NeonButton.vue.cjs.js"),p=require("../../../common/enums/NeonResponsive.cjs.js"),f=e.defineComponent({name:"NeonDrawer",components:{NeonButton:d},props:{open:{type:Boolean,required:!0},dismissible:{type:Boolean,default:!0},opaque:{type:Boolean,default:!1},showTopNav:{type:Boolean,default:!1},breakpoint:{type:String,default:p.NeonResponsive.Mobile}},emits:["close"],setup(o,{emit:a}){const l=e.ref(null),n=e.ref(null),r=()=>{a("close")},t=()=>{o.open&&o.dismissible&&r()};return e.onMounted(()=>{o.dismissible&&(n.value=l.value&&new c.NeonClosableUtils(l.value,t)||null)}),e.onUnmounted(()=>{var s;(s=n.value)==null||s.destroy()}),e.watch(()=>o.open,s=>{var i,u;s?(i=n.value)==null||i.open():(u=n.value)==null||u.close()},{immediate:!0}),{modal:l,close:t}}});module.exports=f;
 //# sourceMappingURL=NeonModal.cjs.js.map

package/dist/components/layout/modal/NeonModal.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonModal.cjs.js","sources":["../../../../src/components/layout/modal/NeonModal.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { NeonClosableUtils } from '@/common/utils/NeonClosableUtils';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\n\n/**\n * A modal dialog component. This will be rendered above the content of the main window and can either be dismissed by the user or configured to require user interaction before dismissal.\n */\nexport default defineComponent({\n  name: 'NeonDrawer',\n  components: {\n    NeonButton,\n  },\n  props: {\n    /**\n     * Whether the modal is currently open.\n     */\n    open: { type: Boolean, required: true },\n    /**\n     * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.\n     */\n    dismissible: { type: Boolean, default: true },\n    /**\n     * Increase the opacity so that the page behind the modal is no longer visible\n     */\n    opaque: { type: Boolean, default: false },\n    /**\n     * Keep the top nav visible when the modal is open\n     */\n    showTopNav: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the modal is closed.\n     * @type {void}\n     */\n    'close',\n  ],\n  setup(props, { emit }) {\n    const modal = ref(null);\n    const closableUtils = ref<NeonClosableUtils | null>(null);\n\n    const onClose = () => {\n      emit('close');\n    };\n\n    const close = () => {\n      if (props.open && props.dismissible) {\n        onClose();\n      }\n    };\n\n    onMounted(() => {\n      if (props.dismissible) {\n        closableUtils.value = (modal.value && new NeonClosableUtils(modal.value, close)) || null;\n      }\n    });\n\n    onUnmounted(() => {\n      closableUtils.value?.destroy();\n    });\n\n    watch(\n      () => props.open,\n      (value) => {\n        if (value) {\n          closableUtils.value?.open();\n        }\n      },\n      { immediate: true },\n    );\n\n    return {\n      modal,\n      close,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","props","emit","modal","ref","closableUtils","onClose","close","onMounted","NeonClosableUtils","onUnmounted","_a","watch","value"],"mappings":"2JAOAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,WAAY,CACV,WAAAC,CAAA,EAEF,MAAO,CAIL,KAAM,CAAE,KAAM,QAAS,SAAU,EAAA,EAIjC,YAAa,CAAE,KAAM,QAAS,QAAS,EAAA,EAIvC,OAAQ,CAAE,KAAM,QAAS,QAAS,EAAA,EAIlC,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE9C,MAAO,CAKL,OAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,IAAI,IAAI,EAChBC,EAAgBD,EAAAA,IAA8B,IAAI,EAElDE,EAAU,IAAM,CACpBJ,EAAK,OAAO,CACd,EAEMK,EAAQ,IAAM,CACdN,EAAM,MAAQA,EAAM,aACtBK,EAAA,CAEJ,EAEAE,OAAAA,EAAAA,UAAU,IAAM,CACVP,EAAM,cACRI,EAAc,MAASF,EAAM,OAAS,IAAIM,EAAAA,kBAAkBN,EAAM,MAAOI,CAAK,GAAM,KAExF,CAAC,EAEDG,EAAAA,YAAY,IAAM,QAChBC,EAAAN,EAAc,QAAd,MAAAM,EAAqB,SACvB,CAAC,EAEDC,EAAAA,MACE,IAAMX,EAAM,KACXY,GAAU,OACLA,KACFF,EAAAN,EAAc,QAAd,MAAAM,EAAqB,OAEzB,EACA,CAAE,UAAW,EAAA,CAAK,EAGb,CACL,MAAAR,EACA,MAAAI,CAAA,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonModal.cjs.js","sources":["../../../../src/components/layout/modal/NeonModal.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { NeonClosableUtils } from '@/common/utils/NeonClosableUtils';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport { NeonResponsive } from '@/common/enums/NeonResponsive';\n\n/**\n * A modal dialog component. This will be rendered above the content of the main window and can either be dismissed by the user or configured to require user interaction before dismissal.\n */\nexport default defineComponent({\n  name: 'NeonDrawer',\n  components: {\n    NeonButton,\n  },\n  props: {\n    /**\n     * Whether the modal is currently open.\n     */\n    open: { type: Boolean, required: true },\n    /**\n     * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.\n     */\n    dismissible: { type: Boolean, default: true },\n    /**\n     * Increase the opacity so that the page behind the modal is no longer visible\n     */\n    opaque: { type: Boolean, default: false },\n    /**\n     * Keep the top nav visible when the modal is open\n     */\n    showTopNav: { type: Boolean, default: false },\n    /**\n     * Responsive breakpoint below which point the modal becomes fullscreen.\n     * Supports NeonResponsive.Mobile & NeonResponsive.MobileLarge.\n     */\n    breakpoint: { type: String as () => NeonResponsive, default: NeonResponsive.Mobile },\n  },\n  emits: [\n    /**\n     * Emitted when the modal is closed.\n     * @type {void}\n     */\n    'close',\n  ],\n  setup(props, { emit }) {\n    const modal = ref(null);\n    const closableUtils = ref<NeonClosableUtils | null>(null);\n\n    const onClose = () => {\n      emit('close');\n    };\n\n    const close = () => {\n      if (props.open && props.dismissible) {\n        onClose();\n      }\n    };\n\n    onMounted(() => {\n      if (props.dismissible) {\n        closableUtils.value = (modal.value && new NeonClosableUtils(modal.value, close)) || null;\n      }\n    });\n\n    onUnmounted(() => {\n      closableUtils.value?.destroy();\n    });\n\n    watch(\n      () => props.open,\n      (value) => {\n        if (value) {\n          closableUtils.value?.open();\n        } else {\n          closableUtils.value?.close();\n        }\n      },\n      { immediate: true },\n    );\n\n    return {\n      modal,\n      close,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonResponsive","props","emit","modal","ref","closableUtils","onClose","close","onMounted","NeonClosableUtils","onUnmounted","_a","watch","value","_b"],"mappings":"oNAQAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,WAAY,CACV,WAAAC,CAAA,EAEF,MAAO,CAIL,KAAM,CAAE,KAAM,QAAS,SAAU,EAAA,EAIjC,YAAa,CAAE,KAAM,QAAS,QAAS,EAAA,EAIvC,OAAQ,CAAE,KAAM,QAAS,QAAS,EAAA,EAIlC,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAKtC,WAAY,CAAE,KAAM,OAAgC,QAASC,EAAAA,eAAe,MAAA,CAAO,EAErF,MAAO,CAKL,OAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,IAAI,IAAI,EAChBC,EAAgBD,EAAAA,IAA8B,IAAI,EAElDE,EAAU,IAAM,CACpBJ,EAAK,OAAO,CACd,EAEMK,EAAQ,IAAM,CACdN,EAAM,MAAQA,EAAM,aACtBK,EAAA,CAEJ,EAEAE,OAAAA,EAAAA,UAAU,IAAM,CACVP,EAAM,cACRI,EAAc,MAASF,EAAM,OAAS,IAAIM,EAAAA,kBAAkBN,EAAM,MAAOI,CAAK,GAAM,KAExF,CAAC,EAEDG,EAAAA,YAAY,IAAM,QAChBC,EAAAN,EAAc,QAAd,MAAAM,EAAqB,SACvB,CAAC,EAEDC,EAAAA,MACE,IAAMX,EAAM,KACXY,GAAU,SACLA,GACFF,EAAAN,EAAc,QAAd,MAAAM,EAAqB,QAErBG,EAAAT,EAAc,QAAd,MAAAS,EAAqB,OAEzB,EACA,CAAE,UAAW,EAAA,CAAK,EAGb,CACL,MAAAX,EACA,MAAAI,CAAA,CAEJ,CACF,CAAC"}

package/dist/components/layout/modal/NeonModal.es.js

@@ -1,10 +1,11 @@
-import { defineComponent as m, ref as a, onMounted as r, onUnmounted as f, watch as d } from "vue";
-import { NeonClosableUtils as p } from "../../../common/utils/NeonClosableUtils.es.js";
-import c from "../../user-input/button/NeonButton.vue.es.js";
-const B = m({
+import { defineComponent as r, ref as i, onMounted as f, onUnmounted as p, watch as d } from "vue";
+import { NeonClosableUtils as c } from "../../../common/utils/NeonClosableUtils.es.js";
+import v from "../../user-input/button/NeonButton.vue.es.js";
+import { NeonResponsive as b } from "../../../common/enums/NeonResponsive.es.js";
+const C = r({
   name: "NeonDrawer",
   components: {
-    NeonButton: c
+    NeonButton: v
   },
   props: {
     /**
@@ -22,7 +23,12 @@ const B = m({
     /**
      * Keep the top nav visible when the modal is open
      */
-    showTopNav: { type: Boolean, default: !1 }
+    showTopNav: { type: Boolean, default: !1 },
+    /**
+     * Responsive breakpoint below which point the modal becomes fullscreen.
+     * Supports NeonResponsive.Mobile & NeonResponsive.MobileLarge.
+     */
+    breakpoint: { type: String, default: b.Mobile }
   },
   emits: [
     /**
@@ -31,31 +37,31 @@ const B = m({
      */
     "close"
   ],
-  setup(e, { emit: i }) {
-    const l = a(null), n = a(null), u = () => {
-      i("close");
+  setup(e, { emit: u }) {
+    const n = i(null), o = i(null), m = () => {
+      u("close");
     }, t = () => {
-      e.open && e.dismissible && u();
+      e.open && e.dismissible && m();
     };
-    return r(() => {
-      e.dismissible && (n.value = l.value && new p(l.value, t) || null);
-    }), f(() => {
-      var o;
-      (o = n.value) == null || o.destroy();
+    return f(() => {
+      e.dismissible && (o.value = n.value && new c(n.value, t) || null);
+    }), p(() => {
+      var l;
+      (l = o.value) == null || l.destroy();
     }), d(
       () => e.open,
-      (o) => {
-        var s;
-        o && ((s = n.value) == null || s.open());
+      (l) => {
+        var s, a;
+        l ? (s = o.value) == null || s.open() : (a = o.value) == null || a.close();
       },
       { immediate: !0 }
     ), {
-      modal: l,
+      modal: n,
       close: t
     };
   }
 });
 export {
-  B as default
+  C as default
 };
 //# sourceMappingURL=NeonModal.es.js.map

package/dist/components/layout/modal/NeonModal.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonModal.es.js","sources":["../../../../src/components/layout/modal/NeonModal.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { NeonClosableUtils } from '@/common/utils/NeonClosableUtils';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\n\n/**\n * A modal dialog component. This will be rendered above the content of the main window and can either be dismissed by the user or configured to require user interaction before dismissal.\n */\nexport default defineComponent({\n  name: 'NeonDrawer',\n  components: {\n    NeonButton,\n  },\n  props: {\n    /**\n     * Whether the modal is currently open.\n     */\n    open: { type: Boolean, required: true },\n    /**\n     * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.\n     */\n    dismissible: { type: Boolean, default: true },\n    /**\n     * Increase the opacity so that the page behind the modal is no longer visible\n     */\n    opaque: { type: Boolean, default: false },\n    /**\n     * Keep the top nav visible when the modal is open\n     */\n    showTopNav: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the modal is closed.\n     * @type {void}\n     */\n    'close',\n  ],\n  setup(props, { emit }) {\n    const modal = ref(null);\n    const closableUtils = ref<NeonClosableUtils | null>(null);\n\n    const onClose = () => {\n      emit('close');\n    };\n\n    const close = () => {\n      if (props.open && props.dismissible) {\n        onClose();\n      }\n    };\n\n    onMounted(() => {\n      if (props.dismissible) {\n        closableUtils.value = (modal.value && new NeonClosableUtils(modal.value, close)) || null;\n      }\n    });\n\n    onUnmounted(() => {\n      closableUtils.value?.destroy();\n    });\n\n    watch(\n      () => props.open,\n      (value) => {\n        if (value) {\n          closableUtils.value?.open();\n        }\n      },\n      { immediate: true },\n    );\n\n    return {\n      modal,\n      close,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","props","emit","modal","ref","closableUtils","onClose","close","onMounted","NeonClosableUtils","onUnmounted","_a","watch","value"],"mappings":";;;AAOA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM,EAAE,MAAM,SAAS,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIjC,aAAa,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIvC,QAAQ,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIlC,YAAY,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE9C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAQC,EAAI,IAAI,GAChBC,IAAgBD,EAA8B,IAAI,GAElDE,IAAU,MAAM;AACpB,MAAAJ,EAAK,OAAO;AAAA,IACd,GAEMK,IAAQ,MAAM;AAClB,MAAIN,EAAM,QAAQA,EAAM,eACtBK,EAAA;AAAA,IAEJ;AAEA,WAAAE,EAAU,MAAM;AACd,MAAIP,EAAM,gBACRI,EAAc,QAASF,EAAM,SAAS,IAAIM,EAAkBN,EAAM,OAAOI,CAAK,KAAM;AAAA,IAExF,CAAC,GAEDG,EAAY,MAAM;;AAChB,OAAAC,IAAAN,EAAc,UAAd,QAAAM,EAAqB;AAAA,IACvB,CAAC,GAEDC;AAAA,MACE,MAAMX,EAAM;AAAA,MACZ,CAACY,MAAU;;AACT,QAAIA,OACFF,IAAAN,EAAc,UAAd,QAAAM,EAAqB;AAAA,MAEzB;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK,GAGb;AAAA,MACL,OAAAR;AAAA,MACA,OAAAI;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonModal.es.js","sources":["../../../../src/components/layout/modal/NeonModal.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { NeonClosableUtils } from '@/common/utils/NeonClosableUtils';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport { NeonResponsive } from '@/common/enums/NeonResponsive';\n\n/**\n * A modal dialog component. This will be rendered above the content of the main window and can either be dismissed by the user or configured to require user interaction before dismissal.\n */\nexport default defineComponent({\n  name: 'NeonDrawer',\n  components: {\n    NeonButton,\n  },\n  props: {\n    /**\n     * Whether the modal is currently open.\n     */\n    open: { type: Boolean, required: true },\n    /**\n     * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.\n     */\n    dismissible: { type: Boolean, default: true },\n    /**\n     * Increase the opacity so that the page behind the modal is no longer visible\n     */\n    opaque: { type: Boolean, default: false },\n    /**\n     * Keep the top nav visible when the modal is open\n     */\n    showTopNav: { type: Boolean, default: false },\n    /**\n     * Responsive breakpoint below which point the modal becomes fullscreen.\n     * Supports NeonResponsive.Mobile & NeonResponsive.MobileLarge.\n     */\n    breakpoint: { type: String as () => NeonResponsive, default: NeonResponsive.Mobile },\n  },\n  emits: [\n    /**\n     * Emitted when the modal is closed.\n     * @type {void}\n     */\n    'close',\n  ],\n  setup(props, { emit }) {\n    const modal = ref(null);\n    const closableUtils = ref<NeonClosableUtils | null>(null);\n\n    const onClose = () => {\n      emit('close');\n    };\n\n    const close = () => {\n      if (props.open && props.dismissible) {\n        onClose();\n      }\n    };\n\n    onMounted(() => {\n      if (props.dismissible) {\n        closableUtils.value = (modal.value && new NeonClosableUtils(modal.value, close)) || null;\n      }\n    });\n\n    onUnmounted(() => {\n      closableUtils.value?.destroy();\n    });\n\n    watch(\n      () => props.open,\n      (value) => {\n        if (value) {\n          closableUtils.value?.open();\n        } else {\n          closableUtils.value?.close();\n        }\n      },\n      { immediate: true },\n    );\n\n    return {\n      modal,\n      close,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonResponsive","props","emit","modal","ref","closableUtils","onClose","close","onMounted","NeonClosableUtils","onUnmounted","_a","watch","value","_b"],"mappings":";;;;AAQA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM,EAAE,MAAM,SAAS,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIjC,aAAa,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIvC,QAAQ,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIlC,YAAY,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKtC,YAAY,EAAE,MAAM,QAAgC,SAASC,EAAe,OAAA;AAAA,EAAO;AAAA,EAErF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAQC,EAAI,IAAI,GAChBC,IAAgBD,EAA8B,IAAI,GAElDE,IAAU,MAAM;AACpB,MAAAJ,EAAK,OAAO;AAAA,IACd,GAEMK,IAAQ,MAAM;AAClB,MAAIN,EAAM,QAAQA,EAAM,eACtBK,EAAA;AAAA,IAEJ;AAEA,WAAAE,EAAU,MAAM;AACd,MAAIP,EAAM,gBACRI,EAAc,QAASF,EAAM,SAAS,IAAIM,EAAkBN,EAAM,OAAOI,CAAK,KAAM;AAAA,IAExF,CAAC,GAEDG,EAAY,MAAM;;AAChB,OAAAC,IAAAN,EAAc,UAAd,QAAAM,EAAqB;AAAA,IACvB,CAAC,GAEDC;AAAA,MACE,MAAMX,EAAM;AAAA,MACZ,CAACY,MAAU;;AACT,QAAIA,KACFF,IAAAN,EAAc,UAAd,QAAAM,EAAqB,UAErBG,IAAAT,EAAc,UAAd,QAAAS,EAAqB;AAAA,MAEzB;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK,GAGb;AAAA,MACL,OAAAX;AAAA,MACA,OAAAI;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

package/dist/components/layout/modal/NeonModal.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const l=require("./NeonModal.cjs.js"),e=require("vue"),t=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r={ref:"modal",class:"neon-modal__container"};function s(o,c,i,d,u,_){const n=e.resolveComponent("neon-button");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([{"neon-modal--open":o.open},"neon-modal"]),role:"dialog"},[e.createElementVNode("div",r,[e.renderSlot(o.$slots,"default"),o.dismissible?(e.openBlock(),e.createBlock(n,{key:0,circular:!0,transparent:!0,"button-style":"text",class:"neon-modal__close",color:"low-contrast",icon:"times",size:"s",tabindex:"0",onClick:o.close},null,8,["onClick"])):e.createCommentVNode("",!0)],512),e.createElementVNode("div",{class:e.normalizeClass([{"neon-modal__overlay--opaque":o.opaque,"neon-modal__overlay--show-top-nav":o.showTopNav},"neon-modal__overlay"])},null,2)],2)}const a=t(l,[["render",s]]);module.exports=a;
+"use strict";const l=require("./NeonModal.cjs.js"),e=require("vue"),t=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r={ref:"modal",class:"neon-modal__container"};function a(o,c,i,d,u,p){const n=e.resolveComponent("neon-button");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([[{"neon-modal--open":o.open},`neon-modal--breakpoint-${o.breakpoint}`],"neon-modal"]),role:"dialog"},[e.createElementVNode("div",r,[e.renderSlot(o.$slots,"default"),o.dismissible?(e.openBlock(),e.createBlock(n,{key:0,circular:!0,transparent:!0,"button-style":"text",class:"neon-modal__close",color:"low-contrast",icon:"times",size:"s",tabindex:"0",onClick:o.close},null,8,["onClick"])):e.createCommentVNode("",!0)],512),e.createElementVNode("div",{class:e.normalizeClass([{"neon-modal__overlay--opaque":o.opaque,"neon-modal__overlay--show-top-nav":o.showTopNav},"neon-modal__overlay"])},null,2)],2)}const s=t(l,[["render",a]]);module.exports=s;
 //# sourceMappingURL=NeonModal.vue.cjs.js.map

package/dist/components/layout/modal/NeonModal.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonModal.vue.cjs.js","sources":["../../../../src/components/layout/modal/NeonModal.vue"],"sourcesContent":["<template>\n  <div :class=\"{ 'neon-modal--open': open }\" class=\"neon-modal\" role=\"dialog\">\n    <div ref=\"modal\" class=\"neon-modal__container\">\n      <!-- @slot modal contents -->\n      <slot></slot>\n      <neon-button\n        v-if=\"dismissible\"\n        :circular=\"true\"\n        :transparent=\"true\"\n        button-style=\"text\"\n        class=\"neon-modal__close\"\n        color=\"low-contrast\"\n        icon=\"times\"\n        size=\"s\"\n        tabindex=\"0\"\n        @click=\"close\"\n      />\n    </div>\n    <div\n      :class=\"{ 'neon-modal__overlay--opaque': opaque, 'neon-modal__overlay--show-top-nav': showTopNav }\"\n      class=\"neon-modal__overlay\"\n    ></div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonModal.ts\"></script>\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_1","_renderSlot","_createBlock","_component_neon_button"],"mappings":"uIAES,IAAI,QAAQ,MAAM,gHADzBA,EAAAA,mBAqBM,MAAA,CArBA,MAAKC,EAAAA,eAAA,CAAA,CAAA,mBAAwBC,EAAA,IAAI,EAAU,YAAY,CAAA,EAAC,KAAK,WACjEC,EAAAA,mBAeM,MAfNC,EAeM,CAbJC,aAAaH,EAAA,OAAA,SAAA,EAELA,EAAA,2BADRI,EAAAA,YAWEC,EAAA,OATC,SAAU,GACV,YAAa,GACd,eAAa,OACb,MAAM,oBACN,MAAM,eACN,KAAK,QACL,KAAK,IACL,SAAS,IACR,QAAOL,EAAA,8DAGZC,EAAAA,mBAGO,MAAA,CAFJ,MAAKF,EAAAA,eAAA,CAAA,CAAA,8BAAmCC,EAAA,OAAM,oCAAuCA,EAAA,UAAU,EAC1F,qBAAqB,CAAA"}
+{"version":3,"file":"NeonModal.vue.cjs.js","sources":["../../../../src/components/layout/modal/NeonModal.vue"],"sourcesContent":["<template>\n  <div :class=\"[{ 'neon-modal--open': open }, `neon-modal--breakpoint-${breakpoint}`]\" class=\"neon-modal\" role=\"dialog\">\n    <div ref=\"modal\" class=\"neon-modal__container\">\n      <!-- @slot modal contents -->\n      <slot></slot>\n      <neon-button\n        v-if=\"dismissible\"\n        :circular=\"true\"\n        :transparent=\"true\"\n        button-style=\"text\"\n        class=\"neon-modal__close\"\n        color=\"low-contrast\"\n        icon=\"times\"\n        size=\"s\"\n        tabindex=\"0\"\n        @click=\"close\"\n      />\n    </div>\n    <div\n      :class=\"{ 'neon-modal__overlay--opaque': opaque, 'neon-modal__overlay--show-top-nav': showTopNav }\"\n      class=\"neon-modal__overlay\"\n    ></div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonModal.ts\"></script>\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_1","_renderSlot","_createBlock","_component_neon_button"],"mappings":"uIAES,IAAI,QAAQ,MAAM,gHADzBA,EAAAA,mBAqBM,MAAA,CArBA,MAAKC,EAAAA,eAAA,CAAA,CAAA,CAAA,mBAAyBC,EAAA,IAAI,EAAA,0BAA8BA,EAAA,UAAU,IAAW,YAAY,CAAA,EAAC,KAAK,WAC3GC,EAAAA,mBAeM,MAfNC,EAeM,CAbJC,aAAaH,EAAA,OAAA,SAAA,EAELA,EAAA,2BADRI,EAAAA,YAWEC,EAAA,OATC,SAAU,GACV,YAAa,GACd,eAAa,OACb,MAAM,oBACN,MAAM,eACN,KAAK,QACL,KAAK,IACL,SAAS,IACR,QAAOL,EAAA,8DAGZC,EAAAA,mBAGO,MAAA,CAFJ,MAAKF,EAAAA,eAAA,CAAA,CAAA,8BAAmCC,EAAA,OAAM,oCAAuCA,EAAA,UAAU,EAC1F,qBAAqB,CAAA"}

package/dist/components/layout/modal/NeonModal.vue.es.js

@@ -1,19 +1,19 @@
-import a from "./NeonModal.es.js";
-import { resolveComponent as r, openBlock as e, createElementBlock as s, normalizeClass as n, createElementVNode as l, renderSlot as c, createBlock as d, createCommentVNode as m } from "vue";
-import i from "../../../_virtual/_plugin-vue_export-helper.es.js";
+import t from "./NeonModal.es.js";
+import { resolveComponent as r, openBlock as e, createElementBlock as s, normalizeClass as n, createElementVNode as l, renderSlot as c, createBlock as d, createCommentVNode as i } from "vue";
+import m from "../../../_virtual/_plugin-vue_export-helper.es.js";
 const p = {
   ref: "modal",
   class: "neon-modal__container"
 };
-function _(o, u, f, v, k, b) {
-  const t = r("neon-button");
+function u(o, _, f, v, k, b) {
+  const a = r("neon-button");
   return e(), s("div", {
-    class: n([{ "neon-modal--open": o.open }, "neon-modal"]),
+    class: n([[{ "neon-modal--open": o.open }, `neon-modal--breakpoint-${o.breakpoint}`], "neon-modal"]),
     role: "dialog"
   }, [
     l("div", p, [
       c(o.$slots, "default"),
-      o.dismissible ? (e(), d(t, {
+      o.dismissible ? (e(), d(a, {
         key: 0,
         circular: !0,
         transparent: !0,
@@ -24,14 +24,14 @@ function _(o, u, f, v, k, b) {
         size: "s",
         tabindex: "0",
         onClick: o.close
-      }, null, 8, ["onClick"])) : m("", !0)
+      }, null, 8, ["onClick"])) : i("", !0)
     ], 512),
     l("div", {
       class: n([{ "neon-modal__overlay--opaque": o.opaque, "neon-modal__overlay--show-top-nav": o.showTopNav }, "neon-modal__overlay"])
     }, null, 2)
   ], 2);
 }
-const h = /* @__PURE__ */ i(a, [["render", _]]);
+const h = /* @__PURE__ */ m(t, [["render", u]]);
 export {
   h as default
 };

package/dist/components/layout/modal/NeonModal.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonModal.vue.es.js","sources":["../../../../src/components/layout/modal/NeonModal.vue"],"sourcesContent":["<template>\n  <div :class=\"{ 'neon-modal--open': open }\" class=\"neon-modal\" role=\"dialog\">\n    <div ref=\"modal\" class=\"neon-modal__container\">\n      <!-- @slot modal contents -->\n      <slot></slot>\n      <neon-button\n        v-if=\"dismissible\"\n        :circular=\"true\"\n        :transparent=\"true\"\n        button-style=\"text\"\n        class=\"neon-modal__close\"\n        color=\"low-contrast\"\n        icon=\"times\"\n        size=\"s\"\n        tabindex=\"0\"\n        @click=\"close\"\n      />\n    </div>\n    <div\n      :class=\"{ 'neon-modal__overlay--opaque': opaque, 'neon-modal__overlay--show-top-nav': showTopNav }\"\n      class=\"neon-modal__overlay\"\n    ></div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonModal.ts\"></script>\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_1","_renderSlot","_createBlock","_component_neon_button"],"mappings":";;;;EAES,KAAI;AAAA,EAAQ,OAAM;;;;cADzBA,EAqBM,OAAA;AAAA,IArBA,OAAKC,EAAA,CAAA,EAAA,oBAAwBC,EAAA,KAAI,GAAU,YAAY,CAAA;AAAA,IAAC,MAAK;AAAA;IACjEC,EAeM,OAfNC,GAeM;AAAA,MAbJC,EAAaH,EAAA,QAAA,SAAA;AAAA,MAELA,EAAA,oBADRI,EAWEC,GAAA;AAAA;QATC,UAAU;AAAA,QACV,aAAa;AAAA,QACd,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,OAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAK;AAAA,QACL,UAAS;AAAA,QACR,SAAOL,EAAA;AAAA;;IAGZC,EAGO,OAAA;AAAA,MAFJ,OAAKF,EAAA,CAAA,EAAA,+BAAmCC,EAAA,QAAM,qCAAuCA,EAAA,WAAU,GAC1F,qBAAqB,CAAA;AAAA;;;;"}
+{"version":3,"file":"NeonModal.vue.es.js","sources":["../../../../src/components/layout/modal/NeonModal.vue"],"sourcesContent":["<template>\n  <div :class=\"[{ 'neon-modal--open': open }, `neon-modal--breakpoint-${breakpoint}`]\" class=\"neon-modal\" role=\"dialog\">\n    <div ref=\"modal\" class=\"neon-modal__container\">\n      <!-- @slot modal contents -->\n      <slot></slot>\n      <neon-button\n        v-if=\"dismissible\"\n        :circular=\"true\"\n        :transparent=\"true\"\n        button-style=\"text\"\n        class=\"neon-modal__close\"\n        color=\"low-contrast\"\n        icon=\"times\"\n        size=\"s\"\n        tabindex=\"0\"\n        @click=\"close\"\n      />\n    </div>\n    <div\n      :class=\"{ 'neon-modal__overlay--opaque': opaque, 'neon-modal__overlay--show-top-nav': showTopNav }\"\n      class=\"neon-modal__overlay\"\n    ></div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonModal.ts\"></script>\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_1","_renderSlot","_createBlock","_component_neon_button"],"mappings":";;;;EAES,KAAI;AAAA,EAAQ,OAAM;;;;cADzBA,EAqBM,OAAA;AAAA,IArBA,OAAKC,EAAA,CAAA,CAAA,EAAA,oBAAyBC,EAAA,KAAI,GAAA,0BAA8BA,EAAA,UAAU,KAAW,YAAY,CAAA;AAAA,IAAC,MAAK;AAAA;IAC3GC,EAeM,OAfNC,GAeM;AAAA,MAbJC,EAAaH,EAAA,QAAA,SAAA;AAAA,MAELA,EAAA,oBADRI,EAWEC,GAAA;AAAA;QATC,UAAU;AAAA,QACV,aAAa;AAAA,QACd,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,OAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAK;AAAA,QACL,UAAS;AAAA,QACR,SAAOL,EAAA;AAAA;;IAGZC,EAGO,OAAA;AAAA,MAFJ,OAAKF,EAAA,CAAA,EAAA,+BAAmCC,EAAA,QAAM,qCAAuCA,EAAA,WAAU,GAC1F,qBAAqB,CAAA;AAAA;;;;"}

package/dist/components/presentation/image-carousel/NeonImageCarousel.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const u=require("./NeonImageCarousel.cjs.js"),e=require("vue"),c=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),d={class:"neon-image-carousel-wrapper"},m={class:"neon-image-carousel__container",tabindex:"-1"},p={ref:"carouselItems",class:"no-style neon-image-carousel__items"},g=["alt","src"],k={key:0,class:"neon-image-carousel__item-title"},v={class:"neon-image-carousel__nav",tabindex:"-1"},C=["onClickCapture"],_={key:0,class:"neon-image-carousel__label",tabindex:"-1"};function b(n,o,w,E,f,h){const l=e.resolveComponent("neon-button"),r=e.resolveComponent("neon-link"),i=e.resolveComponent("neon-stack");return e.openBlock(),e.createElementBlock("div",d,[e.createElementVNode("div",{class:e.normalizeClass([{"neon-image-carousel--initialised":n.initialised,"neon-image-carousel--expanded":n.isExpanded},"neon-image-carousel"]),tabindex:"0",onKeydown:[o[2]||(o[2]=e.withKeys(e.withModifiers((...t)=>n.previous&&n.previous(...t),["stop","prevent"]),["left"])),o[3]||(o[3]=e.withKeys(e.withModifiers((...t)=>n.next&&n.next(...t),["stop","prevent"]),["right"])),o[4]||(o[4]=e.withKeys(t=>n.isExpanded&&n.toggleExpanded(),["esc"]))]},[e.createElementVNode("div",m,[n.isExpanded?(e.openBlock(),e.createBlock(l,{key:0,title:n.closeLabel,"button-style":"text",class:"neon-image-carousel__close",color:"low-contrast",icon:"close",size:"l",transparent:"",onClick:o[0]||(o[0]=t=>n.isExpanded&&n.toggleExpanded())},null,8,["title"])):e.createCommentVNode("",!0),e.createVNode(l,{disabled:n.currentImage===0,title:n.previousLabel,transparent:!0,"button-style":"text",class:"neon-image-carousel__previous",color:"neutral",icon:"arrow-left-1",size:"l",onClickCapture:e.withModifiers(n.previous,["stop"])},null,8,["disabled","title","onClickCapture"]),e.createElementVNode("ul",p,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.images,(t,s)=>(e.openBlock(),e.createElementBlock("li",{key:t.src,ref_for:!0,ref:"carouselItem",class:e.normalizeClass([{"neon-image-carousel__item--active":s===n.currentImage},"neon-image-carousel__item"])},[e.createElementVNode("img",{alt:t.alt,src:t.src,class:"neon-image-carousel__image",onClick:o[1]||(o[1]=e.withModifiers(a=>!n.isExpanded&&n.toggleExpanded(),["stop"]))},null,8,g),n.isExpanded?(e.openBlock(),e.createElementBlock("p",k,e.toDisplayString(t.alt),1)):e.createCommentVNode("",!0)],2))),128))],512),e.createVNode(l,{disabled:n.currentImage===n.images.length-1,title:n.nextLabel,transparent:!0,"button-style":"text",class:"neon-image-carousel__next",color:"neutral",icon:"arrow-right-1",size:"l",onClickCapture:e.withModifiers(n.next,["stop"])},null,8,["disabled","title","onClickCapture"])]),e.createVNode(i,{class:"neon-image-carousel__nav-container",gap:"s"},{default:e.withCtx(()=>[e.createElementVNode("div",v,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.images,(t,s)=>(e.openBlock(),e.createBlock(r,{key:s,"aria-label":`Display image ${s+1}`,class:"neon-image-carousel__nav-item-link","no-style":"","outline-style":"none",role:"button",tabindex:"0",onKeydownCapture:[e.withKeys(e.withModifiers(a=>n.scrollTo(s),["stop","prevent"]),["enter"]),e.withKeys(e.withModifiers(a=>n.scrollTo(s),["stop","prevent"]),["space"])]},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass([{"neon-image-carousel__nav-item--active":s===n.currentImage},"neon-image-carousel__nav-item"]),tabindex:"-1",onClickCapture:e.withModifiers(a=>n.scrollTo(s),["stop"])},[...o[5]||(o[5]=[e.createElementVNode("div",{class:"neon-image-carousel__nav-item-indicator"},null,-1)])],42,C)]),_:2},1032,["aria-label","onKeydownCapture"]))),128))]),n.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",_,e.toDisplayString(n.imageCountLabel||`${n.images.length} ${n.images.length===1?"image":"images"}`),1))]),_:1})],34)])}const y=c(u,[["render",b]]);module.exports=y;
+"use strict";const u=require("./NeonImageCarousel.cjs.js"),e=require("vue"),c=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),d={class:"neon-image-carousel-wrapper"},m={class:"neon-image-carousel__container",tabindex:"-1"},p={ref:"carouselItems",class:"no-style neon-image-carousel__items"},g=["alt","src"],k={key:0,class:"neon-image-carousel__item-title"},v={class:"neon-image-carousel__nav",tabindex:"-1"},C=["onClickCapture"],_={key:0,class:"neon-image-carousel__label",tabindex:"-1"};function b(n,o,w,E,f,h){const l=e.resolveComponent("neon-button"),i=e.resolveComponent("neon-link"),r=e.resolveComponent("neon-stack");return e.openBlock(),e.createElementBlock("div",d,[e.createElementVNode("div",{class:e.normalizeClass([{"neon-image-carousel--initialised":n.initialised,"neon-image-carousel--expanded":n.isExpanded},"neon-image-carousel"]),tabindex:"0",onKeydown:[o[2]||(o[2]=e.withKeys(e.withModifiers((...t)=>n.previous&&n.previous(...t),["stop","prevent"]),["left"])),o[3]||(o[3]=e.withKeys(e.withModifiers((...t)=>n.next&&n.next(...t),["stop","prevent"]),["right"])),o[4]||(o[4]=e.withKeys(t=>n.isExpanded&&n.toggleExpanded(),["esc"]))]},[e.createElementVNode("div",m,[n.isExpanded?(e.openBlock(),e.createBlock(l,{key:0,title:n.closeLabel,"button-style":"text",class:"neon-image-carousel__close",color:"low-contrast",icon:"close",size:"l",transparent:"",onClick:o[0]||(o[0]=t=>n.isExpanded&&n.toggleExpanded())},null,8,["title"])):e.createCommentVNode("",!0),e.createVNode(l,{disabled:n.currentImage===0,title:n.previousLabel,transparent:!0,"button-style":"text",class:"neon-image-carousel__previous",color:"neutral",icon:"arrow-left-1",size:"l",onClickCapture:e.withModifiers(n.previous,["stop"])},null,8,["disabled","title","onClickCapture"]),e.createElementVNode("ul",p,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.images,(t,s)=>(e.openBlock(),e.createElementBlock("li",{key:t.src,ref_for:!0,ref:"carouselItem",class:e.normalizeClass([{"neon-image-carousel__item--active":s===n.currentImage},"neon-image-carousel__item"])},[e.createElementVNode("img",{alt:t.alt,src:t.src,class:"neon-image-carousel__image",onClick:o[1]||(o[1]=e.withModifiers(a=>!n.isExpanded&&n.toggleExpanded(),["stop"]))},null,8,g),n.isExpanded&&t.title?(e.openBlock(),e.createElementBlock("p",k,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0)],2))),128))],512),e.createVNode(l,{disabled:n.currentImage===n.images.length-1,title:n.nextLabel,transparent:!0,"button-style":"text",class:"neon-image-carousel__next",color:"neutral",icon:"arrow-right-1",size:"l",onClickCapture:e.withModifiers(n.next,["stop"])},null,8,["disabled","title","onClickCapture"])]),e.createVNode(r,{class:"neon-image-carousel__nav-container",gap:"s"},{default:e.withCtx(()=>[e.createElementVNode("div",v,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.images,(t,s)=>(e.openBlock(),e.createBlock(i,{key:s,"aria-label":`Display image ${s+1}`,class:"neon-image-carousel__nav-item-link","no-style":"","outline-style":"none",role:"button",tabindex:"0",onKeydownCapture:[e.withKeys(e.withModifiers(a=>n.scrollTo(s),["stop","prevent"]),["enter"]),e.withKeys(e.withModifiers(a=>n.scrollTo(s),["stop","prevent"]),["space"])]},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass([{"neon-image-carousel__nav-item--active":s===n.currentImage},"neon-image-carousel__nav-item"]),tabindex:"-1",onClickCapture:e.withModifiers(a=>n.scrollTo(s),["stop"])},[...o[5]||(o[5]=[e.createElementVNode("div",{class:"neon-image-carousel__nav-item-indicator"},null,-1)])],42,C)]),_:2},1032,["aria-label","onKeydownCapture"]))),128))]),n.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",_,e.toDisplayString(n.imageCountLabel||`${n.images.length} ${n.images.length===1?"image":"images"}`),1))]),_:1})],34)])}const y=c(u,[["render",b]]);module.exports=y;
 //# sourceMappingURL=NeonImageCarousel.vue.cjs.js.map

package/dist/components/presentation/image-carousel/NeonImageCarousel.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonImageCarousel.vue.cjs.js","sources":["../../../../src/components/presentation/image-carousel/NeonImageCarousel.vue"],"sourcesContent":["<template>\n  <div class=\"neon-image-carousel-wrapper\">\n    <div\n      :class=\"{\n        'neon-image-carousel--initialised': initialised,\n        'neon-image-carousel--expanded': isExpanded,\n      }\"\n      class=\"neon-image-carousel\"\n      tabindex=\"0\"\n      @keydown.stop.prevent.left=\"previous\"\n      @keydown.stop.prevent.right=\"next\"\n      @keydown.esc=\"isExpanded && toggleExpanded()\"\n    >\n      <div class=\"neon-image-carousel__container\" tabindex=\"-1\">\n        <neon-button\n          v-if=\"isExpanded\"\n          :title=\"closeLabel\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__close\"\n          color=\"low-contrast\"\n          icon=\"close\"\n          size=\"l\"\n          transparent\n          @click=\"isExpanded && toggleExpanded()\"\n        />\n        <neon-button\n          :disabled=\"currentImage === 0\"\n          :title=\"previousLabel\"\n          :transparent=\"true\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__previous\"\n          color=\"neutral\"\n          icon=\"arrow-left-1\"\n          size=\"l\"\n          @click.capture.stop=\"previous\"\n        />\n        <ul ref=\"carouselItems\" class=\"no-style neon-image-carousel__items\">\n          <li\n            v-for=\"(image, index) in images\"\n            :key=\"image.src\"\n            ref=\"carouselItem\"\n            :class=\"{ 'neon-image-carousel__item--active': index === currentImage }\"\n            class=\"neon-image-carousel__item\"\n          >\n            <img\n              :alt=\"image.alt\"\n              :src=\"image.src\"\n              class=\"neon-image-carousel__image\"\n              @click.stop=\"!isExpanded && toggleExpanded()\"\n            />\n            <p v-if=\"isExpanded\" class=\"neon-image-carousel__item-title\">{{ image.alt }}</p>\n          </li>\n        </ul>\n        <neon-button\n          :disabled=\"currentImage === images.length - 1\"\n          :title=\"nextLabel\"\n          :transparent=\"true\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__next\"\n          color=\"neutral\"\n          icon=\"arrow-right-1\"\n          size=\"l\"\n          @click.capture.stop=\"next\"\n        />\n      </div>\n      <neon-stack class=\"neon-image-carousel__nav-container\" gap=\"s\">\n        <div class=\"neon-image-carousel__nav\" tabindex=\"-1\">\n          <neon-link\n            v-for=\"(_image, index) in images\"\n            :key=\"index\"\n            :aria-label=\"`Display image ${index + 1}`\"\n            class=\"neon-image-carousel__nav-item-link\"\n            no-style\n            outline-style=\"none\"\n            role=\"button\"\n            tabindex=\"0\"\n            @keydown.stop.prevent.capture.enter=\"scrollTo(index)\"\n            @keydown.stop.prevent.capture.space=\"scrollTo(index)\"\n          >\n            <div\n              :class=\"{ 'neon-image-carousel__nav-item--active': index === currentImage }\"\n              class=\"neon-image-carousel__nav-item\"\n              tabindex=\"-1\"\n              @click.capture.stop=\"scrollTo(index)\"\n            >\n              <div class=\"neon-image-carousel__nav-item-indicator\"></div>\n            </div>\n          </neon-link>\n        </div>\n        <span v-if=\"!hideLabel\" class=\"neon-image-carousel__label\" tabindex=\"-1\">\n          {{ imageCountLabel || `${images.length} ${images.length === 1 ? 'image' : 'images'}` }}\n        </span>\n      </neon-stack>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonImageCarousel.ts\" />\n"],"names":["_hoisted_1","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_ctx","args","_cache","_withKeys","$event","_hoisted_2","_createBlock","_component_neon_button","_createVNode","_hoisted_3","_Fragment","_renderList","image","index","_withModifiers","_hoisted_5","_toDisplayString","_component_neon_stack","_hoisted_6","_image","_component_neon_link","_hoisted_8"],"mappings":"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"}
+{"version":3,"file":"NeonImageCarousel.vue.cjs.js","sources":["../../../../src/components/presentation/image-carousel/NeonImageCarousel.vue"],"sourcesContent":["<template>\n  <div class=\"neon-image-carousel-wrapper\">\n    <div\n      :class=\"{\n        'neon-image-carousel--initialised': initialised,\n        'neon-image-carousel--expanded': isExpanded,\n      }\"\n      class=\"neon-image-carousel\"\n      tabindex=\"0\"\n      @keydown.stop.prevent.left=\"previous\"\n      @keydown.stop.prevent.right=\"next\"\n      @keydown.esc=\"isExpanded && toggleExpanded()\"\n    >\n      <div class=\"neon-image-carousel__container\" tabindex=\"-1\">\n        <neon-button\n          v-if=\"isExpanded\"\n          :title=\"closeLabel\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__close\"\n          color=\"low-contrast\"\n          icon=\"close\"\n          size=\"l\"\n          transparent\n          @click=\"isExpanded && toggleExpanded()\"\n        />\n        <neon-button\n          :disabled=\"currentImage === 0\"\n          :title=\"previousLabel\"\n          :transparent=\"true\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__previous\"\n          color=\"neutral\"\n          icon=\"arrow-left-1\"\n          size=\"l\"\n          @click.capture.stop=\"previous\"\n        />\n        <ul ref=\"carouselItems\" class=\"no-style neon-image-carousel__items\">\n          <li\n            v-for=\"(image, index) in images\"\n            :key=\"image.src\"\n            ref=\"carouselItem\"\n            :class=\"{ 'neon-image-carousel__item--active': index === currentImage }\"\n            class=\"neon-image-carousel__item\"\n          >\n            <img\n              :alt=\"image.alt\"\n              :src=\"image.src\"\n              class=\"neon-image-carousel__image\"\n              @click.stop=\"!isExpanded && toggleExpanded()\"\n            />\n            <p v-if=\"isExpanded && image.title\" class=\"neon-image-carousel__item-title\">{{ image.title }}</p>\n          </li>\n        </ul>\n        <neon-button\n          :disabled=\"currentImage === images.length - 1\"\n          :title=\"nextLabel\"\n          :transparent=\"true\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__next\"\n          color=\"neutral\"\n          icon=\"arrow-right-1\"\n          size=\"l\"\n          @click.capture.stop=\"next\"\n        />\n      </div>\n      <neon-stack class=\"neon-image-carousel__nav-container\" gap=\"s\">\n        <div class=\"neon-image-carousel__nav\" tabindex=\"-1\">\n          <neon-link\n            v-for=\"(_image, index) in images\"\n            :key=\"index\"\n            :aria-label=\"`Display image ${index + 1}`\"\n            class=\"neon-image-carousel__nav-item-link\"\n            no-style\n            outline-style=\"none\"\n            role=\"button\"\n            tabindex=\"0\"\n            @keydown.stop.prevent.capture.enter=\"scrollTo(index)\"\n            @keydown.stop.prevent.capture.space=\"scrollTo(index)\"\n          >\n            <div\n              :class=\"{ 'neon-image-carousel__nav-item--active': index === currentImage }\"\n              class=\"neon-image-carousel__nav-item\"\n              tabindex=\"-1\"\n              @click.capture.stop=\"scrollTo(index)\"\n            >\n              <div class=\"neon-image-carousel__nav-item-indicator\"></div>\n            </div>\n          </neon-link>\n        </div>\n        <span v-if=\"!hideLabel\" class=\"neon-image-carousel__label\" tabindex=\"-1\">\n          {{ imageCountLabel || `${images.length} ${images.length === 1 ? 'image' : 'images'}` }}\n        </span>\n      </neon-stack>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonImageCarousel.ts\" />\n"],"names":["_hoisted_1","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_ctx","args","_cache","_withKeys","$event","_hoisted_2","_createBlock","_component_neon_button","_createVNode","_hoisted_3","_Fragment","_renderList","image","index","_withModifiers","_hoisted_5","_toDisplayString","_component_neon_stack","_hoisted_6","_image","_component_neon_link","_hoisted_8"],"mappings":"4IACOA,EAAA,CAAA,MAAM,6BAA6B,KAY/B,MAAM,iCAAiC,SAAS,SAuB/C,IAAI,gBAAgB,MAAM,gEAcU,MAAM,sCAgBzC,MAAM,2BAA2B,SAAS,oCAuBvB,MAAM,6BAA6B,SAAS,6IAxF1E,OAAAC,YAAA,EAAAC,qBA6FM,MA7FNF,EA6FM,CA5FJG,EAAAA,mBA2FM,MAAA,CA1FH,MAAKC,EAAAA,eAAA,CAAA,oCAAgDC,EAAA,4CAAsDA,EAAA,YAItG,qBAAqB,CAAA,EAC3B,SAAS,IACR,UAAO,gDAAoBA,EAAA,UAAAA,EAAA,SAAA,GAAAC,CAAA,EAAQ,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,MAAA,CAAA,kDACPD,EAAA,MAAAA,EAAA,KAAA,GAAAC,CAAA,EAAI,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,GACnBC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,EAAAA,SAAAC,GAAAJ,EAAA,YAAcA,EAAA,eAAc,EAAA,CAAA,KAAA,CAAA,MAE1CF,EAAAA,mBAmDM,MAnDNO,EAmDM,CAjDIL,EAAA,0BADRM,EAAAA,YAUEC,EAAA,OARC,MAAOP,EAAA,WACR,eAAa,OACb,MAAM,6BACN,MAAM,eACN,KAAK,QACL,KAAK,IACL,YAAA,GACC,QAAKE,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAE,GAAEJ,EAAA,YAAcA,EAAA,eAAc,mDAEtCQ,EAAAA,YAUED,EAAA,CATC,SAAUP,EAAA,eAAY,EACtB,MAAOA,EAAA,cACP,YAAa,GACd,eAAa,OACb,MAAM,gCACN,MAAM,UACN,KAAK,eACL,KAAK,mCACgBA,EAAA,SAAQ,CAAA,MAAA,CAAA,iDAE/BF,EAAAA,mBAgBK,KAhBLW,EAgBK,EAfHb,EAAAA,UAAA,EAAA,EAAAC,EAAAA,mBAcKa,WAAA,KAAAC,EAAAA,WAbsBX,EAAA,OAAM,CAAvBY,EAAOC,mBADjBhB,EAAAA,mBAcK,KAAA,CAZF,IAAKe,EAAM,eACZ,IAAI,eACH,MAAKb,EAAAA,eAAA,CAAA,CAAA,oCAAyCc,IAAUb,EAAA,YAAY,EAC/D,2BAA2B,CAAA,IAEjCF,EAAAA,mBAKE,MAAA,CAJC,IAAKc,EAAM,IACX,IAAKA,EAAM,IACZ,MAAM,6BACL,QAAKV,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAY,gBAAAV,GAAA,CAAQJ,EAAA,YAAcA,EAAA,eAAc,EAAA,CAAA,MAAA,CAAA,cAEnCA,EAAA,YAAcY,EAAM,OAA7BhB,YAAA,EAAAC,EAAAA,mBAAiG,IAAjGkB,EAAiGC,EAAAA,gBAAlBJ,EAAM,KAAK,EAAA,CAAA,iDAG9FJ,EAAAA,YAUED,EAAA,CATC,SAAUP,EAAA,eAAiBA,EAAA,OAAO,OAAM,EACxC,MAAOA,EAAA,UACP,YAAa,GACd,eAAa,OACb,MAAM,4BACN,MAAM,UACN,KAAK,gBACL,KAAK,mCACgBA,EAAA,KAAI,CAAA,MAAA,CAAA,mDAG7BQ,EAAAA,YA2BaS,EAAA,CA3BD,MAAM,qCAAqC,IAAI,wBACzD,IAsBM,CAtBNnB,EAAAA,mBAsBM,MAtBNoB,EAsBM,EArBJtB,EAAAA,UAAA,EAAA,EAAAC,EAAAA,mBAoBYa,WAAA,KAAAC,EAAAA,WAnBgBX,EAAA,OAAM,CAAxBmB,EAAQN,mBADlBP,EAAAA,YAoBYc,EAAA,CAlBT,IAAKP,EACL,8BAA6BA,EAAK,CAAA,GACnC,MAAM,qCACN,WAAA,GACA,gBAAc,OACd,KAAK,SACL,SAAS,sBAC4BV,EAAAA,SAAAW,EAAAA,cAAAV,GAAAJ,EAAA,SAASa,CAAK,EAAA,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EACdV,EAAAA,SAAAW,EAAAA,cAAAV,GAAAJ,EAAA,SAASa,CAAK,EAAA,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,uBAEnD,IAOM,CAPNf,EAAAA,mBAOM,MAAA,CANH,MAAKC,EAAAA,eAAA,CAAA,CAAA,wCAA6Cc,IAAUb,EAAA,cACvD,+BAA+B,CAAA,EACrC,SAAS,KACY,eAAAc,EAAAA,cAAAV,GAAAJ,EAAA,SAASa,CAAK,EAAA,CAAA,MAAA,CAAA,oBAEnCf,EAAAA,mBAA2D,MAAA,CAAtD,MAAM,yCAAyC,EAAA,KAAA,EAAA,oEAI7CE,EAAA,qDAAbH,qBAEO,OAFPwB,EAEOL,EAAAA,gBADFhB,EAAA,iBAAe,GAAOA,EAAA,OAAO,MAAM,IAAIA,EAAA,OAAO,SAAM,EAAA,QAAA,QAAA,EAAA,EAAA,CAAA"}

package/dist/components/presentation/image-carousel/NeonImageCarousel.vue.es.js

@@ -1,5 +1,5 @@
 import $ from "./NeonImageCarousel.es.js";
-import { resolveComponent as m, openBlock as a, createElementBlock as i, createElementVNode as l, withKeys as r, withModifiers as s, normalizeClass as p, createBlock as v, createCommentVNode as c, createVNode as g, Fragment as b, renderList as _, toDisplayString as C, withCtx as k } from "vue";
+import { resolveComponent as m, openBlock as s, createElementBlock as i, createElementVNode as l, withKeys as r, withModifiers as a, normalizeClass as p, createBlock as v, createCommentVNode as c, createVNode as g, Fragment as b, renderList as _, toDisplayString as C, withCtx as k } from "vue";
 import E from "../../../_virtual/_plugin-vue_export-helper.es.js";
 const w = { class: "neon-image-carousel-wrapper" }, I = {
   class: "neon-image-carousel__container",
@@ -20,7 +20,7 @@ const w = { class: "neon-image-carousel-wrapper" }, I = {
 };
 function T(e, n, V, D, F, M) {
   const u = m("neon-button"), f = m("neon-link"), y = m("neon-stack");
-  return a(), i("div", w, [
+  return s(), i("div", w, [
     l("div", {
       class: p([{
         "neon-image-carousel--initialised": e.initialised,
@@ -28,13 +28,13 @@ function T(e, n, V, D, F, M) {
       }, "neon-image-carousel"]),
       tabindex: "0",
       onKeydown: [
-        n[2] || (n[2] = r(s((...o) => e.previous && e.previous(...o), ["stop", "prevent"]), ["left"])),
-        n[3] || (n[3] = r(s((...o) => e.next && e.next(...o), ["stop", "prevent"]), ["right"])),
+        n[2] || (n[2] = r(a((...o) => e.previous && e.previous(...o), ["stop", "prevent"]), ["left"])),
+        n[3] || (n[3] = r(a((...o) => e.next && e.next(...o), ["stop", "prevent"]), ["right"])),
         n[4] || (n[4] = r((o) => e.isExpanded && e.toggleExpanded(), ["esc"]))
       ]
     }, [
       l("div", I, [
-        e.isExpanded ? (a(), v(u, {
+        e.isExpanded ? (s(), v(u, {
           key: 0,
           title: e.closeLabel,
           "button-style": "text",
@@ -54,10 +54,10 @@ function T(e, n, V, D, F, M) {
           color: "neutral",
           icon: "arrow-left-1",
           size: "l",
-          onClickCapture: s(e.previous, ["stop"])
+          onClickCapture: a(e.previous, ["stop"])
         }, null, 8, ["disabled", "title", "onClickCapture"]),
         l("ul", h, [
-          (a(!0), i(b, null, _(e.images, (o, t) => (a(), i("li", {
+          (s(!0), i(b, null, _(e.images, (o, t) => (s(), i("li", {
             key: o.src,
             ref_for: !0,
             ref: "carouselItem",
@@ -67,9 +67,9 @@ function T(e, n, V, D, F, M) {
               alt: o.alt,
               src: o.src,
               class: "neon-image-carousel__image",
-              onClick: n[1] || (n[1] = s((d) => !e.isExpanded && e.toggleExpanded(), ["stop"]))
+              onClick: n[1] || (n[1] = a((d) => !e.isExpanded && e.toggleExpanded(), ["stop"]))
             }, null, 8, L),
-            e.isExpanded ? (a(), i("p", z, C(o.alt), 1)) : c("", !0)
+            e.isExpanded && o.title ? (s(), i("p", z, C(o.title), 1)) : c("", !0)
           ], 2))), 128))
         ], 512),
         g(u, {
@@ -81,7 +81,7 @@ function T(e, n, V, D, F, M) {
           color: "neutral",
           icon: "arrow-right-1",
           size: "l",
-          onClickCapture: s(e.next, ["stop"])
+          onClickCapture: a(e.next, ["stop"])
         }, null, 8, ["disabled", "title", "onClickCapture"])
       ]),
       g(y, {
@@ -90,7 +90,7 @@ function T(e, n, V, D, F, M) {
       }, {
         default: k(() => [
           l("div", K, [
-            (a(!0), i(b, null, _(e.images, (o, t) => (a(), v(f, {
+            (s(!0), i(b, null, _(e.images, (o, t) => (s(), v(f, {
               key: t,
               "aria-label": `Display image ${t + 1}`,
               class: "neon-image-carousel__nav-item-link",
@@ -99,15 +99,15 @@ function T(e, n, V, D, F, M) {
               role: "button",
               tabindex: "0",
               onKeydownCapture: [
-                r(s((d) => e.scrollTo(t), ["stop", "prevent"]), ["enter"]),
-                r(s((d) => e.scrollTo(t), ["stop", "prevent"]), ["space"])
+                r(a((d) => e.scrollTo(t), ["stop", "prevent"]), ["enter"]),
+                r(a((d) => e.scrollTo(t), ["stop", "prevent"]), ["space"])
               ]
             }, {
               default: k(() => [
                 l("div", {
                   class: p([{ "neon-image-carousel__nav-item--active": t === e.currentImage }, "neon-image-carousel__nav-item"]),
                   tabindex: "-1",
-                  onClickCapture: s((d) => e.scrollTo(t), ["stop"])
+                  onClickCapture: a((d) => e.scrollTo(t), ["stop"])
                 }, [...n[5] || (n[5] = [
                   l("div", { class: "neon-image-carousel__nav-item-indicator" }, null, -1)
                 ])], 42, N)
@@ -115,7 +115,7 @@ function T(e, n, V, D, F, M) {
               _: 2
             }, 1032, ["aria-label", "onKeydownCapture"]))), 128))
           ]),
-          e.hideLabel ? c("", !0) : (a(), i("span", B, C(e.imageCountLabel || `${e.images.length} ${e.images.length === 1 ? "image" : "images"}`), 1))
+          e.hideLabel ? c("", !0) : (s(), i("span", B, C(e.imageCountLabel || `${e.images.length} ${e.images.length === 1 ? "image" : "images"}`), 1))
         ]),
         _: 1
       })

package/dist/components/presentation/image-carousel/NeonImageCarousel.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonImageCarousel.vue.es.js","sources":["../../../../src/components/presentation/image-carousel/NeonImageCarousel.vue"],"sourcesContent":["<template>\n  <div class=\"neon-image-carousel-wrapper\">\n    <div\n      :class=\"{\n        'neon-image-carousel--initialised': initialised,\n        'neon-image-carousel--expanded': isExpanded,\n      }\"\n      class=\"neon-image-carousel\"\n      tabindex=\"0\"\n      @keydown.stop.prevent.left=\"previous\"\n      @keydown.stop.prevent.right=\"next\"\n      @keydown.esc=\"isExpanded && toggleExpanded()\"\n    >\n      <div class=\"neon-image-carousel__container\" tabindex=\"-1\">\n        <neon-button\n          v-if=\"isExpanded\"\n          :title=\"closeLabel\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__close\"\n          color=\"low-contrast\"\n          icon=\"close\"\n          size=\"l\"\n          transparent\n          @click=\"isExpanded && toggleExpanded()\"\n        />\n        <neon-button\n          :disabled=\"currentImage === 0\"\n          :title=\"previousLabel\"\n          :transparent=\"true\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__previous\"\n          color=\"neutral\"\n          icon=\"arrow-left-1\"\n          size=\"l\"\n          @click.capture.stop=\"previous\"\n        />\n        <ul ref=\"carouselItems\" class=\"no-style neon-image-carousel__items\">\n          <li\n            v-for=\"(image, index) in images\"\n            :key=\"image.src\"\n            ref=\"carouselItem\"\n            :class=\"{ 'neon-image-carousel__item--active': index === currentImage }\"\n            class=\"neon-image-carousel__item\"\n          >\n            <img\n              :alt=\"image.alt\"\n              :src=\"image.src\"\n              class=\"neon-image-carousel__image\"\n              @click.stop=\"!isExpanded && toggleExpanded()\"\n            />\n            <p v-if=\"isExpanded\" class=\"neon-image-carousel__item-title\">{{ image.alt }}</p>\n          </li>\n        </ul>\n        <neon-button\n          :disabled=\"currentImage === images.length - 1\"\n          :title=\"nextLabel\"\n          :transparent=\"true\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__next\"\n          color=\"neutral\"\n          icon=\"arrow-right-1\"\n          size=\"l\"\n          @click.capture.stop=\"next\"\n        />\n      </div>\n      <neon-stack class=\"neon-image-carousel__nav-container\" gap=\"s\">\n        <div class=\"neon-image-carousel__nav\" tabindex=\"-1\">\n          <neon-link\n            v-for=\"(_image, index) in images\"\n            :key=\"index\"\n            :aria-label=\"`Display image ${index + 1}`\"\n            class=\"neon-image-carousel__nav-item-link\"\n            no-style\n            outline-style=\"none\"\n            role=\"button\"\n            tabindex=\"0\"\n            @keydown.stop.prevent.capture.enter=\"scrollTo(index)\"\n            @keydown.stop.prevent.capture.space=\"scrollTo(index)\"\n          >\n            <div\n              :class=\"{ 'neon-image-carousel__nav-item--active': index === currentImage }\"\n              class=\"neon-image-carousel__nav-item\"\n              tabindex=\"-1\"\n              @click.capture.stop=\"scrollTo(index)\"\n            >\n              <div class=\"neon-image-carousel__nav-item-indicator\"></div>\n            </div>\n          </neon-link>\n        </div>\n        <span v-if=\"!hideLabel\" class=\"neon-image-carousel__label\" tabindex=\"-1\">\n          {{ imageCountLabel || `${images.length} ${images.length === 1 ? 'image' : 'images'}` }}\n        </span>\n      </neon-stack>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonImageCarousel.ts\" />\n"],"names":["_hoisted_1","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_ctx","args","_cache","_withKeys","$event","_hoisted_2","_createBlock","_component_neon_button","_createVNode","_hoisted_3","_Fragment","_renderList","image","index","_withModifiers","_hoisted_5","_toDisplayString","_component_neon_stack","_hoisted_6","_image","_component_neon_link","_hoisted_8"],"mappings":";;;AACO,MAAAA,IAAA,EAAA,OAAM,8BAA6B;EAY/B,OAAM;AAAA,EAAiC,UAAS;;EAuB/C,KAAI;AAAA,EAAgB,OAAM;;;EAcL,OAAM;;EAgB1B,OAAM;AAAA,EAA2B,UAAS;;;EAuBvB,OAAM;AAAA,EAA6B,UAAS;;;;AAxF1E,SAAAC,EAAA,GAAAC,EA6FM,OA7FNF,GA6FM;AAAA,IA5FJG,EA2FM,OAAA;AAAA,MA1FH,OAAKC,EAAA,CAAA;AAAA,4CAAgDC,EAAA;AAAA,yCAAsDA,EAAA;AAAA,SAItG,qBAAqB,CAAA;AAAA,MAC3B,UAAS;AAAA,MACR,WAAO;AAAA,sCAAoBA,EAAA,YAAAA,EAAA,SAAA,GAAAC,CAAA,GAAQ,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,MAAA,CAAA;AAAA,sCACPD,EAAA,QAAAA,EAAA,KAAA,GAAAC,CAAA,GAAI,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA,QACnBC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAAA,CAAAC,MAAAJ,EAAA,cAAcA,EAAA,eAAc,GAAA,CAAA,KAAA,CAAA;AAAA;;MAE1CF,EAmDM,OAnDNO,GAmDM;AAAA,QAjDIL,EAAA,mBADRM,EAUEC,GAAA;AAAA;UARC,OAAOP,EAAA;AAAA,UACR,gBAAa;AAAA,UACb,OAAM;AAAA,UACN,OAAM;AAAA,UACN,MAAK;AAAA,UACL,MAAK;AAAA,UACL,aAAA;AAAA,UACC,SAAKE,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAE,MAAEJ,EAAA,cAAcA,EAAA,eAAc;AAAA;QAEtCQ,EAUED,GAAA;AAAA,UATC,UAAUP,EAAA,iBAAY;AAAA,UACtB,OAAOA,EAAA;AAAA,UACP,aAAa;AAAA,UACd,gBAAa;AAAA,UACb,OAAM;AAAA,UACN,OAAM;AAAA,UACN,MAAK;AAAA,UACL,MAAK;AAAA,4BACgBA,EAAA,UAAQ,CAAA,MAAA,CAAA;AAAA;QAE/BF,EAgBK,MAhBLW,GAgBK;AAAA,WAfHb,EAAA,EAAA,GAAAC,EAcKa,GAAA,MAAAC,EAbsBX,EAAA,QAAM,CAAvBY,GAAOC,YADjBhB,EAcK,MAAA;AAAA,YAZF,KAAKe,EAAM;AAAA;YACZ,KAAI;AAAA,YACH,OAAKb,EAAA,CAAA,EAAA,qCAAyCc,MAAUb,EAAA,aAAY,GAC/D,2BAA2B,CAAA;AAAA;YAEjCF,EAKE,OAAA;AAAA,cAJC,KAAKc,EAAM;AAAA,cACX,KAAKA,EAAM;AAAA,cACZ,OAAM;AAAA,cACL,SAAKV,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAY,EAAA,CAAAV,MAAA,CAAQJ,EAAA,cAAcA,EAAA,eAAc,GAAA,CAAA,MAAA,CAAA;AAAA;YAEnCA,EAAA,cAATJ,EAAA,GAAAC,EAAgF,KAAhFkB,GAAgFC,EAAhBJ,EAAM,GAAG,GAAA,CAAA;;;QAG7EJ,EAUED,GAAA;AAAA,UATC,UAAUP,EAAA,iBAAiBA,EAAA,OAAO,SAAM;AAAA,UACxC,OAAOA,EAAA;AAAA,UACP,aAAa;AAAA,UACd,gBAAa;AAAA,UACb,OAAM;AAAA,UACN,OAAM;AAAA,UACN,MAAK;AAAA,UACL,MAAK;AAAA,4BACgBA,EAAA,MAAI,CAAA,MAAA,CAAA;AAAA;;MAG7BQ,EA2BaS,GAAA;AAAA,QA3BD,OAAM;AAAA,QAAqC,KAAI;AAAA;mBACzD,MAsBM;AAAA,UAtBNnB,EAsBM,OAtBNoB,GAsBM;AAAA,aArBJtB,EAAA,EAAA,GAAAC,EAoBYa,GAAA,MAAAC,EAnBgBX,EAAA,QAAM,CAAxBmB,GAAQN,YADlBP,EAoBYc,GAAA;AAAA,cAlBT,KAAKP;AAAA,cACL,+BAA6BA,IAAK,CAAA;AAAA,cACnC,OAAM;AAAA,cACN,YAAA;AAAA,cACA,iBAAc;AAAA,cACd,MAAK;AAAA,cACL,UAAS;AAAA;gBAC4BV,EAAAW,EAAA,CAAAV,MAAAJ,EAAA,SAASa,CAAK,GAAA,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA,gBACdV,EAAAW,EAAA,CAAAV,MAAAJ,EAAA,SAASa,CAAK,GAAA,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;yBAEnD,MAOM;AAAA,gBAPNf,EAOM,OAAA;AAAA,kBANH,OAAKC,EAAA,CAAA,EAAA,yCAA6Cc,MAAUb,EAAA,gBACvD,+BAA+B,CAAA;AAAA,kBACrC,UAAS;AAAA,kBACY,gBAAAc,EAAA,CAAAV,MAAAJ,EAAA,SAASa,CAAK,GAAA,CAAA,MAAA,CAAA;AAAA;kBAEnCf,EAA2D,OAAA,EAAtD,OAAM,0CAAyC,GAAA,MAAA,EAAA;AAAA;;;;;UAI7CE,EAAA,8BAAbH,EAEO,QAFPwB,GAEOL,EADFhB,EAAA,mBAAe,GAAOA,EAAA,OAAO,MAAM,IAAIA,EAAA,OAAO,WAAM,IAAA,UAAA,QAAA,EAAA,GAAA,CAAA;AAAA;;;;;;;"}
+{"version":3,"file":"NeonImageCarousel.vue.es.js","sources":["../../../../src/components/presentation/image-carousel/NeonImageCarousel.vue"],"sourcesContent":["<template>\n  <div class=\"neon-image-carousel-wrapper\">\n    <div\n      :class=\"{\n        'neon-image-carousel--initialised': initialised,\n        'neon-image-carousel--expanded': isExpanded,\n      }\"\n      class=\"neon-image-carousel\"\n      tabindex=\"0\"\n      @keydown.stop.prevent.left=\"previous\"\n      @keydown.stop.prevent.right=\"next\"\n      @keydown.esc=\"isExpanded && toggleExpanded()\"\n    >\n      <div class=\"neon-image-carousel__container\" tabindex=\"-1\">\n        <neon-button\n          v-if=\"isExpanded\"\n          :title=\"closeLabel\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__close\"\n          color=\"low-contrast\"\n          icon=\"close\"\n          size=\"l\"\n          transparent\n          @click=\"isExpanded && toggleExpanded()\"\n        />\n        <neon-button\n          :disabled=\"currentImage === 0\"\n          :title=\"previousLabel\"\n          :transparent=\"true\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__previous\"\n          color=\"neutral\"\n          icon=\"arrow-left-1\"\n          size=\"l\"\n          @click.capture.stop=\"previous\"\n        />\n        <ul ref=\"carouselItems\" class=\"no-style neon-image-carousel__items\">\n          <li\n            v-for=\"(image, index) in images\"\n            :key=\"image.src\"\n            ref=\"carouselItem\"\n            :class=\"{ 'neon-image-carousel__item--active': index === currentImage }\"\n            class=\"neon-image-carousel__item\"\n          >\n            <img\n              :alt=\"image.alt\"\n              :src=\"image.src\"\n              class=\"neon-image-carousel__image\"\n              @click.stop=\"!isExpanded && toggleExpanded()\"\n            />\n            <p v-if=\"isExpanded && image.title\" class=\"neon-image-carousel__item-title\">{{ image.title }}</p>\n          </li>\n        </ul>\n        <neon-button\n          :disabled=\"currentImage === images.length - 1\"\n          :title=\"nextLabel\"\n          :transparent=\"true\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__next\"\n          color=\"neutral\"\n          icon=\"arrow-right-1\"\n          size=\"l\"\n          @click.capture.stop=\"next\"\n        />\n      </div>\n      <neon-stack class=\"neon-image-carousel__nav-container\" gap=\"s\">\n        <div class=\"neon-image-carousel__nav\" tabindex=\"-1\">\n          <neon-link\n            v-for=\"(_image, index) in images\"\n            :key=\"index\"\n            :aria-label=\"`Display image ${index + 1}`\"\n            class=\"neon-image-carousel__nav-item-link\"\n            no-style\n            outline-style=\"none\"\n            role=\"button\"\n            tabindex=\"0\"\n            @keydown.stop.prevent.capture.enter=\"scrollTo(index)\"\n            @keydown.stop.prevent.capture.space=\"scrollTo(index)\"\n          >\n            <div\n              :class=\"{ 'neon-image-carousel__nav-item--active': index === currentImage }\"\n              class=\"neon-image-carousel__nav-item\"\n              tabindex=\"-1\"\n              @click.capture.stop=\"scrollTo(index)\"\n            >\n              <div class=\"neon-image-carousel__nav-item-indicator\"></div>\n            </div>\n          </neon-link>\n        </div>\n        <span v-if=\"!hideLabel\" class=\"neon-image-carousel__label\" tabindex=\"-1\">\n          {{ imageCountLabel || `${images.length} ${images.length === 1 ? 'image' : 'images'}` }}\n        </span>\n      </neon-stack>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonImageCarousel.ts\" />\n"],"names":["_hoisted_1","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_ctx","args","_cache","_withKeys","$event","_hoisted_2","_createBlock","_component_neon_button","_createVNode","_hoisted_3","_Fragment","_renderList","image","index","_withModifiers","_hoisted_5","_toDisplayString","_component_neon_stack","_hoisted_6","_image","_component_neon_link","_hoisted_8"],"mappings":"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"}

package/dist/src/common/models/NeonCarouselImage.d.ts

@@ -11,4 +11,8 @@ export interface NeonCarouselImage {
      * Alt text to be displayed with the image for accessibility.
      */
     alt?: string;
+    /**
+     * Image title to be displayed with the image.
+     */
+    title?: string;
 }

package/dist/src/components/feedback/dialog/NeonDialog.d.ts

@@ -618,9 +618,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             required: true;
         };
         dismissible: {
-            type: BooleanConstructor; /**
-             * The color of the button for the confirm (positive) action.
-             */
+            type: BooleanConstructor;
             default: boolean;
         };
         opaque: {
@@ -631,6 +629,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
+        breakpoint: {
+            type: () => import("../../../neon").NeonResponsive;
+            default: import("../../../neon").NeonResponsive;
+        };
     }>, {
         modal: import("vue").Ref<null, null>;
         close: () => void;
@@ -640,9 +642,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             required: true;
         };
         dismissible: {
-            type: BooleanConstructor; /**
-             * The color of the button for the confirm (positive) action.
-             */
+            type: BooleanConstructor;
             default: boolean;
         };
         opaque: {
@@ -653,10 +653,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
+        breakpoint: {
+            type: () => import("../../../neon").NeonResponsive;
+            default: import("../../../neon").NeonResponsive;
+        };
     }>> & Readonly<{
         onClose?: ((...args: any[]) => any) | undefined;
     }>, {
         dismissible: boolean;
+        breakpoint: import("../../../neon").NeonResponsive;
         opaque: boolean;
         showTopNav: boolean;
     }, {}, {

package/dist/src/components/layout/modal/NeonModal.d.ts

@@ -1,3 +1,4 @@
+import { NeonResponsive } from '@/common/enums/NeonResponsive';
 /**
  * A modal dialog component. This will be rendered above the content of the main window and can either be dismissed by the user or configured to require user interaction before dismissal.
  */
@@ -30,6 +31,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Responsive breakpoint below which point the modal becomes fullscreen.
+     * Supports NeonResponsive.Mobile & NeonResponsive.MobileLarge.
+     */
+    breakpoint: {
+        type: () => NeonResponsive;
+        default: NeonResponsive;
+    };
 }>, {
     modal: import("vue").Ref<null, null>;
     close: () => void;
@@ -62,10 +71,19 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Responsive breakpoint below which point the modal becomes fullscreen.
+     * Supports NeonResponsive.Mobile & NeonResponsive.MobileLarge.
+     */
+    breakpoint: {
+        type: () => NeonResponsive;
+        default: NeonResponsive;
+    };
 }>> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
 }>, {
     dismissible: boolean;
+    breakpoint: NeonResponsive;
     opaque: boolean;
     showTopNav: boolean;
 }, {}, {
@@ -80,8 +98,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         size: {
             type: () => import("../../../neon").NeonButtonSize;
-            default: import("../../../neon").NeonButtonSize;
-        };
+            default: import("../../../neon").NeonButtonSize; /**
+             * Emitted when the modal is closed.
+             * @type {void}
+             */
+        }; /**
+         * Emitted when the modal is closed.
+         * @type {void}
+         */
         color: {
             type: () => import("../../../neon").NeonFunctionalColor;
             default: import("../../../neon").NeonFunctionalColor;
@@ -179,8 +203,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         size: {
             type: () => import("../../../neon").NeonButtonSize;
-            default: import("../../../neon").NeonButtonSize;
-        };
+            default: import("../../../neon").NeonButtonSize; /**
+             * Emitted when the modal is closed.
+             * @type {void}
+             */
+        }; /**
+         * Emitted when the modal is closed.
+         * @type {void}
+         */
         color: {
             type: () => import("../../../neon").NeonFunctionalColor;
             default: import("../../../neon").NeonFunctionalColor;
@@ -273,12 +303,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             inverse: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.
-                 */
-            }; /**
-             * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.
-             */
+                default: boolean;
+            };
             disabled: {
                 type: BooleanConstructor;
                 default: boolean;
@@ -294,12 +320,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             inverse: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.
-                 */
-            }; /**
-             * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.
-             */
+                default: boolean;
+            };
             disabled: {
                 type: BooleanConstructor;
                 default: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a lightweight design library of Vue 3 components with minimal dependencies.",
-  "version": "23.3.0",
+  "version": "23.3.1",
   "main": "./dist/neon.cjs.js",
   "module": "./dist/neon.es.js",
   "types": "./dist/src/neon.d.ts",

package/src/sass/components/_field-group.scss

@@ -60,6 +60,10 @@
           max-width: 100%;
         }
       }
+
+      .neon-button + .neon-button {
+        border-left: var(--neon-border-width) var(--neon-border-style) var(--neon-color-inverse);
+      }
     }
 
     &.neon-field-group--internal {
@@ -146,8 +150,11 @@
     }
 
     .neon-button {
-      margin-left: calc(-1 * var(--neon-border-width));
       z-index: var(--neon-z-index-above);
+
+      &:not(:first-child) {
+        margin-left: calc(-1 * var(--neon-border-width));
+      }
     }
 
     .neon-number {

package/src/sass/components/_input-indicator.scss

@@ -23,6 +23,8 @@
       font-weight: var(--neon-font-weight-input-indicator);
       padding-left: var(--neon-space-12);
       padding-right: var(--neon-space-12);
+      white-space: nowrap;
+      line-height: 1;
     }
 
     &--s {

package/src/sass/components/_modal.scss

@@ -1,6 +1,57 @@
 @use '../includes/layout';
 @use '../includes/responsive';
 
+@mixin modal-responsive() {
+  &.neon-modal--open {
+    &:not(.neon-dialog),
+    &:not(.neon-dialog) .neon-modal__container {
+      @include layout.width(100);
+      @include layout.min-height(100);
+      @include layout.max-height(100);
+
+      .neon-card {
+        @include layout.min-height(100);
+      }
+    }
+
+    &,
+    .neon-modal__container {
+      .neon-card {
+        .neon-card-body {
+          flex: 1 1 auto;
+        }
+      }
+    }
+  }
+}
+
+@mixin modal-responsive-larger-than() {
+  &,
+  .neon-modal__overlay {
+    transition: all ease-in-out var(--neon-animation-speed-fast);
+  }
+
+  .neon-modal__container {
+    margin-top: -30vh;
+    transition: all ease-in-out var(--neon-animation-speed-slow);
+
+    & > .neon-card {
+      margin-left: calc(2 * var(--neon-base-space));
+      margin-right: calc(2 * var(--neon-base-space));
+    }
+  }
+
+  &.neon-modal--open {
+    .neon-modal__container {
+      margin-top: -20vh;
+    }
+  }
+
+  .neon-modal__close {
+    right: var(--neon-space-12);
+  }
+}
+
 @mixin modal {
   .neon-modal {
     align-items: center;
@@ -26,14 +77,6 @@
       z-index: var(--neon-z-index-below);
       pointer-events: none;
       transition: opacity ease-in-out var(--neon-animation-speed-fast);
-
-      @include responsive.responsive(larger-than-mobile-large) {
-        transition: all ease-in-out var(--neon-animation-speed-fast);
-        .neon-card {
-          margin-top: -30vh;
-          transition: all ease-in-out var(--neon-animation-speed-slow);
-        }
-      }
     }
 
     &,
@@ -45,66 +88,23 @@
       @include layout.height(100);
 
       &--show-top-nav {
-        @include layout.min-height(100, 'var(--neon-top-nav-height-desktop)');
-        @include layout.height(100, 'var(--neon-top-nav-height-desktop)');
-
-        @include responsive.responsive(tablet) {
-          @include layout.min-height(100, 'var(--neon-top-nav-height-tablet)');
-          @include layout.height(100, 'var(--neon-top-nav-height-tablet)');
-        }
-
-        @include responsive.responsive(mobile) {
-          @include layout.min-height(100, 'var(--neon-top-nav-height-mobile)');
-          @include layout.height(100, 'var(--neon-top-nav-height-mobile)');
-        }
+        @include layout.min-height(100, 'var(--neon-top-nav-height)');
+        @include layout.height(100, 'var(--neon-top-nav-height)');
       }
     }
 
     &.neon-modal--open {
       opacity: 1;
 
-      @include responsive.responsive(larger-than-mobile-large) {
-        .neon-card {
-          margin-top: -20vh;
-        }
-      }
-
       .neon-modal__container,
       .neon-modal__overlay {
         opacity: 1;
         pointer-events: auto;
       }
 
-      &:not(.neon-dialog),
-      &:not(.neon-dialog) .neon-modal__container {
-        @include responsive.responsive(mobile-large) {
-          @include layout.width(100);
-          @include layout.min-height(100);
-
-          .neon-card {
-            @include layout.min-height(100);
-          }
-        }
-      }
-
       &,
       .neon-modal__container {
         z-index: var(--neon-z-index-top);
-
-        @include responsive.responsive(mobile-large) {
-          .neon-card {
-            .neon-card-body {
-              flex: 1 1 auto;
-            }
-          }
-        }
-      }
-    }
-
-    &__container {
-      @include responsive.responsive(larger-than-mobile-large) {
-        padding-left: var(--neon-space-8);
-        padding-right: var(--neon-space-8);
       }
     }
 
@@ -144,5 +144,25 @@
         }
       }
     }
+
+    &.neon-modal--breakpoint-mobile {
+      @include responsive.responsive(larger-than-mobile) {
+        @include modal-responsive-larger-than();
+      }
+
+      @include responsive.responsive(mobile) {
+        @include modal-responsive();
+      }
+    }
+
+    &.neon-modal--breakpoint-mobile-large {
+      @include responsive.responsive(larger-than-mobile-large) {
+        @include modal-responsive-larger-than();
+      }
+
+      @include responsive.responsive(mobile-large) {
+        @include modal-responsive();
+      }
+    }
   }
 }