npm - @aotearoan/neon - Versions diffs - 9.0.0-beta-1 → 9.0.2-beta-1 - Mend

@aotearoan/neon 9.0.0-beta-1 → 9.0.2-beta-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/dist/components/presentation/dropdown/NeonDropdown.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var i=require("./NeonDropdown.ts_vue_type_script_src_4222fb80_lang.cjs.js"),o=require("vue"),a=require("../../../_virtual/plugin-vue_export-helper.cjs.js");const s={ref:"dropdownButton"},p={key:0,class:"neon-dropdown__button-wrapper"},u=["tabindex"],b=o.createElementVNode("div",{class:"neon-dropdown__click-blocker"},null,-1);function w(e,n,c,m,g,k){const r=o.resolveComponent("neon-button"),l=o.resolveComponent("neon-badge"),t=o.resolveComponent("neon-expansion-indicator");return o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass([[{"neon-dropdown--with-indicator":e.indicator,"neon-dropdown--open":e.modelValue,"neon-dropdown--open-on-hover":e.openOnHover,"neon-dropdown--icon-only":e.icon&&!e.label,"neon-dropdown--disabled":e.disabled},`neon-dropdown--${e.size}`,`neon-dropdown--${e.color}`],"neon-dropdown"])},[o.createElementVNode("div",s,[o.renderSlot(e.$slots,"dropdown-button",{},()=>[e.dropdownStyle==="text-button"||e.dropdownStyle==="solid-button"?(o.openBlock(),o.createElementBlock("div",p,[o.createVNode(r,{"alternate-color":e.alternateColor,"aria-expanded":e.modelValue,"button-style":e.dropdownStyle==="text-button"?"text":"solid",color:e.color,disabled:e.disabled,icon:e.icon,indicator:e.indicator,"indicator-expanded":e.modelValue,label:e.label,size:e.size,"aria-haspopup":"true",class:"neon-dropdown__button",onBlur:n[0]||(n[0]=d=>e.onBlur()),onClick:n[1]||(n[1]=d=>e.toggleOpen()),onFocus:n[2]||(n[2]=d=>e.onFocus())},null,8,["alternate-color","aria-expanded","button-style","color","disabled","icon","indicator","indicator-expanded","label","size"])])):(o.openBlock(),o.createElementBlock("div",{key:1,ref:"dropdownButton",tabindex:e.disabled?void 0:0,class:"neon-dropdown__badge",role:"button",onClick:n[3]||(n[3]=(...d)=>e.toggleOpen&&e.toggleOpen(...d)),onKeydown:[n[4]||(n[4]=o.withKeys((...d)=>e.toggleOpen&&e.toggleOpen(...d),["enter"])),n[5]||(n[5]=o.withKeys(o.withModifiers((...d)=>e.toggleOpen&&e.toggleOpen(...d),["stop","prevent"]),["space"]))]},[o.createVNode(l,{"alternate-color":e.alternateColor,circular:e.dropdownStyle==="circular-badge",color:e.color,disabled:e.disabled,icon:e.icon,image:e.image,imageAlt:e.imageAlt,label:e.label,size:e.size},null,8,["alternate-color","circular","color","disabled","icon","image","imageAlt","label","size"]),e.indicator?(o.openBlock(),o.createBlock(t,{key:0,color:e.color,disabled:e.disabled,expanded:e.modelValue,class:"neon-button__indicator"},null,8,["color","disabled","expanded"])):o.createCommentVNode("",!0)],40,u))])],512),b,o.withDirectives(o.createElementVNode("div",{ref:"dropdownContent",class:o.normalizeClass([`neon-dropdown__content--${e.dropdownPlacement}`,"neon-dropdown__content"])},[o.renderSlot(e.$slots,"default")],2),[[o.vShow,e.openOnHover||e.modelValue]])],2)}var v=a(i,[["render",w],["__file","/Users/andrew/dev/projects/neon/src/components/presentation/dropdown/NeonDropdown.vue"]]);module.exports=v;
+"use strict";var t=require("./NeonDropdown.ts_vue_type_script_src_4222fb80_lang.cjs.js"),o=require("vue"),a=require("../../../_virtual/plugin-vue_export-helper.cjs.js");const s={ref:"dropdownButton"},p={key:0,class:"neon-dropdown__button-wrapper"},u=["id","tabindex"],b=o.createElementVNode("div",{class:"neon-dropdown__click-blocker"},null,-1);function w(e,n,m,g,c,k){const r=o.resolveComponent("neon-button"),l=o.resolveComponent("neon-badge"),i=o.resolveComponent("neon-expansion-indicator");return o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass([[{"neon-dropdown--with-indicator":e.indicator,"neon-dropdown--open":e.modelValue,"neon-dropdown--open-on-hover":e.openOnHover,"neon-dropdown--icon-only":e.icon&&!e.label,"neon-dropdown--disabled":e.disabled},`neon-dropdown--${e.size}`,`neon-dropdown--${e.color}`],"neon-dropdown"])},[o.createElementVNode("div",s,[o.renderSlot(e.$slots,"dropdown-button",{},()=>[e.dropdownStyle==="text-button"||e.dropdownStyle==="solid-button"?(o.openBlock(),o.createElementBlock("div",p,[o.createVNode(r,{id:e.id,"alternate-color":e.alternateColor,"aria-expanded":e.modelValue,"button-style":e.dropdownStyle==="text-button"?"text":"solid",color:e.color,disabled:e.disabled,icon:e.icon,indicator:e.indicator,"indicator-expanded":e.modelValue,label:e.label,size:e.size,"aria-haspopup":"true",class:"neon-dropdown__button",onBlur:n[0]||(n[0]=d=>e.onBlur()),onClick:n[1]||(n[1]=d=>e.toggleOpen()),onFocus:n[2]||(n[2]=d=>e.onFocus())},null,8,["id","alternate-color","aria-expanded","button-style","color","disabled","icon","indicator","indicator-expanded","label","size"])])):(o.openBlock(),o.createElementBlock("div",{key:1,id:e.id,ref:"dropdownButton",tabindex:e.disabled?void 0:0,class:"neon-dropdown__badge",role:"button",onClick:n[3]||(n[3]=(...d)=>e.toggleOpen&&e.toggleOpen(...d)),onKeydown:[n[4]||(n[4]=o.withKeys((...d)=>e.toggleOpen&&e.toggleOpen(...d),["enter"])),n[5]||(n[5]=o.withKeys(o.withModifiers((...d)=>e.toggleOpen&&e.toggleOpen(...d),["stop","prevent"]),["space"]))]},[o.createVNode(l,{"alternate-color":e.alternateColor,circular:e.dropdownStyle==="circular-badge",color:e.color,disabled:e.disabled,icon:e.icon,image:e.image,imageAlt:e.imageAlt,label:e.label,size:e.size},null,8,["alternate-color","circular","color","disabled","icon","image","imageAlt","label","size"]),e.indicator?(o.openBlock(),o.createBlock(i,{key:0,color:e.color,disabled:e.disabled,expanded:e.modelValue,class:"neon-button__indicator"},null,8,["color","disabled","expanded"])):o.createCommentVNode("",!0)],40,u))])],512),b,o.withDirectives(o.createElementVNode("div",{ref:"dropdownContent",class:o.normalizeClass([`neon-dropdown__content--${e.dropdownPlacement}`,"neon-dropdown__content"])},[o.renderSlot(e.$slots,"default")],2),[[o.vShow,e.openOnHover||e.modelValue]])],2)}var v=a(t,[["render",w],["__file","/Users/andrew/dev/projects/neon/src/components/presentation/dropdown/NeonDropdown.vue"]]);module.exports=v;
 //# sourceMappingURL=NeonDropdown.cjs.js.map

package/dist/components/presentation/dropdown/NeonDropdown.d.ts CHANGED Viewed

@@ -12,6 +12,12 @@ import { NeonDropdownStyle } from '@/common/enums/NeonDropdownStyle';
  * <strong>NeonSelect</strong> form component.</p>
  */
 declare const _default: import("vue").DefineComponent<{
+    /**
+     * Id for the dropdown button.
+     */
+    id: {
+        type: StringConstructor;
+    };
     /**
      * Whether the dropdown is currently open.
      */
@@ -126,6 +132,12 @@ declare const _default: import("vue").DefineComponent<{
     onBlur: () => void;
     onFocus: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "dropdown-placement" | "button-ref")[], "update:modelValue" | "focus" | "blur" | "dropdown-placement" | "button-ref", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Id for the dropdown button.
+     */
+    id: {
+        type: StringConstructor;
+    };
     /**
      * Whether the dropdown is currently open.
      */

package/dist/components/presentation/dropdown/NeonDropdown.es.js CHANGED Viewed

@@ -6,7 +6,7 @@ const _hoisted_2 = {
   key: 0,
   class: "neon-dropdown__button-wrapper"
 };
-const _hoisted_3 = ["tabindex"];
+const _hoisted_3 = ["id", "tabindex"];
 const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "neon-dropdown__click-blocker" }, null, -1);
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_neon_button = resolveComponent("neon-button");
@@ -29,6 +29,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "dropdown-button", {}, () => [
         _ctx.dropdownStyle === "text-button" || _ctx.dropdownStyle === "solid-button" ? (openBlock(), createElementBlock("div", _hoisted_2, [
           createVNode(_component_neon_button, {
+            id: _ctx.id,
             "alternate-color": _ctx.alternateColor,
             "aria-expanded": _ctx.modelValue,
             "button-style": _ctx.dropdownStyle === "text-button" ? "text" : "solid",
@@ -44,9 +45,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             onBlur: _cache[0] || (_cache[0] = ($event) => _ctx.onBlur()),
             onClick: _cache[1] || (_cache[1] = ($event) => _ctx.toggleOpen()),
             onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.onFocus())
-          }, null, 8, ["alternate-color", "aria-expanded", "button-style", "color", "disabled", "icon", "indicator", "indicator-expanded", "label", "size"])
+          }, null, 8, ["id", "alternate-color", "aria-expanded", "button-style", "color", "disabled", "icon", "indicator", "indicator-expanded", "label", "size"])
         ])) : (openBlock(), createElementBlock("div", {
           key: 1,
+          id: _ctx.id,
           ref: "dropdownButton",
           tabindex: !_ctx.disabled ? 0 : void 0,
           class: "neon-dropdown__badge",

package/dist/components/presentation/dropdown/NeonDropdown.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NeonDropdown.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"NeonDropdown.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/presentation/dropdown/NeonDropdown.ts_vue_type_script_src_4222fb80_lang.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var n=require("vue"),p=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),f=require("../../../common/utils/NeonDropdownPlacementUtils.cjs.js"),w=require("../../../common/utils/NeonClosableUtils.cjs.js"),N=require("../../../common/enums/NeonSize.cjs.js"),j=require("../../../common/enums/NeonFunctionalColor.cjs.js"),y=require("../../../common/enums/NeonDropdownStyle.cjs.js"),C=require("../badge/NeonBadge.cjs.js"),S=require("../../user-input/button/NeonButton.cjs.js"),g=require("../expansion-indicator/NeonExpansionIndicator.cjs.js"),b=n.defineComponent({name:"NeonDropdown",components:{NeonBadge:C,NeonButton:S,NeonExpansionIndicator:g},props:{modelValue:{type:Boolean,required:!0},label:{type:String,default:null},image:{type:String,default:null},imageAlt:{type:String,default:null},icon:{type:String,default:null},indicator:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},size:{type:String,default:N.NeonSize.Medium},color:{type:String,default:j.NeonFunctionalColor.LowContrast},alternateColor:{type:String,default:null},dropdownStyle:{type:String,default:y.NeonDropdownStyle.SolidButton},placement:{type:String,default:p.NeonDropdownPlacement.BottomLeft},placementContainer:{type:Object,default:null},openOnHover:{type:Boolean,default:!1}},emits:["update:modelValue","dropdown-placement","blur","focus","button-ref"],setup(e,{emit:t}){const r=n.ref(null),l=n.ref(null),a=n.ref(e.placement),u=n.ref(null),s=()=>{t("update:modelValue",!1)},d=()=>{e.modelValue&&s()},o=()=>{if(e.modelValue&&r.value&&l.value){const i=a.value;a.value=f.NeonDropdownPlacementUtils.calculatePlacement(r.value,l.value,e.placement,e.placementContainer),i!==a.value&&t("dropdown-placement",a.value)}},c=()=>{!e.disabled&&!e.openOnHover&&(t("update:modelValue",!e.modelValue),setTimeout(o))},m=()=>{t("blur")},v=()=>{t("focus")};return n.onMounted(()=>{!e.openOnHover&&l.value&&(u.value=new w.NeonClosableUtils(l.value,d)),window.addEventListener("resize",o,{passive:!0}),window.addEventListener("scroll",o,{passive:!0}),e.placementContainer&&e.placementContainer.addEventListener("scroll",o,{passive:!0})}),n.onUnmounted(()=>{e.openOnHover||u.value&&u.value.destroy(),window.removeEventListener("resize",o),window.removeEventListener("scroll",o),e.placementContainer&&e.placementContainer.removeEventListener("scroll",o)}),n.watch(()=>r.value,i=>t("button-ref",i),{immediate:!0}),{dropdownButton:r,dropdownContent:l,dropdownPlacement:a,closableUtils:u,onClose:s,close:d,toggleOpen:c,onBlur:m,onFocus:v}}});module.exports=b;
+"use strict";var n=require("vue"),p=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),f=require("../../../common/utils/NeonDropdownPlacementUtils.cjs.js"),w=require("../../../common/utils/NeonClosableUtils.cjs.js"),N=require("../../../common/enums/NeonSize.cjs.js"),y=require("../../../common/enums/NeonFunctionalColor.cjs.js"),j=require("../../../common/enums/NeonDropdownStyle.cjs.js"),S=require("../badge/NeonBadge.cjs.js"),g=require("../../user-input/button/NeonButton.cjs.js"),C=require("../expansion-indicator/NeonExpansionIndicator.cjs.js"),b=n.defineComponent({name:"NeonDropdown",components:{NeonBadge:S,NeonButton:g,NeonExpansionIndicator:C},props:{id:{type:String},modelValue:{type:Boolean,required:!0},label:{type:String,default:null},image:{type:String,default:null},imageAlt:{type:String,default:null},icon:{type:String,default:null},indicator:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},size:{type:String,default:N.NeonSize.Medium},color:{type:String,default:y.NeonFunctionalColor.LowContrast},alternateColor:{type:String,default:null},dropdownStyle:{type:String,default:j.NeonDropdownStyle.SolidButton},placement:{type:String,default:p.NeonDropdownPlacement.BottomLeft},placementContainer:{type:Object,default:null},openOnHover:{type:Boolean,default:!1}},emits:["update:modelValue","dropdown-placement","blur","focus","button-ref"],setup(e,{emit:t}){const r=n.ref(null),l=n.ref(null),a=n.ref(e.placement),u=n.ref(null),s=()=>{t("update:modelValue",!1)},d=()=>{e.modelValue&&s()},o=()=>{if(e.modelValue&&r.value&&l.value){const i=a.value;a.value=f.NeonDropdownPlacementUtils.calculatePlacement(r.value,l.value,e.placement,e.placementContainer),i!==a.value&&t("dropdown-placement",a.value)}},c=()=>{!e.disabled&&!e.openOnHover&&(t("update:modelValue",!e.modelValue),setTimeout(o))},m=()=>{t("blur")},v=()=>{t("focus")};return n.onMounted(()=>{!e.openOnHover&&l.value&&(u.value=new w.NeonClosableUtils(l.value,d)),window.addEventListener("resize",o,{passive:!0}),window.addEventListener("scroll",o,{passive:!0}),e.placementContainer&&e.placementContainer.addEventListener("scroll",o,{passive:!0})}),n.onUnmounted(()=>{e.openOnHover||u.value&&u.value.destroy(),window.removeEventListener("resize",o),window.removeEventListener("scroll",o),e.placementContainer&&e.placementContainer.removeEventListener("scroll",o)}),n.watch(()=>r.value,i=>t("button-ref",i),{immediate:!0}),{dropdownButton:r,dropdownContent:l,dropdownPlacement:a,closableUtils:u,onClose:s,close:d,toggleOpen:c,onBlur:m,onFocus:v}}});module.exports=b;
 //# sourceMappingURL=NeonDropdown.ts_vue_type_script_src_4222fb80_lang.cjs.js.map

package/dist/components/presentation/dropdown/NeonDropdown.ts_vue_type_script_src_4222fb80_lang.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NeonDropdown.ts_vue_type_script_src_4222fb80_lang.cjs.js","sources":["../../../../src/components/presentation/dropdown/NeonDropdown.ts?vue&type=script&src=4222fb80&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonDropdownPlacementUtils } from '@/common/utils/NeonDropdownPlacementUtils';\nimport { NeonClosableUtils } from '@/common/utils/NeonClosableUtils';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonDropdownStyle } from '@/common/enums/NeonDropdownStyle';\nimport NeonBadge from '@/components/presentation/badge/NeonBadge.vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\n\n/*\n <p>A general purpose dropdown component. This component consists of a button, to trigger the dropdown to open, and\n * the dropdown content which is displayed above the page when the user clicks the button.</p>\n * <p>This can be useful for secondary (perhaps more complex) actions for which there is not enough space on the page or\n * the action is asynchronous allowing the user to perform the action and continue what they were doing. Examples are\n * providing links to copy and letting the user send feedback.</p>\n * <p><strong>NeonDropdown</strong> is the basis for the <strong>NeonDropdownMenu</strong> component and the\n * <strong>NeonSelect</strong> form component.</p>\n /\nexport default defineComponent({\n name: 'NeonDropdown',\n components: {\n NeonBadge,\n NeonButton,\n NeonExpansionIndicator,\n },\n props: {\n /\n Whether the dropdown is currently open.\n /\n modelValue: { type: Boolean, required: true },\n /\n The label for the dropdown button.\n /\n label: { type: String, default: null },\n /\n URL of image to display if the button style is a square or circular badge.\n /\n image: { type: String, default: null },\n /\n Badge image ALT text.\n /\n imageAlt: { type: String, default: null },\n /\n An icon to display on the dropdown button. This will be to the left of any label, but can also be used on its own.\n /\n icon: { type: String, default: null },\n /\n Show the dropdown button's indicator (chevron).\n /\n indicator: { type: Boolean, default: true },\n /\n Disable the dropdown button\n /\n disabled: { type: Boolean, default: false },\n /\n The size of the dropdown button - Small, Medium or Large.\n /\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /\n The color of the dropdown button\n /\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n /\n The alternate color of the dropdown button (for gradient buttons).\n /\n alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n /\n The style of the dropdown button\n /\n dropdownStyle: { type: String as () => NeonDropdownStyle, default: NeonDropdownStyle.SolidButton },\n /\n Placement of the dropdown contents.\n /\n placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n /\n Restrict placement to within this container.\n /\n placementContainer: { type: Object as () => HTMLElement, default: null },\n /\n Instead of opening on click (default), open on hover.\n /\n openOnHover: { type: Boolean, default: false },\n },\n emits: [\n /\n Emitted when the dropdown button is toggled.\n * @type {boolean} the open state of the dropdown.\n /\n 'update:modelValue',\n /\n Emitted on initialisation.\n * @type {NeonDropdownPlacement} the placement of the dropdown.\n /\n 'dropdown-placement',\n /\n Emitted when the dropdown button is blurred.\n * @type {void}\n /\n 'blur',\n /\n Emitted when the dropdown button is focussed.\n * @type {void}\n /\n 'focus',\n /\n emitted on initialisation\n * @type {HTMLElement} the reference to the HTMLElement for the dropdown menu button.\n */\n 'button-ref',\n ],\n setup(props, { emit }) {\n const dropdownButton = ref<HTMLElement \| null>(null);\n const dropdownContent = ref<HTMLDivElement \| null>(null);\n\n const dropdownPlacement = ref<NeonDropdownPlacement>(props.placement);\n const closableUtils = ref<NeonClosableUtils \| null>(null);\n\n const onClose = () => {\n emit('update:modelValue', false);\n };\n\n const close = () => {\n if (props.modelValue) {\n onClose();\n }\n };\n\n const recalculatePlacement = () => {\n if (props.modelValue && dropdownButton.value && dropdownContent.value) {\n const previousValue = dropdownPlacement.value;\n dropdownPlacement.value = NeonDropdownPlacementUtils.calculatePlacement(\n dropdownButton.value,\n dropdownContent.value,\n props.placement,\n props.placementContainer,\n );\n\n if (previousValue !== dropdownPlacement.value) {\n emit('dropdown-placement', dropdownPlacement.value);\n }\n }\n };\n\n const toggleOpen = () => {\n if (!props.disabled && !props.openOnHover) {\n emit('update:modelValue', !props.modelValue);\n setTimeout(recalculatePlacement);\n }\n };\n\n const onBlur = () => {\n emit('blur');\n };\n\n const onFocus = () => {\n emit('focus');\n };\n\n onMounted(() => {\n if (!props.openOnHover && dropdownContent.value) {\n closableUtils.value = new NeonClosableUtils(dropdownContent.value, close);\n }\n window.addEventListener('resize', recalculatePlacement, { passive: true });\n window.addEventListener('scroll', recalculatePlacement, { passive: true });\n if (props.placementContainer) {\n props.placementContainer.addEventListener('scroll', recalculatePlacement, { passive: true });\n }\n });\n\n onUnmounted(() => {\n if (!props.openOnHover) {\n closableUtils.value && closableUtils.value.destroy();\n }\n window.removeEventListener('resize', recalculatePlacement);\n window.removeEventListener('scroll', recalculatePlacement);\n if (props.placementContainer) {\n props.placementContainer.removeEventListener('scroll', recalculatePlacement);\n }\n });\n\n watch(\n () => dropdownButton.value,\n (value) => emit('button-ref', value),\n { immediate: true },\n );\n\n return {\n dropdownButton,\n dropdownContent,\n dropdownPlacement,\n closableUtils,\n onClose,\n close,\n toggleOpen,\n onBlur,\n onFocus,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonBadge","NeonButton","NeonExpansionIndicator","NeonSize","NeonFunctionalColor","NeonDropdownStyle","NeonDropdownPlacement","props","emit","dropdownButton","ref","dropdownContent","dropdownPlacement","closableUtils","onClose","close","recalculatePlacement","previousValue","NeonDropdownPlacementUtils","toggleOpen","onBlur","onFocus","onMounted","NeonClosableUtils","onUnmounted","watch","value"],"mappings":"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"}
1	+ {"version":3,"file":"NeonDropdown.ts_vue_type_script_src_4222fb80_lang.cjs.js","sources":["../../../../src/components/presentation/dropdown/NeonDropdown.ts?vue&type=script&src=4222fb80&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonDropdownPlacementUtils } from '@/common/utils/NeonDropdownPlacementUtils';\nimport { NeonClosableUtils } from '@/common/utils/NeonClosableUtils';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonDropdownStyle } from '@/common/enums/NeonDropdownStyle';\nimport NeonBadge from '@/components/presentation/badge/NeonBadge.vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\n\n/*\n <p>A general purpose dropdown component. This component consists of a button, to trigger the dropdown to open, and\n * the dropdown content which is displayed above the page when the user clicks the button.</p>\n * <p>This can be useful for secondary (perhaps more complex) actions for which there is not enough space on the page or\n * the action is asynchronous allowing the user to perform the action and continue what they were doing. Examples are\n * providing links to copy and letting the user send feedback.</p>\n * <p><strong>NeonDropdown</strong> is the basis for the <strong>NeonDropdownMenu</strong> component and the\n * <strong>NeonSelect</strong> form component.</p>\n /\nexport default defineComponent({\n name: 'NeonDropdown',\n components: {\n NeonBadge,\n NeonButton,\n NeonExpansionIndicator,\n },\n props: {\n /\n Id for the dropdown button.\n /\n id: { type: String },\n /\n Whether the dropdown is currently open.\n /\n modelValue: { type: Boolean, required: true },\n /\n The label for the dropdown button.\n /\n label: { type: String, default: null },\n /\n URL of image to display if the button style is a square or circular badge.\n /\n image: { type: String, default: null },\n /\n Badge image ALT text.\n /\n imageAlt: { type: String, default: null },\n /\n An icon to display on the dropdown button. This will be to the left of any label, but can also be used on its own.\n /\n icon: { type: String, default: null },\n /\n Show the dropdown button's indicator (chevron).\n /\n indicator: { type: Boolean, default: true },\n /\n Disable the dropdown button\n /\n disabled: { type: Boolean, default: false },\n /\n The size of the dropdown button - Small, Medium or Large.\n /\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /\n The color of the dropdown button\n /\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n /\n The alternate color of the dropdown button (for gradient buttons).\n /\n alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n /\n The style of the dropdown button\n /\n dropdownStyle: { type: String as () => NeonDropdownStyle, default: NeonDropdownStyle.SolidButton },\n /\n Placement of the dropdown contents.\n /\n placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n /\n Restrict placement to within this container.\n /\n placementContainer: { type: Object as () => HTMLElement, default: null },\n /\n Instead of opening on click (default), open on hover.\n /\n openOnHover: { type: Boolean, default: false },\n },\n emits: [\n /\n Emitted when the dropdown button is toggled.\n * @type {boolean} the open state of the dropdown.\n /\n 'update:modelValue',\n /\n Emitted on initialisation.\n * @type {NeonDropdownPlacement} the placement of the dropdown.\n /\n 'dropdown-placement',\n /\n Emitted when the dropdown button is blurred.\n * @type {void}\n /\n 'blur',\n /\n Emitted when the dropdown button is focussed.\n * @type {void}\n /\n 'focus',\n /\n emitted on initialisation\n * @type {HTMLElement} the reference to the HTMLElement for the dropdown menu button.\n */\n 'button-ref',\n ],\n setup(props, { emit }) {\n const dropdownButton = ref<HTMLElement \| null>(null);\n const dropdownContent = ref<HTMLDivElement \| null>(null);\n\n const dropdownPlacement = ref<NeonDropdownPlacement>(props.placement);\n const closableUtils = ref<NeonClosableUtils \| null>(null);\n\n const onClose = () => {\n emit('update:modelValue', false);\n };\n\n const close = () => {\n if (props.modelValue) {\n onClose();\n }\n };\n\n const recalculatePlacement = () => {\n if (props.modelValue && dropdownButton.value && dropdownContent.value) {\n const previousValue = dropdownPlacement.value;\n dropdownPlacement.value = NeonDropdownPlacementUtils.calculatePlacement(\n dropdownButton.value,\n dropdownContent.value,\n props.placement,\n props.placementContainer,\n );\n\n if (previousValue !== dropdownPlacement.value) {\n emit('dropdown-placement', dropdownPlacement.value);\n }\n }\n };\n\n const toggleOpen = () => {\n if (!props.disabled && !props.openOnHover) {\n emit('update:modelValue', !props.modelValue);\n setTimeout(recalculatePlacement);\n }\n };\n\n const onBlur = () => {\n emit('blur');\n };\n\n const onFocus = () => {\n emit('focus');\n };\n\n onMounted(() => {\n if (!props.openOnHover && dropdownContent.value) {\n closableUtils.value = new NeonClosableUtils(dropdownContent.value, close);\n }\n window.addEventListener('resize', recalculatePlacement, { passive: true });\n window.addEventListener('scroll', recalculatePlacement, { passive: true });\n if (props.placementContainer) {\n props.placementContainer.addEventListener('scroll', recalculatePlacement, { passive: true });\n }\n });\n\n onUnmounted(() => {\n if (!props.openOnHover) {\n closableUtils.value && closableUtils.value.destroy();\n }\n window.removeEventListener('resize', recalculatePlacement);\n window.removeEventListener('scroll', recalculatePlacement);\n if (props.placementContainer) {\n props.placementContainer.removeEventListener('scroll', recalculatePlacement);\n }\n });\n\n watch(\n () => dropdownButton.value,\n (value) => emit('button-ref', value),\n { immediate: true },\n );\n\n return {\n dropdownButton,\n dropdownContent,\n dropdownPlacement,\n closableUtils,\n onClose,\n close,\n toggleOpen,\n onBlur,\n onFocus,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonBadge","NeonButton","NeonExpansionIndicator","NeonSize","NeonFunctionalColor","NeonDropdownStyle","NeonDropdownPlacement","props","emit","dropdownButton","ref","dropdownContent","dropdownPlacement","closableUtils","onClose","close","recalculatePlacement","previousValue","NeonDropdownPlacementUtils","toggleOpen","onBlur","onFocus","onMounted","NeonClosableUtils","onUnmounted","watch","value"],"mappings":"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"}

package/dist/components/presentation/dropdown/NeonDropdown.ts_vue_type_script_src_4222fb80_lang.es.js CHANGED Viewed

@@ -16,6 +16,7 @@ var _sfc_main = defineComponent({
     NeonExpansionIndicator
   },
   props: {
+    id: { type: String },
     modelValue: { type: Boolean, required: true },
     label: { type: String, default: null },
     image: { type: String, default: null },

package/dist/components/presentation/dropdown/NeonDropdown.ts_vue_type_script_src_4222fb80_lang.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NeonDropdown.ts_vue_type_script_src_4222fb80_lang.es.js","sources":["../../../../src/components/presentation/dropdown/NeonDropdown.ts?vue&type=script&src=4222fb80&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonDropdownPlacementUtils } from '@/common/utils/NeonDropdownPlacementUtils';\nimport { NeonClosableUtils } from '@/common/utils/NeonClosableUtils';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonDropdownStyle } from '@/common/enums/NeonDropdownStyle';\nimport NeonBadge from '@/components/presentation/badge/NeonBadge.vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\n\n/*\n <p>A general purpose dropdown component. This component consists of a button, to trigger the dropdown to open, and\n * the dropdown content which is displayed above the page when the user clicks the button.</p>\n * <p>This can be useful for secondary (perhaps more complex) actions for which there is not enough space on the page or\n * the action is asynchronous allowing the user to perform the action and continue what they were doing. Examples are\n * providing links to copy and letting the user send feedback.</p>\n * <p><strong>NeonDropdown</strong> is the basis for the <strong>NeonDropdownMenu</strong> component and the\n * <strong>NeonSelect</strong> form component.</p>\n /\nexport default defineComponent({\n name: 'NeonDropdown',\n components: {\n NeonBadge,\n NeonButton,\n NeonExpansionIndicator,\n },\n props: {\n /\n Whether the dropdown is currently open.\n /\n modelValue: { type: Boolean, required: true },\n /\n The label for the dropdown button.\n /\n label: { type: String, default: null },\n /\n URL of image to display if the button style is a square or circular badge.\n /\n image: { type: String, default: null },\n /\n Badge image ALT text.\n /\n imageAlt: { type: String, default: null },\n /\n An icon to display on the dropdown button. This will be to the left of any label, but can also be used on its own.\n /\n icon: { type: String, default: null },\n /\n Show the dropdown button's indicator (chevron).\n /\n indicator: { type: Boolean, default: true },\n /\n Disable the dropdown button\n /\n disabled: { type: Boolean, default: false },\n /\n The size of the dropdown button - Small, Medium or Large.\n /\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /\n The color of the dropdown button\n /\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n /\n The alternate color of the dropdown button (for gradient buttons).\n /\n alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n /\n The style of the dropdown button\n /\n dropdownStyle: { type: String as () => NeonDropdownStyle, default: NeonDropdownStyle.SolidButton },\n /\n Placement of the dropdown contents.\n /\n placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n /\n Restrict placement to within this container.\n /\n placementContainer: { type: Object as () => HTMLElement, default: null },\n /\n Instead of opening on click (default), open on hover.\n /\n openOnHover: { type: Boolean, default: false },\n },\n emits: [\n /\n Emitted when the dropdown button is toggled.\n * @type {boolean} the open state of the dropdown.\n /\n 'update:modelValue',\n /\n Emitted on initialisation.\n * @type {NeonDropdownPlacement} the placement of the dropdown.\n /\n 'dropdown-placement',\n /\n Emitted when the dropdown button is blurred.\n * @type {void}\n /\n 'blur',\n /\n Emitted when the dropdown button is focussed.\n * @type {void}\n /\n 'focus',\n /\n emitted on initialisation\n * @type {HTMLElement} the reference to the HTMLElement for the dropdown menu button.\n */\n 'button-ref',\n ],\n setup(props, { emit }) {\n const dropdownButton = ref<HTMLElement \| null>(null);\n const dropdownContent = ref<HTMLDivElement \| null>(null);\n\n const dropdownPlacement = ref<NeonDropdownPlacement>(props.placement);\n const closableUtils = ref<NeonClosableUtils \| null>(null);\n\n const onClose = () => {\n emit('update:modelValue', false);\n };\n\n const close = () => {\n if (props.modelValue) {\n onClose();\n }\n };\n\n const recalculatePlacement = () => {\n if (props.modelValue && dropdownButton.value && dropdownContent.value) {\n const previousValue = dropdownPlacement.value;\n dropdownPlacement.value = NeonDropdownPlacementUtils.calculatePlacement(\n dropdownButton.value,\n dropdownContent.value,\n props.placement,\n props.placementContainer,\n );\n\n if (previousValue !== dropdownPlacement.value) {\n emit('dropdown-placement', dropdownPlacement.value);\n }\n }\n };\n\n const toggleOpen = () => {\n if (!props.disabled && !props.openOnHover) {\n emit('update:modelValue', !props.modelValue);\n setTimeout(recalculatePlacement);\n }\n };\n\n const onBlur = () => {\n emit('blur');\n };\n\n const onFocus = () => {\n emit('focus');\n };\n\n onMounted(() => {\n if (!props.openOnHover && dropdownContent.value) {\n closableUtils.value = new NeonClosableUtils(dropdownContent.value, close);\n }\n window.addEventListener('resize', recalculatePlacement, { passive: true });\n window.addEventListener('scroll', recalculatePlacement, { passive: true });\n if (props.placementContainer) {\n props.placementContainer.addEventListener('scroll', recalculatePlacement, { passive: true });\n }\n });\n\n onUnmounted(() => {\n if (!props.openOnHover) {\n closableUtils.value && closableUtils.value.destroy();\n }\n window.removeEventListener('resize', recalculatePlacement);\n window.removeEventListener('scroll', recalculatePlacement);\n if (props.placementContainer) {\n props.placementContainer.removeEventListener('scroll', recalculatePlacement);\n }\n });\n\n watch(\n () => dropdownButton.value,\n (value) => emit('button-ref', value),\n { immediate: true },\n );\n\n return {\n dropdownButton,\n dropdownContent,\n dropdownPlacement,\n closableUtils,\n onClose,\n close,\n toggleOpen,\n onBlur,\n onFocus,\n };\n },\n});\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"NeonDropdown.ts_vue_type_script_src_4222fb80_lang.es.js","sources":["../../../../src/components/presentation/dropdown/NeonDropdown.ts?vue&type=script&src=4222fb80&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonDropdownPlacementUtils } from '@/common/utils/NeonDropdownPlacementUtils';\nimport { NeonClosableUtils } from '@/common/utils/NeonClosableUtils';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonDropdownStyle } from '@/common/enums/NeonDropdownStyle';\nimport NeonBadge from '@/components/presentation/badge/NeonBadge.vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\n\n/*\n <p>A general purpose dropdown component. This component consists of a button, to trigger the dropdown to open, and\n * the dropdown content which is displayed above the page when the user clicks the button.</p>\n * <p>This can be useful for secondary (perhaps more complex) actions for which there is not enough space on the page or\n * the action is asynchronous allowing the user to perform the action and continue what they were doing. Examples are\n * providing links to copy and letting the user send feedback.</p>\n * <p><strong>NeonDropdown</strong> is the basis for the <strong>NeonDropdownMenu</strong> component and the\n * <strong>NeonSelect</strong> form component.</p>\n /\nexport default defineComponent({\n name: 'NeonDropdown',\n components: {\n NeonBadge,\n NeonButton,\n NeonExpansionIndicator,\n },\n props: {\n /\n Id for the dropdown button.\n /\n id: { type: String },\n /\n Whether the dropdown is currently open.\n /\n modelValue: { type: Boolean, required: true },\n /\n The label for the dropdown button.\n /\n label: { type: String, default: null },\n /\n URL of image to display if the button style is a square or circular badge.\n /\n image: { type: String, default: null },\n /\n Badge image ALT text.\n /\n imageAlt: { type: String, default: null },\n /\n An icon to display on the dropdown button. This will be to the left of any label, but can also be used on its own.\n /\n icon: { type: String, default: null },\n /\n Show the dropdown button's indicator (chevron).\n /\n indicator: { type: Boolean, default: true },\n /\n Disable the dropdown button\n /\n disabled: { type: Boolean, default: false },\n /\n The size of the dropdown button - Small, Medium or Large.\n /\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /\n The color of the dropdown button\n /\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n /\n The alternate color of the dropdown button (for gradient buttons).\n /\n alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n /\n The style of the dropdown button\n /\n dropdownStyle: { type: String as () => NeonDropdownStyle, default: NeonDropdownStyle.SolidButton },\n /\n Placement of the dropdown contents.\n /\n placement: { type: String as () => NeonDropdownPlacement, default: NeonDropdownPlacement.BottomLeft },\n /\n Restrict placement to within this container.\n /\n placementContainer: { type: Object as () => HTMLElement, default: null },\n /\n Instead of opening on click (default), open on hover.\n /\n openOnHover: { type: Boolean, default: false },\n },\n emits: [\n /\n Emitted when the dropdown button is toggled.\n * @type {boolean} the open state of the dropdown.\n /\n 'update:modelValue',\n /\n Emitted on initialisation.\n * @type {NeonDropdownPlacement} the placement of the dropdown.\n /\n 'dropdown-placement',\n /\n Emitted when the dropdown button is blurred.\n * @type {void}\n /\n 'blur',\n /\n Emitted when the dropdown button is focussed.\n * @type {void}\n /\n 'focus',\n /\n emitted on initialisation\n * @type {HTMLElement} the reference to the HTMLElement for the dropdown menu button.\n */\n 'button-ref',\n ],\n setup(props, { emit }) {\n const dropdownButton = ref<HTMLElement \| null>(null);\n const dropdownContent = ref<HTMLDivElement \| null>(null);\n\n const dropdownPlacement = ref<NeonDropdownPlacement>(props.placement);\n const closableUtils = ref<NeonClosableUtils \| null>(null);\n\n const onClose = () => {\n emit('update:modelValue', false);\n };\n\n const close = () => {\n if (props.modelValue) {\n onClose();\n }\n };\n\n const recalculatePlacement = () => {\n if (props.modelValue && dropdownButton.value && dropdownContent.value) {\n const previousValue = dropdownPlacement.value;\n dropdownPlacement.value = NeonDropdownPlacementUtils.calculatePlacement(\n dropdownButton.value,\n dropdownContent.value,\n props.placement,\n props.placementContainer,\n );\n\n if (previousValue !== dropdownPlacement.value) {\n emit('dropdown-placement', dropdownPlacement.value);\n }\n }\n };\n\n const toggleOpen = () => {\n if (!props.disabled && !props.openOnHover) {\n emit('update:modelValue', !props.modelValue);\n setTimeout(recalculatePlacement);\n }\n };\n\n const onBlur = () => {\n emit('blur');\n };\n\n const onFocus = () => {\n emit('focus');\n };\n\n onMounted(() => {\n if (!props.openOnHover && dropdownContent.value) {\n closableUtils.value = new NeonClosableUtils(dropdownContent.value, close);\n }\n window.addEventListener('resize', recalculatePlacement, { passive: true });\n window.addEventListener('scroll', recalculatePlacement, { passive: true });\n if (props.placementContainer) {\n props.placementContainer.addEventListener('scroll', recalculatePlacement, { passive: true });\n }\n });\n\n onUnmounted(() => {\n if (!props.openOnHover) {\n closableUtils.value && closableUtils.value.destroy();\n }\n window.removeEventListener('resize', recalculatePlacement);\n window.removeEventListener('scroll', recalculatePlacement);\n if (props.placementContainer) {\n props.placementContainer.removeEventListener('scroll', recalculatePlacement);\n }\n });\n\n watch(\n () => dropdownButton.value,\n (value) => emit('button-ref', value),\n { immediate: true },\n );\n\n return {\n dropdownButton,\n dropdownContent,\n dropdownPlacement,\n closableUtils,\n onClose,\n close,\n toggleOpen,\n onBlur,\n onFocus,\n };\n },\n});\n"],"names":[],"mappings":"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"}

package/dist/components/user-input/field/NeonField.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var s=require("./NeonField.ts_vue_type_script_src_d5c469d0_lang.cjs.js"),e=require("vue"),r=require("../../../_virtual/plugin-vue_export-helper.cjs.js");const a=["for"],t={class:"neon-field__container"},i={class:"neon-field__label"};function d(o,l,c,_,u,m){const n=e.resolveComponent("neon-label");return e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass([{"neon-field--optional":o.optional,"neon-field--disabled":o.disabled,"neon-field--with-message":o.message!==null},"neon-field"]),for:o.labelFor},[e.createElementVNode("span",t,[e.createElementVNode("span",i,e.toDisplayString(o.label),1),o.optional?(e.openBlock(),e.createBlock(n,{key:0,label:o.optionalLabel,class:"neon-field__optional",size:"xxs"},null,8,["label"])):e.createCommentVNode("",!0)]),e.renderSlot(o.$slots,"default"),o.message!==null?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([`neon-color-text-${o.messageColor}`,"neon-field__message"]),onClick:l[0]||(l[0]=e.withModifiers(()=>{},["prevent","stop"]))},e.toDisplayString(o.message),3)):e.createCommentVNode("",!0)],10,a)}var p=r(s,[["render",d],["__file","/Users/andrew/dev/projects/neon/src/components/user-input/field/NeonField.vue"]]);module.exports=p;
+"use strict";var s=require("./NeonField.ts_vue_type_script_src_d5c469d0_lang.cjs.js"),e=require("vue"),r=require("../../../_virtual/plugin-vue_export-helper.cjs.js");const t=["for"],a={class:"neon-field__label-wrapper"},i={class:"neon-field__label"},d=e.createElementVNode("div",{class:"neon-field__contents"},null,-1);function p(l,n,_,u,m,f){const o=e.resolveComponent("neon-label");return e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass([{"neon-field--optional":l.optional,"neon-field--disabled":l.disabled,"neon-field--with-message":l.message!==null},"neon-field"]),for:l.labelFor},[e.createElementVNode("span",a,[e.createElementVNode("span",i,e.toDisplayString(l.label),1),l.optional?(e.openBlock(),e.createBlock(o,{key:0,label:l.optionalLabel,class:"neon-field__optional",size:"xxs"},null,8,["label"])):e.createCommentVNode("",!0)]),d,e.renderSlot(l.$slots,"default"),l.message!==null?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([`neon-color-text-${l.messageColor}`,"neon-field__message"]),onClick:n[0]||(n[0]=e.withModifiers(()=>{},["prevent","stop"]))},e.toDisplayString(l.message),3)):e.createCommentVNode("",!0)],10,t)}var c=r(s,[["render",p],["__file","/Users/andrew/dev/projects/neon/src/components/user-input/field/NeonField.vue"]]);module.exports=c;
 //# sourceMappingURL=NeonField.cjs.js.map

package/dist/components/user-input/field/NeonField.es.js CHANGED Viewed

@@ -2,8 +2,9 @@ import _sfc_main from "./NeonField.ts_vue_type_script_src_d5c469d0_lang.es.js";
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createBlock, createCommentVNode, renderSlot, withModifiers } from "vue";
 import _export_sfc from "../../../_virtual/plugin-vue_export-helper.es.js";
 const _hoisted_1 = ["for"];
-const _hoisted_2 = { class: "neon-field__container" };
+const _hoisted_2 = { class: "neon-field__label-wrapper" };
 const _hoisted_3 = { class: "neon-field__label" };
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "neon-field__contents" }, null, -1);
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_neon_label = resolveComponent("neon-label");
   return openBlock(), createElementBlock("label", {
@@ -23,6 +24,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         size: "xxs"
       }, null, 8, ["label"])) : createCommentVNode("", true)
     ]),
+    _hoisted_4,
     renderSlot(_ctx.$slots, "default"),
     _ctx.message !== null ? (openBlock(), createElementBlock("span", {
       key: 0,

package/dist/components/user-input/field/NeonField.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NeonField.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"NeonField.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/user-input/select/NeonSelect.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var d=require("./NeonSelect.ts_vue_type_script_src_37fb08e4_lang.cjs.js"),e=require("vue"),c=require("../../../_virtual/plugin-vue_export-helper.cjs.js");const p={class:"neon-select__wrapper"},u={class:"no-style neon-select__options"},m={class:"neon-select__option-container"},k={class:"neon-select__option-label"},b=["id","aria-selected","onClick","onMouseover"],y={class:"neon-select__option-container"},_={class:"neon-select__option-label"},v=["multiple","disabled"],g=["selected"],h=["label"],B=["value","data-index","multiple","selected","disabled"],V=["value","data-index","multiple","selected","disabled"];function E(l,t,f,C,S,z){const a=e.resolveComponent("neon-switch"),i=e.resolveComponent("neon-icon"),r=e.resolveComponent("neon-dropdown");return e.openBlock(),e.createElementBlock("div",p,[e.createVNode(r,e.mergeProps({ref:"dropdown"},l.sanitizedAttributes,{modelValue:l.open,"onUpdate:modelValue":t[0]||(t[0]=n=>l.open=n),class:["neon-select",[`neon-select--${l.color}`,{"neon-select--grouped":l.groupedOptions,"neon-select--multiple":l.multiple}]],size:l.size,color:l.color,label:l.computedLabel,icon:l.computedIcon,disabled:l.disabled,role:"listbox","aria-activedescendant":l.multiple?l.modelValue[0]:l.modelValue,"aria-multiselectable":l.multiple,onDropdownPlacement:l.onPlacement}),{default:e.withCtx(()=>[e.createElementVNode("ul",u,[l.placeholderAsOption?(e.openBlock(),e.createElementBlock("li",{key:0,class:e.normalizeClass(["neon-select__option neon-select__option--disabled neon-select__option-placeholder",`neon-select__option--${l.size}`])},[e.createElementVNode("div",m,[e.createElementVNode("span",k,e.toDisplayString(l.placeholder),1)])],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.computedOptions,n=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[n.group!==""?(e.openBlock(),e.createElementBlock("li",{key:n.group,class:"neon-select__option-title"},e.toDisplayString(n.group),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,o=>(e.openBlock(),e.createElementBlock("li",{id:o.key,key:o.key,class:e.normalizeClass(["neon-select__option",[{"neon-select__option--disabled":o.disabled,"neon-select__option--separator-before":o.separatorBefore,"neon-select__option--selected":l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,"neon-select__option--highlighted":o.key===l.highlightedKey},`neon-select__option--${l.size}`]]),role:"option","aria-selected":l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,onClick:s=>!o.disabled&&l.clickOption(o),onMouseover:s=>l.changeHighlighted(o.key)},[e.createElementVNode("div",y,[e.renderSlot(l.$slots,"option",{option:o},()=>[l.multiple?(e.openBlock(),e.createBlock(a,{key:0,size:l.size==="l"?"m":"s",color:l.color,modelValue:l.modelValue.indexOf(o.key)>=0,"switch-style":"checkbox"},null,8,["size","color","modelValue"])):e.createCommentVNode("",!0),o.icon?(e.openBlock(),e.createBlock(i,{key:1,class:"neon-select__option-icon",name:o.icon,disabled:o.disabled},null,8,["name","disabled"])):e.createCommentVNode("",!0),e.createElementVNode("span",_,e.toDisplayString(o.label),1)])])],42,b))),128))],64))),256))])]),_:3},16,["modelValue","class","size","color","label","icon","disabled","aria-activedescendant","aria-multiselectable","onDropdownPlacement"]),e.createElementVNode("select",e.mergeProps({class:"neon-select__native",multiple:l.multiple,disabled:l.disabled},l.sanitizedAttributes,{onInput:t[1]||(t[1]=(...n)=>l.nativeSelectChange&&l.nativeSelectChange(...n))}),[e.createElementVNode("option",{value:"",disabled:"",selected:l.multiple?l.modelValue.length===0:l.modelValue==="",hidden:""},e.toDisplayString(l.placeholder),9,g),l.groupedOptions?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(l.groupedOptions,n=>(e.openBlock(),e.createElementBlock("optgroup",{key:n.group,label:n.group},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,(o,s)=>(e.openBlock(),e.createElementBlock("option",{key:`${o.key}-native`,value:o.key,"data-index":s,multiple:l.multiple,selected:l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,disabled:o.disabled},e.toDisplayString(o.label),9,B))),128))],8,h))),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(l.options,(n,o)=>(e.openBlock(),e.createElementBlock("option",{key:`${n.key}-native`,value:n.key,"data-index":o,multiple:l.multiple,selected:l.multiple?l.modelValue.indexOf(n.key)>=0:n.key===l.modelValue,disabled:n.disabled},e.toDisplayString(n.label),9,V))),128))],16,v)])}var N=c(d,[["render",E],["__file","/Users/andrew/dev/projects/neon/src/components/user-input/select/NeonSelect.vue"]]);module.exports=N;
+"use strict";var d=require("./NeonSelect.ts_vue_type_script_src_37fb08e4_lang.cjs.js"),e=require("vue"),c=require("../../../_virtual/plugin-vue_export-helper.cjs.js");const p={class:"neon-select__wrapper"},u={class:"no-style neon-select__options"},m={class:"neon-select__option-container"},k={class:"neon-select__option-label"},b=["id","aria-selected","onClick","onMouseover"],y={class:"neon-select__option-container"},v={class:"neon-select__option-label"},_=["disabled","multiple"],g=["selected"],h=["label"],B=["data-index","disabled","multiple","selected","value"],V=["data-index","disabled","multiple","selected","value"];function E(l,t,f,C,S,z){const a=e.resolveComponent("neon-switch"),i=e.resolveComponent("neon-icon"),r=e.resolveComponent("neon-dropdown");return e.openBlock(),e.createElementBlock("div",p,[e.createVNode(r,e.mergeProps({id:l.id,ref:"dropdown",modelValue:l.open,"onUpdate:modelValue":t[0]||(t[0]=n=>l.open=n),"aria-activedescendant":l.multiple?l.modelValue[0]:l.modelValue,"aria-multiselectable":l.multiple,class:[[`neon-select--${l.color}`,{"neon-select--grouped":l.groupedOptions,"neon-select--multiple":l.multiple}],"neon-select"],color:l.color,disabled:l.disabled,icon:l.computedIcon,label:l.computedLabel,size:l.size,role:"listbox"},l.sanitizedAttributes,{onDropdownPlacement:l.onPlacement}),{default:e.withCtx(()=>[e.createElementVNode("ul",u,[l.placeholderAsOption?(e.openBlock(),e.createElementBlock("li",{key:0,class:e.normalizeClass([`neon-select__option--${l.size}`,"neon-select__option neon-select__option--disabled neon-select__option-placeholder"])},[e.createElementVNode("div",m,[e.createElementVNode("span",k,e.toDisplayString(l.placeholder),1)])],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.computedOptions,n=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[n.group!==""?(e.openBlock(),e.createElementBlock("li",{key:n.group,class:"neon-select__option-title"},e.toDisplayString(n.group),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,o=>(e.openBlock(),e.createElementBlock("li",{id:o.key,key:o.key,"aria-selected":l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,class:e.normalizeClass([[{"neon-select__option--disabled":o.disabled,"neon-select__option--separator-before":o.separatorBefore,"neon-select__option--selected":l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,"neon-select__option--highlighted":o.key===l.highlightedKey},`neon-select__option--${l.size}`],"neon-select__option"]),role:"option",onClick:s=>!o.disabled&&l.clickOption(o),onMouseover:s=>l.changeHighlighted(o.key)},[e.createElementVNode("div",y,[e.renderSlot(l.$slots,"option",{option:o},()=>[l.multiple?(e.openBlock(),e.createBlock(a,{key:0,color:l.color,modelValue:l.modelValue.indexOf(o.key)>=0,size:l.size==="l"?"m":"s","switch-style":"checkbox"},null,8,["color","modelValue","size"])):e.createCommentVNode("",!0),o.icon?(e.openBlock(),e.createBlock(i,{key:1,disabled:o.disabled,name:o.icon,class:"neon-select__option-icon"},null,8,["disabled","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",v,e.toDisplayString(o.label),1)])])],42,b))),128))],64))),256))])]),_:3},16,["id","modelValue","aria-activedescendant","aria-multiselectable","class","color","disabled","icon","label","size","onDropdownPlacement"]),e.createElementVNode("select",e.mergeProps({disabled:l.disabled,multiple:l.multiple,class:"neon-select__native"},l.sanitizedAttributes,{onInput:t[1]||(t[1]=(...n)=>l.nativeSelectChange&&l.nativeSelectChange(...n))}),[e.createElementVNode("option",{selected:l.multiple?l.modelValue.length===0:l.modelValue==="",disabled:"",hidden:"",value:""},e.toDisplayString(l.placeholder),9,g),l.groupedOptions?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(l.groupedOptions,n=>(e.openBlock(),e.createElementBlock("optgroup",{key:n.group,label:n.group},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.options,(o,s)=>(e.openBlock(),e.createElementBlock("option",{key:`${o.key}-native`,"data-index":s,disabled:o.disabled,multiple:l.multiple,selected:l.multiple?l.modelValue.indexOf(o.key)>=0:o.key===l.modelValue,value:o.key},e.toDisplayString(o.label),9,B))),128))],8,h))),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(l.options,(n,o)=>(e.openBlock(),e.createElementBlock("option",{key:`${n.key}-native`,"data-index":o,disabled:n.disabled,multiple:l.multiple,selected:l.multiple?l.modelValue.indexOf(n.key)>=0:n.key===l.modelValue,value:n.key},e.toDisplayString(n.label),9,V))),128))],16,_)])}var N=c(d,[["render",E],["__file","/Users/andrew/dev/projects/neon/src/components/user-input/select/NeonSelect.vue"]]);module.exports=N;
 //# sourceMappingURL=NeonSelect.cjs.js.map

package/dist/components/user-input/select/NeonSelect.d.ts CHANGED Viewed

@@ -10,6 +10,12 @@ import { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';
  * <a href="/presentation/dropdown">NeonDropdown</a> to change the style of the dropdown button.</p>
  */
 declare const _default: import("vue").DefineComponent<{
+    /**
+     * Id for the dropdown button
+     */
+    id: {
+        type: StringConstructor;
+    };
     /**
      * Placeholder to display as button label when there is no option selected.
      */
@@ -105,6 +111,12 @@ declare const _default: import("vue").DefineComponent<{
     changeHighlighted: (key: string) => void;
     onPlacement: (placement: NeonDropdownPlacement) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Id for the dropdown button
+     */
+    id: {
+        type: StringConstructor;
+    };
     /**
      * Placeholder to display as button label when there is no option selected.
      */

package/dist/components/user-input/select/NeonSelect.es.js CHANGED Viewed

@@ -8,35 +8,36 @@ const _hoisted_4 = { class: "neon-select__option-label" };
 const _hoisted_5 = ["id", "aria-selected", "onClick", "onMouseover"];
 const _hoisted_6 = { class: "neon-select__option-container" };
 const _hoisted_7 = { class: "neon-select__option-label" };
-const _hoisted_8 = ["multiple", "disabled"];
+const _hoisted_8 = ["disabled", "multiple"];
 const _hoisted_9 = ["selected"];
 const _hoisted_10 = ["label"];
-const _hoisted_11 = ["value", "data-index", "multiple", "selected", "disabled"];
-const _hoisted_12 = ["value", "data-index", "multiple", "selected", "disabled"];
+const _hoisted_11 = ["data-index", "disabled", "multiple", "selected", "value"];
+const _hoisted_12 = ["data-index", "disabled", "multiple", "selected", "value"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_neon_switch = resolveComponent("neon-switch");
   const _component_neon_icon = resolveComponent("neon-icon");
   const _component_neon_dropdown = resolveComponent("neon-dropdown");
   return openBlock(), createElementBlock("div", _hoisted_1, [
-    createVNode(_component_neon_dropdown, mergeProps({ ref: "dropdown" }, _ctx.sanitizedAttributes, {
+    createVNode(_component_neon_dropdown, mergeProps({
+      id: _ctx.id,
+      ref: "dropdown",
       modelValue: _ctx.open,
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.open = $event),
-      class: ["neon-select", [`neon-select--${_ctx.color}`, { "neon-select--grouped": _ctx.groupedOptions, "neon-select--multiple": _ctx.multiple }]],
-      size: _ctx.size,
-      color: _ctx.color,
-      label: _ctx.computedLabel,
-      icon: _ctx.computedIcon,
-      disabled: _ctx.disabled,
-      role: "listbox",
       "aria-activedescendant": _ctx.multiple ? _ctx.modelValue[0] : _ctx.modelValue,
       "aria-multiselectable": _ctx.multiple,
-      onDropdownPlacement: _ctx.onPlacement
-    }), {
+      class: [[`neon-select--${_ctx.color}`, { "neon-select--grouped": _ctx.groupedOptions, "neon-select--multiple": _ctx.multiple }], "neon-select"],
+      color: _ctx.color,
+      disabled: _ctx.disabled,
+      icon: _ctx.computedIcon,
+      label: _ctx.computedLabel,
+      size: _ctx.size,
+      role: "listbox"
+    }, _ctx.sanitizedAttributes, { onDropdownPlacement: _ctx.onPlacement }), {
       default: withCtx(() => [
         createElementVNode("ul", _hoisted_2, [
           _ctx.placeholderAsOption ? (openBlock(), createElementBlock("li", {
             key: 0,
-            class: normalizeClass(["neon-select__option neon-select__option--disabled neon-select__option-placeholder", `neon-select__option--${_ctx.size}`])
+            class: normalizeClass([`neon-select__option--${_ctx.size}`, "neon-select__option neon-select__option--disabled neon-select__option-placeholder"])
           }, [
             createElementVNode("div", _hoisted_3, [
               createElementVNode("span", _hoisted_4, toDisplayString(_ctx.placeholder), 1)
@@ -52,7 +53,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 return openBlock(), createElementBlock("li", {
                   id: option.key,
                   key: option.key,
-                  class: normalizeClass(["neon-select__option", [
+                  "aria-selected": _ctx.multiple ? _ctx.modelValue.indexOf(option.key) >= 0 : option.key === _ctx.modelValue,
+                  class: normalizeClass([[
                     {
                       "neon-select__option--disabled": option.disabled,
                       "neon-select__option--separator-before": option.separatorBefore,
@@ -60,9 +62,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                       "neon-select__option--highlighted": option.key === _ctx.highlightedKey
                     },
                     `neon-select__option--${_ctx.size}`
-                  ]]),
+                  ], "neon-select__option"]),
                   role: "option",
-                  "aria-selected": _ctx.multiple ? _ctx.modelValue.indexOf(option.key) >= 0 : option.key === _ctx.modelValue,
                   onClick: ($event) => !option.disabled && _ctx.clickOption(option),
                   onMouseover: ($event) => _ctx.changeHighlighted(option.key)
                 }, [
@@ -70,17 +71,17 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     renderSlot(_ctx.$slots, "option", { option }, () => [
                       _ctx.multiple ? (openBlock(), createBlock(_component_neon_switch, {
                         key: 0,
-                        size: _ctx.size === "l" ? "m" : "s",
                         color: _ctx.color,
                         modelValue: _ctx.modelValue.indexOf(option.key) >= 0,
+                        size: _ctx.size === "l" ? "m" : "s",
                         "switch-style": "checkbox"
-                      }, null, 8, ["size", "color", "modelValue"])) : createCommentVNode("", true),
+                      }, null, 8, ["color", "modelValue", "size"])) : createCommentVNode("", true),
                       option.icon ? (openBlock(), createBlock(_component_neon_icon, {
                         key: 1,
-                        class: "neon-select__option-icon",
+                        disabled: option.disabled,
                         name: option.icon,
-                        disabled: option.disabled
-                      }, null, 8, ["name", "disabled"])) : createCommentVNode("", true),
+                        class: "neon-select__option-icon"
+                      }, null, 8, ["disabled", "name"])) : createCommentVNode("", true),
                       createElementVNode("span", _hoisted_7, toDisplayString(option.label), 1)
                     ])
                   ])
@@ -91,19 +92,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ])
       ]),
       _: 3
-    }, 16, ["modelValue", "class", "size", "color", "label", "icon", "disabled", "aria-activedescendant", "aria-multiselectable", "onDropdownPlacement"]),
+    }, 16, ["id", "modelValue", "aria-activedescendant", "aria-multiselectable", "class", "color", "disabled", "icon", "label", "size", "onDropdownPlacement"]),
     createElementVNode("select", mergeProps({
-      class: "neon-select__native",
+      disabled: _ctx.disabled,
       multiple: _ctx.multiple,
-      disabled: _ctx.disabled
+      class: "neon-select__native"
     }, _ctx.sanitizedAttributes, {
       onInput: _cache[1] || (_cache[1] = (...args) => _ctx.nativeSelectChange && _ctx.nativeSelectChange(...args))
     }), [
       createElementVNode("option", {
-        value: "",
-        disabled: "",
         selected: _ctx.multiple ? _ctx.modelValue.length === 0 : _ctx.modelValue === "",
-        hidden: ""
+        disabled: "",
+        hidden: "",
+        value: ""
       }, toDisplayString(_ctx.placeholder), 9, _hoisted_9),
       _ctx.groupedOptions ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.groupedOptions, (group) => {
         return openBlock(), createElementBlock("optgroup", {
@@ -113,22 +114,22 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           (openBlock(true), createElementBlock(Fragment, null, renderList(group.options, (option, index) => {
             return openBlock(), createElementBlock("option", {
               key: `${option.key}-native`,
-              value: option.key,
               "data-index": index,
+              disabled: option.disabled,
               multiple: _ctx.multiple,
               selected: _ctx.multiple ? _ctx.modelValue.indexOf(option.key) >= 0 : option.key === _ctx.modelValue,
-              disabled: option.disabled
+              value: option.key
             }, toDisplayString(option.label), 9, _hoisted_11);
           }), 128))
         ], 8, _hoisted_10);
       }), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.options, (option, index) => {
         return openBlock(), createElementBlock("option", {
           key: `${option.key}-native`,
-          value: option.key,
           "data-index": index,
+          disabled: option.disabled,
           multiple: _ctx.multiple,
           selected: _ctx.multiple ? _ctx.modelValue.indexOf(option.key) >= 0 : option.key === _ctx.modelValue,
-          disabled: option.disabled
+          value: option.key
         }, toDisplayString(option.label), 9, _hoisted_12);
       }), 128))
     ], 16, _hoisted_8)

package/dist/components/user-input/select/NeonSelect.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NeonSelect.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"NeonSelect.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/user-input/select/NeonSelect.ts_vue_type_script_src_37fb08e4_lang.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var l=require("vue"),I=require("../../../common/enums/NeonSize.cjs.js"),P=require("../../../common/enums/NeonFunctionalColor.cjs.js"),A=require("../../presentation/dropdown/NeonDropdown.cjs.js"),x=require("../../presentation/icon/NeonIcon.cjs.js"),z=require("../switch/NeonSwitch.cjs.js"),s=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),B=require("../../../common/utils/NeonScrollUtils.cjs.js"),C=l.defineComponent({name:"NeonSelect",components:{NeonDropdown:A,NeonIcon:x,NeonSwitch:z},props:{placeholder:{type:String,required:!0},placeholderAsOption:{type:Boolean,default:!1},placeholderIcon:{type:String,required:!1},options:{type:Array,required:!1},groupedOptions:{type:Array,required:!1},modelValue:{type:[String,Array],required:!0},multiple:{type:Boolean,default:!1},multiselectPlaceholder:{type:String,required:!1},disabled:{type:Boolean,default:!1},size:{type:String,default:I.NeonSize.Medium},color:{type:String,default:P.NeonFunctionalColor.LowContrast}},emits:["update:modelValue"],setup(n,{emit:g}){const w=l.useAttrs(),f=l.ref(null),c=l.ref(!1),v=l.ref(null),i=l.ref(null),r=l.ref(-1),o=l.computed(()=>{var e;return n.options||((e=n.groupedOptions)==null?void 0:e.flatMap(t=>t.options))||[]}),N=()=>{if(!n.groupedOptions)switch(v.value){case s.NeonDropdownPlacement.TopLeft:case s.NeonDropdownPlacement.TopRight:case s.NeonDropdownPlacement.LeftBottom:case s.NeonDropdownPlacement.RightBottom:return!0}return!1},k=()=>{var t;const e=(t=f.value)==null?void 0:t.querySelector(".neon-select__option--highlighted");e&&B.NeonScrollUtils.scrollIntoView(e)},p=(e,t)=>{const a=r.value+e;a>=0&&a<=o.value.length-1&&(r.value=a,i.value=o.value[r.value].key,t.preventDefault(),setTimeout(k))},d=e=>{g("update:modelValue",e)},y=e=>{if(n.multiple){const t=[...n.modelValue],a=t.findIndex(m=>m===e.key);a>=0?t.splice(a,1):t.push(e.key),d(t)}else n.modelValue!==e.key&&(c.value=!1,d(e.key))},h=e=>{if(c.value)switch(e.code){case"ArrowUp":case"ArrowDown":{const t=N()?-1:1;e.code==="ArrowUp"?p(-1*t,e):p(1*t,e)}break;case"Enter":case"Space":o.value[r.value].disabled||(y(o.value[r.value]),e.preventDefault());break;case"Tab":!e.ctrlKey&&!e.metaKey&&!e.altKey&&(c.value=!1);break}},S=l.computed(()=>n.groupedOptions||[{group:"",options:n.options||[]}]),q=l.computed(()=>{const{...e}=w;return e}),j=l.computed(()=>{if(n.multiple&&n.modelValue.length>0){if(n.multiselectPlaceholder)return n.multiselectPlaceholder;if(n.modelValue.length>1)return`${n.modelValue.length} items selected`;{const e=o.value.find(t=>t.key===n.modelValue[0]);return(e==null?void 0:e.label)||""}}else if(n.modelValue){const e=o.value.find(t=>t.key===n.modelValue);if(e)return e.label}return n.placeholder}),V=l.computed(()=>{if(n.modelValue){const e=o.value.find(t=>t.key===n.modelValue);if(e)return e.icon}return n.placeholderIcon}),O=e=>{const t=Array.from(e.target.options).filter(u=>u.selected).map(u=>u.value),a=o.value.filter(u=>t.indexOf(u.key)>=0),m=n.multiple?a.map(u=>u.key):a[0].key;d(m)},b=e=>{i.value=e,r.value=o.value.findIndex(t=>t.key===e)},D=e=>{v.value=e};return l.onMounted(()=>{document.addEventListener("keydown",h)}),l.onUnmounted(()=>{document.removeEventListener("keydown",h)}),l.watch(()=>c.value,e=>{e&&(i.value=o.value[0].key,r.value=0)}),{dropdown:f,open:c,highlightedKey:i,highlightedIndex:r,flattenedOptions:o,computedLabel:j,sanitizedAttributes:q,computedOptions:S,computedIcon:V,clickOption:y,nativeSelectChange:O,changeHighlighted:b,onPlacement:D}}});module.exports=C;
+"use strict";var l=require("vue"),I=require("../../../common/enums/NeonSize.cjs.js"),P=require("../../../common/enums/NeonFunctionalColor.cjs.js"),A=require("../../presentation/dropdown/NeonDropdown.cjs.js"),x=require("../../presentation/icon/NeonIcon.cjs.js"),z=require("../switch/NeonSwitch.cjs.js"),s=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),B=require("../../../common/utils/NeonScrollUtils.cjs.js"),C=l.defineComponent({name:"NeonSelect",components:{NeonDropdown:A,NeonIcon:x,NeonSwitch:z},props:{id:{type:String},placeholder:{type:String,required:!0},placeholderAsOption:{type:Boolean,default:!1},placeholderIcon:{type:String,required:!1},options:{type:Array,required:!1},groupedOptions:{type:Array,required:!1},modelValue:{type:[String,Array],required:!0},multiple:{type:Boolean,default:!1},multiselectPlaceholder:{type:String,required:!1},disabled:{type:Boolean,default:!1},size:{type:String,default:I.NeonSize.Medium},color:{type:String,default:P.NeonFunctionalColor.LowContrast}},emits:["update:modelValue"],setup(n,{emit:g}){const w=l.useAttrs(),f=l.ref(null),c=l.ref(!1),v=l.ref(null),i=l.ref(null),r=l.ref(-1),o=l.computed(()=>{var e;return n.options||((e=n.groupedOptions)==null?void 0:e.flatMap(t=>t.options))||[]}),N=()=>{if(!n.groupedOptions)switch(v.value){case s.NeonDropdownPlacement.TopLeft:case s.NeonDropdownPlacement.TopRight:case s.NeonDropdownPlacement.LeftBottom:case s.NeonDropdownPlacement.RightBottom:return!0}return!1},k=()=>{var t;const e=(t=f.value)==null?void 0:t.querySelector(".neon-select__option--highlighted");e&&B.NeonScrollUtils.scrollIntoView(e)},p=(e,t)=>{const a=r.value+e;a>=0&&a<=o.value.length-1&&(r.value=a,i.value=o.value[r.value].key,t.preventDefault(),setTimeout(k))},d=e=>{g("update:modelValue",e)},y=e=>{if(n.multiple){const t=[...n.modelValue],a=t.findIndex(m=>m===e.key);a>=0?t.splice(a,1):t.push(e.key),d(t)}else n.modelValue!==e.key&&(c.value=!1,d(e.key))},h=e=>{if(c.value)switch(e.code){case"ArrowUp":case"ArrowDown":{const t=N()?-1:1;e.code==="ArrowUp"?p(-1*t,e):p(1*t,e)}break;case"Enter":case"Space":o.value[r.value].disabled||(y(o.value[r.value]),e.preventDefault());break;case"Tab":!e.ctrlKey&&!e.metaKey&&!e.altKey&&(c.value=!1);break}},S=l.computed(()=>n.groupedOptions||[{group:"",options:n.options||[]}]),q=l.computed(()=>{const{...e}=w;return e}),j=l.computed(()=>{if(n.multiple&&n.modelValue.length>0){if(n.multiselectPlaceholder)return n.multiselectPlaceholder;if(n.modelValue.length>1)return`${n.modelValue.length} items selected`;{const e=o.value.find(t=>t.key===n.modelValue[0]);return(e==null?void 0:e.label)||""}}else if(n.modelValue){const e=o.value.find(t=>t.key===n.modelValue);if(e)return e.label}return n.placeholder}),V=l.computed(()=>{if(n.modelValue){const e=o.value.find(t=>t.key===n.modelValue);if(e)return e.icon}return n.placeholderIcon}),O=e=>{const t=Array.from(e.target.options).filter(u=>u.selected).map(u=>u.value),a=o.value.filter(u=>t.indexOf(u.key)>=0),m=n.multiple?a.map(u=>u.key):a[0].key;d(m)},b=e=>{i.value=e,r.value=o.value.findIndex(t=>t.key===e)},D=e=>{v.value=e};return l.onMounted(()=>{document.addEventListener("keydown",h)}),l.onUnmounted(()=>{document.removeEventListener("keydown",h)}),l.watch(()=>c.value,e=>{e&&(i.value=o.value[0].key,r.value=0)}),{dropdown:f,open:c,highlightedKey:i,highlightedIndex:r,flattenedOptions:o,computedLabel:j,sanitizedAttributes:q,computedOptions:S,computedIcon:V,clickOption:y,nativeSelectChange:O,changeHighlighted:b,onPlacement:D}}});module.exports=C;
 //# sourceMappingURL=NeonSelect.ts_vue_type_script_src_37fb08e4_lang.cjs.js.map

package/dist/components/user-input/select/NeonSelect.ts_vue_type_script_src_37fb08e4_lang.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NeonSelect.ts_vue_type_script_src_37fb08e4_lang.cjs.js","sources":["../../../../src/components/user-input/select/NeonSelect.ts?vue&type=script&src=37fb08e4&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport type { NeonSelectGroup } from '@/common/models/NeonSelectGroup';\nimport type { NeonSelectOption } from '@/common/models/NeonSelectOption';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonSwitch from '@/components/user-input/switch/NeonSwitch.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\n\n/*\n <p>The <strong>NeonSelect</strong> is the equivalent of an HTML <select> form control. On touch devices\n * NeonSelect will use the native select for input. <strong>NeonSelect</strong> supports grouping and multiselect.</p>\n * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by\n * <a href=\"/presentation/dropdown\">NeonDropdown</a> to change the style of the dropdown button.</p>\n /\nexport default defineComponent({\n name: 'NeonSelect',\n components: {\n NeonDropdown,\n NeonIcon,\n NeonSwitch,\n },\n props: {\n /\n Placeholder to display as button label when there is no option selected.\n /\n placeholder: { type: String, required: true },\n /\n Display the placeholder as the first option in the select, this is useful as an alternative to a label.\n /\n placeholderAsOption: { type: Boolean, default: false },\n /\n Optional placeholder icon.\n /\n placeholderIcon: { type: String, required: false },\n /\n A list of options to render in the select.\n /\n options: { type: Array as () => Array<NeonSelectOption>, required: false },\n /\n A list of grouped options to render in the select.\n /\n groupedOptions: { type: Array as () => Array<NeonSelectGroup>, required: false },\n /\n Either a single string, indicating the key of the selected option or an array of selected keys in the case\n * multiple = true.\n /\n modelValue: { type: [String, Array as () => Array<string>], required: true },\n /\n Allow multi-select.\n /\n multiple: { type: Boolean, default: false },\n /\n Placeholder when multiple values are selected.\n /\n multiselectPlaceholder: { type: String, required: false },\n /\n Disable the select\n /\n disabled: { type: Boolean, default: false },\n /\n The size of the dropdown - Small, Medium or Large.\n /\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /\n The color of the select.\n /\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n },\n emits: [\n /\n emitted when the user changes the selection.\n * @type {string \| string[]} either the selected option's key (single select) or an array of the selected keys\n * (multi-select).\n /\n 'update:modelValue',\n ],\n setup(props, { emit }) {\n const attrs = useAttrs();\n\n const dropdown = ref<HTMLElement \| null>(null);\n\n const open = ref(false);\n const dropdownPlacement = ref<NeonDropdownPlacement \| null>(null);\n const highlightedKey = ref<string \| null>(null);\n const highlightedIndex = ref(-1);\n\n const flattenedOptions = computed((): NeonSelectOption[] => {\n return props.options \|\| props.groupedOptions?.flatMap((group) => group.options) \|\| [];\n });\n\n const isReverse = () => {\n if (!props.groupedOptions) {\n switch (dropdownPlacement.value) {\n case NeonDropdownPlacement.TopLeft:\n case NeonDropdownPlacement.TopRight:\n case NeonDropdownPlacement.LeftBottom:\n case NeonDropdownPlacement.RightBottom:\n return true;\n }\n }\n\n return false;\n };\n\n const scrollOnNavigate = () => {\n const element = dropdown.value?.querySelector('.neon-select__option--highlighted') as HTMLElement;\n\n if (element) {\n NeonScrollUtils.scrollIntoView(element);\n }\n };\n\n const navigateBy = (offset: number, $event: KeyboardEvent) => {\n const newIndex = highlightedIndex.value + offset;\n if (newIndex >= 0 && newIndex <= flattenedOptions.value.length - 1) {\n highlightedIndex.value = newIndex;\n highlightedKey.value = flattenedOptions.value[highlightedIndex.value].key;\n $event.preventDefault();\n setTimeout(scrollOnNavigate);\n }\n };\n\n const emitInputEvent = (value: string \| string[]) => {\n emit('update:modelValue', value);\n };\n\n const clickOption = (option: NeonSelectOption) => {\n if (props.multiple) {\n const values = [...props.modelValue];\n const index = values.findIndex((v) => v === option.key);\n if (index >= 0) {\n values.splice(index, 1);\n } else {\n values.push(option.key);\n }\n emitInputEvent(values);\n } else if (props.modelValue !== option.key) {\n open.value = false;\n emitInputEvent(option.key);\n }\n };\n\n const keyboardHandler = ($event: KeyboardEvent) => {\n if (open.value) {\n switch ($event.code) {\n case 'ArrowUp':\n case 'ArrowDown':\n {\n const reverseOffset = isReverse() ? -1 : 1;\n if ($event.code === 'ArrowUp') {\n navigateBy(-1 reverseOffset, $event);\n } else {\n navigateBy(1 * reverseOffset, $event);\n }\n }\n break;\n case 'Enter':\n case 'Space':\n if (!flattenedOptions.value[highlightedIndex.value].disabled) {\n clickOption(flattenedOptions.value[highlightedIndex.value]);\n $event.preventDefault();\n }\n break;\n case 'Tab':\n if (!$event.ctrlKey && !$event.metaKey && !$event.altKey) {\n open.value = false;\n }\n break;\n }\n }\n };\n\n const computedOptions = computed((): Array<NeonSelectGroup> => {\n return (\n props.groupedOptions \|\| [\n {\n group: '',\n options: props.options \|\| [],\n },\n ]\n );\n });\n\n const sanitizedAttributes = computed(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { ...sanitized } = attrs;\n return sanitized;\n });\n\n const computedLabel = computed(() => {\n if (props.multiple && props.modelValue.length > 0) {\n if (props.multiselectPlaceholder) {\n return props.multiselectPlaceholder;\n } else if (props.modelValue.length > 1) {\n return `${props.modelValue.length} items selected`;\n } else {\n const selected = flattenedOptions.value.find((option) => option.key === props.modelValue[0]);\n return selected?.label \|\| '';\n }\n } else if (props.modelValue) {\n const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n if (selected) {\n return selected.label;\n }\n }\n\n return props.placeholder;\n });\n\n const computedIcon = computed(() => {\n if (props.modelValue) {\n const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n if (selected) {\n return selected.icon;\n }\n }\n\n return props.placeholderIcon;\n });\n\n const nativeSelectChange = (event: Event) => {\n const selectedKeys = Array.from((event.target as HTMLSelectElement).options)\n .filter((opt) => opt.selected)\n .map((opt) => opt.value);\n const selectedOptions = flattenedOptions.value.filter((v) => selectedKeys.indexOf(v.key) >= 0);\n const value = props.multiple ? selectedOptions.map((value) => value.key) : selectedOptions[0].key;\n emitInputEvent(value);\n };\n\n const changeHighlighted = (key: string) => {\n highlightedKey.value = key;\n highlightedIndex.value = flattenedOptions.value.findIndex((opt) => opt.key === key);\n };\n\n const onPlacement = (placement: NeonDropdownPlacement) => {\n dropdownPlacement.value = placement;\n };\n\n onMounted(() => {\n document.addEventListener('keydown', keyboardHandler);\n });\n\n onUnmounted(() => {\n document.removeEventListener('keydown', keyboardHandler);\n });\n\n watch(\n () => open.value,\n (open: boolean) => {\n if (open) {\n highlightedKey.value = flattenedOptions.value[0].key;\n highlightedIndex.value = 0;\n }\n },\n );\n\n return {\n dropdown,\n open,\n highlightedKey,\n highlightedIndex,\n flattenedOptions,\n computedLabel,\n sanitizedAttributes,\n computedOptions,\n computedIcon,\n clickOption,\n nativeSelectChange,\n changeHighlighted,\n onPlacement,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdown","NeonIcon","NeonSwitch","NeonSize","NeonFunctionalColor","props","emit","attrs","useAttrs","dropdown","ref","open","dropdownPlacement","highlightedKey","highlightedIndex","flattenedOptions","computed","_a","group","isReverse","NeonDropdownPlacement","scrollOnNavigate","element","NeonScrollUtils","navigateBy","offset","$event","newIndex","emitInputEvent","value","clickOption","option","values","index","v","keyboardHandler","reverseOffset","computedOptions","sanitizedAttributes","sanitized","computedLabel","selected","computedIcon","nativeSelectChange","event","selectedKeys","opt","selectedOptions","changeHighlighted","key","onPlacement","placement","onMounted","onUnmounted","watch"],"mappings":"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"}
1	+ {"version":3,"file":"NeonSelect.ts_vue_type_script_src_37fb08e4_lang.cjs.js","sources":["../../../../src/components/user-input/select/NeonSelect.ts?vue&type=script&src=37fb08e4&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport type { NeonSelectGroup } from '@/common/models/NeonSelectGroup';\nimport type { NeonSelectOption } from '@/common/models/NeonSelectOption';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonSwitch from '@/components/user-input/switch/NeonSwitch.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\n\n/*\n <p>The <strong>NeonSelect</strong> is the equivalent of an HTML <select> form control. On touch devices\n * NeonSelect will use the native select for input. <strong>NeonSelect</strong> supports grouping and multiselect.</p>\n * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by\n * <a href=\"/presentation/dropdown\">NeonDropdown</a> to change the style of the dropdown button.</p>\n /\nexport default defineComponent({\n name: 'NeonSelect',\n components: {\n NeonDropdown,\n NeonIcon,\n NeonSwitch,\n },\n props: {\n /\n Id for the dropdown button\n /\n id: { type: String },\n /\n Placeholder to display as button label when there is no option selected.\n /\n placeholder: { type: String, required: true },\n /\n Display the placeholder as the first option in the select, this is useful as an alternative to a label.\n /\n placeholderAsOption: { type: Boolean, default: false },\n /\n Optional placeholder icon.\n /\n placeholderIcon: { type: String, required: false },\n /\n A list of options to render in the select.\n /\n options: { type: Array as () => Array<NeonSelectOption>, required: false },\n /\n A list of grouped options to render in the select.\n /\n groupedOptions: { type: Array as () => Array<NeonSelectGroup>, required: false },\n /\n Either a single string, indicating the key of the selected option or an array of selected keys in the case\n * multiple = true.\n /\n modelValue: { type: [String, Array as () => Array<string>], required: true },\n /\n Allow multi-select.\n /\n multiple: { type: Boolean, default: false },\n /\n Placeholder when multiple values are selected.\n /\n multiselectPlaceholder: { type: String, required: false },\n /\n Disable the select\n /\n disabled: { type: Boolean, default: false },\n /\n The size of the dropdown - Small, Medium or Large.\n /\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /\n The color of the select.\n /\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n },\n emits: [\n /\n emitted when the user changes the selection.\n * @type {string \| string[]} either the selected option's key (single select) or an array of the selected keys\n * (multi-select).\n /\n 'update:modelValue',\n ],\n setup(props, { emit }) {\n const attrs = useAttrs();\n\n const dropdown = ref<HTMLElement \| null>(null);\n\n const open = ref(false);\n const dropdownPlacement = ref<NeonDropdownPlacement \| null>(null);\n const highlightedKey = ref<string \| null>(null);\n const highlightedIndex = ref(-1);\n\n const flattenedOptions = computed((): NeonSelectOption[] => {\n return props.options \|\| props.groupedOptions?.flatMap((group) => group.options) \|\| [];\n });\n\n const isReverse = () => {\n if (!props.groupedOptions) {\n switch (dropdownPlacement.value) {\n case NeonDropdownPlacement.TopLeft:\n case NeonDropdownPlacement.TopRight:\n case NeonDropdownPlacement.LeftBottom:\n case NeonDropdownPlacement.RightBottom:\n return true;\n }\n }\n\n return false;\n };\n\n const scrollOnNavigate = () => {\n const element = dropdown.value?.querySelector('.neon-select__option--highlighted') as HTMLElement;\n\n if (element) {\n NeonScrollUtils.scrollIntoView(element);\n }\n };\n\n const navigateBy = (offset: number, $event: KeyboardEvent) => {\n const newIndex = highlightedIndex.value + offset;\n if (newIndex >= 0 && newIndex <= flattenedOptions.value.length - 1) {\n highlightedIndex.value = newIndex;\n highlightedKey.value = flattenedOptions.value[highlightedIndex.value].key;\n $event.preventDefault();\n setTimeout(scrollOnNavigate);\n }\n };\n\n const emitInputEvent = (value: string \| string[]) => {\n emit('update:modelValue', value);\n };\n\n const clickOption = (option: NeonSelectOption) => {\n if (props.multiple) {\n const values = [...props.modelValue];\n const index = values.findIndex((v) => v === option.key);\n if (index >= 0) {\n values.splice(index, 1);\n } else {\n values.push(option.key);\n }\n emitInputEvent(values);\n } else if (props.modelValue !== option.key) {\n open.value = false;\n emitInputEvent(option.key);\n }\n };\n\n const keyboardHandler = ($event: KeyboardEvent) => {\n if (open.value) {\n switch ($event.code) {\n case 'ArrowUp':\n case 'ArrowDown': {\n const reverseOffset = isReverse() ? -1 : 1;\n if ($event.code === 'ArrowUp') {\n navigateBy(-1 reverseOffset, $event);\n } else {\n navigateBy(1 * reverseOffset, $event);\n }\n }\n break;\n case 'Enter':\n case 'Space':\n if (!flattenedOptions.value[highlightedIndex.value].disabled) {\n clickOption(flattenedOptions.value[highlightedIndex.value]);\n $event.preventDefault();\n }\n break;\n case 'Tab':\n if (!$event.ctrlKey && !$event.metaKey && !$event.altKey) {\n open.value = false;\n }\n break;\n }\n }\n };\n\n const computedOptions = computed((): Array<NeonSelectGroup> => {\n return (\n props.groupedOptions \|\| [\n {\n group: '',\n options: props.options \|\| [],\n },\n ]\n );\n });\n\n const sanitizedAttributes = computed(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { ...sanitized } = attrs;\n return sanitized;\n });\n\n const computedLabel = computed(() => {\n if (props.multiple && props.modelValue.length > 0) {\n if (props.multiselectPlaceholder) {\n return props.multiselectPlaceholder;\n } else if (props.modelValue.length > 1) {\n return `${props.modelValue.length} items selected`;\n } else {\n const selected = flattenedOptions.value.find((option) => option.key === props.modelValue[0]);\n return selected?.label \|\| '';\n }\n } else if (props.modelValue) {\n const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n if (selected) {\n return selected.label;\n }\n }\n\n return props.placeholder;\n });\n\n const computedIcon = computed(() => {\n if (props.modelValue) {\n const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n if (selected) {\n return selected.icon;\n }\n }\n\n return props.placeholderIcon;\n });\n\n const nativeSelectChange = (event: Event) => {\n const selectedKeys = Array.from((event.target as HTMLSelectElement).options)\n .filter((opt) => opt.selected)\n .map((opt) => opt.value);\n const selectedOptions = flattenedOptions.value.filter((v) => selectedKeys.indexOf(v.key) >= 0);\n const value = props.multiple ? selectedOptions.map((value) => value.key) : selectedOptions[0].key;\n emitInputEvent(value);\n };\n\n const changeHighlighted = (key: string) => {\n highlightedKey.value = key;\n highlightedIndex.value = flattenedOptions.value.findIndex((opt) => opt.key === key);\n };\n\n const onPlacement = (placement: NeonDropdownPlacement) => {\n dropdownPlacement.value = placement;\n };\n\n onMounted(() => {\n document.addEventListener('keydown', keyboardHandler);\n });\n\n onUnmounted(() => {\n document.removeEventListener('keydown', keyboardHandler);\n });\n\n watch(\n () => open.value,\n (open: boolean) => {\n if (open) {\n highlightedKey.value = flattenedOptions.value[0].key;\n highlightedIndex.value = 0;\n }\n },\n );\n\n return {\n dropdown,\n open,\n highlightedKey,\n highlightedIndex,\n flattenedOptions,\n computedLabel,\n sanitizedAttributes,\n computedOptions,\n computedIcon,\n clickOption,\n nativeSelectChange,\n changeHighlighted,\n onPlacement,\n };\n },\n});\n"],"names":["_sfc_main","defineComponent","NeonDropdown","NeonIcon","NeonSwitch","NeonSize","NeonFunctionalColor","props","emit","attrs","useAttrs","dropdown","ref","open","dropdownPlacement","highlightedKey","highlightedIndex","flattenedOptions","computed","_a","group","isReverse","NeonDropdownPlacement","scrollOnNavigate","element","NeonScrollUtils","navigateBy","offset","$event","newIndex","emitInputEvent","value","clickOption","option","values","index","v","keyboardHandler","reverseOffset","computedOptions","sanitizedAttributes","sanitized","computedLabel","selected","computedIcon","nativeSelectChange","event","selectedKeys","opt","selectedOptions","changeHighlighted","key","onPlacement","placement","onMounted","onUnmounted","watch"],"mappings":"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"}

package/dist/components/user-input/select/NeonSelect.ts_vue_type_script_src_37fb08e4_lang.es.js CHANGED Viewed

@@ -14,6 +14,7 @@ var _sfc_main = defineComponent({
     NeonSwitch
   },
   props: {
+    id: { type: String },
     placeholder: { type: String, required: true },
     placeholderAsOption: { type: Boolean, default: false },
     placeholderIcon: { type: String, required: false },

package/dist/components/user-input/select/NeonSelect.ts_vue_type_script_src_37fb08e4_lang.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NeonSelect.ts_vue_type_script_src_37fb08e4_lang.es.js","sources":["../../../../src/components/user-input/select/NeonSelect.ts?vue&type=script&src=37fb08e4&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport type { NeonSelectGroup } from '@/common/models/NeonSelectGroup';\nimport type { NeonSelectOption } from '@/common/models/NeonSelectOption';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonSwitch from '@/components/user-input/switch/NeonSwitch.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\n\n/*\n <p>The <strong>NeonSelect</strong> is the equivalent of an HTML <select> form control. On touch devices\n * NeonSelect will use the native select for input. <strong>NeonSelect</strong> supports grouping and multiselect.</p>\n * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by\n * <a href=\"/presentation/dropdown\">NeonDropdown</a> to change the style of the dropdown button.</p>\n /\nexport default defineComponent({\n name: 'NeonSelect',\n components: {\n NeonDropdown,\n NeonIcon,\n NeonSwitch,\n },\n props: {\n /\n Placeholder to display as button label when there is no option selected.\n /\n placeholder: { type: String, required: true },\n /\n Display the placeholder as the first option in the select, this is useful as an alternative to a label.\n /\n placeholderAsOption: { type: Boolean, default: false },\n /\n Optional placeholder icon.\n /\n placeholderIcon: { type: String, required: false },\n /\n A list of options to render in the select.\n /\n options: { type: Array as () => Array<NeonSelectOption>, required: false },\n /\n A list of grouped options to render in the select.\n /\n groupedOptions: { type: Array as () => Array<NeonSelectGroup>, required: false },\n /\n Either a single string, indicating the key of the selected option or an array of selected keys in the case\n * multiple = true.\n /\n modelValue: { type: [String, Array as () => Array<string>], required: true },\n /\n Allow multi-select.\n /\n multiple: { type: Boolean, default: false },\n /\n Placeholder when multiple values are selected.\n /\n multiselectPlaceholder: { type: String, required: false },\n /\n Disable the select\n /\n disabled: { type: Boolean, default: false },\n /\n The size of the dropdown - Small, Medium or Large.\n /\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /\n The color of the select.\n /\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n },\n emits: [\n /\n emitted when the user changes the selection.\n * @type {string \| string[]} either the selected option's key (single select) or an array of the selected keys\n * (multi-select).\n /\n 'update:modelValue',\n ],\n setup(props, { emit }) {\n const attrs = useAttrs();\n\n const dropdown = ref<HTMLElement \| null>(null);\n\n const open = ref(false);\n const dropdownPlacement = ref<NeonDropdownPlacement \| null>(null);\n const highlightedKey = ref<string \| null>(null);\n const highlightedIndex = ref(-1);\n\n const flattenedOptions = computed((): NeonSelectOption[] => {\n return props.options \|\| props.groupedOptions?.flatMap((group) => group.options) \|\| [];\n });\n\n const isReverse = () => {\n if (!props.groupedOptions) {\n switch (dropdownPlacement.value) {\n case NeonDropdownPlacement.TopLeft:\n case NeonDropdownPlacement.TopRight:\n case NeonDropdownPlacement.LeftBottom:\n case NeonDropdownPlacement.RightBottom:\n return true;\n }\n }\n\n return false;\n };\n\n const scrollOnNavigate = () => {\n const element = dropdown.value?.querySelector('.neon-select__option--highlighted') as HTMLElement;\n\n if (element) {\n NeonScrollUtils.scrollIntoView(element);\n }\n };\n\n const navigateBy = (offset: number, $event: KeyboardEvent) => {\n const newIndex = highlightedIndex.value + offset;\n if (newIndex >= 0 && newIndex <= flattenedOptions.value.length - 1) {\n highlightedIndex.value = newIndex;\n highlightedKey.value = flattenedOptions.value[highlightedIndex.value].key;\n $event.preventDefault();\n setTimeout(scrollOnNavigate);\n }\n };\n\n const emitInputEvent = (value: string \| string[]) => {\n emit('update:modelValue', value);\n };\n\n const clickOption = (option: NeonSelectOption) => {\n if (props.multiple) {\n const values = [...props.modelValue];\n const index = values.findIndex((v) => v === option.key);\n if (index >= 0) {\n values.splice(index, 1);\n } else {\n values.push(option.key);\n }\n emitInputEvent(values);\n } else if (props.modelValue !== option.key) {\n open.value = false;\n emitInputEvent(option.key);\n }\n };\n\n const keyboardHandler = ($event: KeyboardEvent) => {\n if (open.value) {\n switch ($event.code) {\n case 'ArrowUp':\n case 'ArrowDown':\n {\n const reverseOffset = isReverse() ? -1 : 1;\n if ($event.code === 'ArrowUp') {\n navigateBy(-1 reverseOffset, $event);\n } else {\n navigateBy(1 * reverseOffset, $event);\n }\n }\n break;\n case 'Enter':\n case 'Space':\n if (!flattenedOptions.value[highlightedIndex.value].disabled) {\n clickOption(flattenedOptions.value[highlightedIndex.value]);\n $event.preventDefault();\n }\n break;\n case 'Tab':\n if (!$event.ctrlKey && !$event.metaKey && !$event.altKey) {\n open.value = false;\n }\n break;\n }\n }\n };\n\n const computedOptions = computed((): Array<NeonSelectGroup> => {\n return (\n props.groupedOptions \|\| [\n {\n group: '',\n options: props.options \|\| [],\n },\n ]\n );\n });\n\n const sanitizedAttributes = computed(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { ...sanitized } = attrs;\n return sanitized;\n });\n\n const computedLabel = computed(() => {\n if (props.multiple && props.modelValue.length > 0) {\n if (props.multiselectPlaceholder) {\n return props.multiselectPlaceholder;\n } else if (props.modelValue.length > 1) {\n return `${props.modelValue.length} items selected`;\n } else {\n const selected = flattenedOptions.value.find((option) => option.key === props.modelValue[0]);\n return selected?.label \|\| '';\n }\n } else if (props.modelValue) {\n const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n if (selected) {\n return selected.label;\n }\n }\n\n return props.placeholder;\n });\n\n const computedIcon = computed(() => {\n if (props.modelValue) {\n const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n if (selected) {\n return selected.icon;\n }\n }\n\n return props.placeholderIcon;\n });\n\n const nativeSelectChange = (event: Event) => {\n const selectedKeys = Array.from((event.target as HTMLSelectElement).options)\n .filter((opt) => opt.selected)\n .map((opt) => opt.value);\n const selectedOptions = flattenedOptions.value.filter((v) => selectedKeys.indexOf(v.key) >= 0);\n const value = props.multiple ? selectedOptions.map((value) => value.key) : selectedOptions[0].key;\n emitInputEvent(value);\n };\n\n const changeHighlighted = (key: string) => {\n highlightedKey.value = key;\n highlightedIndex.value = flattenedOptions.value.findIndex((opt) => opt.key === key);\n };\n\n const onPlacement = (placement: NeonDropdownPlacement) => {\n dropdownPlacement.value = placement;\n };\n\n onMounted(() => {\n document.addEventListener('keydown', keyboardHandler);\n });\n\n onUnmounted(() => {\n document.removeEventListener('keydown', keyboardHandler);\n });\n\n watch(\n () => open.value,\n (open: boolean) => {\n if (open) {\n highlightedKey.value = flattenedOptions.value[0].key;\n highlightedIndex.value = 0;\n }\n },\n );\n\n return {\n dropdown,\n open,\n highlightedKey,\n highlightedIndex,\n flattenedOptions,\n computedLabel,\n sanitizedAttributes,\n computedOptions,\n computedIcon,\n clickOption,\n nativeSelectChange,\n changeHighlighted,\n onPlacement,\n };\n },\n});\n"],"names":["value","open"],"mappings":"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"}
1	+ {"version":3,"file":"NeonSelect.ts_vue_type_script_src_37fb08e4_lang.es.js","sources":["../../../../src/components/user-input/select/NeonSelect.ts?vue&type=script&src=37fb08e4&lang.ts"],"sourcesContent":["import { computed, defineComponent, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport type { NeonSelectGroup } from '@/common/models/NeonSelectGroup';\nimport type { NeonSelectOption } from '@/common/models/NeonSelectOption';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonDropdown from '@/components/presentation/dropdown/NeonDropdown.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonSwitch from '@/components/user-input/switch/NeonSwitch.vue';\nimport { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';\nimport { NeonScrollUtils } from '@/common/utils/NeonScrollUtils';\n\n/*\n <p>The <strong>NeonSelect</strong> is the equivalent of an HTML <select> form control. On touch devices\n * NeonSelect will use the native select for input. <strong>NeonSelect</strong> supports grouping and multiselect.</p>\n * <p><strong>Note:</strong> As well as the options described below, pass through attributes supported by\n * <a href=\"/presentation/dropdown\">NeonDropdown</a> to change the style of the dropdown button.</p>\n /\nexport default defineComponent({\n name: 'NeonSelect',\n components: {\n NeonDropdown,\n NeonIcon,\n NeonSwitch,\n },\n props: {\n /\n Id for the dropdown button\n /\n id: { type: String },\n /\n Placeholder to display as button label when there is no option selected.\n /\n placeholder: { type: String, required: true },\n /\n Display the placeholder as the first option in the select, this is useful as an alternative to a label.\n /\n placeholderAsOption: { type: Boolean, default: false },\n /\n Optional placeholder icon.\n /\n placeholderIcon: { type: String, required: false },\n /\n A list of options to render in the select.\n /\n options: { type: Array as () => Array<NeonSelectOption>, required: false },\n /\n A list of grouped options to render in the select.\n /\n groupedOptions: { type: Array as () => Array<NeonSelectGroup>, required: false },\n /\n Either a single string, indicating the key of the selected option or an array of selected keys in the case\n * multiple = true.\n /\n modelValue: { type: [String, Array as () => Array<string>], required: true },\n /\n Allow multi-select.\n /\n multiple: { type: Boolean, default: false },\n /\n Placeholder when multiple values are selected.\n /\n multiselectPlaceholder: { type: String, required: false },\n /\n Disable the select\n /\n disabled: { type: Boolean, default: false },\n /\n The size of the dropdown - Small, Medium or Large.\n /\n size: { type: String as () => NeonSize, default: NeonSize.Medium },\n /\n The color of the select.\n /\n color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n },\n emits: [\n /\n emitted when the user changes the selection.\n * @type {string \| string[]} either the selected option's key (single select) or an array of the selected keys\n * (multi-select).\n /\n 'update:modelValue',\n ],\n setup(props, { emit }) {\n const attrs = useAttrs();\n\n const dropdown = ref<HTMLElement \| null>(null);\n\n const open = ref(false);\n const dropdownPlacement = ref<NeonDropdownPlacement \| null>(null);\n const highlightedKey = ref<string \| null>(null);\n const highlightedIndex = ref(-1);\n\n const flattenedOptions = computed((): NeonSelectOption[] => {\n return props.options \|\| props.groupedOptions?.flatMap((group) => group.options) \|\| [];\n });\n\n const isReverse = () => {\n if (!props.groupedOptions) {\n switch (dropdownPlacement.value) {\n case NeonDropdownPlacement.TopLeft:\n case NeonDropdownPlacement.TopRight:\n case NeonDropdownPlacement.LeftBottom:\n case NeonDropdownPlacement.RightBottom:\n return true;\n }\n }\n\n return false;\n };\n\n const scrollOnNavigate = () => {\n const element = dropdown.value?.querySelector('.neon-select__option--highlighted') as HTMLElement;\n\n if (element) {\n NeonScrollUtils.scrollIntoView(element);\n }\n };\n\n const navigateBy = (offset: number, $event: KeyboardEvent) => {\n const newIndex = highlightedIndex.value + offset;\n if (newIndex >= 0 && newIndex <= flattenedOptions.value.length - 1) {\n highlightedIndex.value = newIndex;\n highlightedKey.value = flattenedOptions.value[highlightedIndex.value].key;\n $event.preventDefault();\n setTimeout(scrollOnNavigate);\n }\n };\n\n const emitInputEvent = (value: string \| string[]) => {\n emit('update:modelValue', value);\n };\n\n const clickOption = (option: NeonSelectOption) => {\n if (props.multiple) {\n const values = [...props.modelValue];\n const index = values.findIndex((v) => v === option.key);\n if (index >= 0) {\n values.splice(index, 1);\n } else {\n values.push(option.key);\n }\n emitInputEvent(values);\n } else if (props.modelValue !== option.key) {\n open.value = false;\n emitInputEvent(option.key);\n }\n };\n\n const keyboardHandler = ($event: KeyboardEvent) => {\n if (open.value) {\n switch ($event.code) {\n case 'ArrowUp':\n case 'ArrowDown': {\n const reverseOffset = isReverse() ? -1 : 1;\n if ($event.code === 'ArrowUp') {\n navigateBy(-1 reverseOffset, $event);\n } else {\n navigateBy(1 * reverseOffset, $event);\n }\n }\n break;\n case 'Enter':\n case 'Space':\n if (!flattenedOptions.value[highlightedIndex.value].disabled) {\n clickOption(flattenedOptions.value[highlightedIndex.value]);\n $event.preventDefault();\n }\n break;\n case 'Tab':\n if (!$event.ctrlKey && !$event.metaKey && !$event.altKey) {\n open.value = false;\n }\n break;\n }\n }\n };\n\n const computedOptions = computed((): Array<NeonSelectGroup> => {\n return (\n props.groupedOptions \|\| [\n {\n group: '',\n options: props.options \|\| [],\n },\n ]\n );\n });\n\n const sanitizedAttributes = computed(() => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { ...sanitized } = attrs;\n return sanitized;\n });\n\n const computedLabel = computed(() => {\n if (props.multiple && props.modelValue.length > 0) {\n if (props.multiselectPlaceholder) {\n return props.multiselectPlaceholder;\n } else if (props.modelValue.length > 1) {\n return `${props.modelValue.length} items selected`;\n } else {\n const selected = flattenedOptions.value.find((option) => option.key === props.modelValue[0]);\n return selected?.label \|\| '';\n }\n } else if (props.modelValue) {\n const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n if (selected) {\n return selected.label;\n }\n }\n\n return props.placeholder;\n });\n\n const computedIcon = computed(() => {\n if (props.modelValue) {\n const selected = flattenedOptions.value.find((option) => option.key === props.modelValue);\n\n if (selected) {\n return selected.icon;\n }\n }\n\n return props.placeholderIcon;\n });\n\n const nativeSelectChange = (event: Event) => {\n const selectedKeys = Array.from((event.target as HTMLSelectElement).options)\n .filter((opt) => opt.selected)\n .map((opt) => opt.value);\n const selectedOptions = flattenedOptions.value.filter((v) => selectedKeys.indexOf(v.key) >= 0);\n const value = props.multiple ? selectedOptions.map((value) => value.key) : selectedOptions[0].key;\n emitInputEvent(value);\n };\n\n const changeHighlighted = (key: string) => {\n highlightedKey.value = key;\n highlightedIndex.value = flattenedOptions.value.findIndex((opt) => opt.key === key);\n };\n\n const onPlacement = (placement: NeonDropdownPlacement) => {\n dropdownPlacement.value = placement;\n };\n\n onMounted(() => {\n document.addEventListener('keydown', keyboardHandler);\n });\n\n onUnmounted(() => {\n document.removeEventListener('keydown', keyboardHandler);\n });\n\n watch(\n () => open.value,\n (open: boolean) => {\n if (open) {\n highlightedKey.value = flattenedOptions.value[0].key;\n highlightedIndex.value = 0;\n }\n },\n );\n\n return {\n dropdown,\n open,\n highlightedKey,\n highlightedIndex,\n flattenedOptions,\n computedLabel,\n sanitizedAttributes,\n computedOptions,\n computedIcon,\n clickOption,\n nativeSelectChange,\n changeHighlighted,\n onPlacement,\n };\n },\n});\n"],"names":["value","open"],"mappings":"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"}

package/package.json CHANGED Viewed

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

package/src/sass/components/_card.scss CHANGED Viewed

@@ -88,7 +88,7 @@
       justify-content: flex-end;
       align-items: center;
-      .neon-button + .neon-button {
+      & > .neon-button + .neon-button {
         margin-left: calc(4 * var(--neon-base-space));
       }
     }

package/src/sass/components/_field.scss CHANGED Viewed

@@ -1,9 +1,13 @@
 @use '../includes/responsive';
+@use '../includes/typography';
 $message-height: calc(var(--neon-font-size-s) * var(--neon-line-height-ratio));
 @mixin field {
   .neon-field {
+    width: fit-content;
+    margin-bottom: calc(2 * var(--neon-base-space));
     & + .neon-field {
       margin-top: calc(4 * var(--neon-base-space));
@@ -16,11 +20,12 @@ $message-height: calc(var(--neon-font-size-s) * var(--neon-line-height-ratio));
       }
     }
-    &__container {
+    &__label-wrapper {
       display: inline-flex;
       align-items: center;
       margin-bottom: var(--neon-base-space);
       gap: calc(1.5 * var(--neon-base-space));
+      @include typography.label;
     }
     &.neon-field--disabled {

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

@@ -159,6 +159,7 @@
   blockquote,
   .neon-note,
   table,
+  label,
   p {
     & + h1,
     & + .neon-h1,
@@ -214,10 +215,6 @@
     }
   }
-  label:not(.no-style) {
-    color: var(--neon-label-color);
-  }
   .neon-color-text {
     color: var(--neon-color-text);
   }

package/src/sass/global/_typography.scss CHANGED Viewed

@@ -93,15 +93,10 @@
     @include typography.neon-h6;
   }
-  label {
-    &:not(.no-style) {
-      font-size: var(--neon-font-size-xs);
-      font-weight: var(--neon-font-weight-semi-bold);
-      letter-spacing: var(--neon-letter-spacing-m);
-      text-transform: uppercase;
-      user-select: none;
-      margin-bottom: calc(2 * var(--neon-base-space));
-    }
+  label:not(.no-style):not(.neon-field) {
+    width: fit-content;
+    margin-bottom: calc(2 * var(--neon-base-space));
+    @include typography.label;
   }
   @include responsive.responsive(mobile-large) {

package/src/sass/includes/_typography.scss CHANGED Viewed

@@ -46,3 +46,12 @@
   margin-top: 0;
   font-size: var(--neon-h6-size);
 }
+@mixin label {
+  color: var(--neon-label-color);
+  font-size: var(--neon-font-size-xs);
+  font-weight: var(--neon-font-weight-semi-bold);
+  letter-spacing: var(--neon-letter-spacing-m);
+  text-transform: uppercase;
+  user-select: none;
+}