sit-onyx 1.0.0-alpha.21 → 1.0.0-alpha.22

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),S=["disabled"],T={class:"onyx-button__label"},N=e.defineComponent({__name:"OnyxButton",props:{label:{default:""},disabled:{type:Boolean,default:!1},type:{default:"button"},variation:{default:"primary"},mode:{default:"default"},icon:{}},emits:["click"],setup(o,{emit:n}){const t=o,l=n;return(r,a)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["onyx-button",[`onyx-button--${t.variation}`,`onyx-button--${t.mode}`]]),disabled:t.disabled,onClick:a[0]||(a[0]=c=>l("click"))},[t.icon?(e.openBlock(),e.createBlock(e.unref(g),{key:0,icon:t.icon,size:"24px"},null,8,["icon"])):e.createCommentVNode("",!0),e.createElementVNode("span",T,e.toDisplayString(t.label),1)],10,S))}}),$=["button","submit","reset"],I=["primary","secondary","danger"],L=["default","outline","plain"],M="(optional)",q={tooShort:"Please lengthen this text to {minLength} characters or more (you are currently using 1 character) | Please lengthen this text to {minLength} characters or more (you are currently using {n} characters)",tooLong:"Please shorten this text to {maxLength} characters or less (you are currently using 1 character) | Please shorten this text to {maxLength} characters or less (you are currently using {n} characters)",rangeUnderflow:"Value must be greater than or equal to {min}",rangeOverflow:"Value must be less than or equal to {max}",patternMismatch:"Please match the format requested.",valueMissing:"Please fill in this field.",stepMismatch:"Please enter a value that is a multiple of {step}.",badInput:'"{value}" does not match the expected type.',typeMismatch:{generic:'"{value}" does not match the expected type.',email:'"{value}" must be a valid email address.',number:'"{value}" must be a number.',tel:'"{value}" must be a valid phone number.',url:'"{value}" must a valid URL.'}},w="Select all",y={optional:M,validations:q,selectAll:w},V=Symbol(),E=o=>{const n=e.computed(()=>e.unref(o==null?void 0:o.locale)??"en-US"),t=e.computed(()=>o!=null&&o.messages&&n.value in o.messages?o.messages[n.value]:y),l=e.computed(()=>(r,a={})=>{let c=B(r,t.value)??B(r,y)??"";const s=typeof a.n=="number"?a.n:void 0;return c=D(c,s),z(c,a)});return{locale:n,t:l}},P=(o,n)=>o.provide(V,E(n)),h=()=>e.inject(V,()=>E(),!0),B=(o,n)=>{const t=o.split(".").reduce((l,r)=>!l||typeof l=="string"?l:l[r],n);return t&&typeof t=="string"?t:void 0},D=(o,n)=>{const t=o.split(" | ").map(r=>r.trim());if(t.length<=1)return o;let l=1;return n===0&&(l=0),n&&(n<=0||n>1)&&(l=2),t.length===2?l===1?t[0]:t[1]:t[l]},z=(o,n)=>n?Object.entries(n).reduce((l,[r,a])=>a===void 0?l:l.replace(new RegExp(`{${r}}`,"gi"),a.toString()),o).replace(/\s?{.*}\s?/gi,""):o,U={class:"onyx-checkbox__container"},R=["aria-label","indeterminate","disabled","required"],A={key:0,class:"onyx-checkbox__label"},C=e.defineComponent({__name:"OnyxCheckbox",props:{modelValue:{type:Boolean,default:!1},label:{default:""},indeterminate:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},hideLabel:{type:Boolean}},emits:["update:modelValue"],setup(o,{emit:n}){const t=o,l=n,r=e.computed({get:()=>t.modelValue,set:c=>l("update:modelValue",c)}),a=e.ref(!1);return(c,s)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["onyx-checkbox",{"onyx-required-marker":t.required,"onyx-optional-marker":!t.required}])},[e.createElementVNode("div",U,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":s[0]||(s[0]=u=>r.value=u),"aria-label":t.hideLabel?t.label:void 0,class:e.normalizeClass(["onyx-checkbox__input",{"onyx-checkbox__input--touched":a.value}]),type:"checkbox",indeterminate:t.indeterminate,disabled:t.disabled,required:t.required,onBlur:s[1]||(s[1]=u=>a.value=!0)},null,42,R),[[e.vModelCheckbox,r.value]])]),t.label&&!t.hideLabel?(e.openBlock(),e.createElementBlock("p",A,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0)],2))}}),G=["disabled"],H={key:0,class:"onyx-checkbox-group__label"},Y=e.defineComponent({__name:"OnyxCheckboxGroup",props:{options:{},modelValue:{default:()=>[]},headline:{},direction:{default:"vertical"},withCheckAll:{type:Boolean,default:!1},checkAllLabel:{},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(o,{emit:n}){const t=o,l=n,{t:r}=h(),a=(i,m)=>{const d=m?[...t.modelValue,i]:t.modelValue.filter(f=>f!==i);l("update:modelValue",d)},c=e.computed(()=>t.options.filter(i=>!i.disabled)),s=i=>{const m=i?c.value.map(({id:d})=>d):[];l("update:modelValue",m)},u=e.computed(()=>{const i=c.value.map(({id:d})=>d),m=t.modelValue.filter(d=>i.includes(d));return!i.length||!m.length?{modelValue:!1}:m.length===i.length?{modelValue:!0}:{indeterminate:!0,modelValue:!1}});return(i,m)=>(e.openBlock(),e.createElementBlock("fieldset",{class:"onyx-checkbox-group",disabled:t.disabled},[t.headline?(e.openBlock(),e.createElementBlock("legend",H,[e.createVNode(e.unref(x),{is:"h3"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.headline),1)]),_:1})])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["onyx-checkbox-group__content",{"onyx-checkbox-group__content--horizontal":t.direction==="horizontal"}])},[t.withCheckAll?(e.openBlock(),e.createBlock(C,e.mergeProps({key:0},u.value,{label:t.checkAllLabel||e.unref(r)("selectAll"),"onUpdate:modelValue":s}),null,16,["label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,d=>(e.openBlock(),e.createBlock(C,e.mergeProps({key:d.id.toString()},d,{"model-value":t.modelValue.includes(d.id),"onUpdate:modelValue":f=>a(d.id,f)}),null,16,["model-value","onUpdate:modelValue"]))),128))],2)],8,G))}}),j=["horizontal","vertical"],x=e.defineComponent({__name:"OnyxHeadline",props:{is:{},monospace:{type:Boolean,default:!1}},setup(o){const n=o;return(t,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.is),{class:e.normalizeClass(["onyx-headline",`onyx-headline--${n.is}`,n.monospace?"onyx-headline--monospace":""])},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["class"]))}}),X=["h1","h2","h3","h4","h5","h6"],K=["innerHTML"],g=e.defineComponent({__name:"OnyxIcon",props:{icon:{},size:{default:"24px"},color:{default:"currentColor"}},setup(o){const n=o;return(t,l)=>(e.openBlock(),e.createElementBlock("figure",{class:e.normalizeClass(["onyx-icon",[n.size!=="24px"?`onyx-icon--${n.size}`:"",n.color!=="currentColor"?`onyx-icon--${n.color}`:""]]),"aria-hidden":"true",innerHTML:n.icon},null,10,K))}}),F=["12px","16px","24px","32px","48px","64px","96px"],Z=["href","target","rel"],J=e.defineComponent({__name:"OnyxLink",props:{href:{},target:{default:"_self"}},emits:["click"],setup(o,{emit:n}){const t=o,l=n;return(r,a)=>(e.openBlock(),e.createElementBlock("a",{class:"onyx-link",href:t.href,target:t.target,rel:t.target==="_blank"?"noopener noreferrer":void 0,onClick:a[0]||(a[0]=c=>l("click"))},[e.renderSlot(r.$slots,"default")],8,Z))}}),W=["_self","_blank","_parent","_top"],Q=(o,n)=>{const t=o.__vccOpts||o;for(const[l,r]of n)t[l]=r;return t},ee={},te={class:"onyx-circle-spinner",viewBox:"0 0 50 50"},ne=e.createElementVNode("circle",{class:"onyx-circle-spinner__circle",cx:"50%",cy:"50%",r:"45%"},null,-1),oe=[ne];function le(o,n){return e.openBlock(),e.createElementBlock("svg",te,oe)}const ae=Q(ee,[["render",le]]),re='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><circle cx="27" cy="16" r="3"/><circle cx="16" cy="16" r="2"/><circle cx="5" cy="16" r="3"/></svg>',se=e.defineComponent({__name:"LoadingDots",setup(o){return(n,t)=>(e.openBlock(),e.createBlock(g,{icon:e.unref(re)},null,8,["icon"]))}}),ce=e.defineComponent({__name:"OnyxLoadingIndicator",props:{type:{default:"circle"}},setup(o){const n=o;return(t,l)=>n.type==="circle"?(e.openBlock(),e.createBlock(ae,{key:0})):n.type==="dots"?(e.openBlock(),e.createBlock(se,{key:1})):e.createCommentVNode("",!0)}}),ie=["title"],ue=["required","name","value","checked","disabled"],de={class:"onyx-radio-button__label"},pe=e.defineComponent({__name:"OnyxRadioButton",props:{id:{},label:{},value:{},disabled:{type:Boolean},selected:{type:Boolean},name:{},required:{type:Boolean},errorMessage:{}},setup(o){const n=o,t=e.ref();return e.watchEffect(()=>{var l;return(l=t.value)==null?void 0:l.setCustomValidity(n.errorMessage??"")}),(l,r)=>(e.openBlock(),e.createElementBlock("label",{class:"onyx-radio-button",title:n.errorMessage},[e.createElementVNode("input",{ref_key:"selectorRef",ref:t,class:"onyx-radio-button__selector",type:"radio",required:n.required,name:n.name,value:n.id,checked:n.selected,disabled:n.disabled},null,8,ue),e.createElementVNode("span",de,e.toDisplayString(n.label),1)],8,ie))}}),me=(()=>{let o=0;return()=>o++})(),_e=o=>`${o}-${me()}`,fe=["disabled"],ye={key:0,class:"onyx-radio-button-group__headline"},he=e.defineComponent({__name:"OnyxRadioButtonGroup",props:{name:{default:()=>_e("radio-button-group-name")},modelValue:{},headline:{default:""},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},errorMessage:{default:""},direction:{default:"vertical"},options:{}},emits:["update:modelValue"],setup(o,{emit:n}){const t=o,l=n,r=a=>l("update:modelValue",t.options.find(({id:c})=>a.target.value===c));return(a,c)=>(e.openBlock(),e.createElementBlock("fieldset",{class:"onyx-radio-button-group",disabled:t.disabled,onChange:c[0]||(c[0]=s=>r(s))},[t.headline?(e.openBlock(),e.createElementBlock("legend",ye,[e.createVNode(x,{is:"h3",class:e.normalizeClass({"onyx-required-marker":t.required,"onyx-optional-marker":!t.required})},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.headline),1)]),_:1},8,["class"])])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["onyx-radio-button-group__content",{"onyx-radio-button-group__content--horizontal":t.direction==="horizontal"}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,s=>{var u;return e.openBlock(),e.createBlock(pe,{id:s.id,key:s.id,name:t.name,label:s.label,value:s.value,"error-message":t.errorMessage,selected:s.id===((u=t.modelValue)==null?void 0:u.id),disabled:s.disabled,required:t.required},null,8,["id","name","label","value","error-message","selected","disabled","required"])}),128))],2)],40,fe))}}),xe=(o,n)=>{const t=Object.entries(o).filter(([r,a])=>a!==void 0),l=Object.entries(n).filter(([r,a])=>a!==void 0);return t.length!==l.length?!1:t.every(([r,a])=>a===n[r])},O=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([o,n])=>n.enumerable).map(([o])=>o),ge=o=>O().reduce((n,t)=>(n[t]=o[t],n),{}),ve=o=>{if(o.valueMissing)return"valueMissing";const n=O().filter(t=>t!=="valid").sort();for(const t of n)if(t in o&&o[t])return t},be=Object.keys(y.validations.typeMismatch),ke={key:0,class:"onyx-input__error","aria-live":"polite"},Be={class:"onyx-input__info"},Ce=e.defineComponent({__name:"TestInput",props:{modelValue:{default:""},label:{default:""},errorMessage:{},required:{type:Boolean},pattern:{},type:{default:"text"},max:{},maxLength:{},min:{},step:{},minLength:{}},emits:["update:modelValue","change","validityChange"],setup(o,{emit:n}){var f;const t=o,l=n,{t:r}=h(),{errorMessage:a}=e.toRefs(t),c=e.ref(!1),s=e.ref(null),u=e.ref((f=s.value)==null?void 0:f.validity),i=e.computed({get:()=>t.modelValue,set:p=>l("update:modelValue",p)}),m=e.computed(()=>{if(!u.value||u.value.valid)return"";const p=ve(u.value);if(t.errorMessage||p==="customError")return t.errorMessage;if(!p)return"";if(p==="typeMismatch"){const _=be.includes(t.type)?t.type:"generic";return r.value(`validations.typeMismatch.${_}`,{value:i.value})}return r.value(`validations.${p}`,{value:i.value,n:i.value.toString().length,minLength:t.minLength,maxLength:t.maxLength,min:t.min,max:t.max,step:t.step})}),d=p=>{const _=p.target;l("change",_.value)};return e.watch([s,a],()=>{s.value&&s.value.setCustomValidity(t.errorMessage||"")}),e.watch([s,i,a],()=>{if(!s.value)return;const p=ge(s.value.validity);(!u.value||!xe(p,u.value))&&(u.value=p,l("validityChange",u.value))},{immediate:!0}),(p,_)=>{var v,b;return e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["onyx-input",{"onyx-input--touched":c.value}])},[e.createElementVNode("span",{class:e.normalizeClass(["onyx-input__label",{"onyx-input__label--required":t.required}])},e.toDisplayString(t.label),3),e.withDirectives(e.createElementVNode("input",e.mergeProps(t,{ref_key:"inputElement",ref:s,"onUpdate:modelValue":_[0]||(_[0]=k=>i.value=k),onChange:d,onBlur:_[1]||(_[1]=k=>c.value=!0)}),null,16),[[e.vModelDynamic,i.value]]),c.value&&!((v=u.value)!=null&&v.valid)?(e.openBlock(),e.createElementBlock("p",ke,e.toDisplayString(m.value),1)):e.createCommentVNode("",!0),e.createElementVNode("p",Be,'Model value: "'+e.toDisplayString(i.value)+'", is valid: '+e.toDisplayString((b=u.value)==null?void 0:b.valid),1)],2)}}}),Ve=["primary","secondary","neutral","danger","warning","success","info"],Ee=["small","default","large"],Oe=o=>({install:n=>{P(n,o.i18n);const t=n.runWithContext(()=>h());e.watchEffect(()=>Se(t.t.value("optional")))}}),Se=o=>globalThis.document.body.style.setProperty("--onyx-global-optional-text",o);exports.BUTTON_MODES=L;exports.BUTTON_TYPES=$;exports.BUTTON_VARIATIONS=I;exports.CHECKBOX_GROUP_DIRECTIONS=j;exports.HEADLINE_TYPES=X;exports.ICON_SIZES=F;exports.LINK_TARGETS=W;exports.ONYX_COLORS=Ve;exports.OnyxButton=N;exports.OnyxCheckboxGroup=Y;exports.OnyxHeadline=x;exports.OnyxIcon=g;exports.OnyxLink=J;exports.OnyxLoadingIndicator=ce;exports.OnyxRadioButtonGroup=he;exports.TEXT_SIZES=Ee;exports.TestInput=Ce;exports.createOnyx=Oe;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),N=["disabled"],T={class:"onyx-button__label"},$=e.defineComponent({__name:"OnyxButton",props:{label:{default:""},disabled:{type:Boolean,default:!1},type:{default:"button"},variation:{default:"primary"},mode:{default:"default"},icon:{}},emits:["click"],setup(o,{emit:n}){const t=o,l=n;return(r,a)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["onyx-button",[`onyx-button--${t.variation}`,`onyx-button--${t.mode}`]]),disabled:t.disabled,onClick:a[0]||(a[0]=c=>l("click"))},[t.icon?(e.openBlock(),e.createBlock(e.unref(E),{key:0,icon:t.icon,size:"24px"},null,8,["icon"])):e.createCommentVNode("",!0),e.createElementVNode("span",T,e.toDisplayString(t.label),1)],10,N))}}),I=["button","submit","reset"],L=["primary","secondary","danger"],M=["default","outline","plain"],q="(optional)",P={tooShort:"Please lengthen this text to {minLength} characters or more (you are currently using 1 character) | Please lengthen this text to {minLength} characters or more (you are currently using {n} characters)",tooLong:"Please shorten this text to {maxLength} characters or less (you are currently using 1 character) | Please shorten this text to {maxLength} characters or less (you are currently using {n} characters)",rangeUnderflow:"Value must be greater than or equal to {min}",rangeOverflow:"Value must be less than or equal to {max}",patternMismatch:"Please match the format requested.",valueMissing:"Please fill in this field.",stepMismatch:"Please enter a value that is a multiple of {step}.",badInput:'"{value}" does not match the expected type.',typeMismatch:{generic:'"{value}" does not match the expected type.',email:'"{value}" must be a valid email address.',number:'"{value}" must be a number.',tel:'"{value}" must be a valid phone number.',url:'"{value}" must a valid URL.'}},z="Select all",h={optional:q,validations:P,selectAll:z},V=Symbol(),C=o=>{const n=e.computed(()=>e.unref(o==null?void 0:o.locale)??"en-US"),t=e.computed(()=>o!=null&&o.messages&&n.value in o.messages?o.messages[n.value]:h),l=e.computed(()=>(r,a={})=>{let c=k(r,t.value)??k(r,h)??"";const s=typeof a.n=="number"?a.n:void 0;return c=w(c,s),U(c,a)});return{locale:n,t:l}},D=(o,n)=>o.provide(V,C(n)),f=()=>e.inject(V,()=>C(),!0),k=(o,n)=>{const t=o.split(".").reduce((l,r)=>!l||typeof l=="string"?l:l[r],n);return t&&typeof t=="string"?t:void 0},w=(o,n)=>{const t=o.split(" | ").map(r=>r.trim());if(t.length<=1)return o;let l=1;return n===0&&(l=0),n&&(n<=0||n>1)&&(l=2),t.length===2?l===1?t[0]:t[1]:t[l]},U=(o,n)=>n?Object.entries(n).reduce((l,[r,a])=>a===void 0?l:l.replace(new RegExp(`{${r}}`,"gi"),a.toString()),o).replace(/\s?{.*}\s?/gi,""):o,R={class:"onyx-checkbox__container"},A=["aria-label","indeterminate","disabled","required"],G={key:0,class:"onyx-checkbox__label"},B=e.defineComponent({__name:"OnyxCheckbox",props:{modelValue:{type:Boolean,default:!1},label:{default:""},indeterminate:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},hideLabel:{type:Boolean}},emits:["update:modelValue"],setup(o,{emit:n}){const t=o,l=n,r=e.computed({get:()=>t.modelValue,set:c=>l("update:modelValue",c)}),a=e.ref(!1);return(c,s)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["onyx-checkbox",{"onyx-required-marker":t.required,"onyx-optional-marker":!t.required}])},[e.createElementVNode("div",R,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":s[0]||(s[0]=u=>r.value=u),"aria-label":t.hideLabel?t.label:void 0,class:e.normalizeClass(["onyx-checkbox__input",{"onyx-checkbox__input--touched":a.value}]),type:"checkbox",indeterminate:t.indeterminate,disabled:t.disabled,required:t.required,onBlur:s[1]||(s[1]=u=>a.value=!0)},null,42,A),[[e.vModelCheckbox,r.value]])]),t.label&&!t.hideLabel?(e.openBlock(),e.createElementBlock("p",G,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0)],2))}}),H=["disabled"],Y={key:0,class:"onyx-checkbox-group__label"},j=e.defineComponent({__name:"OnyxCheckboxGroup",props:{options:{},modelValue:{default:()=>[]},headline:{},direction:{default:"vertical"},withCheckAll:{type:Boolean,default:!1},checkAllLabel:{},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(o,{emit:n}){const t=o,l=n,{t:r}=f(),a=(i,p)=>{const d=p?[...t.modelValue,i]:t.modelValue.filter(y=>y!==i);l("update:modelValue",d)},c=e.computed(()=>t.options.filter(i=>!i.disabled)),s=i=>{const p=i?c.value.map(({id:d})=>d):[];l("update:modelValue",p)},u=e.computed(()=>{const i=c.value.map(({id:d})=>d),p=t.modelValue.filter(d=>i.includes(d));return!i.length||!p.length?{modelValue:!1}:p.length===i.length?{modelValue:!0}:{indeterminate:!0,modelValue:!1}});return(i,p)=>(e.openBlock(),e.createElementBlock("fieldset",{class:"onyx-checkbox-group",disabled:t.disabled},[t.headline?(e.openBlock(),e.createElementBlock("legend",Y,[e.createVNode(e.unref(x),{is:"h3"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.headline),1)]),_:1})])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["onyx-checkbox-group__content",{"onyx-checkbox-group__content--horizontal":t.direction==="horizontal"}])},[t.withCheckAll?(e.openBlock(),e.createBlock(B,e.mergeProps({key:0},u.value,{label:t.checkAllLabel||e.unref(r)("selectAll"),"onUpdate:modelValue":s}),null,16,["label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,d=>(e.openBlock(),e.createBlock(B,e.mergeProps({key:d.id.toString()},d,{"model-value":t.modelValue.includes(d.id),"onUpdate:modelValue":y=>a(d.id,y)}),null,16,["model-value","onUpdate:modelValue"]))),128))],2)],8,H))}}),X=["horizontal","vertical"],x=e.defineComponent({__name:"OnyxHeadline",props:{is:{},monospace:{type:Boolean,default:!1}},setup(o){const n=o;return(t,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.is),{class:e.normalizeClass(["onyx-headline",`onyx-headline--${n.is}`,n.monospace?"onyx-headline--monospace":""])},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["class"]))}}),K=["h1","h2","h3","h4","h5","h6"],F=["innerHTML"],E=e.defineComponent({__name:"OnyxIcon",props:{icon:{},size:{default:"24px"},color:{default:"currentColor"}},setup(o){const n=o;return(t,l)=>(e.openBlock(),e.createElementBlock("figure",{class:e.normalizeClass(["onyx-icon",[n.size!=="24px"?`onyx-icon--${n.size}`:"",n.color!=="currentColor"?`onyx-icon--${n.color}`:""]]),"aria-hidden":"true",innerHTML:n.icon},null,10,F))}}),Z=["12px","16px","24px","32px","48px","64px","96px"],J=["href","target","rel"],W=e.defineComponent({__name:"OnyxLink",props:{href:{},target:{default:"_self"}},emits:["click"],setup(o,{emit:n}){const t=o,l=n;return(r,a)=>(e.openBlock(),e.createElementBlock("a",{class:"onyx-link",href:t.href,target:t.target,rel:t.target==="_blank"?"noopener noreferrer":void 0,onClick:a[0]||(a[0]=c=>l("click"))},[e.renderSlot(r.$slots,"default")],8,J))}}),Q=["_self","_blank","_parent","_top"],O=(o,n)=>{const t=o.__vccOpts||o;for(const[l,r]of n)t[l]=r;return t},ee={},te={class:"onyx-circle-spinner",viewBox:"0 0 50 50"},ne=e.createElementVNode("circle",{class:"onyx-circle-spinner__circle",cx:"50%",cy:"50%",r:"45%"},null,-1),oe=[ne];function le(o,n){return e.openBlock(),e.createElementBlock("svg",te,oe)}const ae=O(ee,[["render",le]]),re={},se={class:"onyx-loading-dots",viewBox:"0 0 32 32"},ce=e.createElementVNode("circle",{class:"onyx-loading-dots__circle",cx:"5",cy:"16",r:"3"},null,-1),ie=e.createElementVNode("circle",{class:"onyx-loading-dots__circle",cx:"16",cy:"16",r:"2"},null,-1),ue=e.createElementVNode("circle",{class:"onyx-loading-dots__circle",cx:"27",cy:"16",r:"3"},null,-1),de=[ce,ie,ue];function me(o,n){return e.openBlock(),e.createElementBlock("svg",se,de)}const pe=O(re,[["render",me]]),_e=e.defineComponent({__name:"OnyxLoadingIndicator",props:{type:{default:"circle"}},setup(o){const n=o;return(t,l)=>n.type==="circle"?(e.openBlock(),e.createBlock(ae,{key:0})):n.type==="dots"?(e.openBlock(),e.createBlock(pe,{key:1})):e.createCommentVNode("",!0)}}),ye=["title"],he=["required","name","value","checked","disabled"],fe={class:"onyx-radio-button__label"},xe=e.defineComponent({__name:"OnyxRadioButton",props:{id:{},label:{},value:{},disabled:{type:Boolean},selected:{type:Boolean},name:{},required:{type:Boolean},errorMessage:{}},setup(o){const n=o,t=e.ref();return e.watchEffect(()=>{var l;return(l=t.value)==null?void 0:l.setCustomValidity(n.errorMessage??"")}),(l,r)=>(e.openBlock(),e.createElementBlock("label",{class:"onyx-radio-button",title:n.errorMessage},[e.createElementVNode("input",{ref_key:"selectorRef",ref:t,class:"onyx-radio-button__selector",type:"radio",required:n.required,name:n.name,value:n.id,checked:n.selected,disabled:n.disabled},null,8,he),e.createElementVNode("span",fe,e.toDisplayString(n.label),1)],8,ye))}}),ge=(()=>{let o=0;return()=>o++})(),be=o=>`${o}-${ge()}`,ve=["disabled"],ke={key:0,class:"onyx-radio-button-group__headline"},Be=e.defineComponent({__name:"OnyxRadioButtonGroup",props:{name:{default:()=>be("radio-button-group-name")},modelValue:{},headline:{default:""},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},errorMessage:{default:""},direction:{default:"vertical"},options:{}},emits:["update:modelValue"],setup(o,{emit:n}){const t=o,l=n,r=a=>l("update:modelValue",t.options.find(({id:c})=>a.target.value===c));return(a,c)=>(e.openBlock(),e.createElementBlock("fieldset",{class:"onyx-radio-button-group",disabled:t.disabled,onChange:c[0]||(c[0]=s=>r(s))},[t.headline?(e.openBlock(),e.createElementBlock("legend",ke,[e.createVNode(x,{is:"h3",class:e.normalizeClass({"onyx-required-marker":t.required,"onyx-optional-marker":!t.required})},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.headline),1)]),_:1},8,["class"])])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["onyx-radio-button-group__content",{"onyx-radio-button-group__content--horizontal":t.direction==="horizontal"}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,s=>{var u;return e.openBlock(),e.createBlock(xe,{id:s.id,key:s.id,name:t.name,label:s.label,value:s.value,"error-message":t.errorMessage,selected:s.id===((u=t.modelValue)==null?void 0:u.id),disabled:s.disabled,required:t.required},null,8,["id","name","label","value","error-message","selected","disabled","required"])}),128))],2)],40,ve))}}),Ve=(o,n)=>{const t=Object.entries(o).filter(([r,a])=>a!==void 0),l=Object.entries(n).filter(([r,a])=>a!==void 0);return t.length!==l.length?!1:t.every(([r,a])=>a===n[r])},S=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([o,n])=>n.enumerable).map(([o])=>o),Ce=o=>S().reduce((n,t)=>(n[t]=o[t],n),{}),Ee=o=>{if(o.valueMissing)return"valueMissing";const n=S().filter(t=>t!=="valid").sort();for(const t of n)if(t in o&&o[t])return t},Oe=Object.keys(h.validations.typeMismatch),Se={key:0,class:"onyx-input__error","aria-live":"polite"},Ne={class:"onyx-input__info"},Te=e.defineComponent({__name:"TestInput",props:{modelValue:{default:""},label:{default:""},errorMessage:{},required:{type:Boolean},pattern:{},type:{default:"text"},max:{},maxLength:{},min:{},step:{},minLength:{}},emits:["update:modelValue","change","validityChange"],setup(o,{emit:n}){var y;const t=o,l=n,{t:r}=f(),{errorMessage:a}=e.toRefs(t),c=e.ref(!1),s=e.ref(null),u=e.ref((y=s.value)==null?void 0:y.validity),i=e.computed({get:()=>t.modelValue,set:m=>l("update:modelValue",m)}),p=e.computed(()=>{if(!u.value||u.value.valid)return"";const m=Ee(u.value);if(t.errorMessage||m==="customError")return t.errorMessage;if(!m)return"";if(m==="typeMismatch"){const _=Oe.includes(t.type)?t.type:"generic";return r.value(`validations.typeMismatch.${_}`,{value:i.value})}return r.value(`validations.${m}`,{value:i.value,n:i.value.toString().length,minLength:t.minLength,maxLength:t.maxLength,min:t.min,max:t.max,step:t.step})}),d=m=>{const _=m.target;l("change",_.value)};return e.watch([s,a],()=>{s.value&&s.value.setCustomValidity(t.errorMessage||"")}),e.watch([s,i,a],()=>{if(!s.value)return;const m=Ce(s.value.validity);(!u.value||!Ve(m,u.value))&&(u.value=m,l("validityChange",u.value))},{immediate:!0}),(m,_)=>{var g,b;return e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["onyx-input",{"onyx-input--touched":c.value}])},[e.createElementVNode("span",{class:e.normalizeClass(["onyx-input__label",{"onyx-input__label--required":t.required}])},e.toDisplayString(t.label),3),e.withDirectives(e.createElementVNode("input",e.mergeProps(t,{ref_key:"inputElement",ref:s,"onUpdate:modelValue":_[0]||(_[0]=v=>i.value=v),onChange:d,onBlur:_[1]||(_[1]=v=>c.value=!0)}),null,16),[[e.vModelDynamic,i.value]]),c.value&&!((g=u.value)!=null&&g.valid)?(e.openBlock(),e.createElementBlock("p",Se,e.toDisplayString(p.value),1)):e.createCommentVNode("",!0),e.createElementVNode("p",Ne,'Model value: "'+e.toDisplayString(i.value)+'", is valid: '+e.toDisplayString((b=u.value)==null?void 0:b.valid),1)],2)}}}),$e=["primary","secondary","neutral","danger","warning","success","info"],Ie=["small","default","large"],Le=o=>({install:n=>{D(n,o.i18n);const t=n.runWithContext(()=>f());e.watchEffect(()=>Me(t.t.value("optional")))}}),Me=o=>globalThis.document.body.style.setProperty("--onyx-global-optional-text",o);exports.BUTTON_MODES=M;exports.BUTTON_TYPES=I;exports.BUTTON_VARIATIONS=L;exports.CHECKBOX_GROUP_DIRECTIONS=X;exports.HEADLINE_TYPES=K;exports.ICON_SIZES=Z;exports.LINK_TARGETS=Q;exports.ONYX_COLORS=$e;exports.OnyxButton=$;exports.OnyxCheckboxGroup=j;exports.OnyxHeadline=x;exports.OnyxIcon=E;exports.OnyxLink=W;exports.OnyxLoadingIndicator=_e;exports.OnyxRadioButtonGroup=Be;exports.TEXT_SIZES=Ie;exports.TestInput=Te;exports.createOnyx=Le;

package/dist/index.js

@@ -1,5 +1,5 @@
-import { defineComponent as h, openBlock as s, createElementBlock as d, normalizeClass as y, createBlock as b, unref as $, createCommentVNode as k, createElementVNode as _, toDisplayString as x, inject as K, computed as v, ref as O, withDirectives as N, vModelCheckbox as X, createVNode as P, withCtx as B, createTextVNode as U, mergeProps as C, Fragment as R, renderList as z, resolveDynamicComponent as Z, renderSlot as A, watchEffect as D, toRefs as J, watch as E, vModelDynamic as W } from "vue";
-const Q = ["disabled"], ee = { class: "onyx-button__label" }, Re = /* @__PURE__ */ h({
+import { defineComponent as y, openBlock as s, createElementBlock as d, normalizeClass as h, createBlock as v, unref as O, createCommentVNode as k, createElementVNode as m, toDisplayString as x, inject as K, computed as b, ref as V, withDirectives as P, vModelCheckbox as X, createVNode as U, withCtx as B, createTextVNode as w, mergeProps as C, Fragment as R, renderList as z, resolveDynamicComponent as Z, renderSlot as A, watchEffect as D, toRefs as J, watch as E, vModelDynamic as W } from "vue";
+const Q = ["disabled"], ee = { class: "onyx-button__label" }, He = /* @__PURE__ */ y({
   __name: "OnyxButton",
   props: {
     label: { default: "" },
@@ -13,19 +13,19 @@ const Q = ["disabled"], ee = { class: "onyx-button__label" }, Re = /* @__PURE__
   setup(n, { emit: t }) {
     const e = n, a = t;
     return (o, l) => (s(), d("button", {
-      class: y(["onyx-button", [`onyx-button--${e.variation}`, `onyx-button--${e.mode}`]]),
+      class: h(["onyx-button", [`onyx-button--${e.variation}`, `onyx-button--${e.mode}`]]),
       disabled: e.disabled,
       onClick: l[0] || (l[0] = (i) => a("click"))
     }, [
-      e.icon ? (s(), b($(Y), {
+      e.icon ? (s(), v(O(me), {
         key: 0,
         icon: e.icon,
         size: "24px"
       }, null, 8, ["icon"])) : k("", !0),
-      _("span", ee, x(e.label), 1)
+      m("span", ee, x(e.label), 1)
     ], 10, Q));
   }
-}), ze = ["button", "submit", "reset"], Ae = ["primary", "secondary", "danger"], De = ["default", "outline", "plain"], te = "(optional)", ne = {
+}), Ye = ["button", "submit", "reset"], Fe = ["primary", "secondary", "danger"], Ke = ["default", "outline", "plain"], te = "(optional)", ne = {
   tooShort: "Please lengthen this text to {minLength} characters or more (you are currently using 1 character) | Please lengthen this text to {minLength} characters or more (you are currently using {n} characters)",
   tooLong: "Please shorten this text to {maxLength} characters or less (you are currently using 1 character) | Please shorten this text to {maxLength} characters or less (you are currently using {n} characters)",
   rangeUnderflow: "Value must be greater than or equal to {min}",
@@ -46,7 +46,7 @@ const Q = ["disabled"], ee = { class: "onyx-button__label" }, Re = /* @__PURE__
   validations: ne,
   selectAll: ae
 }, G = Symbol(), j = (n) => {
-  const t = v(() => $(n == null ? void 0 : n.locale) ?? "en-US"), e = v(() => n != null && n.messages && t.value in n.messages ? n.messages[t.value] : T), a = v(() => (o, l = {}) => {
+  const t = b(() => O(n == null ? void 0 : n.locale) ?? "en-US"), e = b(() => n != null && n.messages && t.value in n.messages ? n.messages[t.value] : T), a = b(() => (o, l = {}) => {
     let i = q(o, e.value) ?? q(o, T) ?? "";
     const r = typeof l.n == "number" ? l.n : void 0;
     return i = oe(i, r), re(i, l);
@@ -64,7 +64,7 @@ const Q = ["disabled"], ee = { class: "onyx-button__label" }, Re = /* @__PURE__
 }, re = (n, t) => t ? Object.entries(t).reduce((a, [o, l]) => l === void 0 ? a : a.replace(new RegExp(`{${o}}`, "gi"), l.toString()), n).replace(/\s?{.*}\s?/gi, "") : n, se = { class: "onyx-checkbox__container" }, ie = ["aria-label", "indeterminate", "disabled", "required"], ce = {
   key: 0,
   class: "onyx-checkbox__label"
-}, w = /* @__PURE__ */ h({
+}, N = /* @__PURE__ */ y({
   __name: "OnyxCheckbox",
   props: {
     modelValue: { type: Boolean, default: !1 },
@@ -76,21 +76,21 @@ const Q = ["disabled"], ee = { class: "onyx-button__label" }, Re = /* @__PURE__
   },
   emits: ["update:modelValue"],
   setup(n, { emit: t }) {
-    const e = n, a = t, o = v({
+    const e = n, a = t, o = b({
       get: () => e.modelValue,
       set: (i) => a("update:modelValue", i)
-    }), l = O(!1);
+    }), l = V(!1);
     return (i, r) => (s(), d("label", {
-      class: y(["onyx-checkbox", {
+      class: h(["onyx-checkbox", {
         "onyx-required-marker": e.required,
         "onyx-optional-marker": !e.required
       }])
     }, [
-      _("div", se, [
-        N(_("input", {
+      m("div", se, [
+        P(m("input", {
           "onUpdate:modelValue": r[0] || (r[0] = (u) => o.value = u),
           "aria-label": e.hideLabel ? e.label : void 0,
-          class: y(["onyx-checkbox__input", { "onyx-checkbox__input--touched": l.value }]),
+          class: h(["onyx-checkbox__input", { "onyx-checkbox__input--touched": l.value }]),
           type: "checkbox",
           indeterminate: e.indeterminate,
           disabled: e.disabled,
@@ -106,7 +106,7 @@ const Q = ["disabled"], ee = { class: "onyx-button__label" }, Re = /* @__PURE__
 }), ue = ["disabled"], de = {
   key: 0,
   class: "onyx-checkbox-group__label"
-}, Ge = /* @__PURE__ */ h({
+}, Xe = /* @__PURE__ */ y({
   __name: "OnyxCheckboxGroup",
   props: {
     options: {},
@@ -120,12 +120,12 @@ const Q = ["disabled"], ee = { class: "onyx-button__label" }, Re = /* @__PURE__
   emits: ["update:modelValue"],
   setup(n, { emit: t }) {
     const e = n, a = t, { t: o } = L(), l = (c, f) => {
-      const p = f ? [...e.modelValue, c] : e.modelValue.filter((V) => V !== c);
+      const p = f ? [...e.modelValue, c] : e.modelValue.filter(($) => $ !== c);
       a("update:modelValue", p);
-    }, i = v(() => e.options.filter((c) => !c.disabled)), r = (c) => {
+    }, i = b(() => e.options.filter((c) => !c.disabled)), r = (c) => {
       const f = c ? i.value.map(({ id: p }) => p) : [];
       a("update:modelValue", f);
-    }, u = v(() => {
+    }, u = b(() => {
       const c = i.value.map(({ id: p }) => p), f = e.modelValue.filter((p) => c.includes(p));
       return !c.length || !f.length ? { modelValue: !1 } : f.length === c.length ? { modelValue: !0 } : { indeterminate: !0, modelValue: !1 };
     });
@@ -134,30 +134,30 @@ const Q = ["disabled"], ee = { class: "onyx-button__label" }, Re = /* @__PURE__
       disabled: e.disabled
     }, [
       e.headline ? (s(), d("legend", de, [
-        P($(H), { is: "h3" }, {
+        U(O(H), { is: "h3" }, {
           default: B(() => [
-            U(x(e.headline), 1)
+            w(x(e.headline), 1)
           ]),
           _: 1
         })
       ])) : k("", !0),
-      _("div", {
-        class: y(["onyx-checkbox-group__content", { "onyx-checkbox-group__content--horizontal": e.direction === "horizontal" }])
+      m("div", {
+        class: h(["onyx-checkbox-group__content", { "onyx-checkbox-group__content--horizontal": e.direction === "horizontal" }])
       }, [
-        e.withCheckAll ? (s(), b(w, C({ key: 0 }, u.value, {
-          label: e.checkAllLabel || $(o)("selectAll"),
+        e.withCheckAll ? (s(), v(N, C({ key: 0 }, u.value, {
+          label: e.checkAllLabel || O(o)("selectAll"),
           "onUpdate:modelValue": r
         }), null, 16, ["label"])) : k("", !0),
-        (s(!0), d(R, null, z(e.options, (p) => (s(), b(w, C({
+        (s(!0), d(R, null, z(e.options, (p) => (s(), v(N, C({
           key: p.id.toString()
         }, p, {
           "model-value": e.modelValue.includes(p.id),
-          "onUpdate:modelValue": (V) => l(p.id, V)
+          "onUpdate:modelValue": ($) => l(p.id, $)
         }), null, 16, ["model-value", "onUpdate:modelValue"]))), 128))
       ], 2)
     ], 8, ue));
   }
-}), je = ["horizontal", "vertical"], H = /* @__PURE__ */ h({
+}), Ze = ["horizontal", "vertical"], H = /* @__PURE__ */ y({
   __name: "OnyxHeadline",
   props: {
     is: {},
@@ -165,8 +165,8 @@ const Q = ["disabled"], ee = { class: "onyx-button__label" }, Re = /* @__PURE__
   },
   setup(n) {
     const t = n;
-    return (e, a) => (s(), b(Z(t.is), {
-      class: y([
+    return (e, a) => (s(), v(Z(t.is), {
+      class: h([
         "onyx-headline",
         `onyx-headline--${t.is}`,
         t.monospace ? "onyx-headline--monospace" : ""
@@ -178,7 +178,7 @@ const Q = ["disabled"], ee = { class: "onyx-button__label" }, Re = /* @__PURE__
       _: 3
     }, 8, ["class"]));
   }
-}), He = ["h1", "h2", "h3", "h4", "h5", "h6"], pe = ["innerHTML"], Y = /* @__PURE__ */ h({
+}), Je = ["h1", "h2", "h3", "h4", "h5", "h6"], pe = ["innerHTML"], me = /* @__PURE__ */ y({
   __name: "OnyxIcon",
   props: {
     icon: {},
@@ -188,7 +188,7 @@ const Q = ["disabled"], ee = { class: "onyx-button__label" }, Re = /* @__PURE__
   setup(n) {
     const t = n;
     return (e, a) => (s(), d("figure", {
-      class: y(["onyx-icon", [
+      class: h(["onyx-icon", [
         t.size !== "24px" ? `onyx-icon--${t.size}` : "",
         t.color !== "currentColor" ? `onyx-icon--${t.color}` : ""
       ]]),
@@ -196,7 +196,7 @@ const Q = ["disabled"], ee = { class: "onyx-button__label" }, Re = /* @__PURE__
       innerHTML: t.icon
     }, null, 10, pe));
   }
-}), Ye = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"], me = ["href", "target", "rel"], Fe = /* @__PURE__ */ h({
+}), We = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"], _e = ["href", "target", "rel"], Qe = /* @__PURE__ */ y({
   __name: "OnyxLink",
   props: {
     href: {},
@@ -213,9 +213,9 @@ const Q = ["disabled"], ee = { class: "onyx-button__label" }, Re = /* @__PURE__
       onClick: l[0] || (l[0] = (i) => a("click"))
     }, [
       A(o.$slots, "default")
-    ], 8, me));
+    ], 8, _e));
   }
-}), Ke = ["_self", "_blank", "_parent", "_top"], _e = (n, t) => {
+}), et = ["_self", "_blank", "_parent", "_top"], Y = (n, t) => {
   const e = n.__vccOpts || n;
   for (const [a, o] of t)
     e[a] = o;
@@ -223,7 +223,7 @@ const Q = ["disabled"], ee = { class: "onyx-button__label" }, Re = /* @__PURE__
 }, he = {}, ye = {
   class: "onyx-circle-spinner",
   viewBox: "0 0 50 50"
-}, fe = /* @__PURE__ */ _("circle", {
+}, fe = /* @__PURE__ */ m("circle", {
   class: "onyx-circle-spinner__circle",
   cx: "50%",
   cy: "50%",
@@ -234,21 +234,42 @@ const Q = ["disabled"], ee = { class: "onyx-button__label" }, Re = /* @__PURE__
 function ge(n, t) {
   return s(), d("svg", ye, xe);
 }
-const ve = /* @__PURE__ */ _e(he, [["render", ge]]), be = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><circle cx="27" cy="16" r="3"/><circle cx="16" cy="16" r="2"/><circle cx="5" cy="16" r="3"/></svg>', ke = /* @__PURE__ */ h({
-  __name: "LoadingDots",
-  setup(n) {
-    return (t, e) => (s(), b(Y, { icon: $(be) }, null, 8, ["icon"]));
-  }
-}), Xe = /* @__PURE__ */ h({
+const be = /* @__PURE__ */ Y(he, [["render", ge]]), ve = {}, ke = {
+  class: "onyx-loading-dots",
+  viewBox: "0 0 32 32"
+}, $e = /* @__PURE__ */ m("circle", {
+  class: "onyx-loading-dots__circle",
+  cx: "5",
+  cy: "16",
+  r: "3"
+}, null, -1), Ve = /* @__PURE__ */ m("circle", {
+  class: "onyx-loading-dots__circle",
+  cx: "16",
+  cy: "16",
+  r: "2"
+}, null, -1), Oe = /* @__PURE__ */ m("circle", {
+  class: "onyx-loading-dots__circle",
+  cx: "27",
+  cy: "16",
+  r: "3"
+}, null, -1), Ce = [
+  $e,
+  Ve,
+  Oe
+];
+function Te(n, t) {
+  return s(), d("svg", ke, Ce);
+}
+const Be = /* @__PURE__ */ Y(ve, [["render", Te]]), tt = /* @__PURE__ */ y({
   __name: "OnyxLoadingIndicator",
   props: {
     type: { default: "circle" }
   },
   setup(n) {
     const t = n;
-    return (e, a) => t.type === "circle" ? (s(), b(ve, { key: 0 })) : t.type === "dots" ? (s(), b(ke, { key: 1 })) : k("", !0);
+    return (e, a) => t.type === "circle" ? (s(), v(be, { key: 0 })) : t.type === "dots" ? (s(), v(Be, { key: 1 })) : k("", !0);
   }
-}), Ve = ["title"], Oe = ["required", "name", "value", "checked", "disabled"], $e = { class: "onyx-radio-button__label" }, Ce = /* @__PURE__ */ h({
+}), Le = ["title"], Me = ["required", "name", "value", "checked", "disabled"], Se = { class: "onyx-radio-button__label" }, Ie = /* @__PURE__ */ y({
   __name: "OnyxRadioButton",
   props: {
     id: {},
@@ -261,7 +282,7 @@ const ve = /* @__PURE__ */ _e(he, [["render", ge]]), be = '<svg xmlns="http://ww
     errorMessage: {}
   },
   setup(n) {
-    const t = n, e = O();
+    const t = n, e = V();
     return D(() => {
       var a;
       return (a = e.value) == null ? void 0 : a.setCustomValidity(t.errorMessage ?? "");
@@ -269,7 +290,7 @@ const ve = /* @__PURE__ */ _e(he, [["render", ge]]), be = '<svg xmlns="http://ww
       class: "onyx-radio-button",
       title: t.errorMessage
     }, [
-      _("input", {
+      m("input", {
         ref_key: "selectorRef",
         ref: e,
         class: "onyx-radio-button__selector",
@@ -279,20 +300,20 @@ const ve = /* @__PURE__ */ _e(he, [["render", ge]]), be = '<svg xmlns="http://ww
         value: t.id,
         checked: t.selected,
         disabled: t.disabled
-      }, null, 8, Oe),
-      _("span", $e, x(t.label), 1)
-    ], 8, Ve));
+      }, null, 8, Me),
+      m("span", Se, x(t.label), 1)
+    ], 8, Le));
   }
-}), Te = /* @__PURE__ */ (() => {
+}), Ee = /* @__PURE__ */ (() => {
   let n = 0;
   return () => n++;
-})(), Be = (n) => `${n}-${Te()}`, Le = ["disabled"], Me = {
+})(), qe = (n) => `${n}-${Ee()}`, Ne = ["disabled"], Pe = {
   key: 0,
   class: "onyx-radio-button-group__headline"
-}, Ze = /* @__PURE__ */ h({
+}, nt = /* @__PURE__ */ y({
   __name: "OnyxRadioButtonGroup",
   props: {
-    name: { default: () => Be("radio-button-group-name") },
+    name: { default: () => qe("radio-button-group-name") },
     modelValue: {},
     headline: { default: "" },
     required: { type: Boolean, default: !1 },
@@ -309,26 +330,26 @@ const ve = /* @__PURE__ */ _e(he, [["render", ge]]), be = '<svg xmlns="http://ww
       disabled: e.disabled,
       onChange: i[0] || (i[0] = (r) => o(r))
     }, [
-      e.headline ? (s(), d("legend", Me, [
-        P(H, {
+      e.headline ? (s(), d("legend", Pe, [
+        U(H, {
           is: "h3",
-          class: y({
+          class: h({
             "onyx-required-marker": e.required,
             "onyx-optional-marker": !e.required
           })
         }, {
           default: B(() => [
-            U(x(e.headline), 1)
+            w(x(e.headline), 1)
           ]),
           _: 1
         }, 8, ["class"])
       ])) : k("", !0),
-      _("div", {
-        class: y(["onyx-radio-button-group__content", { "onyx-radio-button-group__content--horizontal": e.direction === "horizontal" }])
+      m("div", {
+        class: h(["onyx-radio-button-group__content", { "onyx-radio-button-group__content--horizontal": e.direction === "horizontal" }])
       }, [
         (s(!0), d(R, null, z(e.options, (r) => {
           var u;
-          return s(), b(Ce, {
+          return s(), v(Ie, {
             id: r.id,
             key: r.id,
             name: e.name,
@@ -341,28 +362,28 @@ const ve = /* @__PURE__ */ _e(he, [["render", ge]]), be = '<svg xmlns="http://ww
           }, null, 8, ["id", "name", "label", "value", "error-message", "selected", "disabled", "required"]);
         }), 128))
       ], 2)
-    ], 40, Le));
+    ], 40, Ne));
   }
-}), Se = (n, t) => {
+}), Ue = (n, t) => {
   const e = Object.entries(n).filter(([o, l]) => l !== void 0), a = Object.entries(t).filter(([o, l]) => l !== void 0);
   return e.length !== a.length ? !1 : e.every(([o, l]) => l === t[o]);
-}, F = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([n, t]) => t.enumerable).map(([n]) => n), Ie = (n) => F().reduce(
+}, F = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([n, t]) => t.enumerable).map(([n]) => n), we = (n) => F().reduce(
   (t, e) => (t[e] = n[e], t),
   {}
-), Ee = (n) => {
+), Re = (n) => {
   if (n.valueMissing)
     return "valueMissing";
   const t = F().filter((e) => e !== "valid").sort();
   for (const e of t)
     if (e in n && n[e])
       return e;
-}, qe = Object.keys(
+}, ze = Object.keys(
   T.validations.typeMismatch
-), we = {
+), Ae = {
   key: 0,
   class: "onyx-input__error",
   "aria-live": "polite"
-}, Ne = { class: "onyx-input__info" }, Je = /* @__PURE__ */ h({
+}, De = { class: "onyx-input__info" }, at = /* @__PURE__ */ y({
   __name: "TestInput",
   props: {
     modelValue: { default: "" },
@@ -379,23 +400,23 @@ const ve = /* @__PURE__ */ _e(he, [["render", ge]]), be = '<svg xmlns="http://ww
   },
   emits: ["update:modelValue", "change", "validityChange"],
   setup(n, { emit: t }) {
-    var V;
-    const e = n, a = t, { t: o } = L(), { errorMessage: l } = J(e), i = O(!1), r = O(null), u = O((V = r.value) == null ? void 0 : V.validity), c = v({
+    var $;
+    const e = n, a = t, { t: o } = L(), { errorMessage: l } = J(e), i = V(!1), r = V(null), u = V(($ = r.value) == null ? void 0 : $.validity), c = b({
       get: () => e.modelValue,
-      set: (m) => a("update:modelValue", m)
-    }), f = v(() => {
+      set: (_) => a("update:modelValue", _)
+    }), f = b(() => {
       if (!u.value || u.value.valid)
         return "";
-      const m = Ee(u.value);
-      if (e.errorMessage || m === "customError")
+      const _ = Re(u.value);
+      if (e.errorMessage || _ === "customError")
         return e.errorMessage;
-      if (!m)
+      if (!_)
         return "";
-      if (m === "typeMismatch") {
-        const g = qe.includes(e.type) ? e.type : "generic";
+      if (_ === "typeMismatch") {
+        const g = ze.includes(e.type) ? e.type : "generic";
         return o.value(`validations.typeMismatch.${g}`, { value: c.value });
       }
-      return o.value(`validations.${m}`, {
+      return o.value(`validations.${_}`, {
         value: c.value,
         n: c.value.toString().length,
         minLength: e.minLength,
@@ -404,8 +425,8 @@ const ve = /* @__PURE__ */ _e(he, [["render", ge]]), be = '<svg xmlns="http://ww
         max: e.max,
         step: e.step
       });
-    }), p = (m) => {
-      const g = m.target;
+    }), p = (_) => {
+      const g = _.target;
       a("change", g.value);
     };
     return E([r, l], () => {
@@ -415,19 +436,19 @@ const ve = /* @__PURE__ */ _e(he, [["render", ge]]), be = '<svg xmlns="http://ww
       () => {
         if (!r.value)
           return;
-        const m = Ie(r.value.validity);
-        (!u.value || !Se(m, u.value)) && (u.value = m, a("validityChange", u.value));
+        const _ = we(r.value.validity);
+        (!u.value || !Ue(_, u.value)) && (u.value = _, a("validityChange", u.value));
       },
       { immediate: !0 }
-    ), (m, g) => {
+    ), (_, g) => {
       var M, S;
       return s(), d("label", {
-        class: y(["onyx-input", { "onyx-input--touched": i.value }])
+        class: h(["onyx-input", { "onyx-input--touched": i.value }])
       }, [
-        _("span", {
-          class: y(["onyx-input__label", { "onyx-input__label--required": e.required }])
+        m("span", {
+          class: h(["onyx-input__label", { "onyx-input__label--required": e.required }])
         }, x(e.label), 3),
-        N(_("input", C(e, {
+        P(m("input", C(e, {
           ref_key: "inputElement",
           ref: r,
           "onUpdate:modelValue": g[0] || (g[0] = (I) => c.value = I),
@@ -436,12 +457,12 @@ const ve = /* @__PURE__ */ _e(he, [["render", ge]]), be = '<svg xmlns="http://ww
         }), null, 16), [
           [W, c.value]
         ]),
-        i.value && !((M = u.value) != null && M.valid) ? (s(), d("p", we, x(f.value), 1)) : k("", !0),
-        _("p", Ne, 'Model value: "' + x(c.value) + '", is valid: ' + x((S = u.value) == null ? void 0 : S.valid), 1)
+        i.value && !((M = u.value) != null && M.valid) ? (s(), d("p", Ae, x(f.value), 1)) : k("", !0),
+        m("p", De, 'Model value: "' + x(c.value) + '", is valid: ' + x((S = u.value) == null ? void 0 : S.valid), 1)
       ], 2);
     };
   }
-}), We = [
+}), lt = [
   "primary",
   "secondary",
   "neutral",
@@ -449,30 +470,30 @@ const ve = /* @__PURE__ */ _e(he, [["render", ge]]), be = '<svg xmlns="http://ww
   "warning",
   "success",
   "info"
-], Qe = ["small", "default", "large"], et = (n) => ({
+], ot = ["small", "default", "large"], rt = (n) => ({
   install: (t) => {
     le(t, n.i18n);
     const e = t.runWithContext(() => L());
-    D(() => Pe(e.t.value("optional")));
+    D(() => Ge(e.t.value("optional")));
   }
-}), Pe = (n) => globalThis.document.body.style.setProperty("--onyx-global-optional-text", n);
+}), Ge = (n) => globalThis.document.body.style.setProperty("--onyx-global-optional-text", n);
 export {
-  De as BUTTON_MODES,
-  ze as BUTTON_TYPES,
-  Ae as BUTTON_VARIATIONS,
-  je as CHECKBOX_GROUP_DIRECTIONS,
-  He as HEADLINE_TYPES,
-  Ye as ICON_SIZES,
-  Ke as LINK_TARGETS,
-  We as ONYX_COLORS,
-  Re as OnyxButton,
-  Ge as OnyxCheckboxGroup,
+  Ke as BUTTON_MODES,
+  Ye as BUTTON_TYPES,
+  Fe as BUTTON_VARIATIONS,
+  Ze as CHECKBOX_GROUP_DIRECTIONS,
+  Je as HEADLINE_TYPES,
+  We as ICON_SIZES,
+  et as LINK_TARGETS,
+  lt as ONYX_COLORS,
+  He as OnyxButton,
+  Xe as OnyxCheckboxGroup,
   H as OnyxHeadline,
-  Y as OnyxIcon,
-  Fe as OnyxLink,
-  Xe as OnyxLoadingIndicator,
-  Ze as OnyxRadioButtonGroup,
-  Qe as TEXT_SIZES,
-  Je as TestInput,
-  et as createOnyx
+  me as OnyxIcon,
+  Qe as OnyxLink,
+  tt as OnyxLoadingIndicator,
+  nt as OnyxRadioButtonGroup,
+  ot as TEXT_SIZES,
+  at as TestInput,
+  rt as createOnyx
 };