sit-onyx 1.0.0-alpha.34 → 1.0.0-alpha.35

package/dist/components/OnyxCheckboxGroup/OnyxCheckboxGroup.stories.d.ts

@@ -18,25 +18,16 @@ export declare const Default: {
             id: string;
             required?: undefined;
             disabled?: undefined;
-            skeleton?: undefined;
         } | {
             label: string;
             id: string;
             required: true;
             disabled?: undefined;
-            skeleton?: undefined;
         } | {
             label: string;
             id: string;
             disabled: true;
             required?: undefined;
-            skeleton?: undefined;
-        } | {
-            label: string;
-            id: string;
-            skeleton: true;
-            required?: undefined;
-            disabled?: undefined;
         })[];
     };
 };
@@ -53,25 +44,16 @@ export declare const Horizontal: {
             id: string;
             required?: undefined;
             disabled?: undefined;
-            skeleton?: undefined;
         } | {
             label: string;
             id: string;
             required: true;
             disabled?: undefined;
-            skeleton?: undefined;
         } | {
             label: string;
             id: string;
             disabled: true;
             required?: undefined;
-            skeleton?: undefined;
-        } | {
-            label: string;
-            id: string;
-            skeleton: true;
-            required?: undefined;
-            disabled?: undefined;
         })[];
     };
 };
@@ -88,25 +70,16 @@ export declare const WithCheckAll: {
             id: string;
             required?: undefined;
             disabled?: undefined;
-            skeleton?: undefined;
         } | {
             label: string;
             id: string;
             required: true;
             disabled?: undefined;
-            skeleton?: undefined;
         } | {
             label: string;
             id: string;
             disabled: true;
             required?: undefined;
-            skeleton?: undefined;
-        } | {
-            label: string;
-            id: string;
-            skeleton: true;
-            required?: undefined;
-            disabled?: undefined;
         })[];
     };
 };
@@ -123,25 +96,16 @@ export declare const Disabled: {
             id: string;
             required?: undefined;
             disabled?: undefined;
-            skeleton?: undefined;
         } | {
             label: string;
             id: string;
             required: true;
             disabled?: undefined;
-            skeleton?: undefined;
         } | {
             label: string;
             id: string;
             disabled: true;
             required?: undefined;
-            skeleton?: undefined;
-        } | {
-            label: string;
-            id: string;
-            skeleton: true;
-            required?: undefined;
-            disabled?: undefined;
         })[];
     };
 };
@@ -172,3 +136,30 @@ export declare const WithTruncation: {
     };
     decorators: import("@storybook/vue3").Decorator[];
 };
+/**
+ * This example shows a skeleton checkbox group.
+ * The number of skeleton options shown can be set via the `skeleton` property.
+ */
+export declare const Skeleton: {
+    args: {
+        skeleton: number;
+        headline: string;
+        modelValue: string[];
+        options: ({
+            label: string;
+            id: string;
+            required?: undefined;
+            disabled?: undefined;
+        } | {
+            label: string;
+            id: string;
+            required: true;
+            disabled?: undefined;
+        } | {
+            label: string;
+            id: string;
+            disabled: true;
+            required?: undefined;
+        })[];
+    };
+};

package/dist/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue.d.ts

@@ -1,5 +1,6 @@
 declare const _default: <TValue extends string | number | boolean>(__VLS_props: {
     disabled?: boolean | undefined;
+    skeleton?: number | undefined;
     modelValue?: TValue[] | undefined;
     "onUpdate:modelValue"?: ((value: TValue[]) => any) | undefined;
     headline?: string | undefined;
@@ -14,6 +15,7 @@ declare const _default: <TValue extends string | number | boolean>(__VLS_props:
 } | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
     props: {
         disabled?: boolean | undefined;
+        skeleton?: number | undefined;
         modelValue?: TValue[] | undefined;
         "onUpdate:modelValue"?: ((value: TValue[]) => any) | undefined;
         headline?: string | undefined;
@@ -32,6 +34,7 @@ declare const _default: <TValue extends string | number | boolean>(__VLS_props:
     __ctx?: {
         props: {
             disabled?: boolean | undefined;
+            skeleton?: number | undefined;
             modelValue?: TValue[] | undefined;
             "onUpdate:modelValue"?: ((value: TValue[]) => any) | undefined;
             headline?: string | undefined;

package/dist/components/OnyxCheckboxGroup/types.d.ts

@@ -30,6 +30,10 @@ export type OnyxCheckboxGroupProps<TValue extends string | number | boolean = st
      * Whether all checkboxes should be disabled.
      */
     disabled?: boolean;
+    /**
+     * If set, the specified number of skeleton radio buttons will be shown.
+     */
+    skeleton?: number;
 };
 export type CheckboxGroupOption<T extends string | number | boolean> = Omit<OnyxCheckboxProps, "modelValue" | "indeterminate"> & {
     id: T;

package/dist/components/OnyxRadioButtonGroup/OnyxRadioButtonGroup.stories.d.ts

@@ -29,7 +29,7 @@ export declare const Disabled: {
     };
 };
 /**
- * This example shows radio button group thats layed out vertically.
+ * This example shows a radio button group thats layed out vertically.
  */
 export declare const Horizontal: {
     args: {
@@ -59,3 +59,15 @@ export declare const WithTruncation: {
     };
     decorators: import("@storybook/vue3").Decorator[];
 };
+/**
+ * This example shows a skeleton radio button group.
+ * The number of skeleton options shown can be set via the `skeleton` property.
+ */
+export declare const Skeleton: {
+    args: {
+        skeleton: number;
+        headline: string;
+        options: SelectionOption<string>[];
+        modelValue: SelectionOption<string>;
+    };
+};

package/dist/components/OnyxRadioButtonGroup/OnyxRadioButtonGroup.vue.d.ts

@@ -2,6 +2,7 @@ import type { SelectionOption } from "../OnyxRadioButton/types";
 declare const _default: <TValue>(__VLS_props: {
     required?: boolean | undefined;
     disabled?: boolean | undefined;
+    skeleton?: number | undefined;
     modelValue?: SelectionOption<TValue> | undefined;
     "onUpdate:modelValue"?: ((selected: SelectionOption<TValue>) => any) | undefined;
     name?: string | undefined;
@@ -17,6 +18,7 @@ declare const _default: <TValue>(__VLS_props: {
     props: {
         required?: boolean | undefined;
         disabled?: boolean | undefined;
+        skeleton?: number | undefined;
         modelValue?: SelectionOption<TValue> | undefined;
         "onUpdate:modelValue"?: ((selected: SelectionOption<TValue>) => any) | undefined;
         name?: string | undefined;
@@ -36,6 +38,7 @@ declare const _default: <TValue>(__VLS_props: {
         props: {
             required?: boolean | undefined;
             disabled?: boolean | undefined;
+            skeleton?: number | undefined;
             modelValue?: SelectionOption<TValue> | undefined;
             "onUpdate:modelValue"?: ((selected: SelectionOption<TValue>) => any) | undefined;
             name?: string | undefined;

package/dist/components/OnyxRadioButtonGroup/types.d.ts

@@ -36,6 +36,10 @@ export type OnyxRadioButtonGroupProps<TValue> = {
      * Options for the individual radio buttons of the group.
      */
     options: SelectionOption<TValue>[];
+    /**
+     * If set, the specified number of skeleton radio buttons will be shown.
+     */
+    skeleton?: number;
 };
 export declare const RADIO_BUTTON_GROUP_DIRECTIONS: readonly ["horizontal", "vertical"];
 export type RadioButtonGroupDirection = (typeof RADIO_BUTTON_GROUP_DIRECTIONS)[number];

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),w={key:0,class:"onyx-app__nav"},L={class:"onyx-app__page"},I={key:1,class:"onyx-app__page-overlay"},M={key:2,class:"onyx-app__app-overlay"},z=e.defineComponent({__name:"OnyxAppLayout",props:{navBarAlignment:{default:"top"}},setup(n){const o=n,t=e.useSlots();return(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-app",{"onyx-app--horizontal":o.navBarAlignment==="left"}])},[e.unref(t).navBar?(e.openBlock(),e.createElementBlock("nav",w,[e.renderSlot(l.$slots,"navBar")])):e.createCommentVNode("",!0),e.createElementVNode("div",L,[e.renderSlot(l.$slots,"default")]),e.unref(t).pageOverlay?(e.openBlock(),e.createElementBlock("div",I,[e.renderSlot(l.$slots,"pageOverlay")])):e.createCommentVNode("",!0),e.unref(t).appOverlay?(e.openBlock(),e.createElementBlock("div",M,[e.renderSlot(l.$slots,"appOverlay")])):e.createCommentVNode("",!0)],2))}}),q=["innerHTML"],h=e.defineComponent({__name:"OnyxIcon",props:{icon:{},size:{default:"24px"},color:{default:"currentColor"}},setup(n){const o=n;return(t,l)=>(e.openBlock(),e.createElementBlock("figure",{class:e.normalizeClass(["onyx-icon",[o.size!=="24px"?`onyx-icon--${o.size}`:"",o.color!=="currentColor"?`onyx-icon--${o.color}`:""]]),"aria-hidden":"true",innerHTML:o.icon},null,10,q))}}),k=(n,o)=>{const t=n.__vccOpts||n;for(const[l,a]of o)t[l]=a;return t},P={},U={class:"onyx-skeleton"};function D(n,o){return e.openBlock(),e.createElementBlock("figure",U)}const y=k(P,[["render",D]]),A=["disabled"],R={class:"onyx-button__label onyx-truncation-ellipsis"},Y=e.defineComponent({__name:"OnyxButton",props:{label:{},disabled:{type:Boolean,default:!1},type:{default:"button"},variation:{default:"primary"},mode:{default:"default"},icon:{},skeleton:{type:Boolean,default:!1}},emits:["click"],setup(n,{emit:o}){const t=n,l=o;return(a,s)=>t.skeleton?(e.openBlock(),e.createBlock(y,{key:0,class:"onyx-button-skeleton"})):(e.openBlock(),e.createElementBlock("button",{key:1,class:e.normalizeClass(["onyx-button",[`onyx-button--${t.variation}`,`onyx-button--${t.mode}`]]),disabled:t.disabled,onClick:s[0]||(s[0]=c=>l("click"))},[t.icon?(e.openBlock(),e.createBlock(h,{key:0,icon:t.icon,size:"24px"},null,8,["icon"])):e.createCommentVNode("",!0),e.createElementVNode("span",R,e.toDisplayString(t.label),1)],10,A))}}),G=["button","submit","reset"],H=["primary","secondary","danger"],j=["default","outline","plain"],X="(optional)",F={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.'}},K="Select all",x={optional:X,validations:F,selectAll:K},S=Symbol(),$=n=>{const o=e.computed(()=>e.unref(n==null?void 0:n.locale)??"en-US"),t=e.computed(()=>n!=null&&n.messages&&o.value in n.messages?n.messages[o.value]:x),l=e.computed(()=>(a,s={})=>{let c=E(a,t.value)??E(a,x)??"";const r=typeof s.n=="number"?s.n:void 0;return c=J(c,r),W(c,s)});return{locale:o,t:l}},Z=(n,o)=>n.provide(S,$(o)),v=()=>e.inject(S,()=>$(),!0),E=(n,o)=>{const t=n.split(".").reduce((l,a)=>!l||typeof l=="string"?l:l[a],o);return t&&typeof t=="string"?t:void 0},J=(n,o)=>{const t=n.split(" | ").map(a=>a.trim());if(t.length<=1)return n;let l=1;return o===0&&(l=0),o&&(o<=0||o>1)&&(l=2),t.length===2?l===1?t[0]:t[1]:t[l]},W=(n,o)=>o?Object.entries(o).reduce((l,[a,s])=>s===void 0?l:l.replace(new RegExp(`{${a}}`,"gi"),s.toString()),n).replace(/\s?{.*}\s?/gi,""):n,Q={key:0,class:"onyx-checkbox-skeleton"},ee={class:"onyx-checkbox__container"},te=["aria-label","indeterminate","disabled","required"],C=e.defineComponent({__name:"OnyxCheckbox",props:{modelValue:{type:Boolean,default:!1},label:{},indeterminate:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(n,{emit:o}){const t=n,l=o,a=e.computed({get:()=>t.modelValue,set:c=>l("update:modelValue",c)}),s=e.ref(!1);return(c,r)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",Q,[e.createVNode(y,{class:"onyx-checkbox-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(y,{key:0,class:"onyx-checkbox-skeleton__label"}))])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-checkbox",{"onyx-required-marker":t.required,"onyx-optional-marker":!t.required}])},[e.createElementVNode("div",ee,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":r[0]||(r[0]=d=>a.value=d),"aria-label":t.hideLabel?t.label:void 0,class:e.normalizeClass(["onyx-checkbox__input",{"onyx-checkbox__input--touched":s.value}]),type:"checkbox",indeterminate:t.indeterminate,disabled:t.disabled,required:t.required,onBlur:r[1]||(r[1]=d=>s.value=!0)},null,42,te),[[e.vModelCheckbox,a.value]])]),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("p",{key:0,class:e.normalizeClass(["onyx-checkbox__label",[`onyx-truncation-${t.truncation}`]])},e.toDisplayString(t.label),3))],2))}}),oe=["disabled"],ne={key:0,class:"onyx-checkbox-group__label"},le=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(n,{emit:o}){const t=n,l=o,{t:a}=v(),s=(i,p)=>{const u=p?[...t.modelValue,i]:t.modelValue.filter(f=>f!==i);l("update:modelValue",u)},c=e.computed(()=>t.options.filter(i=>!i.disabled&&!i.skeleton)),r=i=>{const p=i?c.value.map(({id:u})=>u):[];l("update:modelValue",p)},d=e.computed(()=>{const i=c.value.map(({id:u})=>u),p=t.modelValue.filter(u=>i.includes(u));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",ne,[e.createVNode(e.unref(g),{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},d.value,{label:t.checkAllLabel||e.unref(a)("selectAll"),"onUpdate:modelValue":r}),null,16,["label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,u=>(e.openBlock(),e.createBlock(C,e.mergeProps({key:u.id.toString()},u,{"model-value":t.modelValue.includes(u.id),"onUpdate:modelValue":f=>s(u.id,f)}),null,16,["model-value","onUpdate:modelValue"]))),128))],2)],8,oe))}}),ae=["horizontal","vertical"],g=e.defineComponent({__name:"OnyxHeadline",props:{is:{},monospace:{type:Boolean,default:!1}},setup(n){const o=n;return(t,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.is),{class:e.normalizeClass(["onyx-headline",`onyx-headline--${o.is}`,o.monospace?"onyx-headline--monospace":""])},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["class"]))}}),se=["h1","h2","h3","h4","h5","h6"],re=["12px","16px","24px","32px","48px","64px","96px"],ce={class:"onyx-input"},ie={class:"onyx-input__label onyx-text--small onyx-truncation-ellipsis"},de={class:"onyx-input__wrapper"},ue=["placeholder","type"],pe=e.defineComponent({__name:"OnyxInput",props:{label:{},modelValue:{default:""},type:{default:"text"},placeholder:{}},emits:["update:modelValue","change","focus","blur"],setup(n,{emit:o}){const t=n,l=o,a=e.computed({get:()=>t.modelValue,set:c=>l("update:modelValue",c)}),s=c=>{const r=c.target.value;l("change",r)};return(c,r)=>(e.openBlock(),e.createElementBlock("label",ce,[e.createElementVNode("span",ie,e.toDisplayString(t.label),1),e.createElementVNode("div",de,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":r[0]||(r[0]=d=>a.value=d),class:"onyx-input__native",placeholder:t.placeholder,type:t.type,onChange:s,onFocus:r[1]||(r[1]=d=>l("focus")),onBlur:r[2]||(r[2]=d=>l("blur"))},null,40,ue),[[e.vModelDynamic,a.value]])])]))}}),me=["email","password","search","tel","text","url"],_e='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M12.2 10.55v2h5.836l-8.193 8.193 1.414 1.414 8.193-8.193V19.8h2v-9.25z"/></svg>',ye=n=>/^http(s?):\/\//.test(n),fe=["href","target","rel"],he=e.defineComponent({__name:"OnyxLink",props:{href:{},target:{default:"_self"},withExternalIcon:{type:[Boolean,String],default:"auto"}},emits:["click"],setup(n,{emit:o}){const t=n,l=o,a=e.computed(()=>t.withExternalIcon!=="auto"?t.withExternalIcon:ye(t.href));return(s,c)=>(e.openBlock(),e.createElementBlock("a",{class:"onyx-link",href:t.href,target:t.target,rel:t.target==="_blank"?"noreferrer":void 0,onClick:c[0]||(c[0]=r=>l("click"))},[e.renderSlot(s.$slots,"default"),a.value?(e.openBlock(),e.createBlock(h,{key:0,class:"onyx-link__icon",icon:e.unref(_e),size:"16px"},null,8,["icon"])):e.createCommentVNode("",!0)],8,fe))}}),xe=["_self","_blank","_parent","_top"],ke={},ve={class:"onyx-circle-spinner",viewBox:"0 0 50 50"},ge=e.createElementVNode("circle",{class:"onyx-circle-spinner__circle",cx:"50%",cy:"50%",r:"45%"},null,-1),be=[ge];function Be(n,o){return e.openBlock(),e.createElementBlock("svg",ve,be)}const Ve=k(ke,[["render",Be]]),Ee={},Ce={class:"onyx-loading-dots"},Se=e.createElementVNode("span",{class:"onyx-loading-dots__center"},null,-1),$e=[Se];function Ne(n,o){return e.openBlock(),e.createElementBlock("div",Ce,$e)}const Oe=k(Ee,[["render",Ne]]),Te=e.defineComponent({__name:"OnyxLoadingIndicator",props:{type:{default:"dots"}},setup(n){const o=n;return(t,l)=>o.type==="circle"?(e.openBlock(),e.createBlock(Ve,{key:0})):o.type==="dots"?(e.openBlock(),e.createBlock(Oe,{key:1})):e.createCommentVNode("",!0)}}),we={key:0,class:"onyx-page__sidebar"},Le={class:"onyx-page__main"},Ie={key:1,class:"onyx-page__footer"},Me={key:2,class:"onyx-page__toasts"},ze=e.defineComponent({__name:"OnyxPageLayout",props:{footerAsideSidebar:{type:Boolean},hideSidebar:{type:Boolean}},setup(n){const o=n,t=e.useSlots(),l=e.computed(()=>{let a="";return!t.footer&&t.sidebar&&(a="onyx-page--side-main"),t.footer&&(!t.sidebar||o.hideSidebar)&&(a="onyx-page--main-footer"),t.footer&&t.sidebar&&(o.footerAsideSidebar?a="onyx-page--side-main-footer-partial":a="onyx-page--side-main-footer-full"),a});return(a,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-page",l.value])},[e.unref(t).sidebar&&!o.hideSidebar?(e.openBlock(),e.createElementBlock("aside",we,[e.renderSlot(a.$slots,"sidebar")])):e.createCommentVNode("",!0),e.createElementVNode("main",Le,[e.renderSlot(a.$slots,"default")]),e.unref(t).footer?(e.openBlock(),e.createElementBlock("footer",Ie,[e.renderSlot(a.$slots,"footer")])):e.createCommentVNode("",!0),e.unref(t).toasts?(e.openBlock(),e.createElementBlock("div",Me,[e.renderSlot(a.$slots,"toasts")])):e.createCommentVNode("",!0)],2))}}),qe=(()=>{let n=0;return()=>n++})(),Pe=n=>`${n}-${qe()}`,Ue={key:0,class:"onyx-radio-button-skeleton"},De=["title"],Ae=["required","name","value","checked","disabled"],Re=e.defineComponent({__name:"OnyxRadioButton",props:{id:{},label:{},value:{},disabled:{type:Boolean,default:!1},truncation:{default:"ellipsis"},skeleton:{type:Boolean},selected:{type:Boolean,default:!1},name:{},required:{type:Boolean,default:!1},errorMessage:{}},setup(n){const o=n,t=e.ref();return e.watchEffect(()=>{var l;return(l=t.value)==null?void 0:l.setCustomValidity(o.errorMessage??"")}),(l,a)=>o.skeleton?(e.openBlock(),e.createElementBlock("div",Ue,[e.createVNode(y,{class:"onyx-radio-button-skeleton__input"}),e.createVNode(y,{class:"onyx-radio-button-skeleton__label"})])):(e.openBlock(),e.createElementBlock("label",{key:1,class:"onyx-radio-button",title:o.errorMessage},[e.createElementVNode("input",{ref_key:"selectorRef",ref:t,class:"onyx-radio-button__selector",type:"radio",required:o.required,name:o.name,value:o.id,checked:o.selected,disabled:o.disabled},null,8,Ae),e.createElementVNode("span",{class:e.normalizeClass(["onyx-radio-button__label",[`onyx-truncation-${o.truncation}`]])},e.toDisplayString(o.label),3)],8,De))}}),Ye=["disabled"],Ge={key:0,class:"onyx-radio-button-group__headline"},He=e.defineComponent({__name:"OnyxRadioButtonGroup",props:{name:{default:()=>Pe("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(n,{emit:o}){const t=n,l=o,a=s=>l("update:modelValue",t.options.find(({id:c})=>s.target.value===c));return(s,c)=>(e.openBlock(),e.createElementBlock("fieldset",{class:"onyx-radio-button-group",disabled:t.disabled,onChange:c[0]||(c[0]=r=>a(r))},[t.headline?(e.openBlock(),e.createElementBlock("legend",Ge,[e.createVNode(g,{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,r=>{var d;return e.openBlock(),e.createBlock(Re,e.mergeProps({key:r.id},r,{name:t.name,"error-message":t.errorMessage,selected:r.id===((d=t.modelValue)==null?void 0:d.id),required:t.required}),null,16,["name","error-message","selected","required"])}),128))],2)],40,Ye))}}),N=(n,o)=>{const t=Object.entries(n).filter(([a,s])=>s!==void 0),l=Object.entries(o).filter(([a,s])=>s!==void 0);return t.length!==l.length?!1:t.every(([a,s])=>s===o[a])},O=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([n,o])=>o.enumerable).map(([n])=>n),T=n=>O().reduce((o,t)=>(o[t]=n[t],o),{}),je=n=>{if(n.valueMissing)return"valueMissing";const o=O().filter(t=>t!=="valid").sort();for(const t of o)if(t in n&&n[t])return t},Xe='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m21.311 10.793-8.293 8.293-3.291-3.292-1.415 1.415 4.706 4.705 9.707-9.707z"/></svg>',Fe='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m22.707 10.707-1.414-1.414L16 14.586l-5.293-5.293-1.414 1.414L14.586 16l-5.293 5.293 1.414 1.414L16 17.414l5.293 5.293 1.414-1.414L17.414 16z"/></svg>',Ke={key:0,class:"onyx-switch-skeleton"},Ze=["aria-label","disabled","required"],Je={class:"onyx-switch__container"},We={class:"onyx-switch__icon"},Qe=e.defineComponent({__name:"OnyxSwitch",props:{modelValue:{type:Boolean,default:!1},label:{},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},errorMessage:{},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue","validityChange"],setup(n,{emit:o}){var d;const t=n,l=o,{errorMessage:a}=e.toRefs(t),s=e.ref(),c=e.ref((d=s.value)==null?void 0:d.validity),r=e.computed({get:()=>t.modelValue,set:i=>{l("update:modelValue",i)}});return e.watch([s,a],()=>{s.value&&s.value.setCustomValidity(t.errorMessage||"")}),e.watch([s,r,a],()=>{if(!s.value)return;const i=T(s.value.validity);(!c.value||!N(i,c.value))&&(c.value=i,l("validityChange",c.value))},{immediate:!0}),(i,p)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",Ke,[e.createVNode(y,{class:"onyx-switch-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(y,{key:0,class:"onyx-switch-skeleton__label"}))])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-switch",{"onyx-required-marker":t.required,"onyx-optional-marker":!t.required}])},[e.withDirectives(e.createElementVNode("input",{ref_key:"inputElement",ref:s,"onUpdate:modelValue":p[0]||(p[0]=u=>r.value=u),class:"onyx-switch__input",type:"checkbox","aria-label":t.hideLabel?t.label:void 0,disabled:t.disabled,required:t.required},null,8,Ze),[[e.vModelCheckbox,r.value]]),e.createElementVNode("span",Je,[e.createElementVNode("span",We,[e.createVNode(e.unref(h),{icon:r.value?e.unref(Xe):e.unref(Fe),size:"24px"},null,8,["icon"])])]),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["onyx-switch__label",[`onyx-truncation-${t.truncation}`]])},e.toDisplayString(t.label),3))],2))}}),et=Object.keys(x.validations.typeMismatch),tt={key:0,class:"onyx-test-input__error","aria-live":"polite"},ot={class:"onyx-test-input__info"},nt=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(n,{emit:o}){var f;const t=n,l=o,{t:a}=v(),{errorMessage:s}=e.toRefs(t),c=e.ref(!1),r=e.ref(null),d=e.ref((f=r.value)==null?void 0:f.validity),i=e.computed({get:()=>t.modelValue,set:m=>l("update:modelValue",m)}),p=e.computed(()=>{if(!d.value||d.value.valid)return"";const m=je(d.value);if(t.errorMessage||m==="customError")return t.errorMessage;if(!m)return"";if(m==="typeMismatch"){const _=et.includes(t.type)?t.type:"generic";return a.value(`validations.typeMismatch.${_}`,{value:i.value})}return a.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})}),u=m=>{const _=m.target;l("change",_.value)};return e.watch([r,s],()=>{r.value&&r.value.setCustomValidity(t.errorMessage||"")}),e.watch([r,i,s],()=>{if(!r.value)return;const m=T(r.value.validity);(!d.value||!N(m,d.value))&&(d.value=m,l("validityChange",d.value))},{immediate:!0}),(m,_)=>{var b,B;return e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["onyx-test-input",{"onyx-test-input--touched":c.value}])},[e.createElementVNode("span",{class:e.normalizeClass(["onyx-test-input__label",{"onyx-test-input__label--required":t.required}])},e.toDisplayString(t.label),3),e.withDirectives(e.createElementVNode("input",e.mergeProps(t,{ref_key:"inputElement",ref:r,"onUpdate:modelValue":_[0]||(_[0]=V=>i.value=V),onChange:u,onBlur:_[1]||(_[1]=V=>c.value=!0)}),null,16),[[e.vModelDynamic,i.value]]),c.value&&!((b=d.value)!=null&&b.valid)?(e.openBlock(),e.createElementBlock("p",tt,e.toDisplayString(p.value),1)):e.createCommentVNode("",!0),e.createElementVNode("p",ot,' Model value: "'+e.toDisplayString(i.value)+'", is valid: '+e.toDisplayString((B=d.value)==null?void 0:B.valid),1)],2)}}}),lt=["primary","secondary","neutral","danger","warning","success","info"],at=["small","default","large"],st=["ellipsis","multiline"],rt=n=>({install:o=>{Z(o,n.i18n);const t=o.runWithContext(()=>v());e.watchEffect(()=>ct(t.t.value("optional")))}}),ct=n=>globalThis.document.body.style.setProperty("--onyx-global-optional-text",n);exports.BUTTON_MODES=j;exports.BUTTON_TYPES=G;exports.BUTTON_VARIATIONS=H;exports.CHECKBOX_GROUP_DIRECTIONS=ae;exports.HEADLINE_TYPES=se;exports.ICON_SIZES=re;exports.INPUT_TYPES=me;exports.LINK_TARGETS=xe;exports.ONYX_COLORS=lt;exports.OnyxAppLayout=z;exports.OnyxButton=Y;exports.OnyxCheckboxGroup=le;exports.OnyxHeadline=g;exports.OnyxIcon=h;exports.OnyxInput=pe;exports.OnyxLink=he;exports.OnyxLoadingIndicator=Te;exports.OnyxPageLayout=ze;exports.OnyxRadioButtonGroup=He;exports.OnyxSkeleton=y;exports.OnyxSwitch=Qe;exports.TEXT_SIZES=at;exports.TRUNCATION_TYPES=st;exports.TestInput=nt;exports.createOnyx=rt;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),L={key:0,class:"onyx-app__nav"},I={class:"onyx-app__page"},M={key:1,class:"onyx-app__page-overlay"},z={key:2,class:"onyx-app__app-overlay"},q=e.defineComponent({__name:"OnyxAppLayout",props:{navBarAlignment:{default:"top"}},setup(o){const n=o,t=e.useSlots();return(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-app",{"onyx-app--horizontal":n.navBarAlignment==="left"}])},[e.unref(t).navBar?(e.openBlock(),e.createElementBlock("nav",L,[e.renderSlot(l.$slots,"navBar")])):e.createCommentVNode("",!0),e.createElementVNode("div",I,[e.renderSlot(l.$slots,"default")]),e.unref(t).pageOverlay?(e.openBlock(),e.createElementBlock("div",M,[e.renderSlot(l.$slots,"pageOverlay")])):e.createCommentVNode("",!0),e.unref(t).appOverlay?(e.openBlock(),e.createElementBlock("div",z,[e.renderSlot(l.$slots,"appOverlay")])):e.createCommentVNode("",!0)],2))}}),P=["innerHTML"],h=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,P))}}),v=(o,n)=>{const t=o.__vccOpts||o;for(const[l,a]of n)t[l]=a;return t},U={},D={class:"onyx-skeleton"};function A(o,n){return e.openBlock(),e.createElementBlock("figure",D)}const y=v(U,[["render",A]]),R=["disabled"],Y={class:"onyx-button__label onyx-truncation-ellipsis"},G=e.defineComponent({__name:"OnyxButton",props:{label:{},disabled:{type:Boolean,default:!1},type:{default:"button"},variation:{default:"primary"},mode:{default:"default"},icon:{},skeleton:{type:Boolean,default:!1}},emits:["click"],setup(o,{emit:n}){const t=o,l=n;return(a,s)=>t.skeleton?(e.openBlock(),e.createBlock(y,{key:0,class:"onyx-button-skeleton"})):(e.openBlock(),e.createElementBlock("button",{key:1,class:e.normalizeClass(["onyx-button",[`onyx-button--${t.variation}`,`onyx-button--${t.mode}`]]),disabled:t.disabled,onClick:s[0]||(s[0]=c=>l("click"))},[t.icon?(e.openBlock(),e.createBlock(h,{key:0,icon:t.icon,size:"24px"},null,8,["icon"])):e.createCommentVNode("",!0),e.createElementVNode("span",Y,e.toDisplayString(t.label),1)],10,R))}}),F=["button","submit","reset"],H=["primary","secondary","danger"],j=["default","outline","plain"],X="(optional)",K={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",x={optional:X,validations:K,selectAll:Z},$=Symbol(),N=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]:x),l=e.computed(()=>(a,s={})=>{let c=C(a,t.value)??C(a,x)??"";const r=typeof s.n=="number"?s.n:void 0;return c=W(c,r),Q(c,s)});return{locale:n,t:l}},J=(o,n)=>o.provide($,N(n)),g=()=>e.inject($,()=>N(),!0),C=(o,n)=>{const t=o.split(".").reduce((l,a)=>!l||typeof l=="string"?l:l[a],n);return t&&typeof t=="string"?t:void 0},W=(o,n)=>{const t=o.split(" | ").map(a=>a.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]},Q=(o,n)=>n?Object.entries(n).reduce((l,[a,s])=>s===void 0?l:l.replace(new RegExp(`{${a}}`,"gi"),s.toString()),o).replace(/\s?{.*}\s?/gi,""):o,ee={key:0,class:"onyx-checkbox-skeleton"},te={class:"onyx-checkbox__container"},ne=["aria-label","indeterminate","disabled","required"],k=e.defineComponent({__name:"OnyxCheckbox",props:{modelValue:{type:Boolean,default:!1},label:{},indeterminate:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(o,{emit:n}){const t=o,l=n,a=e.computed({get:()=>t.modelValue,set:c=>l("update:modelValue",c)}),s=e.ref(!1);return(c,r)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",ee,[e.createVNode(y,{class:"onyx-checkbox-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(y,{key:0,class:"onyx-checkbox-skeleton__label"}))])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-checkbox",{"onyx-required-marker":t.required,"onyx-optional-marker":!t.required}])},[e.createElementVNode("div",te,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":r[0]||(r[0]=d=>a.value=d),"aria-label":t.hideLabel?t.label:void 0,class:e.normalizeClass(["onyx-checkbox__input",{"onyx-checkbox__input--touched":s.value}]),type:"checkbox",indeterminate:t.indeterminate,disabled:t.disabled,required:t.required,onBlur:r[1]||(r[1]=d=>s.value=!0)},null,42,ne),[[e.vModelCheckbox,a.value]])]),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("p",{key:0,class:e.normalizeClass(["onyx-checkbox__label",[`onyx-truncation-${t.truncation}`]])},e.toDisplayString(t.label),3))],2))}}),oe=["disabled"],le={key:0,class:"onyx-checkbox-group__label"},ae=e.defineComponent({__name:"OnyxCheckboxGroup",props:{options:{},modelValue:{default:()=>[]},headline:{},direction:{default:"vertical"},withCheckAll:{type:Boolean,default:!1},checkAllLabel:{},disabled:{type:Boolean,default:!1},skeleton:{}},emits:["update:modelValue"],setup(o,{emit:n}){const t=o,l=n,{t:a}=g(),s=(i,p)=>{const u=p?[...t.modelValue,i]:t.modelValue.filter(f=>f!==i);l("update:modelValue",u)},c=e.computed(()=>t.options.filter(i=>!i.disabled&&!i.skeleton)),r=i=>{const p=i?c.value.map(({id:u})=>u):[];l("update:modelValue",p)},d=e.computed(()=>{const i=c.value.map(({id:u})=>u),p=t.modelValue.filter(u=>i.includes(u));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",le,[e.createVNode(e.unref(b),{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.skeleton===void 0?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.withCheckAll?(e.openBlock(),e.createBlock(k,e.mergeProps({key:0},d.value,{label:t.checkAllLabel||e.unref(a)("selectAll"),"onUpdate:modelValue":r}),null,16,["label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,u=>(e.openBlock(),e.createBlock(k,e.mergeProps({key:u.id.toString()},u,{"model-value":t.modelValue.includes(u.id),"onUpdate:modelValue":f=>s(u.id,f)}),null,16,["model-value","onUpdate:modelValue"]))),128))],64)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(t.skeleton,u=>(e.openBlock(),e.createBlock(k,{key:u,label:`Skeleton ${u}`,skeleton:""},null,8,["label"]))),128))],2)],8,oe))}}),re=["horizontal","vertical"],b=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"]))}}),se=["h1","h2","h3","h4","h5","h6"],ce=["12px","16px","24px","32px","48px","64px","96px"],ie={class:"onyx-input"},de={class:"onyx-input__label onyx-text--small onyx-truncation-ellipsis"},ue={class:"onyx-input__wrapper"},pe=["placeholder","type"],me=e.defineComponent({__name:"OnyxInput",props:{label:{},modelValue:{default:""},type:{default:"text"},placeholder:{}},emits:["update:modelValue","change","focus","blur"],setup(o,{emit:n}){const t=o,l=n,a=e.computed({get:()=>t.modelValue,set:c=>l("update:modelValue",c)}),s=c=>{const r=c.target.value;l("change",r)};return(c,r)=>(e.openBlock(),e.createElementBlock("label",ie,[e.createElementVNode("span",de,e.toDisplayString(t.label),1),e.createElementVNode("div",ue,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":r[0]||(r[0]=d=>a.value=d),class:"onyx-input__native",placeholder:t.placeholder,type:t.type,onChange:s,onFocus:r[1]||(r[1]=d=>l("focus")),onBlur:r[2]||(r[2]=d=>l("blur"))},null,40,pe),[[e.vModelDynamic,a.value]])])]))}}),_e=["email","password","search","tel","text","url"],ye='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M12.2 10.55v2h5.836l-8.193 8.193 1.414 1.414 8.193-8.193V19.8h2v-9.25z"/></svg>',fe=o=>/^http(s?):\/\//.test(o),he=["href","target","rel"],ke=e.defineComponent({__name:"OnyxLink",props:{href:{},target:{default:"_self"},withExternalIcon:{type:[Boolean,String],default:"auto"}},emits:["click"],setup(o,{emit:n}){const t=o,l=n,a=e.computed(()=>t.withExternalIcon!=="auto"?t.withExternalIcon:fe(t.href));return(s,c)=>(e.openBlock(),e.createElementBlock("a",{class:"onyx-link",href:t.href,target:t.target,rel:t.target==="_blank"?"noreferrer":void 0,onClick:c[0]||(c[0]=r=>l("click"))},[e.renderSlot(s.$slots,"default"),a.value?(e.openBlock(),e.createBlock(h,{key:0,class:"onyx-link__icon",icon:e.unref(ye),size:"16px"},null,8,["icon"])):e.createCommentVNode("",!0)],8,he))}}),xe=["_self","_blank","_parent","_top"],ve={},ge={class:"onyx-circle-spinner",viewBox:"0 0 50 50"},be=e.createElementVNode("circle",{class:"onyx-circle-spinner__circle",cx:"50%",cy:"50%",r:"45%"},null,-1),Be=[be];function Ve(o,n){return e.openBlock(),e.createElementBlock("svg",ge,Be)}const Ee=v(ve,[["render",Ve]]),Ce={},Se={class:"onyx-loading-dots"},$e=e.createElementVNode("span",{class:"onyx-loading-dots__center"},null,-1),Ne=[$e];function Oe(o,n){return e.openBlock(),e.createElementBlock("div",Se,Ne)}const Te=v(Ce,[["render",Oe]]),we=e.defineComponent({__name:"OnyxLoadingIndicator",props:{type:{default:"dots"}},setup(o){const n=o;return(t,l)=>n.type==="circle"?(e.openBlock(),e.createBlock(Ee,{key:0})):n.type==="dots"?(e.openBlock(),e.createBlock(Te,{key:1})):e.createCommentVNode("",!0)}}),Le={key:0,class:"onyx-page__sidebar"},Ie={class:"onyx-page__main"},Me={key:1,class:"onyx-page__footer"},ze={key:2,class:"onyx-page__toasts"},qe=e.defineComponent({__name:"OnyxPageLayout",props:{footerAsideSidebar:{type:Boolean},hideSidebar:{type:Boolean}},setup(o){const n=o,t=e.useSlots(),l=e.computed(()=>{let a="";return!t.footer&&t.sidebar&&(a="onyx-page--side-main"),t.footer&&(!t.sidebar||n.hideSidebar)&&(a="onyx-page--main-footer"),t.footer&&t.sidebar&&(n.footerAsideSidebar?a="onyx-page--side-main-footer-partial":a="onyx-page--side-main-footer-full"),a});return(a,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-page",l.value])},[e.unref(t).sidebar&&!n.hideSidebar?(e.openBlock(),e.createElementBlock("aside",Le,[e.renderSlot(a.$slots,"sidebar")])):e.createCommentVNode("",!0),e.createElementVNode("main",Ie,[e.renderSlot(a.$slots,"default")]),e.unref(t).footer?(e.openBlock(),e.createElementBlock("footer",Me,[e.renderSlot(a.$slots,"footer")])):e.createCommentVNode("",!0),e.unref(t).toasts?(e.openBlock(),e.createElementBlock("div",ze,[e.renderSlot(a.$slots,"toasts")])):e.createCommentVNode("",!0)],2))}}),Pe=(()=>{let o=0;return()=>o++})(),Ue=o=>`${o}-${Pe()}`,De={key:0,class:"onyx-radio-button-skeleton"},Ae=["title"],Re=["required","name","value","checked","disabled"],S=e.defineComponent({__name:"OnyxRadioButton",props:{id:{},label:{},value:{},disabled:{type:Boolean,default:!1},truncation:{default:"ellipsis"},skeleton:{type:Boolean},selected:{type:Boolean,default:!1},name:{},required:{type:Boolean,default:!1},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,a)=>n.skeleton?(e.openBlock(),e.createElementBlock("div",De,[e.createVNode(y,{class:"onyx-radio-button-skeleton__input"}),e.createVNode(y,{class:"onyx-radio-button-skeleton__label"})])):(e.openBlock(),e.createElementBlock("label",{key:1,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,Re),e.createElementVNode("span",{class:e.normalizeClass(["onyx-radio-button__label",[`onyx-truncation-${n.truncation}`]])},e.toDisplayString(n.label),3)],8,Ae))}}),Ye=["disabled"],Ge={key:0,class:"onyx-radio-button-group__headline"},Fe=e.defineComponent({__name:"OnyxRadioButtonGroup",props:{name:{default:()=>Ue("radio-button-group-name")},modelValue:{},headline:{default:""},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},errorMessage:{default:""},direction:{default:"vertical"},options:{},skeleton:{}},emits:["update:modelValue"],setup(o,{emit:n}){const t=o,l=n,a=s=>l("update:modelValue",t.options.find(({id:c})=>s.target.value===c));return(s,c)=>(e.openBlock(),e.createElementBlock("fieldset",{class:"onyx-radio-button-group",disabled:t.disabled,onChange:c[0]||(c[0]=r=>a(r))},[t.headline?(e.openBlock(),e.createElementBlock("legend",Ge,[e.createVNode(b,{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"}])},[t.skeleton===void 0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(t.options,r=>{var d;return e.openBlock(),e.createBlock(S,e.mergeProps({key:r.id},r,{name:t.name,"error-message":t.errorMessage,selected:r.id===((d=t.modelValue)==null?void 0:d.id),required:t.required}),null,16,["name","error-message","selected","required"])}),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(t.skeleton,r=>(e.openBlock(),e.createBlock(S,{id:`skeleton-${r}`,key:r,label:"Skeleton ${i}",name:t.name,skeleton:""},null,8,["id","name"]))),128))],2)],40,Ye))}}),O=(o,n)=>{const t=Object.entries(o).filter(([a,s])=>s!==void 0),l=Object.entries(n).filter(([a,s])=>s!==void 0);return t.length!==l.length?!1:t.every(([a,s])=>s===n[a])},T=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([o,n])=>n.enumerable).map(([o])=>o),w=o=>T().reduce((n,t)=>(n[t]=o[t],n),{}),He=o=>{if(o.valueMissing)return"valueMissing";const n=T().filter(t=>t!=="valid").sort();for(const t of n)if(t in o&&o[t])return t},je='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m21.311 10.793-8.293 8.293-3.291-3.292-1.415 1.415 4.706 4.705 9.707-9.707z"/></svg>',Xe='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m22.707 10.707-1.414-1.414L16 14.586l-5.293-5.293-1.414 1.414L14.586 16l-5.293 5.293 1.414 1.414L16 17.414l5.293 5.293 1.414-1.414L17.414 16z"/></svg>',Ke={key:0,class:"onyx-switch-skeleton"},Ze=["aria-label","disabled","required"],Je={class:"onyx-switch__container"},We={class:"onyx-switch__icon"},Qe=e.defineComponent({__name:"OnyxSwitch",props:{modelValue:{type:Boolean,default:!1},label:{},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},errorMessage:{},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue","validityChange"],setup(o,{emit:n}){var d;const t=o,l=n,{errorMessage:a}=e.toRefs(t),s=e.ref(),c=e.ref((d=s.value)==null?void 0:d.validity),r=e.computed({get:()=>t.modelValue,set:i=>{l("update:modelValue",i)}});return e.watch([s,a],()=>{s.value&&s.value.setCustomValidity(t.errorMessage||"")}),e.watch([s,r,a],()=>{if(!s.value)return;const i=w(s.value.validity);(!c.value||!O(i,c.value))&&(c.value=i,l("validityChange",c.value))},{immediate:!0}),(i,p)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",Ke,[e.createVNode(y,{class:"onyx-switch-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(y,{key:0,class:"onyx-switch-skeleton__label"}))])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-switch",{"onyx-required-marker":t.required,"onyx-optional-marker":!t.required}])},[e.withDirectives(e.createElementVNode("input",{ref_key:"inputElement",ref:s,"onUpdate:modelValue":p[0]||(p[0]=u=>r.value=u),class:"onyx-switch__input",type:"checkbox","aria-label":t.hideLabel?t.label:void 0,disabled:t.disabled,required:t.required},null,8,Ze),[[e.vModelCheckbox,r.value]]),e.createElementVNode("span",Je,[e.createElementVNode("span",We,[e.createVNode(e.unref(h),{icon:r.value?e.unref(je):e.unref(Xe),size:"24px"},null,8,["icon"])])]),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["onyx-switch__label",[`onyx-truncation-${t.truncation}`]])},e.toDisplayString(t.label),3))],2))}}),et=Object.keys(x.validations.typeMismatch),tt={key:0,class:"onyx-test-input__error","aria-live":"polite"},nt={class:"onyx-test-input__info"},ot=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:a}=g(),{errorMessage:s}=e.toRefs(t),c=e.ref(!1),r=e.ref(null),d=e.ref((f=r.value)==null?void 0:f.validity),i=e.computed({get:()=>t.modelValue,set:m=>l("update:modelValue",m)}),p=e.computed(()=>{if(!d.value||d.value.valid)return"";const m=He(d.value);if(t.errorMessage||m==="customError")return t.errorMessage;if(!m)return"";if(m==="typeMismatch"){const _=et.includes(t.type)?t.type:"generic";return a.value(`validations.typeMismatch.${_}`,{value:i.value})}return a.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})}),u=m=>{const _=m.target;l("change",_.value)};return e.watch([r,s],()=>{r.value&&r.value.setCustomValidity(t.errorMessage||"")}),e.watch([r,i,s],()=>{if(!r.value)return;const m=w(r.value.validity);(!d.value||!O(m,d.value))&&(d.value=m,l("validityChange",d.value))},{immediate:!0}),(m,_)=>{var B,V;return e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["onyx-test-input",{"onyx-test-input--touched":c.value}])},[e.createElementVNode("span",{class:e.normalizeClass(["onyx-test-input__label",{"onyx-test-input__label--required":t.required}])},e.toDisplayString(t.label),3),e.withDirectives(e.createElementVNode("input",e.mergeProps(t,{ref_key:"inputElement",ref:r,"onUpdate:modelValue":_[0]||(_[0]=E=>i.value=E),onChange:u,onBlur:_[1]||(_[1]=E=>c.value=!0)}),null,16),[[e.vModelDynamic,i.value]]),c.value&&!((B=d.value)!=null&&B.valid)?(e.openBlock(),e.createElementBlock("p",tt,e.toDisplayString(p.value),1)):e.createCommentVNode("",!0),e.createElementVNode("p",nt,' Model value: "'+e.toDisplayString(i.value)+'", is valid: '+e.toDisplayString((V=d.value)==null?void 0:V.valid),1)],2)}}}),lt=["primary","secondary","neutral","danger","warning","success","info"],at=["small","default","large"],rt=["ellipsis","multiline"],st=o=>({install:n=>{J(n,o.i18n);const t=n.runWithContext(()=>g());e.watchEffect(()=>ct(t.t.value("optional")))}}),ct=o=>globalThis.document.body.style.setProperty("--onyx-global-optional-text",o);exports.BUTTON_MODES=j;exports.BUTTON_TYPES=F;exports.BUTTON_VARIATIONS=H;exports.CHECKBOX_GROUP_DIRECTIONS=re;exports.HEADLINE_TYPES=se;exports.ICON_SIZES=ce;exports.INPUT_TYPES=_e;exports.LINK_TARGETS=xe;exports.ONYX_COLORS=lt;exports.OnyxAppLayout=q;exports.OnyxButton=G;exports.OnyxCheckboxGroup=ae;exports.OnyxHeadline=b;exports.OnyxIcon=h;exports.OnyxInput=me;exports.OnyxLink=ke;exports.OnyxLoadingIndicator=we;exports.OnyxPageLayout=qe;exports.OnyxRadioButtonGroup=Fe;exports.OnyxSkeleton=y;exports.OnyxSwitch=Qe;exports.TEXT_SIZES=at;exports.TRUNCATION_TYPES=rt;exports.TestInput=ot;exports.createOnyx=st;

package/dist/index.js

@@ -1,11 +1,11 @@
-import { defineComponent as h, useSlots as D, openBlock as l, createElementBlock as u, normalizeClass as m, unref as f, renderSlot as $, createCommentVNode as _, createElementVNode as p, createBlock as k, toDisplayString as b, inject as ne, computed as g, ref as O, createVNode as B, withDirectives as T, vModelCheckbox as G, withCtx as I, createTextVNode as Y, mergeProps as L, Fragment as j, renderList as H, resolveDynamicComponent as ae, vModelDynamic as F, watchEffect as K, toRefs as X, watch as C } from "vue";
-const oe = {
+import { defineComponent as h, useSlots as j, openBlock as o, createElementBlock as i, normalizeClass as m, unref as f, renderSlot as $, createCommentVNode as y, createElementVNode as p, createBlock as x, toDisplayString as k, inject as ae, computed as b, ref as O, createVNode as B, withDirectives as I, vModelCheckbox as H, withCtx as P, createTextVNode as F, Fragment as L, mergeProps as C, renderList as T, resolveDynamicComponent as oe, vModelDynamic as K, watchEffect as X, toRefs as Z, watch as E } from "vue";
+const le = {
   key: 0,
   class: "onyx-app__nav"
-}, le = { class: "onyx-app__page" }, se = {
+}, se = { class: "onyx-app__page" }, re = {
   key: 1,
   class: "onyx-app__page-overlay"
-}, re = {
+}, ie = {
   key: 2,
   class: "onyx-app__app-overlay"
 }, yt = /* @__PURE__ */ h({
@@ -14,25 +14,25 @@ const oe = {
     navBarAlignment: { default: "top" }
   },
   setup(n) {
-    const t = n, e = D();
-    return (a, o) => (l(), u("div", {
+    const t = n, e = j();
+    return (a, l) => (o(), i("div", {
       class: m(["onyx-app", { "onyx-app--horizontal": t.navBarAlignment === "left" }])
     }, [
-      f(e).navBar ? (l(), u("nav", oe, [
+      f(e).navBar ? (o(), i("nav", le, [
         $(a.$slots, "navBar")
-      ])) : _("", !0),
-      p("div", le, [
+      ])) : y("", !0),
+      p("div", se, [
         $(a.$slots, "default")
       ]),
-      f(e).pageOverlay ? (l(), u("div", se, [
+      f(e).pageOverlay ? (o(), i("div", re, [
         $(a.$slots, "pageOverlay")
-      ])) : _("", !0),
-      f(e).appOverlay ? (l(), u("div", re, [
+      ])) : y("", !0),
+      f(e).appOverlay ? (o(), i("div", ie, [
         $(a.$slots, "appOverlay")
-      ])) : _("", !0)
+      ])) : y("", !0)
     ], 2));
   }
-}), ie = ["innerHTML"], M = /* @__PURE__ */ h({
+}), ue = ["innerHTML"], U = /* @__PURE__ */ h({
   __name: "OnyxIcon",
   props: {
     icon: {},
@@ -41,25 +41,25 @@ const oe = {
   },
   setup(n) {
     const t = n;
-    return (e, a) => (l(), u("figure", {
+    return (e, a) => (o(), i("figure", {
       class: m(["onyx-icon", [
         t.size !== "24px" ? `onyx-icon--${t.size}` : "",
         t.color !== "currentColor" ? `onyx-icon--${t.color}` : ""
       ]]),
       "aria-hidden": "true",
       innerHTML: t.icon
-    }, null, 10, ie));
+    }, null, 10, ue));
   }
-}), q = (n, t) => {
+}), N = (n, t) => {
   const e = n.__vccOpts || n;
-  for (const [a, o] of t)
-    e[a] = o;
+  for (const [a, l] of t)
+    e[a] = l;
   return e;
-}, ue = {}, ce = { class: "onyx-skeleton" };
-function de(n, t) {
-  return l(), u("figure", ce);
+}, ce = {}, de = { class: "onyx-skeleton" };
+function pe(n, t) {
+  return o(), i("figure", de);
 }
-const w = /* @__PURE__ */ q(ue, [["render", de]]), pe = ["disabled"], _e = { class: "onyx-button__label onyx-truncation-ellipsis" }, mt = /* @__PURE__ */ h({
+const S = /* @__PURE__ */ N(ce, [["render", pe]]), _e = ["disabled"], ye = { class: "onyx-button__label onyx-truncation-ellipsis" }, mt = /* @__PURE__ */ h({
   __name: "OnyxButton",
   props: {
     label: {},
@@ -73,24 +73,24 @@ const w = /* @__PURE__ */ q(ue, [["render", de]]), pe = ["disabled"], _e = { cla
   emits: ["click"],
   setup(n, { emit: t }) {
     const e = n, a = t;
-    return (o, s) => e.skeleton ? (l(), k(w, {
+    return (l, r) => e.skeleton ? (o(), x(S, {
       key: 0,
       class: "onyx-button-skeleton"
-    })) : (l(), u("button", {
+    })) : (o(), i("button", {
       key: 1,
       class: m(["onyx-button", [`onyx-button--${e.variation}`, `onyx-button--${e.mode}`]]),
       disabled: e.disabled,
-      onClick: s[0] || (s[0] = (i) => a("click"))
+      onClick: r[0] || (r[0] = (u) => a("click"))
     }, [
-      e.icon ? (l(), k(M, {
+      e.icon ? (o(), x(U, {
         key: 0,
         icon: e.icon,
         size: "24px"
-      }, null, 8, ["icon"])) : _("", !0),
-      p("span", _e, b(e.label), 1)
-    ], 10, pe));
+      }, null, 8, ["icon"])) : y("", !0),
+      p("span", ye, k(e.label), 1)
+    ], 10, _e));
   }
-}), ht = ["button", "submit", "reset"], ft = ["primary", "secondary", "danger"], xt = ["default", "outline", "plain"], ye = "(optional)", me = {
+}), ht = ["button", "submit", "reset"], ft = ["primary", "secondary", "danger"], xt = ["default", "outline", "plain"], me = "(optional)", he = {
   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}",
@@ -106,30 +106,30 @@ const w = /* @__PURE__ */ q(ue, [["render", de]]), pe = ["disabled"], _e = { cla
     tel: '"{value}" must be a valid phone number.',
     url: '"{value}" must a valid URL.'
   }
-}, he = "Select all", E = {
-  optional: ye,
-  validations: me,
-  selectAll: he
-}, Z = Symbol(), J = (n) => {
-  const t = g(() => f(n == null ? void 0 : n.locale) ?? "en-US"), e = g(() => n != null && n.messages && t.value in n.messages ? n.messages[t.value] : E), a = g(() => (o, s = {}) => {
-    let i = z(o, e.value) ?? z(o, E) ?? "";
-    const r = typeof s.n == "number" ? s.n : void 0;
-    return i = xe(i, r), ve(i, s);
+}, fe = "Select all", q = {
+  optional: me,
+  validations: he,
+  selectAll: fe
+}, J = Symbol(), W = (n) => {
+  const t = b(() => f(n == null ? void 0 : n.locale) ?? "en-US"), e = b(() => n != null && n.messages && t.value in n.messages ? n.messages[t.value] : q), a = b(() => (l, r = {}) => {
+    let u = G(l, e.value) ?? G(l, q) ?? "";
+    const s = typeof r.n == "number" ? r.n : void 0;
+    return u = ve(u, s), ge(u, r);
   });
   return { locale: t, t: a };
-}, fe = (n, t) => n.provide(Z, J(t)), P = () => ne(Z, () => J(), !0), z = (n, t) => {
-  const e = n.split(".").reduce((a, o) => !a || typeof a == "string" ? a : a[o], t);
+}, xe = (n, t) => n.provide(J, W(t)), A = () => ae(J, () => W(), !0), G = (n, t) => {
+  const e = n.split(".").reduce((a, l) => !a || typeof a == "string" ? a : a[l], t);
   return e && typeof e == "string" ? e : void 0;
-}, xe = (n, t) => {
-  const e = n.split(" | ").map((o) => o.trim());
+}, ve = (n, t) => {
+  const e = n.split(" | ").map((l) => l.trim());
   if (e.length <= 1)
     return n;
   let a = 1;
   return t === 0 && (a = 0), t && (t <= 0 || t > 1) && (a = 2), e.length === 2 ? a === 1 ? e[0] : e[1] : e[a];
-}, ve = (n, t) => t ? Object.entries(t).reduce((a, [o, s]) => s === void 0 ? a : a.replace(new RegExp(`{${o}}`, "gi"), s.toString()), n).replace(/\s?{.*}\s?/gi, "") : n, ge = {
+}, ge = (n, t) => t ? Object.entries(t).reduce((a, [l, r]) => r === void 0 ? a : a.replace(new RegExp(`{${l}}`, "gi"), r.toString()), n).replace(/\s?{.*}\s?/gi, "") : n, be = {
   key: 0,
   class: "onyx-checkbox-skeleton"
-}, be = { class: "onyx-checkbox__container" }, ke = ["aria-label", "indeterminate", "disabled", "required"], R = /* @__PURE__ */ h({
+}, ke = { class: "onyx-checkbox__container" }, $e = ["aria-label", "indeterminate", "disabled", "required"], M = /* @__PURE__ */ h({
   __name: "OnyxCheckbox",
   props: {
     modelValue: { type: Boolean, default: !1 },
@@ -143,46 +143,46 @@ const w = /* @__PURE__ */ q(ue, [["render", de]]), pe = ["disabled"], _e = { cla
   },
   emits: ["update:modelValue"],
   setup(n, { emit: t }) {
-    const e = n, a = t, o = g({
+    const e = n, a = t, l = b({
       get: () => e.modelValue,
-      set: (i) => a("update:modelValue", i)
-    }), s = O(!1);
-    return (i, r) => e.skeleton ? (l(), u("div", ge, [
-      B(w, { class: "onyx-checkbox-skeleton__input" }),
-      e.hideLabel ? _("", !0) : (l(), k(w, {
+      set: (u) => a("update:modelValue", u)
+    }), r = O(!1);
+    return (u, s) => e.skeleton ? (o(), i("div", be, [
+      B(S, { class: "onyx-checkbox-skeleton__input" }),
+      e.hideLabel ? y("", !0) : (o(), x(S, {
         key: 0,
         class: "onyx-checkbox-skeleton__label"
       }))
-    ])) : (l(), u("label", {
+    ])) : (o(), i("label", {
       key: 1,
       class: m(["onyx-checkbox", {
         "onyx-required-marker": e.required,
         "onyx-optional-marker": !e.required
       }])
     }, [
-      p("div", be, [
-        T(p("input", {
-          "onUpdate:modelValue": r[0] || (r[0] = (d) => o.value = d),
+      p("div", ke, [
+        I(p("input", {
+          "onUpdate:modelValue": s[0] || (s[0] = (d) => l.value = d),
           "aria-label": e.hideLabel ? e.label : void 0,
           class: m(["onyx-checkbox__input", {
-            "onyx-checkbox__input--touched": s.value
+            "onyx-checkbox__input--touched": r.value
           }]),
           type: "checkbox",
           indeterminate: e.indeterminate,
           disabled: e.disabled,
           required: e.required,
-          onBlur: r[1] || (r[1] = (d) => s.value = !0)
-        }, null, 42, ke), [
-          [G, o.value]
+          onBlur: s[1] || (s[1] = (d) => r.value = !0)
+        }, null, 42, $e), [
+          [H, l.value]
         ])
       ]),
-      e.hideLabel ? _("", !0) : (l(), u("p", {
+      e.hideLabel ? y("", !0) : (o(), i("p", {
         key: 0,
         class: m(["onyx-checkbox__label", [`onyx-truncation-${e.truncation}`]])
-      }, b(e.label), 3))
+      }, k(e.label), 3))
     ], 2));
   }
-}), $e = ["disabled"], Ve = {
+}), Ve = ["disabled"], Oe = {
   key: 0,
   class: "onyx-checkbox-group__label"
 }, vt = /* @__PURE__ */ h({
@@ -194,49 +194,56 @@ const w = /* @__PURE__ */ q(ue, [["render", de]]), pe = ["disabled"], _e = { cla
     direction: { default: "vertical" },
     withCheckAll: { type: Boolean, default: !1 },
     checkAllLabel: {},
-    disabled: { type: Boolean, default: !1 }
+    disabled: { type: Boolean, default: !1 },
+    skeleton: {}
   },
   emits: ["update:modelValue"],
   setup(n, { emit: t }) {
-    const e = n, a = t, { t: o } = P(), s = (c, x) => {
-      const y = x ? [...e.modelValue, c] : e.modelValue.filter((S) => S !== c);
-      a("update:modelValue", y);
-    }, i = g(() => e.options.filter((c) => !c.disabled && !c.skeleton)), r = (c) => {
-      const x = c ? i.value.map(({ id: y }) => y) : [];
-      a("update:modelValue", x);
-    }, d = g(() => {
-      const c = i.value.map(({ id: y }) => y), x = e.modelValue.filter((y) => c.includes(y));
-      return !c.length || !x.length ? { modelValue: !1 } : x.length === c.length ? { modelValue: !0 } : { indeterminate: !0, modelValue: !1 };
+    const e = n, a = t, { t: l } = A(), r = (c, v) => {
+      const _ = v ? [...e.modelValue, c] : e.modelValue.filter((w) => w !== c);
+      a("update:modelValue", _);
+    }, u = b(() => e.options.filter((c) => !c.disabled && !c.skeleton)), s = (c) => {
+      const v = c ? u.value.map(({ id: _ }) => _) : [];
+      a("update:modelValue", v);
+    }, d = b(() => {
+      const c = u.value.map(({ id: _ }) => _), v = e.modelValue.filter((_) => c.includes(_));
+      return !c.length || !v.length ? { modelValue: !1 } : v.length === c.length ? { modelValue: !0 } : { indeterminate: !0, modelValue: !1 };
     });
-    return (c, x) => (l(), u("fieldset", {
+    return (c, v) => (o(), i("fieldset", {
       class: "onyx-checkbox-group",
       disabled: e.disabled
     }, [
-      e.headline ? (l(), u("legend", Ve, [
-        B(f(W), { is: "h3" }, {
-          default: I(() => [
-            Y(b(e.headline), 1)
+      e.headline ? (o(), i("legend", Oe, [
+        B(f(Q), { is: "h3" }, {
+          default: P(() => [
+            F(k(e.headline), 1)
           ]),
           _: 1
         })
-      ])) : _("", !0),
+      ])) : y("", !0),
       p("div", {
         class: m(["onyx-checkbox-group__content", { "onyx-checkbox-group__content--horizontal": e.direction === "horizontal" }])
       }, [
-        e.withCheckAll ? (l(), k(R, L({ key: 0 }, d.value, {
-          label: e.checkAllLabel || f(o)("selectAll"),
-          "onUpdate:modelValue": r
-        }), null, 16, ["label"])) : _("", !0),
-        (l(!0), u(j, null, H(e.options, (y) => (l(), k(R, L({
-          key: y.id.toString()
-        }, y, {
-          "model-value": e.modelValue.includes(y.id),
-          "onUpdate:modelValue": (S) => s(y.id, S)
-        }), null, 16, ["model-value", "onUpdate:modelValue"]))), 128))
+        e.skeleton === void 0 ? (o(), i(L, { key: 0 }, [
+          e.withCheckAll ? (o(), x(M, C({ key: 0 }, d.value, {
+            label: e.checkAllLabel || f(l)("selectAll"),
+            "onUpdate:modelValue": s
+          }), null, 16, ["label"])) : y("", !0),
+          (o(!0), i(L, null, T(e.options, (_) => (o(), x(M, C({
+            key: _.id.toString()
+          }, _, {
+            "model-value": e.modelValue.includes(_.id),
+            "onUpdate:modelValue": (w) => r(_.id, w)
+          }), null, 16, ["model-value", "onUpdate:modelValue"]))), 128))
+        ], 64)) : (o(!0), i(L, { key: 1 }, T(e.skeleton, (_) => (o(), x(M, {
+          key: _,
+          label: `Skeleton ${_}`,
+          skeleton: ""
+        }, null, 8, ["label"]))), 128))
       ], 2)
-    ], 8, $e));
+    ], 8, Ve));
   }
-}), gt = ["horizontal", "vertical"], W = /* @__PURE__ */ h({
+}), gt = ["horizontal", "vertical"], Q = /* @__PURE__ */ h({
   __name: "OnyxHeadline",
   props: {
     is: {},
@@ -244,20 +251,20 @@ const w = /* @__PURE__ */ q(ue, [["render", de]]), pe = ["disabled"], _e = { cla
   },
   setup(n) {
     const t = n;
-    return (e, a) => (l(), k(ae(t.is), {
+    return (e, a) => (o(), x(oe(t.is), {
       class: m([
         "onyx-headline",
         `onyx-headline--${t.is}`,
         t.monospace ? "onyx-headline--monospace" : ""
       ])
     }, {
-      default: I(() => [
+      default: P(() => [
         $(e.$slots, "default")
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), bt = ["h1", "h2", "h3", "h4", "h5", "h6"], kt = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"], Oe = { class: "onyx-input" }, Be = { class: "onyx-input__label onyx-text--small onyx-truncation-ellipsis" }, we = { class: "onyx-input__wrapper" }, Se = ["placeholder", "type"], $t = /* @__PURE__ */ h({
+}), bt = ["h1", "h2", "h3", "h4", "h5", "h6"], kt = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"], Be = { class: "onyx-input" }, Se = { class: "onyx-input__label onyx-text--small onyx-truncation-ellipsis" }, we = { class: "onyx-input__wrapper" }, Le = ["placeholder", "type"], $t = /* @__PURE__ */ h({
   __name: "OnyxInput",
   props: {
     label: {},
@@ -267,31 +274,31 @@ const w = /* @__PURE__ */ q(ue, [["render", de]]), pe = ["disabled"], _e = { cla
   },
   emits: ["update:modelValue", "change", "focus", "blur"],
   setup(n, { emit: t }) {
-    const e = n, a = t, o = g({
+    const e = n, a = t, l = b({
       get: () => e.modelValue,
-      set: (i) => a("update:modelValue", i)
-    }), s = (i) => {
-      const r = i.target.value;
-      a("change", r);
+      set: (u) => a("update:modelValue", u)
+    }), r = (u) => {
+      const s = u.target.value;
+      a("change", s);
     };
-    return (i, r) => (l(), u("label", Oe, [
-      p("span", Be, b(e.label), 1),
+    return (u, s) => (o(), i("label", Be, [
+      p("span", Se, k(e.label), 1),
       p("div", we, [
-        T(p("input", {
-          "onUpdate:modelValue": r[0] || (r[0] = (d) => o.value = d),
+        I(p("input", {
+          "onUpdate:modelValue": s[0] || (s[0] = (d) => l.value = d),
           class: "onyx-input__native",
           placeholder: e.placeholder,
           type: e.type,
-          onChange: s,
-          onFocus: r[1] || (r[1] = (d) => a("focus")),
-          onBlur: r[2] || (r[2] = (d) => a("blur"))
-        }, null, 40, Se), [
-          [F, o.value]
+          onChange: r,
+          onFocus: s[1] || (s[1] = (d) => a("focus")),
+          onBlur: s[2] || (s[2] = (d) => a("blur"))
+        }, null, 40, Le), [
+          [K, l.value]
         ])
       ])
     ]));
   }
-}), Vt = ["email", "password", "search", "tel", "text", "url"], Le = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M12.2 10.55v2h5.836l-8.193 8.193 1.414 1.414 8.193-8.193V19.8h2v-9.25z"/></svg>', Ce = (n) => /^http(s?):\/\//.test(n), Te = ["href", "target", "rel"], Ot = /* @__PURE__ */ h({
+}), Vt = ["email", "password", "search", "tel", "text", "url"], Ce = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M12.2 10.55v2h5.836l-8.193 8.193 1.414 1.414 8.193-8.193V19.8h2v-9.25z"/></svg>', Te = (n) => /^http(s?):\/\//.test(n), Ee = ["href", "target", "rel"], Ot = /* @__PURE__ */ h({
   __name: "OnyxLink",
   props: {
     href: {},
@@ -300,96 +307,96 @@ const w = /* @__PURE__ */ q(ue, [["render", de]]), pe = ["disabled"], _e = { cla
   },
   emits: ["click"],
   setup(n, { emit: t }) {
-    const e = n, a = t, o = g(() => e.withExternalIcon !== "auto" ? e.withExternalIcon : Ce(e.href));
-    return (s, i) => (l(), u("a", {
+    const e = n, a = t, l = b(() => e.withExternalIcon !== "auto" ? e.withExternalIcon : Te(e.href));
+    return (r, u) => (o(), i("a", {
       class: "onyx-link",
       href: e.href,
       target: e.target,
       rel: e.target === "_blank" ? "noreferrer" : void 0,
-      onClick: i[0] || (i[0] = (r) => a("click"))
+      onClick: u[0] || (u[0] = (s) => a("click"))
     }, [
-      $(s.$slots, "default"),
-      o.value ? (l(), k(M, {
+      $(r.$slots, "default"),
+      l.value ? (o(), x(U, {
         key: 0,
         class: "onyx-link__icon",
-        icon: f(Le),
+        icon: f(Ce),
         size: "16px"
-      }, null, 8, ["icon"])) : _("", !0)
-    ], 8, Te));
+      }, null, 8, ["icon"])) : y("", !0)
+    ], 8, Ee));
   }
-}), Bt = ["_self", "_blank", "_parent", "_top"], Ee = {}, Ie = {
+}), Bt = ["_self", "_blank", "_parent", "_top"], Ie = {}, Me = {
   class: "onyx-circle-spinner",
   viewBox: "0 0 50 50"
-}, Me = /* @__PURE__ */ p("circle", {
+}, qe = /* @__PURE__ */ p("circle", {
   class: "onyx-circle-spinner__circle",
   cx: "50%",
   cy: "50%",
   r: "45%"
-}, null, -1), qe = [
-  Me
+}, null, -1), Pe = [
+  qe
 ];
-function Pe(n, t) {
-  return l(), u("svg", Ie, qe);
+function Ue(n, t) {
+  return o(), i("svg", Me, Pe);
 }
-const Ue = /* @__PURE__ */ q(Ee, [["render", Pe]]), Ne = {}, Ae = { class: "onyx-loading-dots" }, ze = /* @__PURE__ */ p("span", { class: "onyx-loading-dots__center" }, null, -1), Re = [
-  ze
+const Ne = /* @__PURE__ */ N(Ie, [["render", Ue]]), Ae = {}, ze = { class: "onyx-loading-dots" }, Re = /* @__PURE__ */ p("span", { class: "onyx-loading-dots__center" }, null, -1), De = [
+  Re
 ];
-function De(n, t) {
-  return l(), u("div", Ae, Re);
+function Ge(n, t) {
+  return o(), i("div", ze, De);
 }
-const Ge = /* @__PURE__ */ q(Ne, [["render", De]]), wt = /* @__PURE__ */ h({
+const Ye = /* @__PURE__ */ N(Ae, [["render", Ge]]), St = /* @__PURE__ */ h({
   __name: "OnyxLoadingIndicator",
   props: {
     type: { default: "dots" }
   },
   setup(n) {
     const t = n;
-    return (e, a) => t.type === "circle" ? (l(), k(Ue, { key: 0 })) : t.type === "dots" ? (l(), k(Ge, { key: 1 })) : _("", !0);
+    return (e, a) => t.type === "circle" ? (o(), x(Ne, { key: 0 })) : t.type === "dots" ? (o(), x(Ye, { key: 1 })) : y("", !0);
   }
-}), Ye = {
+}), je = {
   key: 0,
   class: "onyx-page__sidebar"
-}, je = { class: "onyx-page__main" }, He = {
+}, He = { class: "onyx-page__main" }, Fe = {
   key: 1,
   class: "onyx-page__footer"
-}, Fe = {
+}, Ke = {
   key: 2,
   class: "onyx-page__toasts"
-}, St = /* @__PURE__ */ h({
+}, wt = /* @__PURE__ */ h({
   __name: "OnyxPageLayout",
   props: {
     footerAsideSidebar: { type: Boolean },
     hideSidebar: { type: Boolean }
   },
   setup(n) {
-    const t = n, e = D(), a = g(() => {
-      let o = "";
-      return !e.footer && e.sidebar && (o = "onyx-page--side-main"), e.footer && (!e.sidebar || t.hideSidebar) && (o = "onyx-page--main-footer"), e.footer && e.sidebar && (t.footerAsideSidebar ? o = "onyx-page--side-main-footer-partial" : o = "onyx-page--side-main-footer-full"), o;
+    const t = n, e = j(), a = b(() => {
+      let l = "";
+      return !e.footer && e.sidebar && (l = "onyx-page--side-main"), e.footer && (!e.sidebar || t.hideSidebar) && (l = "onyx-page--main-footer"), e.footer && e.sidebar && (t.footerAsideSidebar ? l = "onyx-page--side-main-footer-partial" : l = "onyx-page--side-main-footer-full"), l;
     });
-    return (o, s) => (l(), u("div", {
+    return (l, r) => (o(), i("div", {
       class: m(["onyx-page", a.value])
     }, [
-      f(e).sidebar && !t.hideSidebar ? (l(), u("aside", Ye, [
-        $(o.$slots, "sidebar")
-      ])) : _("", !0),
-      p("main", je, [
-        $(o.$slots, "default")
+      f(e).sidebar && !t.hideSidebar ? (o(), i("aside", je, [
+        $(l.$slots, "sidebar")
+      ])) : y("", !0),
+      p("main", He, [
+        $(l.$slots, "default")
       ]),
-      f(e).footer ? (l(), u("footer", He, [
-        $(o.$slots, "footer")
-      ])) : _("", !0),
-      f(e).toasts ? (l(), u("div", Fe, [
-        $(o.$slots, "toasts")
-      ])) : _("", !0)
+      f(e).footer ? (o(), i("footer", Fe, [
+        $(l.$slots, "footer")
+      ])) : y("", !0),
+      f(e).toasts ? (o(), i("div", Ke, [
+        $(l.$slots, "toasts")
+      ])) : y("", !0)
     ], 2));
   }
-}), Ke = /* @__PURE__ */ (() => {
+}), Xe = /* @__PURE__ */ (() => {
   let n = 0;
   return () => n++;
-})(), Xe = (n) => `${n}-${Ke()}`, Ze = {
+})(), Ze = (n) => `${n}-${Xe()}`, Je = {
   key: 0,
   class: "onyx-radio-button-skeleton"
-}, Je = ["title"], We = ["required", "name", "value", "checked", "disabled"], Qe = /* @__PURE__ */ h({
+}, We = ["title"], Qe = ["required", "name", "value", "checked", "disabled"], Y = /* @__PURE__ */ h({
   __name: "OnyxRadioButton",
   props: {
     id: {},
@@ -405,13 +412,13 @@ const Ge = /* @__PURE__ */ q(Ne, [["render", De]]), wt = /* @__PURE__ */ h({
   },
   setup(n) {
     const t = n, e = O();
-    return K(() => {
+    return X(() => {
       var a;
       return (a = e.value) == null ? void 0 : a.setCustomValidity(t.errorMessage ?? "");
-    }), (a, o) => t.skeleton ? (l(), u("div", Ze, [
-      B(w, { class: "onyx-radio-button-skeleton__input" }),
-      B(w, { class: "onyx-radio-button-skeleton__label" })
-    ])) : (l(), u("label", {
+    }), (a, l) => t.skeleton ? (o(), i("div", Je, [
+      B(S, { class: "onyx-radio-button-skeleton__input" }),
+      B(S, { class: "onyx-radio-button-skeleton__label" })
+    ])) : (o(), i("label", {
       key: 1,
       class: "onyx-radio-button",
       title: t.errorMessage
@@ -426,11 +433,11 @@ const Ge = /* @__PURE__ */ q(Ne, [["render", De]]), wt = /* @__PURE__ */ h({
         value: t.id,
         checked: t.selected,
         disabled: t.disabled
-      }, null, 8, We),
+      }, null, 8, Qe),
       p("span", {
         class: m(["onyx-radio-button__label", [`onyx-truncation-${t.truncation}`]])
-      }, b(t.label), 3)
-    ], 8, Je));
+      }, k(t.label), 3)
+    ], 8, We));
   }
 }), et = ["disabled"], tt = {
   key: 0,
@@ -438,64 +445,71 @@ const Ge = /* @__PURE__ */ q(Ne, [["render", De]]), wt = /* @__PURE__ */ h({
 }, Lt = /* @__PURE__ */ h({
   __name: "OnyxRadioButtonGroup",
   props: {
-    name: { default: () => Xe("radio-button-group-name") },
+    name: { default: () => Ze("radio-button-group-name") },
     modelValue: {},
     headline: { default: "" },
     required: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
     errorMessage: { default: "" },
     direction: { default: "vertical" },
-    options: {}
+    options: {},
+    skeleton: {}
   },
   emits: ["update:modelValue"],
   setup(n, { emit: t }) {
-    const e = n, a = t, o = (s) => a("update:modelValue", e.options.find(({ id: i }) => s.target.value === i));
-    return (s, i) => (l(), u("fieldset", {
+    const e = n, a = t, l = (r) => a("update:modelValue", e.options.find(({ id: u }) => r.target.value === u));
+    return (r, u) => (o(), i("fieldset", {
       class: "onyx-radio-button-group",
       disabled: e.disabled,
-      onChange: i[0] || (i[0] = (r) => o(r))
+      onChange: u[0] || (u[0] = (s) => l(s))
     }, [
-      e.headline ? (l(), u("legend", tt, [
-        B(W, {
+      e.headline ? (o(), i("legend", tt, [
+        B(Q, {
           is: "h3",
           class: m({
             "onyx-required-marker": e.required,
             "onyx-optional-marker": !e.required
           })
         }, {
-          default: I(() => [
-            Y(b(e.headline), 1)
+          default: P(() => [
+            F(k(e.headline), 1)
           ]),
           _: 1
         }, 8, ["class"])
-      ])) : _("", !0),
+      ])) : y("", !0),
       p("div", {
         class: m(["onyx-radio-button-group__content", { "onyx-radio-button-group__content--horizontal": e.direction === "horizontal" }])
       }, [
-        (l(!0), u(j, null, H(e.options, (r) => {
+        e.skeleton === void 0 ? (o(!0), i(L, { key: 0 }, T(e.options, (s) => {
           var d;
-          return l(), k(Qe, L({
-            key: r.id
-          }, r, {
+          return o(), x(Y, C({
+            key: s.id
+          }, s, {
             name: e.name,
             "error-message": e.errorMessage,
-            selected: r.id === ((d = e.modelValue) == null ? void 0 : d.id),
+            selected: s.id === ((d = e.modelValue) == null ? void 0 : d.id),
             required: e.required
           }), null, 16, ["name", "error-message", "selected", "required"]);
-        }), 128))
+        }), 128)) : (o(!0), i(L, { key: 1 }, T(e.skeleton, (s) => (o(), x(Y, {
+          id: `skeleton-${s}`,
+          key: s,
+          label: "Skeleton ${i}",
+          name: e.name,
+          skeleton: ""
+        }, null, 8, ["id", "name"]))), 128))
       ], 2)
     ], 40, et));
   }
-}), Q = (n, t) => {
-  const e = Object.entries(n).filter(([o, s]) => s !== void 0), a = Object.entries(t).filter(([o, s]) => s !== void 0);
-  return e.length !== a.length ? !1 : e.every(([o, s]) => s === t[o]);
-}, ee = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([n, t]) => t.enumerable).map(([n]) => n), te = (n) => ee().reduce(
+}), ee = (n, t) => {
+  const e = Object.entries(n).filter(([l, r]) => r !== void 0), a = Object.entries(t).filter(([l, r]) => r !== void 0);
+  return e.length !== a.length ? !1 : e.every(([l, r]) => r === t[l]);
+}, te = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([n, t]) => t.enumerable).map(([n]) => n), ne = (n) => te().reduce(
   (t, e) => (t[e] = n[e], t),
   {}
 ), nt = (n) => {
   if (n.valueMissing)
     return "valueMissing";
-  const t = ee().filter((e) => e !== "valid").sort();
+  const t = te().filter((e) => e !== "valid").sort();
   for (const e of t)
     if (e in n && n[e])
       return e;
@@ -517,61 +531,61 @@ const Ge = /* @__PURE__ */ q(Ne, [["render", De]]), wt = /* @__PURE__ */ h({
   emits: ["update:modelValue", "validityChange"],
   setup(n, { emit: t }) {
     var d;
-    const e = n, a = t, { errorMessage: o } = X(e), s = O(), i = O((d = s.value) == null ? void 0 : d.validity), r = g({
+    const e = n, a = t, { errorMessage: l } = Z(e), r = O(), u = O((d = r.value) == null ? void 0 : d.validity), s = b({
       get: () => e.modelValue,
       set: (c) => {
         a("update:modelValue", c);
       }
     });
-    return C([s, o], () => {
-      s.value && s.value.setCustomValidity(e.errorMessage || "");
-    }), C(
-      [s, r, o],
+    return E([r, l], () => {
+      r.value && r.value.setCustomValidity(e.errorMessage || "");
+    }), E(
+      [r, s, l],
       () => {
-        if (!s.value)
+        if (!r.value)
           return;
-        const c = te(s.value.validity);
-        (!i.value || !Q(c, i.value)) && (i.value = c, a("validityChange", i.value));
+        const c = ne(r.value.validity);
+        (!u.value || !ee(c, u.value)) && (u.value = c, a("validityChange", u.value));
       },
       { immediate: !0 }
-    ), (c, x) => e.skeleton ? (l(), u("div", lt, [
-      B(w, { class: "onyx-switch-skeleton__input" }),
-      e.hideLabel ? _("", !0) : (l(), k(w, {
+    ), (c, v) => e.skeleton ? (o(), i("div", lt, [
+      B(S, { class: "onyx-switch-skeleton__input" }),
+      e.hideLabel ? y("", !0) : (o(), x(S, {
         key: 0,
         class: "onyx-switch-skeleton__label"
       }))
-    ])) : (l(), u("label", {
+    ])) : (o(), i("label", {
       key: 1,
       class: m(["onyx-switch", { "onyx-required-marker": e.required, "onyx-optional-marker": !e.required }])
     }, [
-      T(p("input", {
+      I(p("input", {
         ref_key: "inputElement",
-        ref: s,
-        "onUpdate:modelValue": x[0] || (x[0] = (y) => r.value = y),
+        ref: r,
+        "onUpdate:modelValue": v[0] || (v[0] = (_) => s.value = _),
         class: "onyx-switch__input",
         type: "checkbox",
         "aria-label": e.hideLabel ? e.label : void 0,
         disabled: e.disabled,
         required: e.required
       }, null, 8, st), [
-        [G, r.value]
+        [H, s.value]
       ]),
       p("span", rt, [
         p("span", it, [
-          B(f(M), {
-            icon: r.value ? f(at) : f(ot),
+          B(f(U), {
+            icon: s.value ? f(at) : f(ot),
             size: "24px"
           }, null, 8, ["icon"])
         ])
       ]),
-      e.hideLabel ? _("", !0) : (l(), u("span", {
+      e.hideLabel ? y("", !0) : (o(), i("span", {
         key: 0,
         class: m(["onyx-switch__label", [`onyx-truncation-${e.truncation}`]])
-      }, b(e.label), 3))
+      }, k(e.label), 3))
     ], 2));
   }
 }), ut = Object.keys(
-  E.validations.typeMismatch
+  q.validations.typeMismatch
 ), ct = {
   key: 0,
   class: "onyx-test-input__error",
@@ -593,23 +607,23 @@ const Ge = /* @__PURE__ */ q(Ne, [["render", De]]), wt = /* @__PURE__ */ h({
   },
   emits: ["update:modelValue", "change", "validityChange"],
   setup(n, { emit: t }) {
-    var S;
-    const e = n, a = t, { t: o } = P(), { errorMessage: s } = X(e), i = O(!1), r = O(null), d = O((S = r.value) == null ? void 0 : S.validity), c = g({
+    var w;
+    const e = n, a = t, { t: l } = A(), { errorMessage: r } = Z(e), u = O(!1), s = O(null), d = O((w = s.value) == null ? void 0 : w.validity), c = b({
       get: () => e.modelValue,
-      set: (v) => a("update:modelValue", v)
-    }), x = g(() => {
+      set: (g) => a("update:modelValue", g)
+    }), v = b(() => {
       if (!d.value || d.value.valid)
         return "";
-      const v = nt(d.value);
-      if (e.errorMessage || v === "customError")
+      const g = nt(d.value);
+      if (e.errorMessage || g === "customError")
         return e.errorMessage;
-      if (!v)
+      if (!g)
         return "";
-      if (v === "typeMismatch") {
+      if (g === "typeMismatch") {
         const V = ut.includes(e.type) ? e.type : "generic";
-        return o.value(`validations.typeMismatch.${V}`, { value: c.value });
+        return l.value(`validations.typeMismatch.${V}`, { value: c.value });
       }
-      return o.value(`validations.${v}`, {
+      return l.value(`validations.${g}`, {
         value: c.value,
         n: c.value.toString().length,
         minLength: e.minLength,
@@ -618,40 +632,40 @@ const Ge = /* @__PURE__ */ q(Ne, [["render", De]]), wt = /* @__PURE__ */ h({
         max: e.max,
         step: e.step
       });
-    }), y = (v) => {
-      const V = v.target;
+    }), _ = (g) => {
+      const V = g.target;
       a("change", V.value);
     };
-    return C([r, s], () => {
-      r.value && r.value.setCustomValidity(e.errorMessage || "");
-    }), C(
-      [r, c, s],
+    return E([s, r], () => {
+      s.value && s.value.setCustomValidity(e.errorMessage || "");
+    }), E(
+      [s, c, r],
       () => {
-        if (!r.value)
+        if (!s.value)
           return;
-        const v = te(r.value.validity);
-        (!d.value || !Q(v, d.value)) && (d.value = v, a("validityChange", d.value));
+        const g = ne(s.value.validity);
+        (!d.value || !ee(g, d.value)) && (d.value = g, a("validityChange", d.value));
       },
       { immediate: !0 }
-    ), (v, V) => {
-      var U, N;
-      return l(), u("label", {
-        class: m(["onyx-test-input", { "onyx-test-input--touched": i.value }])
+    ), (g, V) => {
+      var z, R;
+      return o(), i("label", {
+        class: m(["onyx-test-input", { "onyx-test-input--touched": u.value }])
       }, [
         p("span", {
           class: m(["onyx-test-input__label", { "onyx-test-input__label--required": e.required }])
-        }, b(e.label), 3),
-        T(p("input", L(e, {
+        }, k(e.label), 3),
+        I(p("input", C(e, {
           ref_key: "inputElement",
-          ref: r,
-          "onUpdate:modelValue": V[0] || (V[0] = (A) => c.value = A),
-          onChange: y,
-          onBlur: V[1] || (V[1] = (A) => i.value = !0)
+          ref: s,
+          "onUpdate:modelValue": V[0] || (V[0] = (D) => c.value = D),
+          onChange: _,
+          onBlur: V[1] || (V[1] = (D) => u.value = !0)
         }), null, 16), [
-          [F, c.value]
+          [K, c.value]
         ]),
-        i.value && !((U = d.value) != null && U.valid) ? (l(), u("p", ct, b(x.value), 1)) : _("", !0),
-        p("p", dt, ' Model value: "' + b(c.value) + '", is valid: ' + b((N = d.value) == null ? void 0 : N.valid), 1)
+        u.value && !((z = d.value) != null && z.valid) ? (o(), i("p", ct, k(v.value), 1)) : y("", !0),
+        p("p", dt, ' Model value: "' + k(c.value) + '", is valid: ' + k((R = d.value) == null ? void 0 : R.valid), 1)
       ], 2);
     };
   }
@@ -665,9 +679,9 @@ const Ge = /* @__PURE__ */ q(Ne, [["render", De]]), wt = /* @__PURE__ */ h({
   "info"
 ], It = ["small", "default", "large"], Mt = ["ellipsis", "multiline"], qt = (n) => ({
   install: (t) => {
-    fe(t, n.i18n);
-    const e = t.runWithContext(() => P());
-    K(() => pt(e.t.value("optional")));
+    xe(t, n.i18n);
+    const e = t.runWithContext(() => A());
+    X(() => pt(e.t.value("optional")));
   }
 }), pt = (n) => globalThis.document.body.style.setProperty("--onyx-global-optional-text", n);
 export {
@@ -683,14 +697,14 @@ export {
   yt as OnyxAppLayout,
   mt as OnyxButton,
   vt as OnyxCheckboxGroup,
-  W as OnyxHeadline,
-  M as OnyxIcon,
+  Q as OnyxHeadline,
+  U as OnyxIcon,
   $t as OnyxInput,
   Ot as OnyxLink,
-  wt as OnyxLoadingIndicator,
-  St as OnyxPageLayout,
+  St as OnyxLoadingIndicator,
+  wt as OnyxPageLayout,
   Lt as OnyxRadioButtonGroup,
-  w as OnyxSkeleton,
+  S as OnyxSkeleton,
   Ct as OnyxSwitch,
   It as TEXT_SIZES,
   Mt as TRUNCATION_TYPES,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sit-onyx",
   "description": "A design system and Vue.js component library created by Schwarz IT",
-  "version": "1.0.0-alpha.34",
+  "version": "1.0.0-alpha.35",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",