@aotearoan/neon 22.2.0 → 22.4.0

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

@@ -1 +1 @@
-{"version":3,"file":"NeonImageCarousel.vue.es.js","sources":["../../../../src/components/presentation/image-carousel/NeonImageCarousel.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{ 'neon-image-carousel--initialised': initialised }\"\n    class=\"neon-image-carousel\"\n    tabindex=\"0\"\n    @keydown.stop.prevent.left=\"previous\"\n    @keydown.stop.prevent.right=\"next\"\n  >\n    <div class=\"neon-image-carousel__container\" tabindex=\"-1\">\n      <neon-button\n        :circular=\"true\"\n        :disabled=\"currentImage === 0\"\n        :title=\"previousLabel\"\n        :transparent=\"true\"\n        button-style=\"text\"\n        class=\"neon-image-carousel__previous\"\n        color=\"neutral\"\n        icon=\"chevron-left\"\n        size=\"l\"\n        @click=\"previous\"\n      />\n      <ul ref=\"carouselItems\" class=\"no-style neon-image-carousel__items\">\n        <li\n          v-for=\"(image, index) in images\"\n          :key=\"image.src\"\n          ref=\"carouselItem\"\n          :class=\"{ 'neon-image-carousel__item--active': index === currentImage }\"\n          class=\"neon-image-carousel__item\"\n        >\n          <img :alt=\"image.alt\" :src=\"image.src\" class=\"neon-image-carousel__image\" />\n        </li>\n      </ul>\n      <neon-button\n        :circular=\"true\"\n        :disabled=\"currentImage === images.length - 1\"\n        :title=\"nextLabel\"\n        :transparent=\"true\"\n        button-style=\"text\"\n        class=\"neon-image-carousel__next\"\n        color=\"neutral\"\n        icon=\"chevron-right\"\n        size=\"l\"\n        @click=\"next\"\n      />\n    </div>\n    <div class=\"neon-image-carousel__nav\" tabindex=\"-1\">\n      <neon-link\n        v-for=\"(_image, index) in images\"\n        :key=\"index\"\n        :aria-label=\"`Display image ${index + 1}`\"\n        class=\"neon-image-carousel__nav-item-link\"\n        outline-style=\"none\"\n        role=\"button\"\n        tabindex=\"0\"\n        @keydown.stop.prevent.enter=\"scrollTo(index)\"\n        @keydown.stop.prevent.space=\"scrollTo(index)\"\n      >\n        <div\n          :class=\"{ 'neon-image-carousel__nav-item--active': index === currentImage }\"\n          class=\"neon-image-carousel__nav-item\"\n          tabindex=\"-1\"\n          @click=\"scrollTo(index)\"\n        >\n          <div class=\"neon-image-carousel__nav-item-indicator\"></div>\n        </div>\n      </neon-link>\n    </div>\n    <span v-if=\"!hideLabel\" class=\"neon-image-carousel__label\" tabindex=\"-1\">\n      {{ imageCountLabel || `${images.length} ${images.length === 1 ? 'image' : 'images'}` }}\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonImageCarousel.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","args","_createElementVNode","_hoisted_1","_createVNode","_component_neon_button","_hoisted_2","_openBlock","_Fragment","_renderList","image","index","_hoisted_4","_image","_createBlock","_component_neon_link","_withKeys","_withModifiers","$event","_hoisted_6","_toDisplayString"],"mappings":";;;;EAQS,OAAM;AAAA,EAAiC,UAAS;;EAa/C,KAAI;AAAA,EAAgB,OAAM;;EAwB3B,OAAM;AAAA,EAA2B,UAAS;;;EAsBvB,OAAM;AAAA,EAA6B,UAAS;;;;cAlEtEA,EAqEM,OAAA;AAAA,IApEH,OAAKC,EAAA,CAAA,EAAA,oCAAwCC,EAAA,YAAW,GACnD,qBAAqB,CAAA;AAAA,IAC3B,UAAS;AAAA,IACR,WAAO;AAAA,oCAAoBA,EAAA,YAAAA,EAAA,SAAA,GAAAC,CAAA,GAAQ,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,MAAA,CAAA;AAAA,oCACPD,EAAA,QAAAA,EAAA,KAAA,GAAAC,CAAA,GAAI,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;IAEjCC,EAoCM,OApCNC,GAoCM;AAAA,MAnCJC,EAWEC,GAAA;AAAA,QAVC,UAAU;AAAA,QACV,UAAUL,EAAA,iBAAY;AAAA,QACtB,OAAOA,EAAA;AAAA,QACP,aAAa;AAAA,QACd,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,OAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAK;AAAA,QACJ,SAAOA,EAAA;AAAA;MAEVE,EAUK,MAVLI,GAUK;AAAA,SATHC,EAAA,EAAA,GAAAT,EAQKU,GAAA,MAAAC,EAPsBT,EAAA,QAAM,CAAvBU,GAAOC,YADjBb,EAQK,MAAA;AAAA,UANF,KAAKY,EAAM;AAAA;UACZ,KAAI;AAAA,UACH,OAAKX,EAAA,CAAA,EAAA,qCAAyCY,MAAUX,EAAA,aAAY,GAC/D,2BAA2B,CAAA;AAAA;UAEjCE,EAA4E,OAAA;AAAA,YAAtE,KAAKQ,EAAM;AAAA,YAAM,KAAKA,EAAM;AAAA,YAAK,OAAM;AAAA;;;MAGjDN,EAWEC,GAAA;AAAA,QAVC,UAAU;AAAA,QACV,UAAUL,EAAA,iBAAiBA,EAAA,OAAO,SAAM;AAAA,QACxC,OAAOA,EAAA;AAAA,QACP,aAAa;AAAA,QACd,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,OAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAK;AAAA,QACJ,SAAOA,EAAA;AAAA;;IAGZE,EAqBM,OArBNU,GAqBM;AAAA,OApBJL,EAAA,EAAA,GAAAT,EAmBYU,GAAA,MAAAC,EAlBgBT,EAAA,QAAM,CAAxBa,GAAQF,YADlBG,EAmBYC,GAAA;AAAA,QAjBT,KAAKJ;AAAA,QACL,+BAA6BA,IAAK,CAAA;AAAA,QACnC,OAAM;AAAA,QACN,iBAAc;AAAA,QACd,MAAK;AAAA,QACL,UAAS;AAAA,QACR,WAAO;AAAA,UAAqBK,EAAAC,EAAA,CAAAC,MAAAlB,EAAA,SAASW,CAAK,GAAA,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA,UACdK,EAAAC,EAAA,CAAAC,MAAAlB,EAAA,SAASW,CAAK,GAAA,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;mBAE3C,MAOM;AAAA,UAPNT,EAOM,OAAA;AAAA,YANH,OAAKH,EAAA,CAAA,EAAA,yCAA6CY,MAAUX,EAAA,gBACvD,+BAA+B,CAAA;AAAA,YACrC,UAAS;AAAA,YACR,SAAK,CAAAkB,MAAElB,EAAA,SAASW,CAAK;AAAA;YAEtBT,EAA2D,OAAA,EAAtD,OAAM,0CAAyC,GAAA,MAAA,EAAA;AAAA;;;;;IAI7CF,EAAA,8BAAbF,EAEO,QAFPqB,GAEOC,EADFpB,EAAA,mBAAe,GAAOA,EAAA,OAAO,MAAM,IAAIA,EAAA,OAAO,WAAM,IAAA,UAAA,QAAA,EAAA,GAAA,CAAA;AAAA;;;"}
+{"version":3,"file":"NeonImageCarousel.vue.es.js","sources":["../../../../src/components/presentation/image-carousel/NeonImageCarousel.vue"],"sourcesContent":["<template>\n  <div class=\"neon-image-carousel-wrapper\">\n    <div\n      :class=\"{\n        'neon-image-carousel--initialised': initialised,\n        'neon-image-carousel--expanded': expanded,\n      }\"\n      class=\"neon-image-carousel\"\n      tabindex=\"0\"\n      @keydown.stop.prevent.left=\"previous\"\n      @keydown.stop.prevent.right=\"next\"\n      @keydown.esc=\"expanded = false\"\n    >\n      <div class=\"neon-image-carousel__container\" tabindex=\"-1\" @click.stop=\"expanded = false\">\n        <neon-button\n          v-if=\"expanded\"\n          :title=\"closeLabel\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__close\"\n          color=\"low-contrast\"\n          icon=\"close\"\n          size=\"l\"\n          transparent\n          @click=\"expanded = false\"\n        />\n        <neon-button\n          :disabled=\"currentImage === 0\"\n          :title=\"previousLabel\"\n          :transparent=\"true\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__previous\"\n          color=\"neutral\"\n          icon=\"arrow-left-1\"\n          size=\"l\"\n          @click.capture.stop=\"previous\"\n        />\n        <ul ref=\"carouselItems\" class=\"no-style neon-image-carousel__items\">\n          <li\n            v-for=\"(image, index) in images\"\n            :key=\"image.src\"\n            ref=\"carouselItem\"\n            :class=\"{ 'neon-image-carousel__item--active': index === currentImage }\"\n            class=\"neon-image-carousel__item\"\n          >\n            <img\n              :alt=\"image.alt\"\n              :src=\"image.src\"\n              class=\"neon-image-carousel__image\"\n              @click.stop=\"expanded = !expanded\"\n            />\n            <p v-if=\"expanded\" class=\"neon-image-carousel__item-title\">{{ image.alt }}</p>\n          </li>\n        </ul>\n        <neon-button\n          :disabled=\"currentImage === images.length - 1\"\n          :title=\"nextLabel\"\n          :transparent=\"true\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__next\"\n          color=\"neutral\"\n          icon=\"arrow-right-1\"\n          size=\"l\"\n          @click.capture.stop=\"next\"\n        />\n      </div>\n      <neon-stack class=\"neon-image-carousel__nav-container\" gap=\"s\" @click.stop=\"expanded = false\">\n        <div class=\"neon-image-carousel__nav\" tabindex=\"-1\">\n          <neon-link\n            v-for=\"(_image, index) in images\"\n            :key=\"index\"\n            :aria-label=\"`Display image ${index + 1}`\"\n            class=\"neon-image-carousel__nav-item-link\"\n            outline-style=\"none\"\n            role=\"button\"\n            tabindex=\"0\"\n            @keydown.stop.prevent.capture.enter=\"scrollTo(index)\"\n            @keydown.stop.prevent.capture.space=\"scrollTo(index)\"\n          >\n            <div\n              :class=\"{ 'neon-image-carousel__nav-item--active': index === currentImage }\"\n              class=\"neon-image-carousel__nav-item\"\n              tabindex=\"-1\"\n              @click.capture.stop=\"scrollTo(index)\"\n            >\n              <div class=\"neon-image-carousel__nav-item-indicator\"></div>\n            </div>\n          </neon-link>\n        </div>\n        <span v-if=\"!hideLabel\" class=\"neon-image-carousel__label\" tabindex=\"-1\">\n          {{ imageCountLabel || `${images.length} ${images.length === 1 ? 'image' : 'images'}` }}\n        </span>\n      </neon-stack>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonImageCarousel.ts\" />\n"],"names":["_hoisted_1","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_ctx","args","_createBlock","_component_neon_button","_createVNode","_hoisted_2","_Fragment","_renderList","image","index","_cache","_withModifiers","$event","_hoisted_4","_toDisplayString","_component_neon_stack","_hoisted_5","_image","_component_neon_link","_withKeys","_hoisted_7"],"mappings":"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"}

package/dist/components/user-input/toggle/NeonToggle.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("vue"),d=require("../../../common/enums/NeonSize.cjs.js"),c=require("../../../common/enums/NeonFunctionalColor.cjs.js"),g=require("../../../common/enums/NeonToggleStyle.cjs.js"),y=require("../../../common/enums/NeonOrientation.cjs.js"),m=require("../../presentation/icon/NeonIcon.vue.cjs.js"),p=n.defineComponent({name:"NeonToggle",components:{NeonIcon:m},props:{name:{type:String,required:!0},modelValue:{type:String,required:!0},model:{type:Array,required:!0},toggleStyle:{type:String,default:()=>g.NeonToggleStyle.Toggle},size:{type:String,default:()=>d.NeonSize.Medium},orientation:{type:String,default:()=>y.NeonOrientation.Vertical},color:{type:String,default:()=>c.NeonFunctionalColor.Primary},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:i,slots:r}){const l=n.useAttrs(),o=e=>{i("update:modelValue",e)},u=e=>{!t.disabled&&!e.disabled&&t.modelValue!==e.key&&o(e.key)},s=n.computed(()=>{const{onClick:e,...a}=l;return a});return{selectOption:e=>{!t.disabled&&!e.disabled&&o(e.key)},onInput:u,sanitizedAttributes:s,slots:r}}});module.exports=p;
+"use strict";const n=require("vue"),c=require("../../../common/enums/NeonSize.cjs.js"),g=require("../../../common/enums/NeonFunctionalColor.cjs.js"),i=require("../../../common/enums/NeonToggleStyle.cjs.js"),y=require("../../../common/enums/NeonOrientation.cjs.js"),m=require("../../presentation/icon/NeonIcon.vue.cjs.js"),p=n.defineComponent({name:"NeonToggle",components:{NeonIcon:m},props:{name:{type:String,required:!0},modelValue:{type:String,required:!0},model:{type:Array,required:!0},toggleStyle:{type:String,default:()=>i.NeonToggleStyle.Toggle},size:{type:String,default:()=>c.NeonSize.Medium},orientation:{type:String,default:()=>y.NeonOrientation.Vertical},color:{type:String,default:()=>g.NeonFunctionalColor.Primary},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:r,slots:l}){const u=n.useAttrs(),o=e=>{r("update:modelValue",e)},s=e=>{!t.disabled&&!e.disabled&&t.modelValue!==e.key&&o(e.key)},a=n.computed(()=>{const{onClick:e,...d}=u;return d});return{selectOption:e=>{!t.disabled&&!e.disabled&&o(e.key)},onInput:s,sanitizedAttributes:a,slots:l,NeonToggleStyle:i.NeonToggleStyle}}});module.exports=p;
 //# sourceMappingURL=NeonToggle.cjs.js.map

package/dist/components/user-input/toggle/NeonToggle.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonToggle.cjs.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport type { NeonToggleModel } from '@/common/models/NeonToggleModel';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonToggleStyle } from '@/common/enums/NeonToggleStyle';\nimport { NeonOrientation } from '@/common/enums/NeonOrientation';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\n\n/**\n * <p>A toggle component for selecting one value from a range of options. This is equivalent to a radio button group. It can be styled as a <em>Toggle</em> or as <em>Radio buttons</em>.\n */\nexport default defineComponent({\n  name: 'NeonToggle',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The name of the radio button group.\n     */\n    name: { type: String, required: true },\n    /**\n     * The key of the selected option.\n     */\n    modelValue: { type: String, required: true },\n    /**\n     * The list of options to present to the user.\n     */\n    model: { type: Array as () => Array<NeonToggleModel>, required: true },\n    /**\n     * The style of toggle to display to the user.\n     */\n    toggleStyle: { type: String as () => NeonToggleStyle, default: () => NeonToggleStyle.Toggle },\n    /**\n     * The size of the toggle.\n     */\n    size: { type: String as () => NeonSize, default: () => NeonSize.Medium },\n    /**\n     * The orientation of the toggle if the style is a radio button group.\n     */\n    orientation: { type: String as () => NeonOrientation, default: () => NeonOrientation.Vertical },\n    /**\n     * The color of the toggle.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Primary },\n    /**\n     * Whether the toggle is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the selected value changes.\n     * @type {string} The key of the selected model item.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit, slots }) {\n    const attrs = useAttrs();\n    const emitInput = (key: string) => {\n      emit('update:modelValue', key);\n    };\n\n    const onInput = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled && props.modelValue !== option.key) {\n        emitInput(option.key);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const selectOption = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled) {\n        emitInput(option.key);\n      }\n    };\n\n    return {\n      selectOption,\n      onInput,\n      sanitizedAttributes,\n      slots,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonToggleStyle","NeonSize","NeonOrientation","NeonFunctionalColor","props","emit","slots","attrs","useAttrs","emitInput","key","onInput","option","sanitizedAttributes","computed","onClick","sanitized"],"mappings":"kUAWAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,WAAY,CACV,SAAAC,CAAA,EAEF,MAAO,CAIL,KAAM,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIhC,WAAY,CAAE,KAAM,OAAQ,SAAU,EAAA,EAItC,MAAO,CAAE,KAAM,MAAuC,SAAU,EAAA,EAIhE,YAAa,CAAE,KAAM,OAAiC,QAAS,IAAMC,EAAAA,gBAAgB,MAAA,EAIrF,KAAM,CAAE,KAAM,OAA0B,QAAS,IAAMC,EAAAA,SAAS,MAAA,EAIhE,YAAa,CAAE,KAAM,OAAiC,QAAS,IAAMC,EAAAA,gBAAgB,QAAA,EAIrF,MAAO,CAAE,KAAM,OAAqC,QAAS,IAAMC,EAAAA,oBAAoB,OAAA,EAIvF,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE5C,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAC5B,MAAMC,EAAQC,EAAAA,SAAA,EACRC,EAAaC,GAAgB,CACjCL,EAAK,oBAAqBK,CAAG,CAC/B,EAEMC,EAAWC,GAA4B,CACvC,CAACR,EAAM,UAAY,CAACQ,EAAO,UAAYR,EAAM,aAAeQ,EAAO,KACrEH,EAAUG,EAAO,GAAG,CAExB,EAEMC,EAAsBC,EAAAA,SAAS,IAAM,CAEzC,KAAM,CAAE,QAAAC,EAAS,GAAGC,CAAA,EAAcT,EAClC,OAAOS,CACT,CAAC,EAQD,MAAO,CACL,aAPoBJ,GAA4B,CAC5C,CAACR,EAAM,UAAY,CAACQ,EAAO,UAC7BH,EAAUG,EAAO,GAAG,CAExB,EAIE,QAAAD,EACA,oBAAAE,EACA,MAAAP,CAAA,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonToggle.cjs.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport type { NeonToggleModel } from '@/common/models/NeonToggleModel';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonToggleStyle } from '@/common/enums/NeonToggleStyle';\nimport { NeonOrientation } from '@/common/enums/NeonOrientation';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\n\n/**\n * <p>A toggle component for selecting one value from a range of options. This is equivalent to a radio button group. It can be styled as a <em>Toggle</em> or as <em>Radio buttons</em>.\n */\nexport default defineComponent({\n  name: 'NeonToggle',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The name of the radio button group.\n     */\n    name: { type: String, required: true },\n    /**\n     * The key of the selected option.\n     */\n    modelValue: { type: String, required: true },\n    /**\n     * The list of options to present to the user.\n     */\n    model: { type: Array as () => Array<NeonToggleModel>, required: true },\n    /**\n     * The style of toggle to display to the user.\n     */\n    toggleStyle: { type: String as () => NeonToggleStyle, default: () => NeonToggleStyle.Toggle },\n    /**\n     * The size of the toggle.\n     */\n    size: { type: String as () => NeonSize, default: () => NeonSize.Medium },\n    /**\n     * The orientation of the toggle if the style is a radio button group.\n     */\n    orientation: { type: String as () => NeonOrientation, default: () => NeonOrientation.Vertical },\n    /**\n     * The color of the toggle.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Primary },\n    /**\n     * Whether the toggle is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the selected value changes.\n     * @type {string} The key of the selected model item.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit, slots }) {\n    const attrs = useAttrs();\n    const emitInput = (key: string) => {\n      emit('update:modelValue', key);\n    };\n\n    const onInput = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled && props.modelValue !== option.key) {\n        emitInput(option.key);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const selectOption = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled) {\n        emitInput(option.key);\n      }\n    };\n\n    return {\n      selectOption,\n      onInput,\n      sanitizedAttributes,\n      slots,\n      NeonToggleStyle,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonToggleStyle","NeonSize","NeonOrientation","NeonFunctionalColor","props","emit","slots","attrs","useAttrs","emitInput","key","onInput","option","sanitizedAttributes","computed","onClick","sanitized"],"mappings":"kUAWAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,WAAY,CACV,SAAAC,CAAA,EAEF,MAAO,CAIL,KAAM,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIhC,WAAY,CAAE,KAAM,OAAQ,SAAU,EAAA,EAItC,MAAO,CAAE,KAAM,MAAuC,SAAU,EAAA,EAIhE,YAAa,CAAE,KAAM,OAAiC,QAAS,IAAMC,EAAAA,gBAAgB,MAAA,EAIrF,KAAM,CAAE,KAAM,OAA0B,QAAS,IAAMC,EAAAA,SAAS,MAAA,EAIhE,YAAa,CAAE,KAAM,OAAiC,QAAS,IAAMC,EAAAA,gBAAgB,QAAA,EAIrF,MAAO,CAAE,KAAM,OAAqC,QAAS,IAAMC,EAAAA,oBAAoB,OAAA,EAIvF,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE5C,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAC5B,MAAMC,EAAQC,EAAAA,SAAA,EACRC,EAAaC,GAAgB,CACjCL,EAAK,oBAAqBK,CAAG,CAC/B,EAEMC,EAAWC,GAA4B,CACvC,CAACR,EAAM,UAAY,CAACQ,EAAO,UAAYR,EAAM,aAAeQ,EAAO,KACrEH,EAAUG,EAAO,GAAG,CAExB,EAEMC,EAAsBC,EAAAA,SAAS,IAAM,CAEzC,KAAM,CAAE,QAAAC,EAAS,GAAGC,CAAA,EAAcT,EAClC,OAAOS,CACT,CAAC,EAQD,MAAO,CACL,aAPoBJ,GAA4B,CAC5C,CAACR,EAAM,UAAY,CAACQ,EAAO,UAC7BH,EAAUG,EAAO,GAAG,CAExB,EAIE,QAAAD,EACA,oBAAAE,EACA,MAAAP,EAAA,gBACAN,EAAAA,eAAA,CAEJ,CACF,CAAC"}

package/dist/components/user-input/toggle/NeonToggle.es.js

@@ -1,10 +1,10 @@
-import { defineComponent as u, useAttrs as m, computed as s } from "vue";
-import { NeonSize as p } from "../../../common/enums/NeonSize.es.js";
-import { NeonFunctionalColor as c } from "../../../common/enums/NeonFunctionalColor.es.js";
-import { NeonToggleStyle as f } from "../../../common/enums/NeonToggleStyle.es.js";
+import { defineComponent as m, useAttrs as s, computed as p } from "vue";
+import { NeonSize as c } from "../../../common/enums/NeonSize.es.js";
+import { NeonFunctionalColor as f } from "../../../common/enums/NeonFunctionalColor.es.js";
+import { NeonToggleStyle as r } from "../../../common/enums/NeonToggleStyle.es.js";
 import { NeonOrientation as y } from "../../../common/enums/NeonOrientation.es.js";
 import g from "../../presentation/icon/NeonIcon.vue.es.js";
-const A = u({
+const A = m({
   name: "NeonToggle",
   components: {
     NeonIcon: g
@@ -25,11 +25,11 @@ const A = u({
     /**
      * The style of toggle to display to the user.
      */
-    toggleStyle: { type: String, default: () => f.Toggle },
+    toggleStyle: { type: String, default: () => r.Toggle },
     /**
      * The size of the toggle.
      */
-    size: { type: String, default: () => p.Medium },
+    size: { type: String, default: () => c.Medium },
     /**
      * The orientation of the toggle if the style is a radio button group.
      */
@@ -37,7 +37,7 @@ const A = u({
     /**
      * The color of the toggle.
      */
-    color: { type: String, default: () => c.Primary },
+    color: { type: String, default: () => f.Primary },
     /**
      * Whether the toggle is disabled.
      */
@@ -50,22 +50,23 @@ const A = u({
      */
     "update:modelValue"
   ],
-  setup(t, { emit: r, slots: n }) {
-    const i = m(), o = (e) => {
-      r("update:modelValue", e);
-    }, l = (e) => {
+  setup(t, { emit: n, slots: i }) {
+    const l = s(), o = (e) => {
+      n("update:modelValue", e);
+    }, a = (e) => {
       !t.disabled && !e.disabled && t.modelValue !== e.key && o(e.key);
-    }, a = s(() => {
-      const { onClick: e, ...d } = i;
-      return d;
+    }, d = p(() => {
+      const { onClick: e, ...u } = l;
+      return u;
     });
     return {
       selectOption: (e) => {
         !t.disabled && !e.disabled && o(e.key);
       },
-      onInput: l,
-      sanitizedAttributes: a,
-      slots: n
+      onInput: a,
+      sanitizedAttributes: d,
+      slots: i,
+      NeonToggleStyle: r
     };
   }
 });

package/dist/components/user-input/toggle/NeonToggle.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonToggle.es.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport type { NeonToggleModel } from '@/common/models/NeonToggleModel';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonToggleStyle } from '@/common/enums/NeonToggleStyle';\nimport { NeonOrientation } from '@/common/enums/NeonOrientation';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\n\n/**\n * <p>A toggle component for selecting one value from a range of options. This is equivalent to a radio button group. It can be styled as a <em>Toggle</em> or as <em>Radio buttons</em>.\n */\nexport default defineComponent({\n  name: 'NeonToggle',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The name of the radio button group.\n     */\n    name: { type: String, required: true },\n    /**\n     * The key of the selected option.\n     */\n    modelValue: { type: String, required: true },\n    /**\n     * The list of options to present to the user.\n     */\n    model: { type: Array as () => Array<NeonToggleModel>, required: true },\n    /**\n     * The style of toggle to display to the user.\n     */\n    toggleStyle: { type: String as () => NeonToggleStyle, default: () => NeonToggleStyle.Toggle },\n    /**\n     * The size of the toggle.\n     */\n    size: { type: String as () => NeonSize, default: () => NeonSize.Medium },\n    /**\n     * The orientation of the toggle if the style is a radio button group.\n     */\n    orientation: { type: String as () => NeonOrientation, default: () => NeonOrientation.Vertical },\n    /**\n     * The color of the toggle.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Primary },\n    /**\n     * Whether the toggle is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the selected value changes.\n     * @type {string} The key of the selected model item.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit, slots }) {\n    const attrs = useAttrs();\n    const emitInput = (key: string) => {\n      emit('update:modelValue', key);\n    };\n\n    const onInput = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled && props.modelValue !== option.key) {\n        emitInput(option.key);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const selectOption = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled) {\n        emitInput(option.key);\n      }\n    };\n\n    return {\n      selectOption,\n      onInput,\n      sanitizedAttributes,\n      slots,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonToggleStyle","NeonSize","NeonOrientation","NeonFunctionalColor","props","emit","slots","attrs","useAttrs","emitInput","key","onInput","option","sanitizedAttributes","computed","onClick","sanitized"],"mappings":";;;;;;AAWA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,YAAY,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAItC,OAAO,EAAE,MAAM,OAAuC,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIhE,aAAa,EAAE,MAAM,QAAiC,SAAS,MAAMC,EAAgB,OAAA;AAAA;AAAA;AAAA;AAAA,IAIrF,MAAM,EAAE,MAAM,QAA0B,SAAS,MAAMC,EAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAIhE,aAAa,EAAE,MAAM,QAAiC,SAAS,MAAMC,EAAgB,SAAA;AAAA;AAAA;AAAA;AAAA,IAIrF,OAAO,EAAE,MAAM,QAAqC,SAAS,MAAMC,EAAoB,QAAA;AAAA;AAAA;AAAA;AAAA,IAIvF,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE5C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,GAAM,OAAAC,KAAS;AAC5B,UAAMC,IAAQC,EAAA,GACRC,IAAY,CAACC,MAAgB;AACjC,MAAAL,EAAK,qBAAqBK,CAAG;AAAA,IAC/B,GAEMC,IAAU,CAACC,MAA4B;AAC3C,MAAI,CAACR,EAAM,YAAY,CAACQ,EAAO,YAAYR,EAAM,eAAeQ,EAAO,OACrEH,EAAUG,EAAO,GAAG;AAAA,IAExB,GAEMC,IAAsBC,EAAS,MAAM;AAEzC,YAAM,EAAE,SAAAC,GAAS,GAAGC,EAAA,IAAcT;AAClC,aAAOS;AAAA,IACT,CAAC;AAQD,WAAO;AAAA,MACL,cAPmB,CAACJ,MAA4B;AAChD,QAAI,CAACR,EAAM,YAAY,CAACQ,EAAO,YAC7BH,EAAUG,EAAO,GAAG;AAAA,MAExB;AAAA,MAIE,SAAAD;AAAA,MACA,qBAAAE;AAAA,MACA,OAAAP;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonToggle.es.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport type { NeonToggleModel } from '@/common/models/NeonToggleModel';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonToggleStyle } from '@/common/enums/NeonToggleStyle';\nimport { NeonOrientation } from '@/common/enums/NeonOrientation';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\n\n/**\n * <p>A toggle component for selecting one value from a range of options. This is equivalent to a radio button group. It can be styled as a <em>Toggle</em> or as <em>Radio buttons</em>.\n */\nexport default defineComponent({\n  name: 'NeonToggle',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The name of the radio button group.\n     */\n    name: { type: String, required: true },\n    /**\n     * The key of the selected option.\n     */\n    modelValue: { type: String, required: true },\n    /**\n     * The list of options to present to the user.\n     */\n    model: { type: Array as () => Array<NeonToggleModel>, required: true },\n    /**\n     * The style of toggle to display to the user.\n     */\n    toggleStyle: { type: String as () => NeonToggleStyle, default: () => NeonToggleStyle.Toggle },\n    /**\n     * The size of the toggle.\n     */\n    size: { type: String as () => NeonSize, default: () => NeonSize.Medium },\n    /**\n     * The orientation of the toggle if the style is a radio button group.\n     */\n    orientation: { type: String as () => NeonOrientation, default: () => NeonOrientation.Vertical },\n    /**\n     * The color of the toggle.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Primary },\n    /**\n     * Whether the toggle is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the selected value changes.\n     * @type {string} The key of the selected model item.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit, slots }) {\n    const attrs = useAttrs();\n    const emitInput = (key: string) => {\n      emit('update:modelValue', key);\n    };\n\n    const onInput = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled && props.modelValue !== option.key) {\n        emitInput(option.key);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const selectOption = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled) {\n        emitInput(option.key);\n      }\n    };\n\n    return {\n      selectOption,\n      onInput,\n      sanitizedAttributes,\n      slots,\n      NeonToggleStyle,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonToggleStyle","NeonSize","NeonOrientation","NeonFunctionalColor","props","emit","slots","attrs","useAttrs","emitInput","key","onInput","option","sanitizedAttributes","computed","onClick","sanitized"],"mappings":";;;;;;AAWA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,YAAY,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAItC,OAAO,EAAE,MAAM,OAAuC,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIhE,aAAa,EAAE,MAAM,QAAiC,SAAS,MAAMC,EAAgB,OAAA;AAAA;AAAA;AAAA;AAAA,IAIrF,MAAM,EAAE,MAAM,QAA0B,SAAS,MAAMC,EAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAIhE,aAAa,EAAE,MAAM,QAAiC,SAAS,MAAMC,EAAgB,SAAA;AAAA;AAAA;AAAA;AAAA,IAIrF,OAAO,EAAE,MAAM,QAAqC,SAAS,MAAMC,EAAoB,QAAA;AAAA;AAAA;AAAA;AAAA,IAIvF,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE5C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,GAAM,OAAAC,KAAS;AAC5B,UAAMC,IAAQC,EAAA,GACRC,IAAY,CAACC,MAAgB;AACjC,MAAAL,EAAK,qBAAqBK,CAAG;AAAA,IAC/B,GAEMC,IAAU,CAACC,MAA4B;AAC3C,MAAI,CAACR,EAAM,YAAY,CAACQ,EAAO,YAAYR,EAAM,eAAeQ,EAAO,OACrEH,EAAUG,EAAO,GAAG;AAAA,IAExB,GAEMC,IAAsBC,EAAS,MAAM;AAEzC,YAAM,EAAE,SAAAC,GAAS,GAAGC,EAAA,IAAcT;AAClC,aAAOS;AAAA,IACT,CAAC;AAQD,WAAO;AAAA,MACL,cAPmB,CAACJ,MAA4B;AAChD,QAAI,CAACR,EAAM,YAAY,CAACQ,EAAO,YAC7BH,EAAUG,EAAO,GAAG;AAAA,MAExB;AAAA,MAIE,SAAAD;AAAA,MACA,qBAAAE;AAAA,MACA,OAAAP;AAAA,MACA,iBAAAN;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

package/dist/components/user-input/toggle/NeonToggle.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const d=require("./NeonToggle.cjs.js"),e=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["aria-checked","aria-disabled","tabindex","onKeydown"],i=["checked","disabled","name","value","onClick"],c={key:0,class:"neon-toggle__radio-button"},g={key:0,class:"neon-toggle__radio-button-indicator"},b={key:1};function u(l,m,y,_,h,p){const a=e.resolveComponent("neon-icon");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([[`neon-toggle--${l.toggleStyle}`,`neon-toggle--${l.disabled?"low-contrast":l.color}`,`neon-toggle--${l.orientation}`,`neon-toggle--${l.size}`,{"neon-toggle--disabled":l.disabled}],"neon-toggle"]),role:"radiogroup"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.model,(n,t)=>(e.openBlock(),e.createElementBlock("label",{key:n.key,"aria-checked":n.key===l.modelValue,"aria-disabled":l.disabled||n.disabled,class:e.normalizeClass([{"neon-toggle__label--disabled":l.disabled||n.disabled,"neon-toggle__label--checked":n.key===l.modelValue,"neon-toggle__label--with-icon":n.icon,"neon-toggle__label--with-slot-override":l.slots.option,"neon-toggle__label--with-text":n.label},"neon-toggle__label no-style"]),tabindex:!l.disabled&&!n.disabled?0:void 0,role:"radio",onKeydown:[e.withKeys(o=>l.selectOption(n),["enter"]),e.withKeys(e.withModifiers(o=>l.selectOption(n),["prevent"]),["space"])]},[e.createElementVNode("input",e.mergeProps({checked:n.key===l.modelValue,disabled:l.disabled||n.disabled,name:l.name,tabindex:-1,value:n.key,class:"neon-toggle__input",type:"radio"},{ref_for:!0},l.sanitizedAttributes,{onClick:o=>l.onInput(n)}),null,16,i),l.toggleStyle==="radio-buttons"?(e.openBlock(),e.createElementBlock("div",c,[n.key===l.modelValue?(e.openBlock(),e.createElementBlock("div",g)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"option",{index:t,option:n},()=>[n.icon?(e.openBlock(),e.createBlock(a,{key:0,disabled:l.disabled||n.disabled,name:n.icon},null,8,["disabled","name"])):e.createCommentVNode("",!0),n.label?(e.openBlock(),e.createElementBlock("span",b,e.toDisplayString(n.label),1)):e.createCommentVNode("",!0)])],42,r))),128))],2)}const k=s(d,[["render",u]]);module.exports=k;
+"use strict";const t=require("./NeonToggle.cjs.js"),e=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["aria-checked","aria-disabled","tabindex","onKeydown"],i=["checked","disabled","name","value","onClick"],c={key:0,class:"neon-toggle__radio-button"},g={key:0,class:"neon-toggle__radio-button-indicator"},b={key:1};function u(l,m,y,_,h,p){const a=e.resolveComponent("neon-icon");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([[`neon-toggle--${l.toggleStyle}`,`neon-toggle--${l.disabled?"low-contrast":l.color}`,`neon-toggle--${l.orientation}`,`neon-toggle--${l.size}`,{"neon-toggle--disabled":l.disabled}],"neon-toggle"]),role:"radiogroup"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.model,(n,d)=>(e.openBlock(),e.createElementBlock("label",{key:n.key,"aria-checked":n.key===l.modelValue,"aria-disabled":l.disabled||n.disabled,class:e.normalizeClass([{"neon-toggle__label--disabled":l.disabled||n.disabled,"neon-toggle__label--checked":n.key===l.modelValue,"neon-toggle__label--with-icon":n.icon,"neon-toggle__label--with-slot-override":l.slots.option,"neon-toggle__label--with-text":n.label},"neon-toggle__label no-style"]),tabindex:!l.disabled&&!n.disabled?0:void 0,role:"radio",onKeydown:[e.withKeys(o=>l.selectOption(n),["enter"]),e.withKeys(e.withModifiers(o=>l.selectOption(n),["prevent"]),["space"])]},[e.createElementVNode("input",e.mergeProps({checked:n.key===l.modelValue,disabled:l.disabled||n.disabled,name:l.name,tabindex:-1,value:n.key,class:"neon-toggle__input",type:"radio"},{ref_for:!0},l.sanitizedAttributes,{onClick:o=>l.onInput(n)}),null,16,i),l.toggleStyle!==l.NeonToggleStyle.Toggle?(e.openBlock(),e.createElementBlock("div",c,[n.key===l.modelValue?(e.openBlock(),e.createElementBlock("div",g)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"option",{index:d,option:n},()=>[n.icon?(e.openBlock(),e.createBlock(a,{key:0,disabled:l.disabled||n.disabled,name:n.icon},null,8,["disabled","name"])):e.createCommentVNode("",!0),n.label?(e.openBlock(),e.createElementBlock("span",b,e.toDisplayString(n.label),1)):e.createCommentVNode("",!0)])],42,r))),128))],2)}const k=s(t,[["render",u]]);module.exports=k;
 //# sourceMappingURL=NeonToggle.vue.cjs.js.map

package/dist/components/user-input/toggle/NeonToggle.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonToggle.vue.cjs.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-toggle--${toggleStyle}`,\n      `neon-toggle--${disabled ? 'low-contrast' : color}`,\n      `neon-toggle--${orientation}`,\n      `neon-toggle--${size}`,\n      { 'neon-toggle--disabled': disabled },\n    ]\"\n    class=\"neon-toggle\"\n    role=\"radiogroup\"\n  >\n    <label\n      v-for=\"(option, index) in model\"\n      :key=\"option.key\"\n      :aria-checked=\"option.key === modelValue\"\n      :aria-disabled=\"disabled || option.disabled\"\n      :class=\"{\n        'neon-toggle__label--disabled': disabled || option.disabled,\n        'neon-toggle__label--checked': option.key === modelValue,\n        'neon-toggle__label--with-icon': option.icon,\n        'neon-toggle__label--with-slot-override': slots.option,\n        'neon-toggle__label--with-text': option.label,\n      }\"\n      :tabindex=\"!disabled && !option.disabled ? 0 : undefined\"\n      class=\"neon-toggle__label no-style\"\n      role=\"radio\"\n      @keydown.enter=\"selectOption(option)\"\n      @keydown.space.prevent=\"selectOption(option)\"\n    >\n      <input\n        :checked=\"option.key === modelValue\"\n        :disabled=\"disabled || option.disabled\"\n        :name=\"name\"\n        :tabindex=\"-1\"\n        :value=\"option.key\"\n        class=\"neon-toggle__input\"\n        type=\"radio\"\n        v-bind=\"sanitizedAttributes\"\n        @click=\"onInput(option)\"\n      />\n      <div v-if=\"toggleStyle === 'radio-buttons'\" class=\"neon-toggle__radio-button\">\n        <div v-if=\"option.key === modelValue\" class=\"neon-toggle__radio-button-indicator\"></div>\n      </div>\n      <!-- @slot This slot is for overriding the option rendering, it is passed two arguments, <em>option</em> - the option model & <em>index</em> -->\n      <slot :index=\"index\" :option=\"option\" name=\"option\">\n        <neon-icon v-if=\"option.icon\" :disabled=\"disabled || option.disabled\" :name=\"option.icon\" />\n        <span v-if=\"option.label\">{{ option.label }}</span>\n      </slot>\n    </label>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonToggle.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_openBlock","_Fragment","_renderList","option","index","_withKeys","$event","_withModifiers","_createElementVNode","_mergeProps","_hoisted_3","_hoisted_4","_renderSlot","_createBlock","_component_neon_icon","_hoisted_5","_toDisplayString"],"mappings":"0PAyCkD,MAAM,sCACV,MAAM,sIAzClDA,EAAAA,mBAiDM,MAAA,CAhDH,MAAKC,EAAAA,eAAA,CAAA,iBAA0BC,EAAA,WAAW,GAA0B,gBAAAA,EAAA,wBAA4BA,EAAA,KAAK,mBAA0BA,EAAA,WAAW,mBAA0BA,EAAA,IAAI,4BAAqCA,EAAA,QAAQ,GAOhN,aAAa,CAAA,EACnB,KAAK,gBAELC,EAAAA,UAAA,EAAA,EAAAH,EAAAA,mBAqCQI,WAAA,KAAAC,EAAAA,WApCoBH,EAAA,MAAK,CAAvBI,EAAQC,mBADlBP,EAAAA,mBAqCQ,QAAA,CAnCL,IAAKM,EAAO,IACZ,eAAcA,EAAO,MAAQJ,EAAA,WAC7B,gBAAeA,EAAA,UAAYI,EAAO,SAClC,MAAKL,EAAAA,eAAA,CAAA,gCAA4CC,EAAA,UAAYI,EAAO,uCAAiDA,EAAO,MAAQJ,EAAA,WAAqD,gCAAAI,EAAO,KAAwD,yCAAAJ,EAAA,MAAM,OAAiD,gCAAAI,EAAO,OAQjT,6BAA6B,CAAA,EADlC,UAAWJ,EAAA,UAAQ,CAAKI,EAAO,WAAe,OAE/C,KAAK,QACJ,UAAO,CAAQE,EAAAA,SAAAC,GAAAP,EAAA,aAAaI,CAAM,EAAA,CAAA,OAAA,CAAA,EACXE,EAAAA,SAAAE,EAAAA,cAAAD,GAAAP,EAAA,aAAaI,CAAM,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,KAE3CK,EAAAA,mBAUE,QAVFC,aAUE,CATC,QAASN,EAAO,MAAQJ,EAAA,WACxB,SAAUA,EAAA,UAAYI,EAAO,SAC7B,KAAMJ,EAAA,KACN,SAAU,GACV,MAAOI,EAAO,IACf,MAAM,qBACN,KAAK,sBACGJ,EAAA,oBAAmB,CAC1B,QAAKO,GAAEP,EAAA,QAAQI,CAAM,eAEbJ,EAAA,cAAW,iBAAtBC,EAAAA,YAAAH,EAAAA,mBAEM,MAFNa,EAEM,CADOP,EAAO,MAAQJ,EAAA,YAA1BC,EAAAA,YAAAH,EAAAA,mBAAwF,MAAxFc,CAAwF,8DAG1FC,aAGOb,EAAA,OAAA,SAAA,CAHA,MAAOK,EAAQ,OAAQD,GAA9B,IAGO,CAFYA,EAAO,oBAAxBU,EAAAA,YAA4FC,EAAA,OAA7D,SAAUf,EAAA,UAAYI,EAAO,SAAW,KAAMA,EAAO,+DACxEA,EAAO,qBAAnBN,EAAAA,mBAAmD,OAAAkB,EAAAC,EAAAA,gBAAtBb,EAAO,KAAK,EAAA,CAAA"}
+{"version":3,"file":"NeonToggle.vue.cjs.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-toggle--${toggleStyle}`,\n      `neon-toggle--${disabled ? 'low-contrast' : color}`,\n      `neon-toggle--${orientation}`,\n      `neon-toggle--${size}`,\n      { 'neon-toggle--disabled': disabled },\n    ]\"\n    class=\"neon-toggle\"\n    role=\"radiogroup\"\n  >\n    <label\n      v-for=\"(option, index) in model\"\n      :key=\"option.key\"\n      :aria-checked=\"option.key === modelValue\"\n      :aria-disabled=\"disabled || option.disabled\"\n      :class=\"{\n        'neon-toggle__label--disabled': disabled || option.disabled,\n        'neon-toggle__label--checked': option.key === modelValue,\n        'neon-toggle__label--with-icon': option.icon,\n        'neon-toggle__label--with-slot-override': slots.option,\n        'neon-toggle__label--with-text': option.label,\n      }\"\n      :tabindex=\"!disabled && !option.disabled ? 0 : undefined\"\n      class=\"neon-toggle__label no-style\"\n      role=\"radio\"\n      @keydown.enter=\"selectOption(option)\"\n      @keydown.space.prevent=\"selectOption(option)\"\n    >\n      <input\n        :checked=\"option.key === modelValue\"\n        :disabled=\"disabled || option.disabled\"\n        :name=\"name\"\n        :tabindex=\"-1\"\n        :value=\"option.key\"\n        class=\"neon-toggle__input\"\n        type=\"radio\"\n        v-bind=\"sanitizedAttributes\"\n        @click=\"onInput(option)\"\n      />\n      <div v-if=\"toggleStyle !== NeonToggleStyle.Toggle\" class=\"neon-toggle__radio-button\">\n        <div v-if=\"option.key === modelValue\" class=\"neon-toggle__radio-button-indicator\"></div>\n      </div>\n      <!-- @slot This slot is for overriding the option rendering, it is passed two arguments, <em>option</em> - the option model & <em>index</em> -->\n      <slot :index=\"index\" :option=\"option\" name=\"option\">\n        <neon-icon v-if=\"option.icon\" :disabled=\"disabled || option.disabled\" :name=\"option.icon\" />\n        <span v-if=\"option.label\">{{ option.label }}</span>\n      </slot>\n    </label>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonToggle.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_openBlock","_Fragment","_renderList","option","index","_withKeys","$event","_withModifiers","_createElementVNode","_mergeProps","_hoisted_3","_hoisted_4","_renderSlot","_createBlock","_component_neon_icon","_hoisted_5","_toDisplayString"],"mappings":"0PAyCyD,MAAM,sCACjB,MAAM,sIAzClDA,EAAAA,mBAiDM,MAAA,CAhDH,MAAKC,EAAAA,eAAA,CAAA,iBAA0BC,EAAA,WAAW,GAA0B,gBAAAA,EAAA,wBAA4BA,EAAA,KAAK,mBAA0BA,EAAA,WAAW,mBAA0BA,EAAA,IAAI,4BAAqCA,EAAA,QAAQ,GAOhN,aAAa,CAAA,EACnB,KAAK,gBAELC,EAAAA,UAAA,EAAA,EAAAH,EAAAA,mBAqCQI,WAAA,KAAAC,EAAAA,WApCoBH,EAAA,MAAK,CAAvBI,EAAQC,mBADlBP,EAAAA,mBAqCQ,QAAA,CAnCL,IAAKM,EAAO,IACZ,eAAcA,EAAO,MAAQJ,EAAA,WAC7B,gBAAeA,EAAA,UAAYI,EAAO,SAClC,MAAKL,EAAAA,eAAA,CAAA,gCAA4CC,EAAA,UAAYI,EAAO,uCAAiDA,EAAO,MAAQJ,EAAA,WAAqD,gCAAAI,EAAO,KAAwD,yCAAAJ,EAAA,MAAM,OAAiD,gCAAAI,EAAO,OAQjT,6BAA6B,CAAA,EADlC,UAAWJ,EAAA,UAAQ,CAAKI,EAAO,WAAe,OAE/C,KAAK,QACJ,UAAO,CAAQE,EAAAA,SAAAC,GAAAP,EAAA,aAAaI,CAAM,EAAA,CAAA,OAAA,CAAA,EACXE,EAAAA,SAAAE,EAAAA,cAAAD,GAAAP,EAAA,aAAaI,CAAM,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,KAE3CK,EAAAA,mBAUE,QAVFC,aAUE,CATC,QAASN,EAAO,MAAQJ,EAAA,WACxB,SAAUA,EAAA,UAAYI,EAAO,SAC7B,KAAMJ,EAAA,KACN,SAAU,GACV,MAAOI,EAAO,IACf,MAAM,qBACN,KAAK,sBACGJ,EAAA,oBAAmB,CAC1B,QAAKO,GAAEP,EAAA,QAAQI,CAAM,eAEbJ,EAAA,cAAgBA,EAAA,gBAAgB,QAA3CC,EAAAA,YAAAH,EAAAA,mBAEM,MAFNa,EAEM,CADOP,EAAO,MAAQJ,EAAA,YAA1BC,EAAAA,YAAAH,EAAAA,mBAAwF,MAAxFc,CAAwF,8DAG1FC,aAGOb,EAAA,OAAA,SAAA,CAHA,MAAOK,EAAQ,OAAQD,GAA9B,IAGO,CAFYA,EAAO,oBAAxBU,EAAAA,YAA4FC,EAAA,OAA7D,SAAUf,EAAA,UAAYI,EAAO,SAAW,KAAMA,EAAO,+DACxEA,EAAO,qBAAnBN,EAAAA,mBAAmD,OAAAkB,EAAAC,EAAAA,gBAAtBb,EAAO,KAAK,EAAA,CAAA"}

package/dist/components/user-input/toggle/NeonToggle.vue.es.js

@@ -1,5 +1,5 @@
 import g from "./NeonToggle.es.js";
-import { resolveComponent as b, openBlock as n, createElementBlock as o, normalizeClass as s, Fragment as u, renderList as c, withKeys as t, withModifiers as m, createElementVNode as k, mergeProps as y, createCommentVNode as d, renderSlot as h, createBlock as _, toDisplayString as f } from "vue";
+import { resolveComponent as b, openBlock as n, createElementBlock as o, normalizeClass as s, Fragment as u, renderList as c, withKeys as i, withModifiers as m, createElementVNode as k, mergeProps as y, createCommentVNode as d, renderSlot as h, createBlock as _, toDisplayString as f } from "vue";
 import $ from "../../../_virtual/_plugin-vue_export-helper.es.js";
 const v = ["aria-checked", "aria-disabled", "tabindex", "onKeydown"], w = ["checked", "disabled", "name", "value", "onClick"], p = {
   key: 0,
@@ -8,8 +8,8 @@ const v = ["aria-checked", "aria-disabled", "tabindex", "onKeydown"], w = ["chec
   key: 0,
   class: "neon-toggle__radio-button-indicator"
 }, C = { key: 1 };
-function S(e, z, B, K, N, E) {
-  const i = b("neon-icon");
+function S(e, N, z, B, K, T) {
+  const t = b("neon-icon");
   return n(), o("div", {
     class: s([[
       `neon-toggle--${e.toggleStyle}`,
@@ -34,8 +34,8 @@ function S(e, z, B, K, N, E) {
       tabindex: !e.disabled && !l.disabled ? 0 : void 0,
       role: "radio",
       onKeydown: [
-        t((a) => e.selectOption(l), ["enter"]),
-        t(m((a) => e.selectOption(l), ["prevent"]), ["space"])
+        i((a) => e.selectOption(l), ["enter"]),
+        i(m((a) => e.selectOption(l), ["prevent"]), ["space"])
       ]
     }, [
       k("input", y({
@@ -49,14 +49,14 @@ function S(e, z, B, K, N, E) {
       }, { ref_for: !0 }, e.sanitizedAttributes, {
         onClick: (a) => e.onInput(l)
       }), null, 16, w),
-      e.toggleStyle === "radio-buttons" ? (n(), o("div", p, [
+      e.toggleStyle !== e.NeonToggleStyle.Toggle ? (n(), o("div", p, [
         l.key === e.modelValue ? (n(), o("div", V)) : d("", !0)
       ])) : d("", !0),
       h(e.$slots, "option", {
         index: r,
         option: l
       }, () => [
-        l.icon ? (n(), _(i, {
+        l.icon ? (n(), _(t, {
           key: 0,
           disabled: e.disabled || l.disabled,
           name: l.icon
@@ -66,8 +66,8 @@ function S(e, z, B, K, N, E) {
     ], 42, v))), 128))
   ], 2);
 }
-const F = /* @__PURE__ */ $(g, [["render", S]]);
+const D = /* @__PURE__ */ $(g, [["render", S]]);
 export {
-  F as default
+  D as default
 };
 //# sourceMappingURL=NeonToggle.vue.es.js.map

package/dist/components/user-input/toggle/NeonToggle.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonToggle.vue.es.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-toggle--${toggleStyle}`,\n      `neon-toggle--${disabled ? 'low-contrast' : color}`,\n      `neon-toggle--${orientation}`,\n      `neon-toggle--${size}`,\n      { 'neon-toggle--disabled': disabled },\n    ]\"\n    class=\"neon-toggle\"\n    role=\"radiogroup\"\n  >\n    <label\n      v-for=\"(option, index) in model\"\n      :key=\"option.key\"\n      :aria-checked=\"option.key === modelValue\"\n      :aria-disabled=\"disabled || option.disabled\"\n      :class=\"{\n        'neon-toggle__label--disabled': disabled || option.disabled,\n        'neon-toggle__label--checked': option.key === modelValue,\n        'neon-toggle__label--with-icon': option.icon,\n        'neon-toggle__label--with-slot-override': slots.option,\n        'neon-toggle__label--with-text': option.label,\n      }\"\n      :tabindex=\"!disabled && !option.disabled ? 0 : undefined\"\n      class=\"neon-toggle__label no-style\"\n      role=\"radio\"\n      @keydown.enter=\"selectOption(option)\"\n      @keydown.space.prevent=\"selectOption(option)\"\n    >\n      <input\n        :checked=\"option.key === modelValue\"\n        :disabled=\"disabled || option.disabled\"\n        :name=\"name\"\n        :tabindex=\"-1\"\n        :value=\"option.key\"\n        class=\"neon-toggle__input\"\n        type=\"radio\"\n        v-bind=\"sanitizedAttributes\"\n        @click=\"onInput(option)\"\n      />\n      <div v-if=\"toggleStyle === 'radio-buttons'\" class=\"neon-toggle__radio-button\">\n        <div v-if=\"option.key === modelValue\" class=\"neon-toggle__radio-button-indicator\"></div>\n      </div>\n      <!-- @slot This slot is for overriding the option rendering, it is passed two arguments, <em>option</em> - the option model & <em>index</em> -->\n      <slot :index=\"index\" :option=\"option\" name=\"option\">\n        <neon-icon v-if=\"option.icon\" :disabled=\"disabled || option.disabled\" :name=\"option.icon\" />\n        <span v-if=\"option.label\">{{ option.label }}</span>\n      </slot>\n    </label>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonToggle.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_openBlock","_Fragment","_renderList","option","index","_withKeys","$event","_withModifiers","_createElementVNode","_mergeProps","_hoisted_3","_hoisted_4","_renderSlot","_createBlock","_component_neon_icon","_hoisted_5","_toDisplayString"],"mappings":";;;;;EAyCkD,OAAM;;;EACV,OAAM;;;;cAzClDA,EAiDM,OAAA;AAAA,IAhDH,OAAKC,EAAA,CAAA;AAAA,sBAA0BC,EAAA,WAAW;AAAA,MAA0B,gBAAAA,EAAA,4BAA4BA,EAAA,KAAK;AAAA,sBAA0BA,EAAA,WAAW;AAAA,sBAA0BA,EAAA,IAAI;AAAA,iCAAqCA,EAAA,SAAQ;AAAA,OAOhN,aAAa,CAAA;AAAA,IACnB,MAAK;AAAA;KAELC,EAAA,EAAA,GAAAH,EAqCQI,GAAA,MAAAC,EApCoBH,EAAA,OAAK,CAAvBI,GAAQC,YADlBP,EAqCQ,SAAA;AAAA,MAnCL,KAAKM,EAAO;AAAA,MACZ,gBAAcA,EAAO,QAAQJ,EAAA;AAAA,MAC7B,iBAAeA,EAAA,YAAYI,EAAO;AAAA,MAClC,OAAKL,EAAA,CAAA;AAAA,wCAA4CC,EAAA,YAAYI,EAAO;AAAA,uCAAiDA,EAAO,QAAQJ,EAAA;AAAA,QAAqD,iCAAAI,EAAO;AAAA,QAAwD,0CAAAJ,EAAA,MAAM;AAAA,QAAiD,iCAAAI,EAAO;AAAA,SAQjT,6BAA6B,CAAA;AAAA,MADlC,WAAWJ,EAAA,YAAQ,CAAKI,EAAO,eAAe;AAAA,MAE/C,MAAK;AAAA,MACJ,WAAO;AAAA,QAAQE,EAAA,CAAAC,MAAAP,EAAA,aAAaI,CAAM,GAAA,CAAA,OAAA,CAAA;AAAA,QACXE,EAAAE,EAAA,CAAAD,MAAAP,EAAA,aAAaI,CAAM,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;MAE3CK,EAUE,SAVFC,EAUE;AAAA,QATC,SAASN,EAAO,QAAQJ,EAAA;AAAA,QACxB,UAAUA,EAAA,YAAYI,EAAO;AAAA,QAC7B,MAAMJ,EAAA;AAAA,QACN,UAAU;AAAA,QACV,OAAOI,EAAO;AAAA,QACf,OAAM;AAAA,QACN,MAAK;AAAA,0BACGJ,EAAA,qBAAmB;AAAA,QAC1B,SAAK,CAAAO,MAAEP,EAAA,QAAQI,CAAM;AAAA;MAEbJ,EAAA,gBAAW,mBAAtBC,KAAAH,EAEM,OAFNa,GAEM;AAAA,QADOP,EAAO,QAAQJ,EAAA,cAA1BC,KAAAH,EAAwF,OAAxFc,CAAwF;;MAG1FC,EAGOb,EAAA,QAAA,UAAA;AAAA,QAHA,OAAOK;AAAA,QAAQ,QAAQD;AAAA,SAA9B,MAGO;AAAA,QAFYA,EAAO,aAAxBU,EAA4FC,GAAA;AAAA;UAA7D,UAAUf,EAAA,YAAYI,EAAO;AAAA,UAAW,MAAMA,EAAO;AAAA;QACxEA,EAAO,cAAnBN,EAAmD,QAAAkB,GAAAC,EAAtBb,EAAO,KAAK,GAAA,CAAA;;;;;;"}
+{"version":3,"file":"NeonToggle.vue.es.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-toggle--${toggleStyle}`,\n      `neon-toggle--${disabled ? 'low-contrast' : color}`,\n      `neon-toggle--${orientation}`,\n      `neon-toggle--${size}`,\n      { 'neon-toggle--disabled': disabled },\n    ]\"\n    class=\"neon-toggle\"\n    role=\"radiogroup\"\n  >\n    <label\n      v-for=\"(option, index) in model\"\n      :key=\"option.key\"\n      :aria-checked=\"option.key === modelValue\"\n      :aria-disabled=\"disabled || option.disabled\"\n      :class=\"{\n        'neon-toggle__label--disabled': disabled || option.disabled,\n        'neon-toggle__label--checked': option.key === modelValue,\n        'neon-toggle__label--with-icon': option.icon,\n        'neon-toggle__label--with-slot-override': slots.option,\n        'neon-toggle__label--with-text': option.label,\n      }\"\n      :tabindex=\"!disabled && !option.disabled ? 0 : undefined\"\n      class=\"neon-toggle__label no-style\"\n      role=\"radio\"\n      @keydown.enter=\"selectOption(option)\"\n      @keydown.space.prevent=\"selectOption(option)\"\n    >\n      <input\n        :checked=\"option.key === modelValue\"\n        :disabled=\"disabled || option.disabled\"\n        :name=\"name\"\n        :tabindex=\"-1\"\n        :value=\"option.key\"\n        class=\"neon-toggle__input\"\n        type=\"radio\"\n        v-bind=\"sanitizedAttributes\"\n        @click=\"onInput(option)\"\n      />\n      <div v-if=\"toggleStyle !== NeonToggleStyle.Toggle\" class=\"neon-toggle__radio-button\">\n        <div v-if=\"option.key === modelValue\" class=\"neon-toggle__radio-button-indicator\"></div>\n      </div>\n      <!-- @slot This slot is for overriding the option rendering, it is passed two arguments, <em>option</em> - the option model & <em>index</em> -->\n      <slot :index=\"index\" :option=\"option\" name=\"option\">\n        <neon-icon v-if=\"option.icon\" :disabled=\"disabled || option.disabled\" :name=\"option.icon\" />\n        <span v-if=\"option.label\">{{ option.label }}</span>\n      </slot>\n    </label>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonToggle.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_openBlock","_Fragment","_renderList","option","index","_withKeys","$event","_withModifiers","_createElementVNode","_mergeProps","_hoisted_3","_hoisted_4","_renderSlot","_createBlock","_component_neon_icon","_hoisted_5","_toDisplayString"],"mappings":";;;;;EAyCyD,OAAM;;;EACjB,OAAM;;;;cAzClDA,EAiDM,OAAA;AAAA,IAhDH,OAAKC,EAAA,CAAA;AAAA,sBAA0BC,EAAA,WAAW;AAAA,MAA0B,gBAAAA,EAAA,4BAA4BA,EAAA,KAAK;AAAA,sBAA0BA,EAAA,WAAW;AAAA,sBAA0BA,EAAA,IAAI;AAAA,iCAAqCA,EAAA,SAAQ;AAAA,OAOhN,aAAa,CAAA;AAAA,IACnB,MAAK;AAAA;KAELC,EAAA,EAAA,GAAAH,EAqCQI,GAAA,MAAAC,EApCoBH,EAAA,OAAK,CAAvBI,GAAQC,YADlBP,EAqCQ,SAAA;AAAA,MAnCL,KAAKM,EAAO;AAAA,MACZ,gBAAcA,EAAO,QAAQJ,EAAA;AAAA,MAC7B,iBAAeA,EAAA,YAAYI,EAAO;AAAA,MAClC,OAAKL,EAAA,CAAA;AAAA,wCAA4CC,EAAA,YAAYI,EAAO;AAAA,uCAAiDA,EAAO,QAAQJ,EAAA;AAAA,QAAqD,iCAAAI,EAAO;AAAA,QAAwD,0CAAAJ,EAAA,MAAM;AAAA,QAAiD,iCAAAI,EAAO;AAAA,SAQjT,6BAA6B,CAAA;AAAA,MADlC,WAAWJ,EAAA,YAAQ,CAAKI,EAAO,eAAe;AAAA,MAE/C,MAAK;AAAA,MACJ,WAAO;AAAA,QAAQE,EAAA,CAAAC,MAAAP,EAAA,aAAaI,CAAM,GAAA,CAAA,OAAA,CAAA;AAAA,QACXE,EAAAE,EAAA,CAAAD,MAAAP,EAAA,aAAaI,CAAM,GAAA,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;MAE3CK,EAUE,SAVFC,EAUE;AAAA,QATC,SAASN,EAAO,QAAQJ,EAAA;AAAA,QACxB,UAAUA,EAAA,YAAYI,EAAO;AAAA,QAC7B,MAAMJ,EAAA;AAAA,QACN,UAAU;AAAA,QACV,OAAOI,EAAO;AAAA,QACf,OAAM;AAAA,QACN,MAAK;AAAA,0BACGJ,EAAA,qBAAmB;AAAA,QAC1B,SAAK,CAAAO,MAAEP,EAAA,QAAQI,CAAM;AAAA;MAEbJ,EAAA,gBAAgBA,EAAA,gBAAgB,UAA3CC,KAAAH,EAEM,OAFNa,GAEM;AAAA,QADOP,EAAO,QAAQJ,EAAA,cAA1BC,KAAAH,EAAwF,OAAxFc,CAAwF;;MAG1FC,EAGOb,EAAA,QAAA,UAAA;AAAA,QAHA,OAAOK;AAAA,QAAQ,QAAQD;AAAA,SAA9B,MAGO;AAAA,QAFYA,EAAO,aAAxBU,EAA4FC,GAAA;AAAA;UAA7D,UAAUf,EAAA,YAAYI,EAAO;AAAA,UAAW,MAAMA,EAAO;AAAA;QACxEA,EAAO,cAAnBN,EAAmD,QAAAkB,GAAAC,EAAtBb,EAAO,KAAK,GAAA,CAAA;;;;;;"}

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

@@ -5,5 +5,7 @@ export declare enum NeonToggleStyle {
     /** Toggle style which is a horizontal group of connected buttons with one active member. */
     Toggle = "toggle",
     /** Traditional HTML radio button input style. */
-    RadioButtons = "radio-buttons"
+    RadioButtons = "radio-buttons",
+    /** Card style radio buttons for more detailed content */
+    Card = "card"
 }

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

@@ -19,4 +19,6 @@ export interface NeonDate {
     dayFormatted: string;
     /** Time string in the <a href="https://en.wikipedia.org/wiki/ISO_8601">ISO-8601 format</a>. */
     time?: string;
+    /** Time string in the <a href="https://en.wikipedia.org/wiki/ISO_8601">ISO-8601 format</a> without seconds. */
+    timeShort?: string;
 }

package/dist/src/components/layout/swiper/NeonSwiper.d.ts

@@ -1,3 +1,4 @@
+import { NeonOrientation } from '@/common/enums/NeonOrientation';
 /**
  * Automatically handle horizontally overflowing content by placing it in a NeonSwiper component allowing for smooth
  * horizontal scrolling with all input devices.
@@ -10,6 +11,27 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Swiper orientation, i.e. whether to manage overflow horizontally or vertically.
+     */
+    orientation: {
+        type: () => NeonOrientation;
+        default: NeonOrientation;
+    };
+    /**
+     * Hide the starting fade (left or top depending on the orientation).
+     */
+    hideFadeStart: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Hide the ending fade (right or bottom depending on the orientation).
+     */
+    hideFadeEnd: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     isOverflowing: import("vue").Ref<boolean, boolean>;
     isScrollStart: import("vue").Ref<boolean, boolean>;
@@ -23,7 +45,31 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Swiper orientation, i.e. whether to manage overflow horizontally or vertically.
+     */
+    orientation: {
+        type: () => NeonOrientation;
+        default: NeonOrientation;
+    };
+    /**
+     * Hide the starting fade (left or top depending on the orientation).
+     */
+    hideFadeStart: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Hide the ending fade (right or bottom depending on the orientation).
+     */
+    hideFadeEnd: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
+    orientation: NeonOrientation;
     fade: boolean;
+    hideFadeStart: boolean;
+    hideFadeEnd: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/src/components/presentation/image-carousel/NeonImageCarousel.d.ts

@@ -30,6 +30,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Provide an alternative label for the Previous button.
+     */
+    closeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * Provide an alternative label for the Previous button.
      */
@@ -50,6 +57,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     carouselItem: import("vue").Ref<HTMLLIElement[], HTMLLIElement[]>;
     carouselItems: import("vue").Ref<HTMLUListElement | null, HTMLUListElement | null>;
     initialised: import("vue").Ref<boolean, boolean>;
+    expanded: import("vue").Ref<boolean, boolean>;
     next: () => void;
     previous: () => void;
     scrollTo: (index: number) => void;
@@ -76,6 +84,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Provide an alternative label for the Previous button.
+     */
+    closeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * Provide an alternative label for the Previous button.
      */
@@ -95,6 +110,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     imageCountLabel: string;
     hideLabel: boolean;
+    closeLabel: string;
     previousLabel: string;
     nextLabel: string;
 }, {}, {
@@ -109,20 +125,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         size: {
             type: () => import("../../../neon").NeonButtonSize;
-            default: import("../../../neon").NeonButtonSize; /**
-             * Provide an alternative label for the Next button.
-             */
-        }; /**
-         * Provide an alternative label for the Next button.
-         */
+            default: import("../../../neon").NeonButtonSize;
+        };
         color: {
             type: () => import("../../../neon").NeonFunctionalColor;
             default: import("../../../neon").NeonFunctionalColor;
-        }; /**
-         * The index of the currently visible image.
-         *
-         * @type {number}
-         */
+        };
         inverse: {
             type: BooleanConstructor;
             default: boolean;
@@ -216,20 +224,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         size: {
             type: () => import("../../../neon").NeonButtonSize;
-            default: import("../../../neon").NeonButtonSize; /**
-             * Provide an alternative label for the Next button.
-             */
-        }; /**
-         * Provide an alternative label for the Next button.
-         */
+            default: import("../../../neon").NeonButtonSize;
+        };
         color: {
             type: () => import("../../../neon").NeonFunctionalColor;
             default: import("../../../neon").NeonFunctionalColor;
-        }; /**
-         * The index of the currently visible image.
-         *
-         * @type {number}
-         */
+        };
         inverse: {
             type: BooleanConstructor;
             default: boolean;
@@ -588,5 +588,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             inverse: boolean;
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    NeonStack: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        gap: {
+            type: () => import("../../../neon").NeonSize;
+            default: () => import("../../../neon").NeonSize;
+        };
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        gap: {
+            type: () => import("../../../neon").NeonSize;
+            default: () => import("../../../neon").NeonSize;
+        };
+    }>> & Readonly<{}>, {
+        gap: import("../../../neon").NeonSize;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/src/components/user-input/toggle/NeonToggle.d.ts

@@ -72,6 +72,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     slots: Readonly<{
         [name: string]: import("vue").Slot<any> | undefined;
     }>;
+    NeonToggleStyle: typeof NeonToggleStyle;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The name of the radio button group.

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

package/src/sass/components/_badge.scss

@@ -121,7 +121,9 @@
         &,
         .neon-badge__image {
           width: var(--neon-size-#{$badge-size}-badge);
+          min-width: var(--neon-size-#{$badge-size}-badge);
           height: var(--neon-size-#{$badge-size}-badge);
+          min-height: var(--neon-size-#{$badge-size}-badge);
           object-fit: cover;
         }