@aotearoan/neon 25.0.0 → 25.0.2

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

@@ -1,2 +1,2 @@
-"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;
+"use strict";const e=require("vue"),c=require("../../../common/utils/NeonClosableUtils.cjs.js"),f=require("../../user-input/button/NeonButton.vue.cjs.js"),p=require("../../../common/enums/NeonResponsive.cjs.js"),d=e.defineComponent({name:"NeonDrawer",components:{NeonButton:f},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},noOffset:{type:Boolean}},emits:["close"],setup(o,{emit:u}){const l=e.ref(null),n=e.ref(null),r=()=>{u("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,a;s?(i=n.value)==null||i.open():(a=n.value)==null||a.close()},{immediate:!0}),{modal:l,close:t}}});module.exports=d;
 //# 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';\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"}
+{"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     * Remove the offset from the top of the modal.\n     */\n    noOffset: { type: Boolean },\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,EAI5E,SAAU,CAAE,KAAM,OAAA,CAAQ,EAE5B,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

@@ -28,7 +28,11 @@ const C = r({
      * Responsive breakpoint below which point the modal becomes fullscreen.
      * Supports NeonResponsive.Mobile & NeonResponsive.MobileLarge.
      */
-    breakpoint: { type: String, default: b.Mobile }
+    breakpoint: { type: String, default: b.Mobile },
+    /**
+     * Remove the offset from the top of the modal.
+     */
+    noOffset: { type: Boolean }
   },
   emits: [
     /**

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';\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;"}
+{"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     * Remove the offset from the top of the modal.\n     */\n    noOffset: { type: Boolean },\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;AAAA;AAAA;AAAA,IAI5E,UAAU,EAAE,MAAM,QAAA;AAAA,EAAQ;AAAA,EAE5B,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 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;
+"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,p){const n=e.resolveComponent("neon-button");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([[{"neon-modal--open":o.open,"neon-modal--no-offset":o.noOffset},`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 a=t(l,[["render",s]]);module.exports=a;
 //# 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 }, `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"}
+{"version":3,"file":"NeonModal.vue.cjs.js","sources":["../../../../src/components/layout/modal/NeonModal.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[{ 'neon-modal--open': open, 'neon-modal--no-offset': noOffset }, `neon-modal--breakpoint-${breakpoint}`]\"\n    class=\"neon-modal\"\n    role=\"dialog\"\n  >\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","_ctx","_createElementVNode","_hoisted_1","_renderSlot","_createBlock","_component_neon_button","_normalizeClass"],"mappings":"uIAMS,IAAI,QAAQ,MAAM,gHALzBA,EAAAA,mBAyBM,MAAA,CAxBH,6CAA8BC,EAAA,KAAI,wBAA2BA,UAAQ,EAAA,0BAA8BA,EAAA,UAAU,IACxG,YAAY,CAAA,EAClB,KAAK,WAELC,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,MAAKK,EAAAA,eAAA,CAAA,CAAA,8BAAmCN,EAAA,OAAM,oCAAuCA,EAAA,UAAU,EAC1F,qBAAqB,CAAA"}

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

@@ -1,6 +1,6 @@
 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";
+import { resolveComponent as r, openBlock as e, createElementBlock as s, normalizeClass as n, createElementVNode as l, renderSlot as d, createBlock as m, createCommentVNode as i } from "vue";
+import c from "../../../_virtual/_plugin-vue_export-helper.es.js";
 const p = {
   ref: "modal",
   class: "neon-modal__container"
@@ -8,12 +8,12 @@ const p = {
 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--breakpoint-${o.breakpoint}`], "neon-modal"]),
+    class: n([[{ "neon-modal--open": o.open, "neon-modal--no-offset": o.noOffset }, `neon-modal--breakpoint-${o.breakpoint}`], "neon-modal"]),
     role: "dialog"
   }, [
     l("div", p, [
-      c(o.$slots, "default"),
-      o.dismissible ? (e(), d(a, {
+      d(o.$slots, "default"),
+      o.dismissible ? (e(), m(a, {
         key: 0,
         circular: !0,
         transparent: !0,
@@ -31,7 +31,7 @@ function u(o, _, f, v, k, b) {
     }, null, 2)
   ], 2);
 }
-const h = /* @__PURE__ */ m(t, [["render", u]]);
+const h = /* @__PURE__ */ c(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 }, `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;;;;"}
+{"version":3,"file":"NeonModal.vue.es.js","sources":["../../../../src/components/layout/modal/NeonModal.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[{ 'neon-modal--open': open, 'neon-modal--no-offset': noOffset }, `neon-modal--breakpoint-${breakpoint}`]\"\n    class=\"neon-modal\"\n    role=\"dialog\"\n  >\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","_ctx","_createElementVNode","_hoisted_1","_renderSlot","_createBlock","_component_neon_button","_normalizeClass"],"mappings":";;;;EAMS,KAAI;AAAA,EAAQ,OAAM;;;;cALzBA,EAyBM,OAAA;AAAA,IAxBH,iCAA8BC,EAAA,MAAI,yBAA2BA,WAAQ,GAAA,0BAA8BA,EAAA,UAAU,KACxG,YAAY,CAAA;AAAA,IAClB,MAAK;AAAA;IAELC,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,OAAKK,EAAA,CAAA,EAAA,+BAAmCN,EAAA,QAAM,qCAAuCA,EAAA,WAAU,GAC1F,qBAAqB,CAAA;AAAA;;;;"}

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

@@ -633,6 +633,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: () => import("../../../neon").NeonResponsive;
             default: import("../../../neon").NeonResponsive;
         };
+        noOffset: {
+            type: BooleanConstructor;
+        };
     }>, {
         modal: import("vue").Ref<null, null>;
         close: () => void;
@@ -657,6 +660,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: () => import("../../../neon").NeonResponsive;
             default: import("../../../neon").NeonResponsive;
         };
+        noOffset: {
+            type: BooleanConstructor;
+        };
     }>> & Readonly<{
         onClose?: ((...args: any[]) => any) | undefined;
     }>, {
@@ -664,6 +670,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         breakpoint: import("../../../neon").NeonResponsive;
         opaque: boolean;
         showTopNav: boolean;
+        noOffset: boolean;
     }, {}, {
         NeonButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
             href: {

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

@@ -39,6 +39,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: () => NeonResponsive;
         default: NeonResponsive;
     };
+    /**
+     * Remove the offset from the top of the modal.
+     */
+    noOffset: {
+        type: BooleanConstructor;
+    };
 }>, {
     modal: import("vue").Ref<null, null>;
     close: () => void;
@@ -79,6 +85,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: () => NeonResponsive;
         default: NeonResponsive;
     };
+    /**
+     * Remove the offset from the top of the modal.
+     */
+    noOffset: {
+        type: BooleanConstructor;
+    };
 }>> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
 }>, {
@@ -86,6 +98,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     breakpoint: NeonResponsive;
     opaque: boolean;
     showTopNav: boolean;
+    noOffset: boolean;
 }, {}, {
     NeonButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         href: {
@@ -98,14 +111,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         size: {
             type: () => import("../../../neon").NeonButtonSize;
-            default: import("../../../neon").NeonButtonSize; /**
-             * Emitted when the modal is closed.
-             * @type {void}
-             */
-        }; /**
-         * Emitted when the modal is closed.
-         * @type {void}
-         */
+            default: import("../../../neon").NeonButtonSize;
+        };
         color: {
             type: () => import("../../../neon").NeonFunctionalColor;
             default: import("../../../neon").NeonFunctionalColor;
@@ -203,14 +210,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         size: {
             type: () => import("../../../neon").NeonButtonSize;
-            default: import("../../../neon").NeonButtonSize; /**
-             * Emitted when the modal is closed.
-             * @type {void}
-             */
-        }; /**
-         * Emitted when the modal is closed.
-         * @type {void}
-         */
+            default: import("../../../neon").NeonButtonSize;
+        };
         color: {
             type: () => import("../../../neon").NeonFunctionalColor;
             default: import("../../../neon").NeonFunctionalColor;

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": "25.0.0",
+  "version": "25.0.2",
   "main": "./dist/neon.cjs.js",
   "module": "./dist/neon.es.js",
   "types": "./dist/src/neon.d.ts",

package/src/sass/components/_button.scss

@@ -350,7 +350,7 @@
     }
 
     &--outline {
-      background: transparent;
+      background: var(--neon-background-color-outline-button);
 
       &.neon-button--disabled {
         color: var(--neon-color-disabled-text);
@@ -373,13 +373,13 @@
 
     &.neon-button--input {
       border-radius: var(--neon-border-radius-input);
-      border: var(--neon-border-width-input) var(--neon-border-style) var(--neon-border-color-input);
+      border: var(--neon-border-input);
       background-color: var(--neon-background-color-input);
       color: var(--neon-color-input);
 
       &.neon-button--disabled {
         color: var(--neon-color-disabled-text);
-        border: var(--neon-border-width-input) var(--neon-border-style) var(--neon-color-disabled-border);
+        border: var(--neon-border-input-disabled);
       }
     }
 

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

@@ -67,7 +67,7 @@
     }
 
     &.neon-field-group--internal {
-      border: var(--neon-border-width-input) var(--neon-border-style) var(--neon-border-color-input);
+      border: var(--neon-border-input);
       border-radius: var(--neon-border-radius-input);
 
       .neon-input-indicator {

package/src/sass/components/_input.scss

@@ -128,13 +128,12 @@
     &__text,
     &__textarea {
       border-radius: var(--neon-border-radius-input);
-      border: var(--neon-border-width-input) var(--neon-border-style);
+      border: var(--neon-border-input);
       padding: var(--neon-base-space) calc(2 * var(--neon-base-space));
       line-height: var(--neon-line-height-input);
       outline: none;
       font-family: var(--neon-font-family-body);
       width: 100%;
-      border-color: var(--neon-border-color-input);
       color: var(--neon-color-input);
       background-color: var(--neon-background-color-input);
       box-shadow: var(--neon-inset-shadow);

package/src/sass/components/_label.scss

@@ -13,7 +13,6 @@
   }
 
   .neon-icon {
-    width: var(--neon-font-size-#{$neon-label-font-size});
     height: var(--neon-font-size-#{$neon-label-font-size});
   }
 }
@@ -67,7 +66,7 @@
       @include neon-label-size('l', 1, 'l');
     }
 
-    text-transform: uppercase;
+    text-transform: var(--neon-text-transform-label);
     border-radius: var(--neon-border-radius-label);
     letter-spacing: var(--neon-letter-spacing-s);
     display: flex;

package/src/sass/components/_modal.scss

@@ -32,7 +32,7 @@
   }
 
   .neon-modal__container {
-    margin-top: -30vh;
+    margin-top: var(--neon-margin-top-modal-closed);
     transition: all ease-in-out var(--neon-animation-speed-slow);
 
     & > .neon-card {
@@ -43,7 +43,7 @@
 
   &.neon-modal--open {
     .neon-modal__container {
-      margin-top: -20vh;
+      margin-top: var(--neon-margin-top-modal-open);
     }
   }
 
@@ -127,14 +127,14 @@
         transition: all ease-in-out var(--neon-animation-speed-fast);
 
         .neon-card {
-          margin-top: -30vh;
+          margin-top: var(--neon-margin-top-modal-closed);
           transition: all ease-in-out var(--neon-animation-speed-slow);
         }
       }
 
       &.neon-modal--open {
         .neon-card {
-          margin-top: -20vh;
+          margin-top: var(--neon-margin-top-modal-open);
         }
       }
 
@@ -164,5 +164,10 @@
         @include modal-responsive();
       }
     }
+
+    &--no-offset {
+      --neon-margin-top-modal-closed: 0;
+      --neon-margin-top-modal-open: 0;
+    }
   }
 }

package/src/sass/components/_toggle.scss

@@ -156,7 +156,7 @@
 
       .neon-toggle__label {
         padding: var(--neon-space-16);
-        border: var(--neon-border-width-input) var(--neon-border-style) var(--neon-border-color-input);
+        border: var(--neon-border-input);
         width: 100%;
         border-radius: var(--neon-border-radius-input);
       }

package/src/sass/variables.scss

@@ -85,6 +85,7 @@
   --neon-spacing-horizontal-desktop: calc(var(--neon-gutter-desktop) * var(--neon-spacing-horizontal-multiplier));
 
   /* animation */
+  --neon-animation-speed-slowest: 0.5s;
   --neon-animation-speed-slow: 0.3s;
   --neon-animation-speed-fast: 0.225s;
   --neon-animation-speed-fastest: 0.05s;
@@ -95,6 +96,10 @@
   --neon-border-width-separator-before: 1rem;
   --neon-border-style: solid;
 
+  /* background colors */
+  --neon-background-color-light: var(--neon-color-high-contrast-l4);
+  --neon-background-color-dark: var(--neon-color-neutral-d5);
+
   /* z-index */
   --neon-z-index-below: -1;
   --neon-z-index-default: 0;
@@ -150,7 +155,7 @@
   --neon-h1-weight: var(--neon-font-weight-semi-bold);
   --neon-h0-weight: var(--neon-font-weight-semi-bold);
 
-  --neon-font-weight-em: var(--neon-font-weight-extra-light);
+  --neon-font-weight-em: inherit;
   --neon-font-weight-strong: var(--neon-font-weight-medium);
 
   --neon-letter-spacing-headings: 0;
@@ -299,6 +304,10 @@
   --neon-opacity-mobile-menu-focus: 0.125;
   --neon-height-mobile-menu: 66rem;
 
+  /* modal */
+  --neon-margin-top-modal-closed: -30vh;
+  --neon-margin-top-modal-open: -20vh;
+
   /* dropdown */
   --neon-max-height-dropdown: 280rem;
 
@@ -420,6 +429,7 @@
 
   /* label */
   --neon-border-radius-label: 2rem;
+  --neon-text-transform-label: none;
 
   /* badge */
   --neon-background-gradient-angle-badge: 45deg;
@@ -473,7 +483,7 @@
   &.neon-mode--dark {
     --neon-background-color-card: var(--neon-color-neutral-d4);
     --neon-border-card: var(--neon-border);
-    --neon-background-color: var(--neon-color-neutral-d5);
+    --neon-background-color: var(--neon-background-color-dark);
 
     --neon-rgb-text-primary: var(--neon-rgb-text-primary-dark);
     --neon-color-text-primary: var(--neon-color-text-primary-dark);
@@ -588,6 +598,8 @@
     --neon-background-solid-button-dark-error: var(--neon-color-error-l1);
 
     /* outline buttons */
+    --neon-background-color-outline-button: transparent;
+
     --neon-border-color-outline-button-inactive-high-contrast: var(--neon-border-color);
     --neon-background-outline-button-hover-high-contrast: var(--neon-color-high-contrast-l2);
     --neon-background-outline-button-active-high-contrast: var(--neon-color-high-contrast-l1);
@@ -687,6 +699,8 @@
     /* input */
     --neon-color-input: var(--neon-color-text-secondary);
     --neon-border-color-input: var(--neon-border-color);
+    --neon-border-input: var(--neon-border-width-input) var(--neon-border-style) var(--neon-border-color-input);
+    --neon-border-input-disabled: var(--neon-border-width-input) var(--neon-border-style) var(--neon-color-disabled-border);
     --neon-background-color-input: rgba(var(--neon-rgb-neutral-d5), 0.5);
     --neon-rgb-placeholder: var(--neon-rgb-neutral-d1);
     --neon-color-placeholder: var(--neon-color-neutral-d1);
@@ -829,7 +843,7 @@
   &.neon-mode--light {
     --neon-background-color-card: var(--neon-color-high-contrast-l5);
     --neon-border-card: var(--neon-border);
-    --neon-background-color: var(--neon-color-high-contrast-l4);
+    --neon-background-color: var(--neon-background-color-light);
 
     --neon-rgb-text-primary: var(--neon-rgb-text-primary-light);
     --neon-color-text-primary: var(--neon-color-text-primary-light);
@@ -944,6 +958,8 @@
     --neon-background-solid-button-dark-error: var(--neon-color-error-d2);
 
     /* outline buttons */
+    --neon-background-color-outline-button: transparent;
+
     --neon-border-color-outline-button-inactive-high-contrast: var(--neon-border-color);
     --neon-background-outline-button-hover-high-contrast: var(--neon-color-high-contrast-d1);
     --neon-background-outline-button-active-high-contrast: var(--neon-color-high-contrast-d2);
@@ -1043,6 +1059,8 @@
     /* input */
     --neon-color-input: var(--neon-color-text-secondary);
     --neon-border-color-input: var(--neon-border-color);
+    --neon-border-input: var(--neon-border-width-input) var(--neon-border-style) var(--neon-border-color-input);
+    --neon-border-input-disabled: var(--neon-border-width-input) var(--neon-border-style) var(--neon-color-disabled-border);
     --neon-background-color-input: var(--neon-color-high-contrast-l5);
     --neon-rgb-placeholder: var(--neon-rgb-neutral-l1);
     --neon-color-placeholder: var(--neon-color-neutral-l1);