@aotearoan/neon 23.2.5 → 23.3.0

package/dist/common/enums/NeonFunctionalColor.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var s=(r=>(r.LowContrast="low-contrast",r.Neutral="neutral",r.HighContrast="high-contrast",r.Brand="brand",r.Primary="primary",r.Info="info",r.Success="success",r.Warn="warn",r.Error="error",r))(s||{});exports.NeonFunctionalColor=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var s=(r=>(r.LowContrast="low-contrast",r.Neutral="neutral",r.HighContrast="high-contrast",r.Brand="brand",r.Accent="accent",r.Primary="primary",r.Info="info",r.Success="success",r.Warn="warn",r.Error="error",r))(s||{});exports.NeonFunctionalColor=s;
 //# sourceMappingURL=NeonFunctionalColor.cjs.js.map

package/dist/common/enums/NeonFunctionalColor.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonFunctionalColor.cjs.js","sources":["../../../src/common/enums/NeonFunctionalColor.ts"],"sourcesContent":["/**\n * The core color palettes available for styling components in Neon. See the design section\n * <a href=\"/design/color\">Color</a> page for more details on color palettes.\n */\nexport enum NeonFunctionalColor {\n  /** Low contrast is a more subtle neutral palette which can be used for secondary actions & supporting text. */\n  LowContrast = 'low-contrast',\n  /** Neutral is the base greyscale palette. */\n  Neutral = 'neutral',\n  /**\n   * High contrast is a higher contrast palette than can be used for increased accessibility or for a stronger black &\n   * white application.\n   * */\n  HighContrast = 'high-contrast',\n  /** Brand is the main brand color palette, this is useful for branded CTAs, text & controls. */\n  Brand = 'brand',\n  /** Primary is the main application color palette. For most applications this will be used by default. */\n  Primary = 'primary',\n  /** Info can be used to convey informational context, e.g. notes & alerts */\n  Info = 'info',\n  /** Success can be used to convey successful actions. */\n  Success = 'success',\n  /** Warn can be used to convey issues/actions that are less severe but may still impact the user. */\n  Warn = 'warn',\n  /** Error can be used to convey issues/actions that are severe & that the user may not be able to recover from. */\n  Error = 'error',\n}\n"],"names":["NeonFunctionalColor"],"mappings":"gFAIO,IAAKA,GAAAA,IAEVA,EAAA,YAAc,eAEdA,EAAA,QAAU,UAKVA,EAAA,aAAe,gBAEfA,EAAA,MAAQ,QAERA,EAAA,QAAU,UAEVA,EAAA,KAAO,OAEPA,EAAA,QAAU,UAEVA,EAAA,KAAO,OAEPA,EAAA,MAAQ,QArBEA,IAAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"NeonFunctionalColor.cjs.js","sources":["../../../src/common/enums/NeonFunctionalColor.ts"],"sourcesContent":["/**\n * The core color palettes available for styling components in Neon. See the design section\n * <a href=\"/design/color\">Color</a> page for more details on color palettes.\n */\nexport enum NeonFunctionalColor {\n  /** Low contrast is a more subtle neutral palette which can be used for secondary actions & supporting text. */\n  LowContrast = 'low-contrast',\n  /** Neutral is the base greyscale palette. */\n  Neutral = 'neutral',\n  /**\n   * High contrast is a higher contrast palette than can be used for increased accessibility or for a stronger black &\n   * white application.\n   * */\n  HighContrast = 'high-contrast',\n  /** Brand is the main brand color palette, this is useful for branded CTAs, text & controls. */\n  Brand = 'brand',\n  /** Accent is an alternative brand accent palette used when multiple brand colors are required */\n  Accent = 'accent',\n  /** Primary is the main application color palette. For most applications this will be used by default. */\n  Primary = 'primary',\n  /** Info can be used to convey informational context, e.g. notes & alerts */\n  Info = 'info',\n  /** Success can be used to convey successful actions. */\n  Success = 'success',\n  /** Warn can be used to convey issues/actions that are less severe but may still impact the user. */\n  Warn = 'warn',\n  /** Error can be used to convey issues/actions that are severe & that the user may not be able to recover from. */\n  Error = 'error',\n}\n"],"names":["NeonFunctionalColor"],"mappings":"gFAIO,IAAKA,GAAAA,IAEVA,EAAA,YAAc,eAEdA,EAAA,QAAU,UAKVA,EAAA,aAAe,gBAEfA,EAAA,MAAQ,QAERA,EAAA,OAAS,SAETA,EAAA,QAAU,UAEVA,EAAA,KAAO,OAEPA,EAAA,QAAU,UAEVA,EAAA,KAAO,OAEPA,EAAA,MAAQ,QAvBEA,IAAAA,GAAA,CAAA,CAAA"}

package/dist/common/enums/NeonFunctionalColor.es.js

@@ -1,4 +1,4 @@
-var s = /* @__PURE__ */ ((r) => (r.LowContrast = "low-contrast", r.Neutral = "neutral", r.HighContrast = "high-contrast", r.Brand = "brand", r.Primary = "primary", r.Info = "info", r.Success = "success", r.Warn = "warn", r.Error = "error", r))(s || {});
+var s = /* @__PURE__ */ ((r) => (r.LowContrast = "low-contrast", r.Neutral = "neutral", r.HighContrast = "high-contrast", r.Brand = "brand", r.Accent = "accent", r.Primary = "primary", r.Info = "info", r.Success = "success", r.Warn = "warn", r.Error = "error", r))(s || {});
 export {
   s as NeonFunctionalColor
 };

package/dist/common/enums/NeonFunctionalColor.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonFunctionalColor.es.js","sources":["../../../src/common/enums/NeonFunctionalColor.ts"],"sourcesContent":["/**\n * The core color palettes available for styling components in Neon. See the design section\n * <a href=\"/design/color\">Color</a> page for more details on color palettes.\n */\nexport enum NeonFunctionalColor {\n  /** Low contrast is a more subtle neutral palette which can be used for secondary actions & supporting text. */\n  LowContrast = 'low-contrast',\n  /** Neutral is the base greyscale palette. */\n  Neutral = 'neutral',\n  /**\n   * High contrast is a higher contrast palette than can be used for increased accessibility or for a stronger black &\n   * white application.\n   * */\n  HighContrast = 'high-contrast',\n  /** Brand is the main brand color palette, this is useful for branded CTAs, text & controls. */\n  Brand = 'brand',\n  /** Primary is the main application color palette. For most applications this will be used by default. */\n  Primary = 'primary',\n  /** Info can be used to convey informational context, e.g. notes & alerts */\n  Info = 'info',\n  /** Success can be used to convey successful actions. */\n  Success = 'success',\n  /** Warn can be used to convey issues/actions that are less severe but may still impact the user. */\n  Warn = 'warn',\n  /** Error can be used to convey issues/actions that are severe & that the user may not be able to recover from. */\n  Error = 'error',\n}\n"],"names":["NeonFunctionalColor"],"mappings":"AAIO,IAAKA,sBAAAA,OAEVA,EAAA,cAAc,gBAEdA,EAAA,UAAU,WAKVA,EAAA,eAAe,iBAEfA,EAAA,QAAQ,SAERA,EAAA,UAAU,WAEVA,EAAA,OAAO,QAEPA,EAAA,UAAU,WAEVA,EAAA,OAAO,QAEPA,EAAA,QAAQ,SArBEA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"NeonFunctionalColor.es.js","sources":["../../../src/common/enums/NeonFunctionalColor.ts"],"sourcesContent":["/**\n * The core color palettes available for styling components in Neon. See the design section\n * <a href=\"/design/color\">Color</a> page for more details on color palettes.\n */\nexport enum NeonFunctionalColor {\n  /** Low contrast is a more subtle neutral palette which can be used for secondary actions & supporting text. */\n  LowContrast = 'low-contrast',\n  /** Neutral is the base greyscale palette. */\n  Neutral = 'neutral',\n  /**\n   * High contrast is a higher contrast palette than can be used for increased accessibility or for a stronger black &\n   * white application.\n   * */\n  HighContrast = 'high-contrast',\n  /** Brand is the main brand color palette, this is useful for branded CTAs, text & controls. */\n  Brand = 'brand',\n  /** Accent is an alternative brand accent palette used when multiple brand colors are required */\n  Accent = 'accent',\n  /** Primary is the main application color palette. For most applications this will be used by default. */\n  Primary = 'primary',\n  /** Info can be used to convey informational context, e.g. notes & alerts */\n  Info = 'info',\n  /** Success can be used to convey successful actions. */\n  Success = 'success',\n  /** Warn can be used to convey issues/actions that are less severe but may still impact the user. */\n  Warn = 'warn',\n  /** Error can be used to convey issues/actions that are severe & that the user may not be able to recover from. */\n  Error = 'error',\n}\n"],"names":["NeonFunctionalColor"],"mappings":"AAIO,IAAKA,sBAAAA,OAEVA,EAAA,cAAc,gBAEdA,EAAA,UAAU,WAKVA,EAAA,eAAe,iBAEfA,EAAA,QAAQ,SAERA,EAAA,SAAS,UAETA,EAAA,UAAU,WAEVA,EAAA,OAAO,QAEPA,EAAA,UAAU,WAEVA,EAAA,OAAO,QAEPA,EAAA,QAAQ,SAvBEA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/components/user-input/number/NeonNumber.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const u=require("vue"),g=require("../../../common/enums/NeonFunctionalColor.cjs.js"),q=require("../../../common/enums/NeonSize.cjs.js"),S=require("../../../common/enums/NeonInputMode.cjs.js"),F=require("../button/NeonButton.vue.cjs.js"),B=require("../field-group/NeonFieldGroup.vue.cjs.js"),x=require("../input/NeonInput.vue.cjs.js"),s=require("../../../common/utils/NeonNumberUtils.cjs.js"),M=u.defineComponent({name:"NeonNumber",components:{NeonButton:F,NeonFieldGroup:B,NeonInput:x},props:{modelValue:{type:Number,default:null},min:{type:Number,required:!1},max:{type:Number,required:!1},step:{type:Number,required:!1},color:{type:String,default:g.NeonFunctionalColor.Primary},size:{type:String,default:q.NeonSize.Medium},locale:{type:String,default:null},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},editable:{type:Boolean,default:!0},spinButtons:{type:Boolean,default:!1},percentage:{type:Boolean,default:!1},decimals:{type:Number,required:!1},valueTemplate:{type:String,required:!1},inputmode:{type:String,default:S.NeonInputMode.Numeric},incrementLabel:{type:String,default:"Increment"},decrementLabel:{type:String,default:"Decrement"}},emits:["update:modelValue"],setup(e,{emit:f}){const N=u.useAttrs(),o=u.ref(!1),r=t=>{e.disabled||f("update:modelValue",t)},v=u.computed(()=>{const{onBlur:t,onFocus:n,...m}=N;return m}),V=t=>{const n=s.NeonNumberUtils.parseNumber(t),m=t!==""&&t!==null?Math.max(Math.min(n,e.max??Number.MAX_SAFE_INTEGER),e.min??Number.MIN_SAFE_INTEGER):null;(m===null||!isNaN(n))&&r(m)},l=u.computed(()=>e.decimals??(e.percentage?0:void 0)),a=u.computed(()=>e.percentage&&l.value!==void 0?l.value+2:l.value),i=u.computed(()=>{const t=e.modelValue!==null?+e.modelValue:e.min||0;return a.value!==void 0?Number(t.toFixed(a.value)):t}),b=u.computed(()=>e.modelValue!==null&&(e.valueTemplate!==void 0||l.value!==void 0||e.percentage!==void 0)?s.NeonNumberUtils.formatNumber(e.modelValue,{decimals:l.value,format:e.valueTemplate,percentage:e.percentage},e.locale):e.modelValue),d=u.computed(()=>{var t;return a.value?(t=e.modelValue)==null?void 0:t.toFixed(a.value):e.modelValue}),y=u.computed(()=>o.value?d.value?`${d.value}`:"":b.value),c=u.computed(()=>e.step??(e.percentage?.01:1));return{focus:o,sanitizedAttributes:v,computedDecimals:l,computedRawDecimals:a,computedValue:i,computedStep:c,displayValue:y,valueChanged:V,increment:()=>{const t=i.value+c.value,n=e.max!==void 0?Math.min(e.max,t):t;n!==e.modelValue&&r(n)},decrement:()=>{const t=i.value-c.value,n=e.min!==void 0?Math.max(e.min,t):t;n!==e.modelValue&&r(n)},onFocus:()=>o.value=!0,onBlur:()=>o.value=!1}}});module.exports=M;
+"use strict";const u=require("vue"),g=require("../../../common/enums/NeonFunctionalColor.cjs.js"),S=require("../../../common/enums/NeonSize.cjs.js"),q=require("../../../common/enums/NeonInputMode.cjs.js"),F=require("../button/NeonButton.vue.cjs.js"),B=require("../field-group/NeonFieldGroup.vue.cjs.js"),p=require("../input/NeonInput.vue.cjs.js"),s=require("../../../common/utils/NeonNumberUtils.cjs.js"),x=u.defineComponent({name:"NeonNumber",components:{NeonButton:F,NeonFieldGroup:B,NeonInput:p},props:{id:{type:String,default:null},modelValue:{type:Number,default:null},min:{type:Number,required:!1},max:{type:Number,required:!1},step:{type:Number,required:!1},color:{type:String,default:g.NeonFunctionalColor.Primary},size:{type:String,default:S.NeonSize.Medium},locale:{type:String,default:null},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},editable:{type:Boolean,default:!0},spinButtons:{type:Boolean,default:!1},percentage:{type:Boolean,default:!1},decimals:{type:Number,required:!1},valueTemplate:{type:String,required:!1},inputmode:{type:String,default:q.NeonInputMode.Numeric},incrementLabel:{type:String,default:"Increment"},decrementLabel:{type:String,default:"Decrement"}},emits:["update:modelValue"],setup(e,{emit:f}){const N=u.useAttrs(),o=u.ref(!1),r=t=>{e.disabled||f("update:modelValue",t)},v=u.computed(()=>{const{onBlur:t,onFocus:n,...i}=N;return i}),V=t=>{const n=s.NeonNumberUtils.parseNumber(t),i=t!==""&&t!==null?Math.max(Math.min(n,e.max??Number.MAX_SAFE_INTEGER),e.min??Number.MIN_SAFE_INTEGER):null;(i===null||!isNaN(n))&&r(i)},l=u.computed(()=>e.decimals??(e.percentage?0:void 0)),a=u.computed(()=>e.percentage&&l.value!==void 0?l.value+2:l.value),m=u.computed(()=>{const t=e.modelValue!==null?+e.modelValue:e.min||0;return a.value!==void 0?Number(t.toFixed(a.value)):t}),b=u.computed(()=>e.modelValue!==null&&(e.valueTemplate!==void 0||l.value!==void 0||e.percentage!==void 0)?s.NeonNumberUtils.formatNumber(e.modelValue,{decimals:l.value,format:e.valueTemplate,percentage:e.percentage},e.locale):e.modelValue),c=u.computed(()=>{var t;return a.value?(t=e.modelValue)==null?void 0:t.toFixed(a.value):e.modelValue}),y=u.computed(()=>o.value?c.value?`${c.value}`:"":b.value),d=u.computed(()=>e.step??(e.percentage?.01:1));return{focus:o,sanitizedAttributes:v,computedDecimals:l,computedRawDecimals:a,computedValue:m,computedStep:d,displayValue:y,valueChanged:V,increment:()=>{const t=m.value+d.value,n=e.max!==void 0?Math.min(e.max,t):t;n!==e.modelValue&&r(n)},decrement:()=>{const t=m.value-d.value,n=e.min!==void 0?Math.max(e.min,t):t;n!==e.modelValue&&r(n)},onFocus:()=>o.value=!0,onBlur:()=>o.value=!1}}});module.exports=x;
 //# sourceMappingURL=NeonNumber.cjs.js.map

package/dist/components/user-input/number/NeonNumber.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonNumber.cjs.js","sources":["../../../../src/components/user-input/number/NeonNumber.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonFieldGroup from '@/components/user-input/field-group/NeonFieldGroup.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\n\n/**\n * <p>\n *   The <strong>NeonNumber</strong> component is the equivalent of an <strong>&lt;input type=\"number\" /&gt;</strong>\n *   with -/+ spin buttons. In addition, it supports formatting as a percentage or with a provided custom template and\n *   also pasting of values in the user's locale, e.g. 6,543.12.\n * </p>\n * <p><strong>NeonNumber</strong> supports all the properties found on an HTML &lt;input&gt;.</p>\n */\nexport default defineComponent({\n  name: 'NeonNumber',\n  components: {\n    NeonButton,\n    NeonFieldGroup,\n    NeonInput,\n  },\n  props: {\n    /**\n     * The value of the number input. Either a valid number or null.\n     */\n    modelValue: { type: Number, default: null },\n    /**\n     * The minimum value the input can accept.\n     */\n    min: { type: Number, required: false },\n    /**\n     * The maximum value the input can accept.\n     */\n    max: { type: Number, required: false },\n    /**\n     * The step value for the spin buttons.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The component color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The component size.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Whether the component is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Enable/disable direct editing of the value.\n     */\n    editable: { type: Boolean, default: true },\n    /**\n     * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.\n     */\n    spinButtons: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The rounding precision for display formatting.\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A template string used for formatting the value for display. Use the placeholder {value} to reference the value in\n     * the template string. e.g. value = 90, ${value} => $90.\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * The HTML inputmode of the component. Either 'numeric' or 'decimal'.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Numeric },\n    /**\n     * ARIA label for the increment spinner button.\n     */\n    incrementLabel: { type: String, default: 'Increment' },\n    /**\n     * ARIA label for the decrement spinner button.\n     */\n    decrementLabel: { type: String, default: 'Decrement' },\n  },\n  emits: [\n    /**\n     * Emitted when the user changes the value of the number via the increment/decrement buttons or manually entering\n     * the value.\n     * @type {number | null} the current value or null if the value has been cleared.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const focus = ref(false);\n\n    const emitValue = (value: number | null) => {\n      if (!props.disabled) {\n        emit('update:modelValue', value);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onBlur, onFocus, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const valueChanged = (value: string) => {\n      const parsedValue = NeonNumberUtils.parseNumber(value);\n      const newValue =\n        value !== '' && value !== null\n          ? Math.max(Math.min(parsedValue, props.max ?? Number.MAX_SAFE_INTEGER), props.min ?? Number.MIN_SAFE_INTEGER)\n          : null;\n      if (newValue === null || !isNaN(parsedValue)) {\n        emitValue(newValue);\n      }\n    };\n\n    const computedDecimals = computed(() => {\n      return props.decimals ?? (props.percentage ? 0 : undefined);\n    });\n\n    const computedRawDecimals = computed(() => {\n      return props.percentage && computedDecimals.value !== undefined\n        ? computedDecimals.value + 2\n        : computedDecimals.value;\n    });\n\n    const computedValue = computed(() => {\n      const newValue = props.modelValue !== null ? +props.modelValue : props.min || 0;\n      return computedRawDecimals.value !== undefined ? Number(newValue.toFixed(computedRawDecimals.value)) : newValue;\n    });\n\n    const formattedValue = computed(() => {\n      return props.modelValue !== null &&\n        (props.valueTemplate !== undefined || computedDecimals.value !== undefined || props.percentage !== undefined)\n        ? NeonNumberUtils.formatNumber(\n            props.modelValue,\n            {\n              decimals: computedDecimals.value,\n              format: props.valueTemplate,\n              percentage: props.percentage,\n            },\n            props.locale,\n          )\n        : props.modelValue;\n    });\n\n    const rawValue = computed(() => {\n      return computedRawDecimals.value ? props.modelValue?.toFixed(computedRawDecimals.value) : props.modelValue;\n    });\n\n    const displayValue = computed(() => {\n      return focus.value ? (rawValue.value ? `${rawValue.value}` : '') : formattedValue.value;\n    });\n\n    const computedStep = computed(() => {\n      return props.step ?? (props.percentage ? 0.01 : 1);\n    });\n\n    const decrement = () => {\n      const newValue = computedValue.value - computedStep.value;\n      const emittedValue = props.min !== undefined ? Math.max(props.min, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const increment = () => {\n      const newValue = computedValue.value + computedStep.value;\n      const emittedValue = props.max !== undefined ? Math.min(props.max, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const onFocus = () => (focus.value = true);\n    const onBlur = () => (focus.value = false);\n\n    return {\n      focus,\n      sanitizedAttributes,\n      computedDecimals,\n      computedRawDecimals,\n      computedValue,\n      computedStep,\n      displayValue,\n      valueChanged,\n      increment,\n      decrement,\n      onFocus,\n      onBlur,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonFieldGroup","NeonInput","NeonFunctionalColor","NeonSize","NeonInputMode","props","emit","attrs","useAttrs","focus","ref","emitValue","value","sanitizedAttributes","computed","onBlur","onFocus","sanitized","valueChanged","parsedValue","NeonNumberUtils","newValue","computedDecimals","computedRawDecimals","computedValue","formattedValue","rawValue","_a","displayValue","computedStep","emittedValue"],"mappings":"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"}
+{"version":3,"file":"NeonNumber.cjs.js","sources":["../../../../src/components/user-input/number/NeonNumber.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonFieldGroup from '@/components/user-input/field-group/NeonFieldGroup.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\n\n/**\n * <p>\n *   The <strong>NeonNumber</strong> component is the equivalent of an <strong>&lt;input type=\"number\" /&gt;</strong>\n *   with -/+ spin buttons. In addition, it supports formatting as a percentage or with a provided custom template and\n *   also pasting of values in the user's locale, e.g. 6,543.12.\n * </p>\n * <p><strong>NeonNumber</strong> supports all the properties found on an HTML &lt;input&gt;.</p>\n */\nexport default defineComponent({\n  name: 'NeonNumber',\n  components: {\n    NeonButton,\n    NeonFieldGroup,\n    NeonInput,\n  },\n  props: {\n    /**\n     * The id the input\n     */\n    id: { type: String, default: null },\n    /**\n     * The value of the number input. Either a valid number or null.\n     */\n    modelValue: { type: Number, default: null },\n    /**\n     * The minimum value the input can accept.\n     */\n    min: { type: Number, required: false },\n    /**\n     * The maximum value the input can accept.\n     */\n    max: { type: Number, required: false },\n    /**\n     * The step value for the spin buttons.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The component color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The component size.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Whether the component is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Enable/disable direct editing of the value.\n     */\n    editable: { type: Boolean, default: true },\n    /**\n     * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.\n     */\n    spinButtons: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The rounding precision for display formatting.\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A template string used for formatting the value for display. Use the placeholder {value} to reference the value in\n     * the template string. e.g. value = 90, ${value} => $90.\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * The HTML inputmode of the component. Either 'numeric' or 'decimal'.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Numeric },\n    /**\n     * ARIA label for the increment spinner button.\n     */\n    incrementLabel: { type: String, default: 'Increment' },\n    /**\n     * ARIA label for the decrement spinner button.\n     */\n    decrementLabel: { type: String, default: 'Decrement' },\n  },\n  emits: [\n    /**\n     * Emitted when the user changes the value of the number via the increment/decrement buttons or manually entering\n     * the value.\n     * @type {number | null} the current value or null if the value has been cleared.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const focus = ref(false);\n\n    const emitValue = (value: number | null) => {\n      if (!props.disabled) {\n        emit('update:modelValue', value);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onBlur, onFocus, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const valueChanged = (value: string) => {\n      const parsedValue = NeonNumberUtils.parseNumber(value);\n      const newValue =\n        value !== '' && value !== null\n          ? Math.max(Math.min(parsedValue, props.max ?? Number.MAX_SAFE_INTEGER), props.min ?? Number.MIN_SAFE_INTEGER)\n          : null;\n      if (newValue === null || !isNaN(parsedValue)) {\n        emitValue(newValue);\n      }\n    };\n\n    const computedDecimals = computed(() => {\n      return props.decimals ?? (props.percentage ? 0 : undefined);\n    });\n\n    const computedRawDecimals = computed(() => {\n      return props.percentage && computedDecimals.value !== undefined\n        ? computedDecimals.value + 2\n        : computedDecimals.value;\n    });\n\n    const computedValue = computed(() => {\n      const newValue = props.modelValue !== null ? +props.modelValue : props.min || 0;\n      return computedRawDecimals.value !== undefined ? Number(newValue.toFixed(computedRawDecimals.value)) : newValue;\n    });\n\n    const formattedValue = computed(() => {\n      return props.modelValue !== null &&\n        (props.valueTemplate !== undefined || computedDecimals.value !== undefined || props.percentage !== undefined)\n        ? NeonNumberUtils.formatNumber(\n            props.modelValue,\n            {\n              decimals: computedDecimals.value,\n              format: props.valueTemplate,\n              percentage: props.percentage,\n            },\n            props.locale,\n          )\n        : props.modelValue;\n    });\n\n    const rawValue = computed(() => {\n      return computedRawDecimals.value ? props.modelValue?.toFixed(computedRawDecimals.value) : props.modelValue;\n    });\n\n    const displayValue = computed(() => {\n      return focus.value ? (rawValue.value ? `${rawValue.value}` : '') : formattedValue.value;\n    });\n\n    const computedStep = computed(() => {\n      return props.step ?? (props.percentage ? 0.01 : 1);\n    });\n\n    const decrement = () => {\n      const newValue = computedValue.value - computedStep.value;\n      const emittedValue = props.min !== undefined ? Math.max(props.min, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const increment = () => {\n      const newValue = computedValue.value + computedStep.value;\n      const emittedValue = props.max !== undefined ? Math.min(props.max, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const onFocus = () => (focus.value = true);\n    const onBlur = () => (focus.value = false);\n\n    return {\n      focus,\n      sanitizedAttributes,\n      computedDecimals,\n      computedRawDecimals,\n      computedValue,\n      computedStep,\n      displayValue,\n      valueChanged,\n      increment,\n      decrement,\n      onFocus,\n      onBlur,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonFieldGroup","NeonInput","NeonFunctionalColor","NeonSize","NeonInputMode","props","emit","attrs","useAttrs","focus","ref","emitValue","value","sanitizedAttributes","computed","onBlur","onFocus","sanitized","valueChanged","parsedValue","NeonNumberUtils","newValue","computedDecimals","computedRawDecimals","computedValue","formattedValue","rawValue","_a","displayValue","computedStep","emittedValue"],"mappings":"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"}

package/dist/components/user-input/number/NeonNumber.es.js

@@ -1,11 +1,11 @@
 import { defineComponent as g, useAttrs as S, ref as B, computed as a } from "vue";
 import { NeonFunctionalColor as F } from "../../../common/enums/NeonFunctionalColor.es.js";
-import { NeonSize as x } from "../../../common/enums/NeonSize.es.js";
-import { NeonInputMode as p } from "../../../common/enums/NeonInputMode.es.js";
+import { NeonSize as p } from "../../../common/enums/NeonSize.es.js";
+import { NeonInputMode as x } from "../../../common/enums/NeonInputMode.es.js";
 import M from "../button/NeonButton.vue.es.js";
 import h from "../field-group/NeonFieldGroup.vue.es.js";
 import w from "../input/NeonInput.vue.es.js";
-import { NeonNumberUtils as s } from "../../../common/utils/NeonNumberUtils.es.js";
+import { NeonNumberUtils as f } from "../../../common/utils/NeonNumberUtils.es.js";
 const P = g({
   name: "NeonNumber",
   components: {
@@ -14,6 +14,10 @@ const P = g({
     NeonInput: w
   },
   props: {
+    /**
+     * The id the input
+     */
+    id: { type: String, default: null },
     /**
      * The value of the number input. Either a valid number or null.
      */
@@ -37,7 +41,7 @@ const P = g({
     /**
      * The component size.
      */
-    size: { type: String, default: x.Medium },
+    size: { type: String, default: p.Medium },
     /**
      * The locale used for display purposes. This defaults to the browser's locale if none is provided.
      */
@@ -74,7 +78,7 @@ const P = g({
     /**
      * The HTML inputmode of the component. Either 'numeric' or 'decimal'.
      */
-    inputmode: { type: String, default: p.Numeric },
+    inputmode: { type: String, default: x.Numeric },
     /**
      * ARIA label for the increment spinner button.
      */
@@ -92,19 +96,19 @@ const P = g({
      */
     "update:modelValue"
   ],
-  setup(e, { emit: f }) {
+  setup(e, { emit: s }) {
     const v = S(), o = B(!1), r = (t) => {
-      e.disabled || f("update:modelValue", t);
+      e.disabled || s("update:modelValue", t);
     }, N = a(() => {
       const { onBlur: t, onFocus: l, ...m } = v;
       return m;
     }), V = (t) => {
-      const l = s.parseNumber(t), m = t !== "" && t !== null ? Math.max(Math.min(l, e.max ?? Number.MAX_SAFE_INTEGER), e.min ?? Number.MIN_SAFE_INTEGER) : null;
+      const l = f.parseNumber(t), m = t !== "" && t !== null ? Math.max(Math.min(l, e.max ?? Number.MAX_SAFE_INTEGER), e.min ?? Number.MIN_SAFE_INTEGER) : null;
       (m === null || !isNaN(l)) && r(m);
     }, u = a(() => e.decimals ?? (e.percentage ? 0 : void 0)), n = a(() => e.percentage && u.value !== void 0 ? u.value + 2 : u.value), i = a(() => {
       const t = e.modelValue !== null ? +e.modelValue : e.min || 0;
       return n.value !== void 0 ? Number(t.toFixed(n.value)) : t;
-    }), y = a(() => e.modelValue !== null && (e.valueTemplate !== void 0 || u.value !== void 0 || e.percentage !== void 0) ? s.formatNumber(
+    }), y = a(() => e.modelValue !== null && (e.valueTemplate !== void 0 || u.value !== void 0 || e.percentage !== void 0) ? f.formatNumber(
       e.modelValue,
       {
         decimals: u.value,

package/dist/components/user-input/number/NeonNumber.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonNumber.es.js","sources":["../../../../src/components/user-input/number/NeonNumber.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonFieldGroup from '@/components/user-input/field-group/NeonFieldGroup.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\n\n/**\n * <p>\n *   The <strong>NeonNumber</strong> component is the equivalent of an <strong>&lt;input type=\"number\" /&gt;</strong>\n *   with -/+ spin buttons. In addition, it supports formatting as a percentage or with a provided custom template and\n *   also pasting of values in the user's locale, e.g. 6,543.12.\n * </p>\n * <p><strong>NeonNumber</strong> supports all the properties found on an HTML &lt;input&gt;.</p>\n */\nexport default defineComponent({\n  name: 'NeonNumber',\n  components: {\n    NeonButton,\n    NeonFieldGroup,\n    NeonInput,\n  },\n  props: {\n    /**\n     * The value of the number input. Either a valid number or null.\n     */\n    modelValue: { type: Number, default: null },\n    /**\n     * The minimum value the input can accept.\n     */\n    min: { type: Number, required: false },\n    /**\n     * The maximum value the input can accept.\n     */\n    max: { type: Number, required: false },\n    /**\n     * The step value for the spin buttons.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The component color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The component size.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Whether the component is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Enable/disable direct editing of the value.\n     */\n    editable: { type: Boolean, default: true },\n    /**\n     * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.\n     */\n    spinButtons: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The rounding precision for display formatting.\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A template string used for formatting the value for display. Use the placeholder {value} to reference the value in\n     * the template string. e.g. value = 90, ${value} => $90.\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * The HTML inputmode of the component. Either 'numeric' or 'decimal'.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Numeric },\n    /**\n     * ARIA label for the increment spinner button.\n     */\n    incrementLabel: { type: String, default: 'Increment' },\n    /**\n     * ARIA label for the decrement spinner button.\n     */\n    decrementLabel: { type: String, default: 'Decrement' },\n  },\n  emits: [\n    /**\n     * Emitted when the user changes the value of the number via the increment/decrement buttons or manually entering\n     * the value.\n     * @type {number | null} the current value or null if the value has been cleared.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const focus = ref(false);\n\n    const emitValue = (value: number | null) => {\n      if (!props.disabled) {\n        emit('update:modelValue', value);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onBlur, onFocus, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const valueChanged = (value: string) => {\n      const parsedValue = NeonNumberUtils.parseNumber(value);\n      const newValue =\n        value !== '' && value !== null\n          ? Math.max(Math.min(parsedValue, props.max ?? Number.MAX_SAFE_INTEGER), props.min ?? Number.MIN_SAFE_INTEGER)\n          : null;\n      if (newValue === null || !isNaN(parsedValue)) {\n        emitValue(newValue);\n      }\n    };\n\n    const computedDecimals = computed(() => {\n      return props.decimals ?? (props.percentage ? 0 : undefined);\n    });\n\n    const computedRawDecimals = computed(() => {\n      return props.percentage && computedDecimals.value !== undefined\n        ? computedDecimals.value + 2\n        : computedDecimals.value;\n    });\n\n    const computedValue = computed(() => {\n      const newValue = props.modelValue !== null ? +props.modelValue : props.min || 0;\n      return computedRawDecimals.value !== undefined ? Number(newValue.toFixed(computedRawDecimals.value)) : newValue;\n    });\n\n    const formattedValue = computed(() => {\n      return props.modelValue !== null &&\n        (props.valueTemplate !== undefined || computedDecimals.value !== undefined || props.percentage !== undefined)\n        ? NeonNumberUtils.formatNumber(\n            props.modelValue,\n            {\n              decimals: computedDecimals.value,\n              format: props.valueTemplate,\n              percentage: props.percentage,\n            },\n            props.locale,\n          )\n        : props.modelValue;\n    });\n\n    const rawValue = computed(() => {\n      return computedRawDecimals.value ? props.modelValue?.toFixed(computedRawDecimals.value) : props.modelValue;\n    });\n\n    const displayValue = computed(() => {\n      return focus.value ? (rawValue.value ? `${rawValue.value}` : '') : formattedValue.value;\n    });\n\n    const computedStep = computed(() => {\n      return props.step ?? (props.percentage ? 0.01 : 1);\n    });\n\n    const decrement = () => {\n      const newValue = computedValue.value - computedStep.value;\n      const emittedValue = props.min !== undefined ? Math.max(props.min, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const increment = () => {\n      const newValue = computedValue.value + computedStep.value;\n      const emittedValue = props.max !== undefined ? Math.min(props.max, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const onFocus = () => (focus.value = true);\n    const onBlur = () => (focus.value = false);\n\n    return {\n      focus,\n      sanitizedAttributes,\n      computedDecimals,\n      computedRawDecimals,\n      computedValue,\n      computedStep,\n      displayValue,\n      valueChanged,\n      increment,\n      decrement,\n      onFocus,\n      onBlur,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonFieldGroup","NeonInput","NeonFunctionalColor","NeonSize","NeonInputMode","props","emit","attrs","useAttrs","focus","ref","emitValue","value","sanitizedAttributes","computed","onBlur","onFocus","sanitized","valueChanged","parsedValue","NeonNumberUtils","newValue","computedDecimals","computedRawDecimals","computedValue","formattedValue","rawValue","_a","displayValue","computedStep","emittedValue"],"mappings":"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"}
+{"version":3,"file":"NeonNumber.es.js","sources":["../../../../src/components/user-input/number/NeonNumber.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonFieldGroup from '@/components/user-input/field-group/NeonFieldGroup.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport { NeonNumberUtils } from '@/common/utils/NeonNumberUtils';\n\n/**\n * <p>\n *   The <strong>NeonNumber</strong> component is the equivalent of an <strong>&lt;input type=\"number\" /&gt;</strong>\n *   with -/+ spin buttons. In addition, it supports formatting as a percentage or with a provided custom template and\n *   also pasting of values in the user's locale, e.g. 6,543.12.\n * </p>\n * <p><strong>NeonNumber</strong> supports all the properties found on an HTML &lt;input&gt;.</p>\n */\nexport default defineComponent({\n  name: 'NeonNumber',\n  components: {\n    NeonButton,\n    NeonFieldGroup,\n    NeonInput,\n  },\n  props: {\n    /**\n     * The id the input\n     */\n    id: { type: String, default: null },\n    /**\n     * The value of the number input. Either a valid number or null.\n     */\n    modelValue: { type: Number, default: null },\n    /**\n     * The minimum value the input can accept.\n     */\n    min: { type: Number, required: false },\n    /**\n     * The maximum value the input can accept.\n     */\n    max: { type: Number, required: false },\n    /**\n     * The step value for the spin buttons.\n     */\n    step: { type: Number, required: false },\n    /**\n     * The component color.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The component size.\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The locale used for display purposes. This defaults to the browser's locale if none is provided.\n     */\n    locale: { type: String, default: null },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Whether the component is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Enable/disable direct editing of the value.\n     */\n    editable: { type: Boolean, default: true },\n    /**\n     * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.\n     */\n    spinButtons: { type: Boolean, default: false },\n    /**\n     * Automatically applies % formatting, e.g. if the value = 0.15 it will be displayed as 15%.\n     */\n    percentage: { type: Boolean, default: false },\n    /**\n     * The rounding precision for display formatting.\n     */\n    decimals: { type: Number, required: false },\n    /**\n     * A template string used for formatting the value for display. Use the placeholder {value} to reference the value in\n     * the template string. e.g. value = 90, ${value} => $90.\n     */\n    valueTemplate: { type: String, required: false },\n    /**\n     * The HTML inputmode of the component. Either 'numeric' or 'decimal'.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Numeric },\n    /**\n     * ARIA label for the increment spinner button.\n     */\n    incrementLabel: { type: String, default: 'Increment' },\n    /**\n     * ARIA label for the decrement spinner button.\n     */\n    decrementLabel: { type: String, default: 'Decrement' },\n  },\n  emits: [\n    /**\n     * Emitted when the user changes the value of the number via the increment/decrement buttons or manually entering\n     * the value.\n     * @type {number | null} the current value or null if the value has been cleared.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const focus = ref(false);\n\n    const emitValue = (value: number | null) => {\n      if (!props.disabled) {\n        emit('update:modelValue', value);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onBlur, onFocus, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const valueChanged = (value: string) => {\n      const parsedValue = NeonNumberUtils.parseNumber(value);\n      const newValue =\n        value !== '' && value !== null\n          ? Math.max(Math.min(parsedValue, props.max ?? Number.MAX_SAFE_INTEGER), props.min ?? Number.MIN_SAFE_INTEGER)\n          : null;\n      if (newValue === null || !isNaN(parsedValue)) {\n        emitValue(newValue);\n      }\n    };\n\n    const computedDecimals = computed(() => {\n      return props.decimals ?? (props.percentage ? 0 : undefined);\n    });\n\n    const computedRawDecimals = computed(() => {\n      return props.percentage && computedDecimals.value !== undefined\n        ? computedDecimals.value + 2\n        : computedDecimals.value;\n    });\n\n    const computedValue = computed(() => {\n      const newValue = props.modelValue !== null ? +props.modelValue : props.min || 0;\n      return computedRawDecimals.value !== undefined ? Number(newValue.toFixed(computedRawDecimals.value)) : newValue;\n    });\n\n    const formattedValue = computed(() => {\n      return props.modelValue !== null &&\n        (props.valueTemplate !== undefined || computedDecimals.value !== undefined || props.percentage !== undefined)\n        ? NeonNumberUtils.formatNumber(\n            props.modelValue,\n            {\n              decimals: computedDecimals.value,\n              format: props.valueTemplate,\n              percentage: props.percentage,\n            },\n            props.locale,\n          )\n        : props.modelValue;\n    });\n\n    const rawValue = computed(() => {\n      return computedRawDecimals.value ? props.modelValue?.toFixed(computedRawDecimals.value) : props.modelValue;\n    });\n\n    const displayValue = computed(() => {\n      return focus.value ? (rawValue.value ? `${rawValue.value}` : '') : formattedValue.value;\n    });\n\n    const computedStep = computed(() => {\n      return props.step ?? (props.percentage ? 0.01 : 1);\n    });\n\n    const decrement = () => {\n      const newValue = computedValue.value - computedStep.value;\n      const emittedValue = props.min !== undefined ? Math.max(props.min, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const increment = () => {\n      const newValue = computedValue.value + computedStep.value;\n      const emittedValue = props.max !== undefined ? Math.min(props.max, newValue) : newValue;\n      if (emittedValue !== props.modelValue) {\n        emitValue(emittedValue);\n      }\n    };\n\n    const onFocus = () => (focus.value = true);\n    const onBlur = () => (focus.value = false);\n\n    return {\n      focus,\n      sanitizedAttributes,\n      computedDecimals,\n      computedRawDecimals,\n      computedValue,\n      computedStep,\n      displayValue,\n      valueChanged,\n      increment,\n      decrement,\n      onFocus,\n      onBlur,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonFieldGroup","NeonInput","NeonFunctionalColor","NeonSize","NeonInputMode","props","emit","attrs","useAttrs","focus","ref","emitValue","value","sanitizedAttributes","computed","onBlur","onFocus","sanitized","valueChanged","parsedValue","NeonNumberUtils","newValue","computedDecimals","computedRawDecimals","computedValue","formattedValue","rawValue","_a","displayValue","computedStep","emittedValue"],"mappings":"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"}

package/dist/components/user-input/number/NeonNumber.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const s=require("./NeonNumber.cjs.js"),n=require("vue"),u=require("../../../_virtual/_plugin-vue_export-helper.cjs.js");function d(e,o,m,p,b,v){const i=n.resolveComponent("neon-button"),r=n.resolveComponent("neon-input"),a=n.resolveComponent("neon-field-group");return n.openBlock(),n.createBlock(a,{class:n.normalizeClass([[`neon-number--${e.size}`,`neon-number--${e.color}`,{"neon-number--disabled":e.disabled,"neon-number--editable":e.editable,"neon-number--with-buttons":e.spinButtons}],"neon-number"]),"indicator-style":"external"},{default:n.withCtx(()=>[e.spinButtons?(n.openBlock(),n.createBlock(i,{key:0,"aria-label":e.decrementLabel,color:e.color,disabled:e.disabled||e.min!==void 0&&e.min===e.modelValue,size:e.size,"button-style":"outline",class:"neon-number__decrement",icon:"minus",onClick:o[0]||(o[0]=l=>e.decrement())},null,8,["aria-label","color","disabled","size"])):n.createCommentVNode("",!0),n.createVNode(r,n.mergeProps({"aria-valuemax":e.max,"aria-valuemin":e.min,"aria-valuenow":e.modelValue,color:e.color,disabled:e.disabled||!e.editable,inputmode:e.inputmode,max:e.max,min:e.min,"model-value":e.displayValue,placeholder:e.placeholder,size:e.size,step:e.computedStep,class:"neon-number__input",role:"spinbutton",type:"text"},e.sanitizedAttributes,{onBlur:o[1]||(o[1]=l=>e.onBlur()),onFocus:o[2]||(o[2]=l=>e.onFocus()),"onUpdate:modelValue":e.valueChanged,onKeydown:[o[3]||(o[3]=n.withKeys(n.withModifiers(l=>e.increment(),["prevent"]),["up"])),o[4]||(o[4]=n.withKeys(n.withModifiers(l=>e.decrement(),["prevent"]),["down"]))]}),null,16,["aria-valuemax","aria-valuemin","aria-valuenow","color","disabled","inputmode","max","min","model-value","placeholder","size","step","onUpdate:modelValue"]),e.spinButtons?(n.openBlock(),n.createBlock(i,{key:1,"aria-label":e.incrementLabel,color:e.color,disabled:e.disabled||e.max!==void 0&&e.max===e.modelValue,size:e.size,"button-style":"outline",class:"neon-number__increment",icon:"plus",onClick:o[5]||(o[5]=l=>e.increment())},null,8,["aria-label","color","disabled","size"])):n.createCommentVNode("",!0)]),_:1},8,["class"])}const t=u(s,[["render",d]]);module.exports=t;
+"use strict";const s=require("./NeonNumber.cjs.js"),n=require("vue"),u=require("../../../_virtual/_plugin-vue_export-helper.cjs.js");function d(e,o,m,p,b,v){const i=n.resolveComponent("neon-button"),r=n.resolveComponent("neon-input"),a=n.resolveComponent("neon-field-group");return n.openBlock(),n.createBlock(a,{class:n.normalizeClass([[`neon-number--${e.size}`,`neon-number--${e.color}`,{"neon-number--disabled":e.disabled,"neon-number--editable":e.editable,"neon-number--with-buttons":e.spinButtons}],"neon-number"]),"indicator-style":"external"},{default:n.withCtx(()=>[e.spinButtons?(n.openBlock(),n.createBlock(i,{key:0,"aria-label":e.decrementLabel,color:e.color,disabled:e.disabled||e.min!==void 0&&e.min===e.modelValue,size:e.size,"button-style":"outline",class:"neon-number__decrement",icon:"minus",onClick:o[0]||(o[0]=l=>e.decrement())},null,8,["aria-label","color","disabled","size"])):n.createCommentVNode("",!0),n.createVNode(r,n.mergeProps({id:e.id,"aria-valuemax":e.max,"aria-valuemin":e.min,"aria-valuenow":e.modelValue,color:e.color,disabled:e.disabled||!e.editable,inputmode:e.inputmode,max:e.max,min:e.min,"model-value":e.displayValue,placeholder:e.placeholder,size:e.size,step:e.computedStep,class:"neon-number__input",role:"spinbutton",type:"text"},e.sanitizedAttributes,{onBlur:o[1]||(o[1]=l=>e.onBlur()),onFocus:o[2]||(o[2]=l=>e.onFocus()),"onUpdate:modelValue":e.valueChanged,onKeydown:[o[3]||(o[3]=n.withKeys(n.withModifiers(l=>e.increment(),["prevent"]),["up"])),o[4]||(o[4]=n.withKeys(n.withModifiers(l=>e.decrement(),["prevent"]),["down"]))]}),null,16,["id","aria-valuemax","aria-valuemin","aria-valuenow","color","disabled","inputmode","max","min","model-value","placeholder","size","step","onUpdate:modelValue"]),e.spinButtons?(n.openBlock(),n.createBlock(i,{key:1,"aria-label":e.incrementLabel,color:e.color,disabled:e.disabled||e.max!==void 0&&e.max===e.modelValue,size:e.size,"button-style":"outline",class:"neon-number__increment",icon:"plus",onClick:o[5]||(o[5]=l=>e.increment())},null,8,["aria-label","color","disabled","size"])):n.createCommentVNode("",!0)]),_:1},8,["class"])}const t=u(s,[["render",d]]);module.exports=t;
 //# sourceMappingURL=NeonNumber.vue.cjs.js.map

package/dist/components/user-input/number/NeonNumber.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonNumber.vue.cjs.js","sources":["../../../../src/components/user-input/number/NeonNumber.vue"],"sourcesContent":["<template>\n  <neon-field-group\n    :class=\"[\n      `neon-number--${size}`,\n      `neon-number--${color}`,\n      {\n        'neon-number--disabled': disabled,\n        'neon-number--editable': editable,\n        'neon-number--with-buttons': spinButtons,\n      },\n    ]\"\n    class=\"neon-number\"\n    indicator-style=\"external\"\n  >\n    <neon-button\n      v-if=\"spinButtons\"\n      :aria-label=\"decrementLabel\"\n      :color=\"color\"\n      :disabled=\"disabled || (min !== undefined && min === modelValue)\"\n      :size=\"size\"\n      button-style=\"outline\"\n      class=\"neon-number__decrement\"\n      icon=\"minus\"\n      @click=\"decrement()\"\n    />\n    <neon-input\n      :aria-valuemax=\"max\"\n      :aria-valuemin=\"min\"\n      :aria-valuenow=\"modelValue\"\n      :color=\"color\"\n      :disabled=\"disabled || !editable\"\n      :inputmode=\"inputmode\"\n      :max=\"max\"\n      :min=\"min\"\n      :model-value=\"displayValue\"\n      :placeholder=\"placeholder\"\n      :size=\"size\"\n      :step=\"computedStep\"\n      class=\"neon-number__input\"\n      role=\"spinbutton\"\n      type=\"text\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur()\"\n      @focus=\"onFocus()\"\n      @update:modelValue=\"valueChanged\"\n      @keydown.up.prevent=\"increment()\"\n      @keydown.down.prevent=\"decrement()\"\n    />\n    <neon-button\n      v-if=\"spinButtons\"\n      :aria-label=\"incrementLabel\"\n      :color=\"color\"\n      :disabled=\"disabled || (max !== undefined && max === modelValue)\"\n      :size=\"size\"\n      button-style=\"outline\"\n      class=\"neon-number__increment\"\n      icon=\"plus\"\n      @click=\"increment()\"\n    />\n  </neon-field-group>\n</template>\n\n<script lang=\"ts\" src=\"./NeonNumber.ts\" />\n"],"names":["_createBlock","_component_neon_field_group","_normalizeClass","_ctx","_component_neon_button","_createVNode","_component_neon_input","_mergeProps"],"mappings":"wSACEA,EAAAA,YA0DmBC,EAAA,CAzDhB,MAAKC,EAAAA,eAAA,CAAA,iBAA0BC,EAAA,IAAI,mBAA0BA,EAAA,KAAK,4BAA6CA,EAAA,iCAA2CA,EAAA,qCAA+CA,EAAA,cASpM,aAAa,CAAA,EACnB,kBAAgB,+BAEhB,IAUE,CATMA,EAAA,2BADRH,EAAAA,YAUEI,EAAA,OARC,aAAYD,EAAA,eACZ,MAAOA,EAAA,MACP,SAAUA,YAAaA,EAAA,MAAQ,QAAaA,EAAA,MAAQA,EAAA,WACpD,KAAMA,EAAA,KACP,eAAa,UACb,MAAM,yBACN,KAAK,QACJ,uBAAOA,EAAA,4FAEVE,EAAAA,YAsBEC,EAtBFC,aAsBE,CArBC,gBAAeJ,EAAA,IACf,gBAAeA,EAAA,IACf,gBAAeA,EAAA,WACf,MAAOA,EAAA,MACP,SAAUA,EAAA,UAAQ,CAAKA,EAAA,SACvB,UAAWA,EAAA,UACX,IAAKA,EAAA,IACL,IAAKA,EAAA,IACL,cAAaA,EAAA,aACb,YAAaA,EAAA,YACb,KAAMA,EAAA,KACN,KAAMA,EAAA,aACP,MAAM,qBACN,KAAK,aACL,KAAK,QACGA,EAAA,oBAAmB,CAC1B,sBAAMA,EAAA,OAAM,GACZ,uBAAOA,EAAA,QAAO,GACd,sBAAmBA,EAAA,aACnB,UAAO,2CAAaA,EAAA,UAAS,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,IAAA,CAAA,6CACPA,EAAA,UAAS,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,MAAA,CAAA,4KAG1BA,EAAA,2BADRH,EAAAA,YAUEI,EAAA,OARC,aAAYD,EAAA,eACZ,MAAOA,EAAA,MACP,SAAUA,YAAaA,EAAA,MAAQ,QAAaA,EAAA,MAAQA,EAAA,WACpD,KAAMA,EAAA,KACP,eAAa,UACb,MAAM,yBACN,KAAK,OACJ,uBAAOA,EAAA"}
+{"version":3,"file":"NeonNumber.vue.cjs.js","sources":["../../../../src/components/user-input/number/NeonNumber.vue"],"sourcesContent":["<template>\n  <neon-field-group\n    :class=\"[\n      `neon-number--${size}`,\n      `neon-number--${color}`,\n      {\n        'neon-number--disabled': disabled,\n        'neon-number--editable': editable,\n        'neon-number--with-buttons': spinButtons,\n      },\n    ]\"\n    class=\"neon-number\"\n    indicator-style=\"external\"\n  >\n    <neon-button\n      v-if=\"spinButtons\"\n      :aria-label=\"decrementLabel\"\n      :color=\"color\"\n      :disabled=\"disabled || (min !== undefined && min === modelValue)\"\n      :size=\"size\"\n      button-style=\"outline\"\n      class=\"neon-number__decrement\"\n      icon=\"minus\"\n      @click=\"decrement()\"\n    />\n    <neon-input\n      :id=\"id\"\n      :aria-valuemax=\"max\"\n      :aria-valuemin=\"min\"\n      :aria-valuenow=\"modelValue\"\n      :color=\"color\"\n      :disabled=\"disabled || !editable\"\n      :inputmode=\"inputmode\"\n      :max=\"max\"\n      :min=\"min\"\n      :model-value=\"displayValue\"\n      :placeholder=\"placeholder\"\n      :size=\"size\"\n      :step=\"computedStep\"\n      class=\"neon-number__input\"\n      role=\"spinbutton\"\n      type=\"text\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur()\"\n      @focus=\"onFocus()\"\n      @update:modelValue=\"valueChanged\"\n      @keydown.up.prevent=\"increment()\"\n      @keydown.down.prevent=\"decrement()\"\n    />\n    <neon-button\n      v-if=\"spinButtons\"\n      :aria-label=\"incrementLabel\"\n      :color=\"color\"\n      :disabled=\"disabled || (max !== undefined && max === modelValue)\"\n      :size=\"size\"\n      button-style=\"outline\"\n      class=\"neon-number__increment\"\n      icon=\"plus\"\n      @click=\"increment()\"\n    />\n  </neon-field-group>\n</template>\n\n<script lang=\"ts\" src=\"./NeonNumber.ts\" />\n"],"names":["_createBlock","_component_neon_field_group","_normalizeClass","_ctx","_component_neon_button","_createVNode","_component_neon_input","_mergeProps"],"mappings":"wSACEA,EAAAA,YA2DmBC,EAAA,CA1DhB,MAAKC,EAAAA,eAAA,CAAA,iBAA0BC,EAAA,IAAI,mBAA0BA,EAAA,KAAK,4BAA6CA,EAAA,iCAA2CA,EAAA,qCAA+CA,EAAA,cASpM,aAAa,CAAA,EACnB,kBAAgB,+BAEhB,IAUE,CATMA,EAAA,2BADRH,EAAAA,YAUEI,EAAA,OARC,aAAYD,EAAA,eACZ,MAAOA,EAAA,MACP,SAAUA,YAAaA,EAAA,MAAQ,QAAaA,EAAA,MAAQA,EAAA,WACpD,KAAMA,EAAA,KACP,eAAa,UACb,MAAM,yBACN,KAAK,QACJ,uBAAOA,EAAA,4FAEVE,EAAAA,YAuBEC,EAvBFC,aAuBE,CAtBC,GAAIJ,EAAA,GACJ,gBAAeA,EAAA,IACf,gBAAeA,EAAA,IACf,gBAAeA,EAAA,WACf,MAAOA,EAAA,MACP,SAAUA,EAAA,UAAQ,CAAKA,EAAA,SACvB,UAAWA,EAAA,UACX,IAAKA,EAAA,IACL,IAAKA,EAAA,IACL,cAAaA,EAAA,aACb,YAAaA,EAAA,YACb,KAAMA,EAAA,KACN,KAAMA,EAAA,aACP,MAAM,qBACN,KAAK,aACL,KAAK,QACGA,EAAA,oBAAmB,CAC1B,sBAAMA,EAAA,OAAM,GACZ,uBAAOA,EAAA,QAAO,GACd,sBAAmBA,EAAA,aACnB,UAAO,2CAAaA,EAAA,UAAS,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,IAAA,CAAA,6CACPA,EAAA,UAAS,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,MAAA,CAAA,iLAG1BA,EAAA,2BADRH,EAAAA,YAUEI,EAAA,OARC,aAAYD,EAAA,eACZ,MAAOA,EAAA,MACP,SAAUA,YAAaA,EAAA,MAAQ,QAAaA,EAAA,MAAQA,EAAA,WACpD,KAAMA,EAAA,KACP,eAAa,UACb,MAAM,yBACN,KAAK,OACJ,uBAAOA,EAAA"}

package/dist/components/user-input/number/NeonNumber.vue.es.js

@@ -1,5 +1,5 @@
 import p from "./NeonNumber.es.js";
-import { resolveComponent as l, openBlock as i, createBlock as a, normalizeClass as b, withCtx as v, createCommentVNode as s, createVNode as f, mergeProps as z, withKeys as d, withModifiers as u } from "vue";
+import { resolveComponent as l, openBlock as i, createBlock as a, normalizeClass as b, withCtx as v, createCommentVNode as d, createVNode as f, mergeProps as z, withKeys as s, withModifiers as u } from "vue";
 import $ from "../../../_virtual/_plugin-vue_export-helper.es.js";
 function y(e, n, w, V, B, C) {
   const r = l("neon-button"), m = l("neon-input"), t = l("neon-field-group");
@@ -26,8 +26,9 @@ function y(e, n, w, V, B, C) {
         class: "neon-number__decrement",
         icon: "minus",
         onClick: n[0] || (n[0] = (o) => e.decrement())
-      }, null, 8, ["aria-label", "color", "disabled", "size"])) : s("", !0),
+      }, null, 8, ["aria-label", "color", "disabled", "size"])) : d("", !0),
       f(m, z({
+        id: e.id,
         "aria-valuemax": e.max,
         "aria-valuemin": e.min,
         "aria-valuenow": e.modelValue,
@@ -48,10 +49,10 @@ function y(e, n, w, V, B, C) {
         onFocus: n[2] || (n[2] = (o) => e.onFocus()),
         "onUpdate:modelValue": e.valueChanged,
         onKeydown: [
-          n[3] || (n[3] = d(u((o) => e.increment(), ["prevent"]), ["up"])),
-          n[4] || (n[4] = d(u((o) => e.decrement(), ["prevent"]), ["down"]))
+          n[3] || (n[3] = s(u((o) => e.increment(), ["prevent"]), ["up"])),
+          n[4] || (n[4] = s(u((o) => e.decrement(), ["prevent"]), ["down"]))
         ]
-      }), null, 16, ["aria-valuemax", "aria-valuemin", "aria-valuenow", "color", "disabled", "inputmode", "max", "min", "model-value", "placeholder", "size", "step", "onUpdate:modelValue"]),
+      }), null, 16, ["id", "aria-valuemax", "aria-valuemin", "aria-valuenow", "color", "disabled", "inputmode", "max", "min", "model-value", "placeholder", "size", "step", "onUpdate:modelValue"]),
       e.spinButtons ? (i(), a(r, {
         key: 1,
         "aria-label": e.incrementLabel,
@@ -62,7 +63,7 @@ function y(e, n, w, V, B, C) {
         class: "neon-number__increment",
         icon: "plus",
         onClick: n[5] || (n[5] = (o) => e.increment())
-      }, null, 8, ["aria-label", "color", "disabled", "size"])) : s("", !0)
+      }, null, 8, ["aria-label", "color", "disabled", "size"])) : d("", !0)
     ]),
     _: 1
   }, 8, ["class"]);

package/dist/components/user-input/number/NeonNumber.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonNumber.vue.es.js","sources":["../../../../src/components/user-input/number/NeonNumber.vue"],"sourcesContent":["<template>\n  <neon-field-group\n    :class=\"[\n      `neon-number--${size}`,\n      `neon-number--${color}`,\n      {\n        'neon-number--disabled': disabled,\n        'neon-number--editable': editable,\n        'neon-number--with-buttons': spinButtons,\n      },\n    ]\"\n    class=\"neon-number\"\n    indicator-style=\"external\"\n  >\n    <neon-button\n      v-if=\"spinButtons\"\n      :aria-label=\"decrementLabel\"\n      :color=\"color\"\n      :disabled=\"disabled || (min !== undefined && min === modelValue)\"\n      :size=\"size\"\n      button-style=\"outline\"\n      class=\"neon-number__decrement\"\n      icon=\"minus\"\n      @click=\"decrement()\"\n    />\n    <neon-input\n      :aria-valuemax=\"max\"\n      :aria-valuemin=\"min\"\n      :aria-valuenow=\"modelValue\"\n      :color=\"color\"\n      :disabled=\"disabled || !editable\"\n      :inputmode=\"inputmode\"\n      :max=\"max\"\n      :min=\"min\"\n      :model-value=\"displayValue\"\n      :placeholder=\"placeholder\"\n      :size=\"size\"\n      :step=\"computedStep\"\n      class=\"neon-number__input\"\n      role=\"spinbutton\"\n      type=\"text\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur()\"\n      @focus=\"onFocus()\"\n      @update:modelValue=\"valueChanged\"\n      @keydown.up.prevent=\"increment()\"\n      @keydown.down.prevent=\"decrement()\"\n    />\n    <neon-button\n      v-if=\"spinButtons\"\n      :aria-label=\"incrementLabel\"\n      :color=\"color\"\n      :disabled=\"disabled || (max !== undefined && max === modelValue)\"\n      :size=\"size\"\n      button-style=\"outline\"\n      class=\"neon-number__increment\"\n      icon=\"plus\"\n      @click=\"increment()\"\n    />\n  </neon-field-group>\n</template>\n\n<script lang=\"ts\" src=\"./NeonNumber.ts\" />\n"],"names":["_createBlock","_component_neon_field_group","_normalizeClass","_ctx","_component_neon_button","_createVNode","_component_neon_input","_mergeProps"],"mappings":";;;;;cACEA,EA0DmBC,GAAA;AAAA,IAzDhB,OAAKC,EAAA,CAAA;AAAA,sBAA0BC,EAAA,IAAI;AAAA,sBAA0BA,EAAA,KAAK;AAAA;iCAA6CA,EAAA;AAAA,iCAA2CA,EAAA;AAAA,qCAA+CA,EAAA;AAAA;OASpM,aAAa,CAAA;AAAA,IACnB,mBAAgB;AAAA;eAEhB,MAUE;AAAA,MATMA,EAAA,oBADRH,EAUEI,GAAA;AAAA;QARC,cAAYD,EAAA;AAAA,QACZ,OAAOA,EAAA;AAAA,QACP,UAAUA,cAAaA,EAAA,QAAQ,UAAaA,EAAA,QAAQA,EAAA;AAAA,QACpD,MAAMA,EAAA;AAAA,QACP,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,MAAK;AAAA,QACJ,gCAAOA,EAAA;;MAEVE,EAsBEC,GAtBFC,EAsBE;AAAA,QArBC,iBAAeJ,EAAA;AAAA,QACf,iBAAeA,EAAA;AAAA,QACf,iBAAeA,EAAA;AAAA,QACf,OAAOA,EAAA;AAAA,QACP,UAAUA,EAAA,YAAQ,CAAKA,EAAA;AAAA,QACvB,WAAWA,EAAA;AAAA,QACX,KAAKA,EAAA;AAAA,QACL,KAAKA,EAAA;AAAA,QACL,eAAaA,EAAA;AAAA,QACb,aAAaA,EAAA;AAAA,QACb,MAAMA,EAAA;AAAA,QACN,MAAMA,EAAA;AAAA,QACP,OAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAK;AAAA,SACGA,EAAA,qBAAmB;AAAA,QAC1B,+BAAMA,EAAA,OAAM;AAAA,QACZ,gCAAOA,EAAA,QAAO;AAAA,QACd,uBAAmBA,EAAA;AAAA,QACnB,WAAO;AAAA,qCAAaA,EAAA,UAAS,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,IAAA,CAAA;AAAA,qCACPA,EAAA,UAAS,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,MAAA,CAAA;AAAA;;MAG1BA,EAAA,oBADRH,EAUEI,GAAA;AAAA;QARC,cAAYD,EAAA;AAAA,QACZ,OAAOA,EAAA;AAAA,QACP,UAAUA,cAAaA,EAAA,QAAQ,UAAaA,EAAA,QAAQA,EAAA;AAAA,QACpD,MAAMA,EAAA;AAAA,QACP,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,MAAK;AAAA,QACJ,gCAAOA,EAAA;;;;;;;"}
+{"version":3,"file":"NeonNumber.vue.es.js","sources":["../../../../src/components/user-input/number/NeonNumber.vue"],"sourcesContent":["<template>\n  <neon-field-group\n    :class=\"[\n      `neon-number--${size}`,\n      `neon-number--${color}`,\n      {\n        'neon-number--disabled': disabled,\n        'neon-number--editable': editable,\n        'neon-number--with-buttons': spinButtons,\n      },\n    ]\"\n    class=\"neon-number\"\n    indicator-style=\"external\"\n  >\n    <neon-button\n      v-if=\"spinButtons\"\n      :aria-label=\"decrementLabel\"\n      :color=\"color\"\n      :disabled=\"disabled || (min !== undefined && min === modelValue)\"\n      :size=\"size\"\n      button-style=\"outline\"\n      class=\"neon-number__decrement\"\n      icon=\"minus\"\n      @click=\"decrement()\"\n    />\n    <neon-input\n      :id=\"id\"\n      :aria-valuemax=\"max\"\n      :aria-valuemin=\"min\"\n      :aria-valuenow=\"modelValue\"\n      :color=\"color\"\n      :disabled=\"disabled || !editable\"\n      :inputmode=\"inputmode\"\n      :max=\"max\"\n      :min=\"min\"\n      :model-value=\"displayValue\"\n      :placeholder=\"placeholder\"\n      :size=\"size\"\n      :step=\"computedStep\"\n      class=\"neon-number__input\"\n      role=\"spinbutton\"\n      type=\"text\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur()\"\n      @focus=\"onFocus()\"\n      @update:modelValue=\"valueChanged\"\n      @keydown.up.prevent=\"increment()\"\n      @keydown.down.prevent=\"decrement()\"\n    />\n    <neon-button\n      v-if=\"spinButtons\"\n      :aria-label=\"incrementLabel\"\n      :color=\"color\"\n      :disabled=\"disabled || (max !== undefined && max === modelValue)\"\n      :size=\"size\"\n      button-style=\"outline\"\n      class=\"neon-number__increment\"\n      icon=\"plus\"\n      @click=\"increment()\"\n    />\n  </neon-field-group>\n</template>\n\n<script lang=\"ts\" src=\"./NeonNumber.ts\" />\n"],"names":["_createBlock","_component_neon_field_group","_normalizeClass","_ctx","_component_neon_button","_createVNode","_component_neon_input","_mergeProps"],"mappings":";;;;;cACEA,EA2DmBC,GAAA;AAAA,IA1DhB,OAAKC,EAAA,CAAA;AAAA,sBAA0BC,EAAA,IAAI;AAAA,sBAA0BA,EAAA,KAAK;AAAA;iCAA6CA,EAAA;AAAA,iCAA2CA,EAAA;AAAA,qCAA+CA,EAAA;AAAA;OASpM,aAAa,CAAA;AAAA,IACnB,mBAAgB;AAAA;eAEhB,MAUE;AAAA,MATMA,EAAA,oBADRH,EAUEI,GAAA;AAAA;QARC,cAAYD,EAAA;AAAA,QACZ,OAAOA,EAAA;AAAA,QACP,UAAUA,cAAaA,EAAA,QAAQ,UAAaA,EAAA,QAAQA,EAAA;AAAA,QACpD,MAAMA,EAAA;AAAA,QACP,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,MAAK;AAAA,QACJ,gCAAOA,EAAA;;MAEVE,EAuBEC,GAvBFC,EAuBE;AAAA,QAtBC,IAAIJ,EAAA;AAAA,QACJ,iBAAeA,EAAA;AAAA,QACf,iBAAeA,EAAA;AAAA,QACf,iBAAeA,EAAA;AAAA,QACf,OAAOA,EAAA;AAAA,QACP,UAAUA,EAAA,YAAQ,CAAKA,EAAA;AAAA,QACvB,WAAWA,EAAA;AAAA,QACX,KAAKA,EAAA;AAAA,QACL,KAAKA,EAAA;AAAA,QACL,eAAaA,EAAA;AAAA,QACb,aAAaA,EAAA;AAAA,QACb,MAAMA,EAAA;AAAA,QACN,MAAMA,EAAA;AAAA,QACP,OAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAK;AAAA,SACGA,EAAA,qBAAmB;AAAA,QAC1B,+BAAMA,EAAA,OAAM;AAAA,QACZ,gCAAOA,EAAA,QAAO;AAAA,QACd,uBAAmBA,EAAA;AAAA,QACnB,WAAO;AAAA,qCAAaA,EAAA,UAAS,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,IAAA,CAAA;AAAA,qCACPA,EAAA,UAAS,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,MAAA,CAAA;AAAA;;MAG1BA,EAAA,oBADRH,EAUEI,GAAA;AAAA;QARC,cAAYD,EAAA;AAAA,QACZ,OAAOA,EAAA;AAAA,QACP,UAAUA,cAAaA,EAAA,QAAQ,UAAaA,EAAA,QAAQA,EAAA;AAAA,QACpD,MAAMA,EAAA;AAAA,QACP,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,MAAK;AAAA,QACJ,gCAAOA,EAAA;;;;;;;"}

package/dist/src/common/enums/NeonFunctionalColor.d.ts

@@ -14,6 +14,8 @@ export declare enum NeonFunctionalColor {
     HighContrast = "high-contrast",
     /** Brand is the main brand color palette, this is useful for branded CTAs, text & controls. */
     Brand = "brand",
+    /** Accent is an alternative brand accent palette used when multiple brand colors are required */
+    Accent = "accent",
     /** Primary is the main application color palette. For most applications this will be used by default. */
     Primary = "primary",
     /** Info can be used to convey informational context, e.g. notes & alerts */

package/dist/src/components/user-input/number/NeonNumber.d.ts

@@ -10,6 +10,13 @@ import { NeonInputMode } from '@/common/enums/NeonInputMode';
  * <p><strong>NeonNumber</strong> supports all the properties found on an HTML &lt;input&gt;.</p>
  */
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /**
+     * The id the input
+     */
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
     /**
      * The value of the number input. Either a valid number or null.
      */
@@ -146,6 +153,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onFocus: () => boolean;
     onBlur: () => boolean;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The id the input
+     */
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
     /**
      * The value of the number input. Either a valid number or null.
      */
@@ -274,6 +288,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     locale: string;
     size: NeonSize;
     color: NeonFunctionalColor;
+    id: string;
     placeholder: string;
     inputmode: NeonInputMode;
     modelValue: number;
@@ -316,7 +331,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         iconPosition: {
             type: () => import("../../../neon").NeonHorizontalPosition;
-            default: import("../../../neon").NeonHorizontalPosition;
+            default: import("../../../neon").NeonHorizontalPosition; /**
+             * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.
+             */
         };
         buttonStyle: {
             type: () => import("../../../neon").NeonButtonStyle;
@@ -332,8 +349,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         disabled: {
             type: BooleanConstructor;
-            default: boolean;
-        };
+            default: boolean; /**
+             * The HTML inputmode of the component. Either 'numeric' or 'decimal'.
+             */
+        }; /**
+         * The HTML inputmode of the component. Either 'numeric' or 'decimal'.
+         */
         transparent: {
             type: BooleanConstructor;
             default: boolean;
@@ -415,7 +436,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         iconPosition: {
             type: () => import("../../../neon").NeonHorizontalPosition;
-            default: import("../../../neon").NeonHorizontalPosition;
+            default: import("../../../neon").NeonHorizontalPosition; /**
+             * Show/hide spin buttons. NOTE: The user can still use up/down arrow keys when the input has focus.
+             */
         };
         buttonStyle: {
             type: () => import("../../../neon").NeonButtonStyle;
@@ -431,8 +454,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         disabled: {
             type: BooleanConstructor;
-            default: boolean;
-        };
+            default: boolean; /**
+             * The HTML inputmode of the component. Either 'numeric' or 'decimal'.
+             */
+        }; /**
+         * The HTML inputmode of the component. Either 'numeric' or 'decimal'.
+         */
         transparent: {
             type: BooleanConstructor;
             default: boolean;
@@ -531,25 +558,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             color: {
                 type: () => NeonFunctionalColor;
                 default: null;
-            }; /**
-             * Placeholder text to display in the input
-             */
+            };
             inverse: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Whether the component is disabled.
-                 */
-            }; /**
-             * Whether the component is disabled.
-             */
+                default: boolean;
+            };
             disabled: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Enable/disable direct editing of the value.
-                 */
-            }; /**
-             * Enable/disable direct editing of the value.
-             */
+                default: boolean;
+            };
         }>, {
             sanitizedAttributes: import("vue").ComputedRef<{
                 [x: string]: unknown;
@@ -567,25 +584,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             color: {
                 type: () => NeonFunctionalColor;
                 default: null;
-            }; /**
-             * Placeholder text to display in the input
-             */
+            };
             inverse: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Whether the component is disabled.
-                 */
-            }; /**
-             * Whether the component is disabled.
-             */
+                default: boolean;
+            };
             disabled: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Enable/disable direct editing of the value.
-                 */
-            }; /**
-             * Enable/disable direct editing of the value.
-             */
+                default: boolean;
+            };
         }>> & Readonly<{}>, {
             disabled: boolean;
             color: NeonFunctionalColor;
@@ -604,10 +611,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             outlineStyle: {
                 type: () => import("../../../neon").NeonOutlineStyle;
                 default: import("../../../neon").NeonOutlineStyle; /**
-                 * The value of the number input. Either a valid number or null.
+                 * The id the input
                  */
             }; /**
-             * The value of the number input. Either a valid number or null.
+             * The id the input
              */
             externalIndicator: {
                 type: BooleanConstructor;
@@ -635,10 +642,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             outlineStyle: {
                 type: () => import("../../../neon").NeonOutlineStyle;
                 default: import("../../../neon").NeonOutlineStyle; /**
-                 * The value of the number input. Either a valid number or null.
+                 * The id the input
                  */
             }; /**
-             * The value of the number input. Either a valid number or null.
+             * The id the input
              */
             externalIndicator: {
                 type: BooleanConstructor;
@@ -664,25 +671,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 color: {
                     type: () => NeonFunctionalColor;
                     default: null;
-                }; /**
-                 * Placeholder text to display in the input
-                 */
+                };
                 inverse: {
                     type: BooleanConstructor;
-                    default: boolean; /**
-                     * Whether the component is disabled.
-                     */
-                }; /**
-                 * Whether the component is disabled.
-                 */
+                    default: boolean;
+                };
                 disabled: {
                     type: BooleanConstructor;
-                    default: boolean; /**
-                     * Enable/disable direct editing of the value.
-                     */
-                }; /**
-                 * Enable/disable direct editing of the value.
-                 */
+                    default: boolean;
+                };
             }>, {
                 sanitizedAttributes: import("vue").ComputedRef<{
                     [x: string]: unknown;
@@ -700,25 +697,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 color: {
                     type: () => NeonFunctionalColor;
                     default: null;
-                }; /**
-                 * Placeholder text to display in the input
-                 */
+                };
                 inverse: {
                     type: BooleanConstructor;
-                    default: boolean; /**
-                     * Whether the component is disabled.
-                     */
-                }; /**
-                 * Whether the component is disabled.
-                 */
+                    default: boolean;
+                };
                 disabled: {
                     type: BooleanConstructor;
-                    default: boolean; /**
-                     * Enable/disable direct editing of the value.
-                     */
-                }; /**
-                 * Enable/disable direct editing of the value.
-                 */
+                    default: boolean;
+                };
             }>> & Readonly<{}>, {
                 disabled: boolean;
                 color: NeonFunctionalColor;
@@ -789,10 +776,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         autocomplete: {
             type: StringConstructor;
+            /**
+             * Whether the component is disabled.
+             */
             default: string;
         };
         state: {
-            type: () => import("../../../neon").NeonState;
+            type: () => import("../../../neon").NeonState; /**
+             * Enable/disable direct editing of the value.
+             */
             default: import("../../../neon").NeonState;
         };
         rows: {
@@ -802,7 +794,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         icon: {
             type: StringConstructor;
             default: null;
-        };
+        }; /**
+         * The rounding precision for display formatting.
+         */
         iconReadonly: {
             type: BooleanConstructor;
             default: boolean;
@@ -888,10 +882,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         autocomplete: {
             type: StringConstructor;
+            /**
+             * Whether the component is disabled.
+             */
             default: string;
         };
         state: {
-            type: () => import("../../../neon").NeonState;
+            type: () => import("../../../neon").NeonState; /**
+             * Enable/disable direct editing of the value.
+             */
             default: import("../../../neon").NeonState;
         };
         rows: {
@@ -901,7 +900,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         icon: {
             type: StringConstructor;
             default: null;
-        };
+        }; /**
+         * The rounding precision for display formatting.
+         */
         iconReadonly: {
             type: BooleanConstructor;
             default: boolean;
@@ -977,25 +978,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             color: {
                 type: () => NeonFunctionalColor;
                 default: null;
-            }; /**
-             * Placeholder text to display in the input
-             */
+            };
             inverse: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Whether the component is disabled.
-                 */
-            }; /**
-             * Whether the component is disabled.
-             */
+                default: boolean;
+            };
             disabled: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Enable/disable direct editing of the value.
-                 */
-            }; /**
-             * Enable/disable direct editing of the value.
-             */
+                default: boolean;
+            };
         }>, {
             sanitizedAttributes: import("vue").ComputedRef<{
                 [x: string]: unknown;
@@ -1013,25 +1004,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             color: {
                 type: () => NeonFunctionalColor;
                 default: null;
-            }; /**
-             * Placeholder text to display in the input
-             */
+            };
             inverse: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Whether the component is disabled.
-                 */
-            }; /**
-             * Whether the component is disabled.
-             */
+                default: boolean;
+            };
             disabled: {
                 type: BooleanConstructor;
-                default: boolean; /**
-                 * Enable/disable direct editing of the value.
-                 */
-            }; /**
-             * Enable/disable direct editing of the value.
-             */
+                default: boolean;
+            };
         }>> & Readonly<{}>, {
             disabled: boolean;
             color: 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": "23.2.5",
+  "version": "23.3.0",
   "main": "./dist/neon.cjs.js",
   "module": "./dist/neon.es.js",
   "types": "./dist/src/neon.d.ts",

package/src/sass/color-variables.scss

@@ -59,6 +59,17 @@
   --neon-color-brand-d4: rgb(var(--neon-rgb-brand-d4));
   --neon-color-brand-d5: rgb(var(--neon-rgb-brand-d5));
 
+  --neon-color-accent-l5: rgb(var(--neon-rgb-accent-l5));
+  --neon-color-accent-l4: rgb(var(--neon-rgb-accent-l4));
+  --neon-color-accent-l3: rgb(var(--neon-rgb-accent-l3));
+  --neon-color-accent-l2: rgb(var(--neon-rgb-accent-l2));
+  --neon-color-accent-l1: rgb(var(--neon-rgb-accent-l1));
+  --neon-color-accent-d1: rgb(var(--neon-rgb-accent-d1));
+  --neon-color-accent-d2: rgb(var(--neon-rgb-accent-d2));
+  --neon-color-accent-d3: rgb(var(--neon-rgb-accent-d3));
+  --neon-color-accent-d4: rgb(var(--neon-rgb-accent-d4));
+  --neon-color-accent-d5: rgb(var(--neon-rgb-accent-d5));
+
   --neon-color-primary-l5: rgb(var(--neon-rgb-primary-l5));
   --neon-color-primary-l4: rgb(var(--neon-rgb-primary-l4));
   --neon-color-primary-l3: rgb(var(--neon-rgb-primary-l3));

package/src/sass/components/_button.scss

@@ -105,6 +105,7 @@
 
 @mixin button-small {
   height: var(--neon-size-s);
+  min-height: var(--neon-size-s);
   font-size: var(--neon-font-size-s);
   line-height: var(--neon-line-height-one);
   padding: 0 calc(0.75 * (var(--neon-size-s) - var(--neon-font-size-s)));
@@ -131,6 +132,7 @@
 
 @mixin button-medium {
   height: var(--neon-size-m);
+  min-height: var(--neon-size-m);
   font-size: var(--neon-font-size-m);
   line-height: var(--neon-line-height-one);
   padding: 0 calc(0.75 * (var(--neon-size-m) - var(--neon-font-size-m)));
@@ -157,6 +159,7 @@
 
 @mixin button-large {
   height: var(--neon-size-l);
+  min-height: var(--neon-size-l);
   font-size: var(--neon-font-size-m);
   line-height: var(--neon-line-height-one);
   padding: 0 calc(0.75 * (var(--neon-size-l) - var(--neon-font-size-m)));
@@ -191,7 +194,7 @@
     margin-right: 0;
     cursor: pointer;
     text-decoration: none;
-    font-family: var(--neon-font-family-body);
+    font-family: var(--neon-font-family-button);
 
     &--s {
       @include button-small;

package/src/sass/components/_date-picker.scss

@@ -21,6 +21,8 @@
       width: 100%;
 
       &__button .neon-button__label {
+        --neon-text-transform-button: none;
+        --neon-font-family-button: var(--neon-font-family-body);
         font-variant: tabular-nums;
       }
     }

package/src/sass/components/_menu.scss

@@ -4,7 +4,7 @@
 @mixin neon-menu-size($size) {
   .neon-menu__item {
     height: 100%;
-    font-size: var(--neon-font-size-#{$size});
+    font-size: var(--neon-font-size-menu);
     align-items: center;
     display: flex;
 
@@ -22,13 +22,14 @@
         position: relative;
         gap: var(--neon-space-12);
         font-family: var(--neon-font-family-menu);
+        text-transform: var(--neon-text-transform-menu);
         font-weight: var(--neon-font-weight-menu);
-        @include svg.color-with-svg(var(--neon-color-text-tertiary));
+        @include svg.color-with-svg(var(--neon-color-menu));
 
         &,
         .neon-svg--stroke,
         .neon-svg--fill {
-          transition: color ease-in-out var(--neon-animation-speed-slow);
+          transition: color ease-in-out var(--neon-animation-speed-fastest);
         }
 
         &:before {
@@ -39,7 +40,7 @@
           width: 100%;
           opacity: 0;
           height: var(--neon-height-menu-indicator);
-          transition: opacity ease-in-out var(--neon-animation-speed-slow);
+          transition: opacity ease-in-out var(--neon-animation-speed-fastest);
         }
       }
     }
@@ -48,7 +49,7 @@
       .neon-link {
         &:hover {
           .neon-menu__link-container {
-            @include svg.color-with-svg(var(--neon-color-text-primary));
+            @include svg.color-with-svg(var(--neon-color-menu-active));
 
             &:before {
               opacity: 1;
@@ -59,13 +60,13 @@
 
         &:focus {
           .neon-menu__link-container {
-            @include svg.color-with-svg(var(--neon-color-text-primary));
+            @include svg.color-with-svg(var(--neon-color-menu-active));
           }
         }
 
         &.router-link-active {
           .neon-menu__link-container {
-            @include svg.color-with-svg(var(--neon-color-text-primary));
+            @include svg.color-with-svg(var(--neon-color-menu-active));
 
             &:before {
               opacity: 1;
@@ -182,7 +183,8 @@
     }
 
     &__responsive-menu {
-      font-family: var(--neon-font-family-heading);
+      font-family: var(--neon-font-family-menu);
+      text-transform: var(--neon-text-transform-menu);
 
       &.neon-menu__responsive-menu:not(:first-child) {
         margin-left: calc(5 * var(--neon-base-space));
@@ -213,7 +215,8 @@
         &__label {
           display: flex;
           align-items: center;
-          font-family: var(--neon-font-family-heading);
+          font-family: var(--neon-font-family-menu);
+          text-transform: var(--neon-text-transform-menu);
         }
       }
 
@@ -225,21 +228,25 @@
       }
 
       .neon-dropdown .neon-dropdown__button {
-        font-family: var(--neon-font-family-heading);
+        font-family: var(--neon-font-family-menu);
+        text-transform: var(--neon-text-transform-menu);
         font-weight: var(--neon-font-weight-normal);
         letter-spacing: var(--neon-letter-spacing-m);
       }
     }
 
     &.neon-menu--s {
+      --neon-font-size-menu: var(--neon-font-size-menu-s);
       @include neon-menu-size('s');
     }
 
     &.neon-menu--m {
+      --neon-font-size-menu: var(--neon-font-size-menu-m);
       @include neon-menu-size('m');
     }
 
     &.neon-menu--l {
+      --neon-font-size-menu: var(--neon-font-size-menu-l);
       @include neon-menu-size('l');
     }
   }

package/src/sass/components/_mobile-menu.scss

@@ -26,12 +26,12 @@
           font-size: var(--neon-font-size-mobile-menu);
           line-height: var(--neon-line-height-mobile-menu);
           font-weight: var(--neon-font-weight-mobile-menu);
-          @include svg.color-with-svg(var(--neon-color-text-tertiary));
+          @include svg.color-with-svg(var(--neon-color-mobile-menu));
 
           &,
           .neon-svg--stroke,
           .neon-svg--fill {
-            transition: color ease-in-out var(--neon-animation-speed-slow);
+            transition: color ease-in-out var(--neon-animation-speed-fastest);
           }
 
           &:before {
@@ -42,7 +42,7 @@
             width: 100%;
             opacity: 0;
             height: var(--neon-height-mobile-menu-indicator);
-            transition: opacity ease-in-out var(--neon-animation-speed-slow);
+            transition: color ease-in-out var(--neon-animation-speed-fastest);
           }
         }
       }
@@ -51,7 +51,7 @@
         .neon-link {
           &:hover {
             .neon-mobile-menu__link-container {
-              @include svg.color-with-svg(var(--neon-color-text-primary));
+              @include svg.color-with-svg(var(--neon-color-mobile-menu-active));
 
               &:before {
                 opacity: 1;
@@ -61,13 +61,13 @@
 
           &:focus {
             .neon-mobile-menu__link-container {
-              @include svg.color-with-svg(var(--neon-color-text-primary));
+              @include svg.color-with-svg(var(--neon-color-mobile-menu-active));
             }
           }
 
           &.router-link-active {
             .neon-mobile-menu__link-container {
-              @include svg.color-with-svg(var(--neon-color-text-primary));
+              @include svg.color-with-svg(var(--neon-color-mobile-menu-active));
 
               &:before {
                 opacity: 1;

package/src/sass/components/_select.scss

@@ -11,6 +11,8 @@
     }
 
     .neon-dropdown__button {
+      --neon-text-transform-button: none;
+      --neon-font-family-button: var(--neon-font-family-body);
       padding-left: var(--neon-space-8);
       font-weight: var(--neon-font-weight-input);
 

package/src/sass/components/_stepper.scss

@@ -121,13 +121,6 @@
           }
         }
 
-        .neon-stepper__step--active, {
-          .neon-stepper__step-title {
-            font-weight: var(--neon-font-weight-semi-bold);
-            color: var(--neon-color-#{$color});
-          }
-        }
-
         .neon-stepper__step--display-stepper {
           &:not(:first-child) {
             &:before {

package/src/sass/global/_base-html.scss

@@ -167,6 +167,10 @@
     color: var(--neon-color-brand);
   }
 
+  .neon-color-accent {
+    color: var(--neon-color-accent);
+  }
+
   .neon-color-primary {
     color: var(--neon-color-primary);
   }

package/src/sass/global/_typography.scss

@@ -7,6 +7,10 @@
     font-weight: var(--neon-font-weight-body);
     font-size: 16px;
     line-height: var(--neon-line-height-ratio);
+
+    @include responsive.responsive(mobile-large) {
+      font-size: 17px; // don't use rems here - body font must be defined in pixels
+    }
   }
 
   p {

package/src/sass/includes/_palettes.scss

@@ -3,6 +3,7 @@ $neon-functional-colors: (
         low-contrast,
         high-contrast,
         brand,
+        accent,
         primary,
         info,
         success,
@@ -15,6 +16,7 @@ $neon-button-colors: (
         low-contrast,
         high-contrast,
         brand,
+        accent,
         primary,
         info,
         success,

package/src/sass/palette.scss

@@ -55,6 +55,16 @@
   --neon-rgb-brand-d3: 87, 40, 119;
   --neon-rgb-brand-d4: 56, 30, 74;
   --neon-rgb-brand-d5: 33, 25, 37;
+  --neon-rgb-accent-l5: 255, 238, 250;
+  --neon-rgb-accent-l4: 255, 204, 239;
+  --neon-rgb-accent-l3: 255, 171, 227;
+  --neon-rgb-accent-l2: 251, 140, 212;
+  --neon-rgb-accent-l1: 239, 108, 196;
+  --neon-rgb-accent-d1: 171, 41, 134;
+  --neon-rgb-accent-d2: 145, 40, 114;
+  --neon-rgb-accent-d3: 110, 31, 86;
+  --neon-rgb-accent-d4: 70, 25, 55;
+  --neon-rgb-accent-d5: 38, 23, 32;
   --neon-rgb-primary-l5: 245, 241, 255;
   --neon-rgb-primary-l4: 222, 214, 255;
   --neon-rgb-primary-l3: 197, 187, 255;

package/src/sass/theme.scss

@@ -15,6 +15,7 @@ $neon-components: null !default;
 @include color-mixins.generate-color-classes('low-contrast');
 @include color-mixins.generate-color-classes('high-contrast');
 @include color-mixins.generate-color-classes('brand');
+@include color-mixins.generate-color-classes('accent');
 @include color-mixins.generate-color-classes('primary');
 @include color-mixins.generate-color-classes('info');
 @include color-mixins.generate-color-classes('success');

package/src/sass/variables.scss

@@ -2,12 +2,6 @@
 @import './palette';
 @import './color-variables';
 
-@include responsive.responsive(mobile-large) {
-  body {
-    font-size: 17px; // don't use rems here - body font must be defined in pixels
-  }
-}
-
 .neon {
   /*********************
   * Global Variables
@@ -290,7 +284,11 @@
   /* menu */
   --neon-font-family-menu: var(--neon-font-family-body);
   --neon-font-weight-menu: var(--neon-font-weight-bold);
+  --neon-text-transform-menu: none;
   --neon-height-menu-indicator: 4rem;
+  --neon-font-size-menu-s: var(--neon-font-size-s);
+  --neon-font-size-menu-m: var(--neon-font-size-m);
+  --neon-font-size-menu-l: var(--neon-font-size-l);
 
   /* mobile menu */
   --neon-font-family-mobile-menu: var(--neon-font-family-body);
@@ -309,6 +307,7 @@
   --neon-border-radius-button-xl: var(--neon-border-radius);
   --neon-border-width-outline-button: 1rem;
   --neon-text-transform-button: none;
+  --neon-font-family-button: var(--neon-font-family-body);
   --neon-font-weight-button: var(--neon-font-weight-medium);
   --neon-letter-spacing-button: var(--neon-letter-spacing-m);
 
@@ -479,6 +478,7 @@
     --neon-rgb-neutral: var(--neon-rgb-neutral-l1);
     --neon-rgb-high-contrast: var(--neon-rgb-high-contrast-l1);
     --neon-rgb-brand: var(--neon-rgb-brand-l1);
+    --neon-rgb-accent: var(--neon-rgb-accent-l1);
     --neon-rgb-primary: var(--neon-rgb-primary-l1);
     --neon-rgb-info: var(--neon-rgb-info-l1);
     --neon-rgb-success: var(--neon-rgb-success-l1);
@@ -489,6 +489,7 @@
     --neon-color-neutral: var(--neon-color-neutral-l1);
     --neon-color-high-contrast: var(--neon-color-high-contrast-l1);
     --neon-color-brand: var(--neon-color-brand-l1);
+    --neon-color-accent: var(--neon-color-accent-l1);
     --neon-color-primary: var(--neon-color-primary-l1);
     --neon-color-info: var(--neon-color-info-l1);
     --neon-color-success: var(--neon-color-success-l1);
@@ -500,6 +501,7 @@
     --neon-background-color-neutral: var(--neon-color-neutral-d1);
     --neon-background-color-high-contrast: var(--neon-color-high-contrast-d1);
     --neon-background-color-brand: var(--neon-color-brand-d1);
+    --neon-background-color-accent: var(--neon-color-accent-d1);
     --neon-background-color-primary: var(--neon-color-primary-d1);
     --neon-background-color-info: var(--neon-color-info-d1);
     --neon-background-color-success: var(--neon-color-success-d1);
@@ -551,6 +553,10 @@
     --neon-background-rgb-solid-button-dark-brand: var(--neon-rgb-brand-l1);
     --neon-background-solid-button-dark-brand: var(--neon-color-brand-l1);
 
+    --neon-background-solid-button-light-accent: var(--neon-color-accent-l2);
+    --neon-background-rgb-solid-button-dark-accent: var(--neon-rgb-accent-l1);
+    --neon-background-solid-button-dark-accent: var(--neon-color-accent-l1);
+
     --neon-background-solid-button-light-primary: var(--neon-color-primary-l2);
     --neon-background-rgb-solid-button-dark-primary: var(--neon-rgb-primary-l1);
     --neon-background-solid-button-dark-primary: var(--neon-color-primary-l1);
@@ -587,6 +593,9 @@
     --neon-background-outline-button-hover-brand: var(--neon-color-brand-l2);
     --neon-background-outline-button-active-brand: var(--neon-color-brand-l1);
 
+    --neon-background-outline-button-hover-accent: var(--neon-color-accent-l2);
+    --neon-background-outline-button-active-accent: var(--neon-color-accent-l1);
+
     --neon-background-outline-button-hover-primary: var(--neon-color-primary-l2);
     --neon-background-outline-button-active-primary: var(--neon-color-primary-l1);
 
@@ -620,9 +629,15 @@
     /* action menu */
     --neon-color-action-menu-hover: var(--neon-color-neutral-d3);
 
+    /* menu */
+    --neon-color-menu: var(--neon-color-text-tertiary);
+    --neon-color-menu-active: var(--neon-color-text-primary);
+
     /* mobile menu */
     --neon-border-top-mobile-menu: var(--neon-height-mobile-menu-indicator) var(--neon-border-style) var(--neon-border-color);
     --neon-background-color-mobile-menu: var(--neon-background-color-card);
+    --neon-color-mobile-menu: var(--neon-color-text-tertiary);
+    --neon-color-mobile-menu-active: var(--neon-color-text-primary);
 
     /* selection */
     --neon-background-rgb-selection: var(--neon-rgb-info-l1);
@@ -700,6 +715,7 @@
     --neon-color-tab-selected-neutral: var(--neon-color-neutral-l1);
     --neon-color-tab-selected-high-contrast: var(--neon-color-high-contrast-l1);
     --neon-color-tab-selected-brand: var(--neon-color-brand-l1);
+    --neon-color-tab-selected-accent: var(--neon-color-accent-l1);
     --neon-color-tab-selected-primary: var(--neon-color-primary-l1);
     --neon-color-tab-selected-info: var(--neon-color-info-l1);
     --neon-color-tab-selected-success: var(--neon-color-success-l1);
@@ -709,6 +725,7 @@
     --neon-color-tab-hover-neutral: var(--neon-color-neutral-l2);
     --neon-color-tab-hover-high-contrast: var(--neon-color-high-contrast-l2);
     --neon-color-tab-hover-brand: var(--neon-color-brand-l2);
+    --neon-color-tab-hover-accent: var(--neon-color-accent-l2);
     --neon-color-tab-hover-primary: var(--neon-color-primary-l2);
     --neon-color-tab-hover-info: var(--neon-color-info-l2);
     --neon-color-tab-hover-success: var(--neon-color-success-l2);
@@ -801,6 +818,7 @@
     --neon-rgb-neutral: var(--neon-rgb-neutral-d1);
     --neon-rgb-high-contrast: var(--neon-rgb-high-contrast-d1);
     --neon-rgb-brand: var(--neon-rgb-brand-d1);
+    --neon-rgb-accent: var(--neon-rgb-accent-d1);
     --neon-rgb-primary: var(--neon-rgb-primary-d1);
     --neon-rgb-info: var(--neon-rgb-info-d1);
     --neon-rgb-success: var(--neon-rgb-success-d1);
@@ -811,6 +829,7 @@
     --neon-color-neutral: var(--neon-color-neutral-d1);
     --neon-color-high-contrast: var(--neon-color-high-contrast-d1);
     --neon-color-brand: var(--neon-color-brand-d1);
+    --neon-color-accent: var(--neon-color-accent-d1);
     --neon-color-primary: var(--neon-color-primary-d1);
     --neon-color-info: var(--neon-color-info-d1);
     --neon-color-success: var(--neon-color-success-d1);
@@ -822,6 +841,7 @@
     --neon-background-color-neutral: var(--neon-color-neutral-l1);
     --neon-background-color-high-contrast: var(--neon-color-high-contrast-l1);
     --neon-background-color-brand: var(--neon-color-brand-l1);
+    --neon-background-color-accent: var(--neon-color-accent-l1);
     --neon-background-color-primary: var(--neon-color-primary-l1);
     --neon-background-color-info: var(--neon-color-info-l1);
     --neon-background-color-success: var(--neon-color-success-l1);
@@ -873,6 +893,10 @@
     --neon-background-rgb-solid-button-dark-brand: var(--neon-rgb-brand-d2);
     --neon-background-solid-button-dark-brand: var(--neon-color-brand-d2);
 
+    --neon-background-solid-button-light-accent: var(--neon-color-accent-d1);
+    --neon-background-rgb-solid-button-dark-accent: var(--neon-rgb-accent-d2);
+    --neon-background-solid-button-dark-accent: var(--neon-color-accent-d2);
+
     --neon-background-solid-button-light-primary: var(--neon-color-primary-d1);
     --neon-background-rgb-solid-button-dark-primary: var(--neon-rgb-primary-d2);
     --neon-background-solid-button-dark-primary: var(--neon-color-primary-d2);
@@ -909,6 +933,9 @@
     --neon-background-outline-button-hover-brand: var(--neon-color-brand-d1);
     --neon-background-outline-button-active-brand: var(--neon-color-brand-d2);
 
+    --neon-background-outline-button-hover-accent: var(--neon-color-accent-d1);
+    --neon-background-outline-button-active-accent: var(--neon-color-accent-d2);
+
     --neon-background-outline-button-hover-primary: var(--neon-color-primary-d1);
     --neon-background-outline-button-active-primary: var(--neon-color-primary-d2);
 
@@ -942,9 +969,15 @@
     /* action menu */
     --neon-color-action-menu-hover: var(--neon-color-neutral-l4);
 
+    /* menu */
+    --neon-color-menu: var(--neon-color-text-tertiary);
+    --neon-color-menu-active: var(--neon-color-text-primary);
+
     /* mobile menu */
     --neon-border-top-mobile-menu: var(--neon-height-mobile-menu-indicator) var(--neon-border-style) var(--neon-border-color);
     --neon-background-color-mobile-menu: var(--neon-background-color-card);
+    --neon-color-mobile-menu: var(--neon-color-text-tertiary);
+    --neon-color-mobile-menu-active: var(--neon-color-text-primary);
 
     /* selection */
     --neon-background-rgb-selection: var(--neon-rgb-info-d1);
@@ -1022,6 +1055,7 @@
     --neon-color-tab-selected-neutral: var(--neon-color-neutral-d2);
     --neon-color-tab-selected-high-contrast: var(--neon-color-high-contrast-d2);
     --neon-color-tab-selected-brand: var(--neon-color-brand-d2);
+    --neon-color-tab-selected-accent: var(--neon-color-accent-d2);
     --neon-color-tab-selected-primary: var(--neon-color-primary-d2);
     --neon-color-tab-selected-info: var(--neon-color-info-d2);
     --neon-color-tab-selected-success: var(--neon-color-success-d2);
@@ -1031,6 +1065,7 @@
     --neon-color-tab-hover-neutral: var(--neon-color-neutral-d1);
     --neon-color-tab-hover-high-contrast: var(--neon-color-high-contrast-d1);
     --neon-color-tab-hover-brand: var(--neon-color-brand-d1);
+    --neon-color-tab-hover-accent: var(--neon-color-accent-d1);
     --neon-color-tab-hover-primary: var(--neon-color-primary-d1);
     --neon-color-tab-hover-info: var(--neon-color-info-d1);
     --neon-color-tab-hover-success: var(--neon-color-success-d1);