sit-onyx 1.0.0-alpha.45 → 1.0.0-alpha.46

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

@@ -3,19 +3,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     disabled: boolean;
     type: string;
     variation: string;
-    size: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxIconButtonProps>, {
     disabled: boolean;
     type: string;
     variation: string;
-    size: string;
 }>>> & {
     onClick?: (() => any) | undefined;
 }, {
     type: "button" | "submit" | "reset";
-    size: "12px" | "16px" | "24px" | "32px" | "48px" | "64px" | "96px";
     disabled: boolean;
     variation: "primary" | "secondary" | "danger";
 }, {}>, Readonly<{

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

@@ -1,5 +1,4 @@
 import type { ButtonType, ButtonVariation } from "../OnyxButton/types";
-import type { IconSize } from "../OnyxIcon/types";
 export type OnyxIconButtonProps = {
     /**
      * The aria-label of the button.
@@ -26,9 +25,4 @@ export type OnyxIconButtonProps = {
      * The icon which will be displayed. The custom content in the `default` won't have an effect if the `icon` property is set.
      */
     icon?: string;
-    /**
-     * Icon size. Pixel values will be translated to the according `rem` value by the base of `16px`=`1rem`.
-     * @default 24px
-     */
-    size?: IconSize;
 };

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

@@ -15,7 +15,7 @@ export declare const Default: {
     };
 };
 /**
- * This example shows a input with a placeholder.
+ * This example shows an input with a placeholder.
  */
 export declare const Placeholder: {
     args: {
@@ -63,7 +63,7 @@ export declare const Loading: {
     };
 };
 /**
- * This example shows a input with a maxlength and counter.
+ * This example shows an input with a maxlength and counter.
  */
 export declare const Maxlength: {
     args: {
@@ -73,7 +73,7 @@ export declare const Maxlength: {
     };
 };
 /**
- * This example shows a input with a message / help text.
+ * This example shows an input with a message / help text.
  */
 export declare const WithMessage: {
     args: {
@@ -82,7 +82,7 @@ export declare const WithMessage: {
     };
 };
 /**
- * This example shows a input with autocomplete where the browser suggest to fill the input value.
+ * This example shows an input with autocomplete where the browser suggest to fill the input value.
  * Note: For this example you need to have set your name in your browser settings.
  */
 export declare const Autocomplete: {
@@ -91,3 +91,13 @@ export declare const Autocomplete: {
         autocomplete: "name";
     };
 };
+/**
+ * This example shows an input without a visual label.
+ * For accessibility / screen readers it must still be passed.
+ */
+export declare const HiddenLabel: {
+    args: {
+        label: string;
+        hideLabel: true;
+    };
+};

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

@@ -1,6 +1,7 @@
 export type OnyxInputProps = {
     /**
-     * Label to show above the input.
+     * Label to show above the input. Required due to accessibility / screen readers.
+     * If you want to visually hide the label, use the `hideLabel` property.
      */
     label: string;
     /**
@@ -81,6 +82,11 @@ export type OnyxInputProps = {
      * Message / help text to display below the input.
      */
     message?: string;
+    /**
+     * If `true`, the label will be visually hidden.
+     * For accessibility / screen readers, the aria-label will still be set.
+     */
+    hideLabel?: boolean;
 };
 export declare const INPUT_TYPES: readonly ["email", "password", "search", "tel", "text", "url"];
 export type InputType = (typeof INPUT_TYPES)[number];

package/dist/index.cjs

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

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent as v, useSlots as j, openBlock as o, createElementBlock as r, normalizeClass as h, unref as b, renderSlot as $, createCommentVNode as y, createElementVNode as p, createBlock as f, toDisplayString as g, inject as oe, computed as x, ref as B, createVNode as w, withDirectives as T, vModelCheckbox as H, withCtx as P, createTextVNode as F, Fragment as C, mergeProps as L, renderList as q, resolveDynamicComponent as le, vModelDynamic as K, watchEffect as X, toRefs as Z, watch as I } from "vue";
+import { defineComponent as v, useSlots as j, openBlock as o, createElementBlock as r, normalizeClass as h, unref as b, renderSlot as $, createCommentVNode as p, createElementVNode as y, createBlock as f, toDisplayString as g, inject as oe, computed as x, ref as V, createVNode as w, withDirectives as T, vModelCheckbox as H, withCtx as z, createTextVNode as F, Fragment as C, mergeProps as L, renderList as q, resolveDynamicComponent as le, vModelDynamic as K, watchEffect as X, toRefs as Z, watch as I } from "vue";
 const se = {
   key: 0,
   class: "onyx-app__nav"
@@ -20,16 +20,16 @@ const se = {
     }, [
       b(e).navBar ? (o(), r("nav", se, [
         $(a.$slots, "navBar")
-      ])) : y("", !0),
-      p("div", re, [
+      ])) : p("", !0),
+      y("div", re, [
         $(a.$slots, "default")
       ]),
       b(e).pageOverlay ? (o(), r("div", ie, [
         $(a.$slots, "pageOverlay")
-      ])) : y("", !0),
+      ])) : p("", !0),
       b(e).appOverlay ? (o(), r("div", ue, [
         $(a.$slots, "appOverlay")
-      ])) : y("", !0)
+      ])) : p("", !0)
     ], 2));
   }
 }), ce = ["innerHTML"], E = /* @__PURE__ */ v({
@@ -86,8 +86,8 @@ const S = /* @__PURE__ */ A(de, [["render", ye]]), _e = ["disabled"], me = { cla
         key: 0,
         icon: e.icon,
         size: "24px"
-      }, null, 8, ["icon"])) : y("", !0),
-      p("span", me, g(e.label), 1)
+      }, null, 8, ["icon"])) : p("", !0),
+      y("span", me, g(e.label), 1)
     ], 10, _e));
   }
 }), bt = ["button", "submit", "reset"], kt = ["primary", "secondary", "danger"], $t = ["default", "outline", "plain"], he = "(optional)", fe = {
@@ -106,13 +106,13 @@ const S = /* @__PURE__ */ A(de, [["render", ye]]), _e = ["disabled"], me = { cla
     tel: '"{value}" must be a valid phone number.',
     url: '"{value}" must a valid URL.'
   }
-}, xe = "Select all", z = {
+}, xe = "Select all", P = {
   optional: he,
   validations: fe,
   selectAll: xe
 }, J = Symbol(), W = (n) => {
-  const t = x(() => b(n == null ? void 0 : n.locale) ?? "en-US"), e = x(() => n != null && n.messages && t.value in n.messages ? n.messages[t.value] : z), a = x(() => (l, s = {}) => {
-    let c = G(l, e.value) ?? G(l, z) ?? "";
+  const t = x(() => b(n == null ? void 0 : n.locale) ?? "en-US"), e = x(() => n != null && n.messages && t.value in n.messages ? n.messages[t.value] : P), a = x(() => (l, s = {}) => {
+    let c = G(l, e.value) ?? G(l, P) ?? "";
     const u = typeof s.n == "number" ? s.n : void 0;
     return c = ge(c, u), be(c, s);
   });
@@ -146,10 +146,10 @@ const S = /* @__PURE__ */ A(de, [["render", ye]]), _e = ["disabled"], me = { cla
     const e = n, a = t, l = x({
       get: () => e.modelValue,
       set: (u) => a("update:modelValue", u)
-    }), s = B(!1), c = x(() => e.hideLabel ? "" : `onyx-${e.required ? "required" : "optional"}-marker`);
+    }), s = V(!1), c = x(() => e.hideLabel ? "" : `onyx-${e.required ? "required" : "optional"}-marker`);
     return (u, d) => e.skeleton ? (o(), r("div", ke, [
       w(S, { class: "onyx-checkbox-skeleton__input" }),
-      e.hideLabel ? y("", !0) : (o(), f(S, {
+      e.hideLabel ? p("", !0) : (o(), f(S, {
         key: 0,
         class: "onyx-checkbox-skeleton__label"
       }))
@@ -157,8 +157,8 @@ const S = /* @__PURE__ */ A(de, [["render", ye]]), _e = ["disabled"], me = { cla
       key: 1,
       class: h(["onyx-checkbox", [c.value]])
     }, [
-      p("div", $e, [
-        T(p("input", {
+      y("div", $e, [
+        T(y("input", {
           "onUpdate:modelValue": d[0] || (d[0] = (i) => l.value = i),
           "aria-label": e.hideLabel ? e.label : void 0,
           class: h(["onyx-checkbox__input", {
@@ -173,13 +173,13 @@ const S = /* @__PURE__ */ A(de, [["render", ye]]), _e = ["disabled"], me = { cla
           [H, l.value]
         ])
       ]),
-      e.hideLabel ? y("", !0) : (o(), r("p", {
+      e.hideLabel ? p("", !0) : (o(), r("p", {
         key: 0,
         class: h(["onyx-checkbox__label", [`onyx-truncation-${e.truncation}`]])
       }, g(e.label), 3))
     ], 2));
   }
-}), Ve = ["disabled"], Be = {
+}), Be = ["disabled"], Ve = {
   key: 0,
   class: "onyx-checkbox-group__label"
 }, Ot = /* @__PURE__ */ v({
@@ -210,22 +210,22 @@ const S = /* @__PURE__ */ A(de, [["render", ye]]), _e = ["disabled"], me = { cla
       class: "onyx-checkbox-group",
       disabled: e.disabled
     }, [
-      e.headline ? (o(), r("legend", Be, [
+      e.headline ? (o(), r("legend", Ve, [
         w(b(Q), { is: "h3" }, {
-          default: P(() => [
+          default: z(() => [
             F(g(e.headline), 1)
           ]),
           _: 1
         })
-      ])) : y("", !0),
-      p("div", {
+      ])) : p("", !0),
+      y("div", {
         class: h(["onyx-checkbox-group__content", { "onyx-checkbox-group__content--horizontal": e.direction === "horizontal" }])
       }, [
         e.skeleton === void 0 ? (o(), r(C, { key: 0 }, [
           e.withCheckAll ? (o(), f(M, L({ key: 0 }, d.value, {
             label: e.checkAllLabel || b(l)("selectAll"),
             "onUpdate:modelValue": u
-          }), null, 16, ["label"])) : y("", !0),
+          }), null, 16, ["label"])) : p("", !0),
           (o(!0), r(C, null, q(e.options, (_) => (o(), f(M, L({
             key: _.id.toString()
           }, _, {
@@ -238,9 +238,9 @@ const S = /* @__PURE__ */ A(de, [["render", ye]]), _e = ["disabled"], me = { cla
           skeleton: ""
         }, null, 8, ["label"]))), 128))
       ], 2)
-    ], 8, Ve));
+    ], 8, Be));
   }
-}), Vt = ["horizontal", "vertical"], Q = /* @__PURE__ */ v({
+}), Bt = ["horizontal", "vertical"], Q = /* @__PURE__ */ v({
   __name: "OnyxHeadline",
   props: {
     is: {},
@@ -255,16 +255,16 @@ const S = /* @__PURE__ */ A(de, [["render", ye]]), _e = ["disabled"], me = { cla
         t.monospace ? "onyx-headline--monospace" : ""
       ])
     }, {
-      default: P(() => [
+      default: z(() => [
         $(e.$slots, "default")
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), Bt = ["h1", "h2", "h3", "h4", "h5", "h6"], wt = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"], we = {}, Se = {
+}), Vt = ["h1", "h2", "h3", "h4", "h5", "h6"], wt = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"], we = {}, Se = {
   class: "onyx-circle-spinner",
   viewBox: "0 0 50 50"
-}, Ce = /* @__PURE__ */ p("circle", {
+}, Ce = /* @__PURE__ */ y("circle", {
   class: "onyx-circle-spinner__circle",
   cx: "50%",
   cy: "50%",
@@ -275,20 +275,20 @@ const S = /* @__PURE__ */ A(de, [["render", ye]]), _e = ["disabled"], me = { cla
 function qe(n, t) {
   return o(), r("svg", Se, Le);
 }
-const Ie = /* @__PURE__ */ A(we, [["render", qe]]), Te = {}, Ee = { class: "onyx-loading-dots" }, Me = /* @__PURE__ */ p("span", { class: "onyx-loading-dots__center" }, null, -1), ze = [
+const Ie = /* @__PURE__ */ A(we, [["render", qe]]), Te = {}, Ee = { class: "onyx-loading-dots" }, Me = /* @__PURE__ */ y("span", { class: "onyx-loading-dots__center" }, null, -1), Pe = [
   Me
 ];
-function Pe(n, t) {
-  return o(), r("div", Ee, ze);
+function ze(n, t) {
+  return o(), r("div", Ee, Pe);
 }
-const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
+const Ae = /* @__PURE__ */ A(Te, [["render", ze]]), ee = /* @__PURE__ */ v({
   __name: "OnyxLoadingIndicator",
   props: {
     type: { default: "dots" }
   },
   setup(n) {
     const t = n;
-    return (e, a) => t.type === "circle" ? (o(), f(Ie, { key: 0 })) : t.type === "dots" ? (o(), f(Ae, { key: 1 })) : y("", !0);
+    return (e, a) => t.type === "circle" ? (o(), f(Ie, { key: 0 })) : t.type === "dots" ? (o(), f(Ae, { key: 1 })) : p("", !0);
   }
 }), Ue = ["aria-label", "disabled"], St = /* @__PURE__ */ v({
   __name: "OnyxIconButton",
@@ -298,8 +298,7 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
     type: { default: "button" },
     variation: { default: "primary" },
     loading: { type: Boolean },
-    icon: {},
-    size: { default: "24px" }
+    icon: {}
   },
   emits: ["click"],
   setup(n, { emit: t }) {
@@ -318,12 +317,11 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
         type: "circle"
       })) : e.icon ? (o(), f(E, {
         key: 1,
-        icon: e.icon,
-        size: e.size
-      }, null, 8, ["icon", "size"])) : $(l.$slots, "default", { key: 2 })
+        icon: e.icon
+      }, null, 8, ["icon"])) : $(l.$slots, "default", { key: 2 })
     ], 10, Ue));
   }
-}), Ne = { class: "onyx-input" }, Re = { class: "onyx-truncation-ellipsis" }, De = { class: "onyx-input__wrapper" }, Ge = ["placeholder", "type", "required", "autocapitalize", "autocomplete", "autofocus", "name", "pattern", "readonly", "disabled", "minlength", "maxlength"], Ye = {
+}), Ne = { class: "onyx-input" }, Re = { class: "onyx-truncation-ellipsis" }, De = { class: "onyx-input__wrapper" }, Ge = ["placeholder", "type", "required", "autocapitalize", "autocomplete", "autofocus", "name", "pattern", "readonly", "disabled", "minlength", "maxlength", "aria-label"], Ye = {
   key: 0,
   class: "onyx-input__footer onyx-text--small"
 }, je = {
@@ -351,7 +349,8 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
     maxlength: {},
     minlength: {},
     withCounter: { type: Boolean },
-    message: {}
+    message: {},
+    hideLabel: { type: Boolean }
   },
   emits: ["update:modelValue", "change", "focus", "blur"],
   setup(n, { emit: t }) {
@@ -363,19 +362,20 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
       a("change", i);
     }, c = x(() => e.pattern instanceof RegExp ? e.pattern.source : e.pattern), u = x(() => e.withCounter && e.maxlength);
     return (d, i) => (o(), r("div", Ne, [
-      p("label", null, [
-        p("div", {
+      y("label", null, [
+        e.hideLabel ? p("", !0) : (o(), r("div", {
+          key: 0,
           class: h(["onyx-input__label onyx-text--small", { "onyx-required-marker": e.required, "onyx-optional-marker": !e.required }])
         }, [
-          p("div", Re, g(e.label), 1)
-        ], 2),
-        p("div", De, [
+          y("div", Re, g(e.label), 1)
+        ], 2)),
+        y("div", De, [
           e.loading ? (o(), f(b(ee), {
             key: 0,
             class: "onyx-input__loading",
             type: "circle"
-          })) : y("", !0),
-          T(p("input", {
+          })) : p("", !0),
+          T(y("input", {
             "onUpdate:modelValue": i[0] || (i[0] = (m) => l.value = m),
             class: "onyx-input__native",
             placeholder: e.placeholder,
@@ -390,6 +390,7 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
             disabled: e.disabled || e.loading,
             minlength: e.minlength,
             maxlength: e.maxlength,
+            "aria-label": e.hideLabel ? e.label : void 0,
             onChange: s,
             onFocus: i[1] || (i[1] = (m) => a("focus")),
             onBlur: i[2] || (i[2] = (m) => a("blur"))
@@ -399,9 +400,9 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
         ])
       ]),
       e.message || u.value ? (o(), r("div", Ye, [
-        e.message ? (o(), r("span", je, g(e.message), 1)) : y("", !0),
-        u.value ? (o(), r("span", He, g(l.value.length) + "/" + g(e.maxlength), 1)) : y("", !0)
-      ])) : y("", !0)
+        e.message ? (o(), r("span", je, g(e.message), 1)) : p("", !0),
+        u.value ? (o(), r("span", He, g(l.value.length) + "/" + g(e.maxlength), 1)) : p("", !0)
+      ])) : p("", !0)
     ]));
   }
 }), Lt = ["email", "password", "search", "tel", "text", "url"], qt = ["none", "sentences", "words", "characters"], Fe = '<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>', Ke = (n) => /^http(s?):\/\//.test(n), Xe = ["href", "target", "rel"], It = /* @__PURE__ */ v({
@@ -427,7 +428,7 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
         class: "onyx-link__icon",
         icon: b(Fe),
         size: "16px"
-      }, null, 8, ["icon"])) : y("", !0)
+      }, null, 8, ["icon"])) : p("", !0)
     ], 8, Xe));
   }
 }), Tt = ["_self", "_blank", "_parent", "_top"], Ze = {
@@ -455,16 +456,16 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
     }, [
       b(e).sidebar && !t.hideSidebar ? (o(), r("aside", Ze, [
         $(l.$slots, "sidebar")
-      ])) : y("", !0),
-      p("main", Je, [
+      ])) : p("", !0),
+      y("main", Je, [
         $(l.$slots, "default")
       ]),
       b(e).footer ? (o(), r("footer", We, [
         $(l.$slots, "footer")
-      ])) : y("", !0),
+      ])) : p("", !0),
       b(e).toasts ? (o(), r("div", Qe, [
         $(l.$slots, "toasts")
-      ])) : y("", !0)
+      ])) : p("", !0)
     ], 2));
   }
 }), et = /* @__PURE__ */ (() => {
@@ -488,7 +489,7 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
     errorMessage: {}
   },
   setup(n) {
-    const t = n, e = B();
+    const t = n, e = V();
     return X(() => {
       var a;
       return (a = e.value) == null ? void 0 : a.setCustomValidity(t.errorMessage ?? "");
@@ -500,7 +501,7 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
       class: "onyx-radio-button",
       title: t.errorMessage
     }, [
-      p("input", {
+      y("input", {
         ref_key: "selectorRef",
         ref: e,
         class: "onyx-radio-button__selector",
@@ -511,7 +512,7 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
         checked: t.selected,
         disabled: t.disabled
       }, null, 8, ot),
-      p("span", {
+      y("span", {
         class: h(["onyx-radio-button__label", [`onyx-truncation-${t.truncation}`]])
       }, g(t.label), 3)
     ], 8, at));
@@ -548,13 +549,13 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
             "onyx-optional-marker": !e.required
           })
         }, {
-          default: P(() => [
+          default: z(() => [
             F(g(e.headline), 1)
           ]),
           _: 1
         }, 8, ["class"])
-      ])) : y("", !0),
-      p("div", {
+      ])) : p("", !0),
+      y("div", {
         class: h(["onyx-radio-button-group__content", { "onyx-radio-button-group__content--horizontal": e.direction === "horizontal" }])
       }, [
         e.skeleton === void 0 ? (o(!0), r(C, { key: 0 }, q(e.options, (u) => {
@@ -593,7 +594,7 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
 }, it = '<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>', ut = '<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>', ct = {
   key: 0,
   class: "onyx-switch-skeleton"
-}, dt = ["aria-label", "disabled", "required"], pt = { class: "onyx-switch__container" }, yt = { class: "onyx-switch__icon" }, zt = /* @__PURE__ */ v({
+}, dt = ["aria-label", "disabled", "required"], pt = { class: "onyx-switch__container" }, yt = { class: "onyx-switch__icon" }, Pt = /* @__PURE__ */ v({
   __name: "OnyxSwitch",
   props: {
     modelValue: { type: Boolean, default: !1 },
@@ -608,7 +609,7 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
   emits: ["update:modelValue", "validityChange"],
   setup(n, { emit: t }) {
     var i;
-    const e = n, a = t, { errorMessage: l } = Z(e), s = B(), c = B((i = s.value) == null ? void 0 : i.validity), u = x({
+    const e = n, a = t, { errorMessage: l } = Z(e), s = V(), c = V((i = s.value) == null ? void 0 : i.validity), u = x({
       get: () => e.modelValue,
       set: (m) => {
         a("update:modelValue", m);
@@ -629,7 +630,7 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
     const d = x(() => e.hideLabel ? "" : `onyx-${e.required ? "required" : "optional"}-marker`);
     return (m, _) => e.skeleton ? (o(), r("div", ct, [
       w(S, { class: "onyx-switch-skeleton__input" }),
-      e.hideLabel ? y("", !0) : (o(), f(S, {
+      e.hideLabel ? p("", !0) : (o(), f(S, {
         key: 0,
         class: "onyx-switch-skeleton__label"
       }))
@@ -637,7 +638,7 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
       key: 1,
       class: h(["onyx-switch", [d.value]])
     }, [
-      T(p("input", {
+      T(y("input", {
         ref_key: "inputElement",
         ref: s,
         "onUpdate:modelValue": _[0] || (_[0] = (O) => u.value = O),
@@ -649,27 +650,27 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
       }, null, 8, dt), [
         [H, u.value]
       ]),
-      p("span", pt, [
-        p("span", yt, [
+      y("span", pt, [
+        y("span", yt, [
           w(b(E), {
             icon: u.value ? b(it) : b(ut),
             size: "24px"
           }, null, 8, ["icon"])
         ])
       ]),
-      e.hideLabel ? y("", !0) : (o(), r("span", {
+      e.hideLabel ? p("", !0) : (o(), r("span", {
         key: 0,
         class: h(["onyx-switch__label", [`onyx-truncation-${e.truncation}`]])
       }, g(e.label), 3))
     ], 2));
   }
 }), _t = Object.keys(
-  z.validations.typeMismatch
+  P.validations.typeMismatch
 ), mt = {
   key: 0,
   class: "onyx-test-input__error",
   "aria-live": "polite"
-}, ht = { class: "onyx-test-input__info" }, Pt = /* @__PURE__ */ v({
+}, ht = { class: "onyx-test-input__info" }, zt = /* @__PURE__ */ v({
   __name: "TestInput",
   props: {
     modelValue: { default: "" },
@@ -687,7 +688,7 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
   emits: ["update:modelValue", "change", "validityChange"],
   setup(n, { emit: t }) {
     var O;
-    const e = n, a = t, { t: l } = U(), { errorMessage: s } = Z(e), c = B(!1), u = B(null), d = B((O = u.value) == null ? void 0 : O.validity), i = x({
+    const e = n, a = t, { t: l } = U(), { errorMessage: s } = Z(e), c = V(!1), u = V(null), d = V((O = u.value) == null ? void 0 : O.validity), i = x({
       get: () => e.modelValue,
       set: (k) => a("update:modelValue", k)
     }), m = x(() => {
@@ -699,8 +700,8 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
       if (!k)
         return "";
       if (k === "typeMismatch") {
-        const V = _t.includes(e.type) ? e.type : "generic";
-        return l.value(`validations.typeMismatch.${V}`, { value: i.value });
+        const B = _t.includes(e.type) ? e.type : "generic";
+        return l.value(`validations.typeMismatch.${B}`, { value: i.value });
       }
       return l.value(`validations.${k}`, {
         value: i.value,
@@ -712,8 +713,8 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
         step: e.step
       });
     }), _ = (k) => {
-      const V = k.target;
-      a("change", V.value);
+      const B = k.target;
+      a("change", B.value);
     };
     return I([u, s], () => {
       u.value && u.value.setCustomValidity(e.errorMessage || "");
@@ -726,25 +727,25 @@ const Ae = /* @__PURE__ */ A(Te, [["render", Pe]]), ee = /* @__PURE__ */ v({
         (!d.value || !te(k, d.value)) && (d.value = k, a("validityChange", d.value));
       },
       { immediate: !0 }
-    ), (k, V) => {
+    ), (k, B) => {
       var N, R;
       return o(), r("label", {
         class: h(["onyx-test-input", { "onyx-test-input--touched": c.value }])
       }, [
-        p("span", {
+        y("span", {
           class: h(["onyx-test-input__label", { "onyx-test-input__label--required": e.required }])
         }, g(e.label), 3),
-        T(p("input", L(e, {
+        T(y("input", L(e, {
           ref_key: "inputElement",
           ref: u,
-          "onUpdate:modelValue": V[0] || (V[0] = (D) => i.value = D),
+          "onUpdate:modelValue": B[0] || (B[0] = (D) => i.value = D),
           onChange: _,
-          onBlur: V[1] || (V[1] = (D) => c.value = !0)
+          onBlur: B[1] || (B[1] = (D) => c.value = !0)
         }), null, 16), [
           [K, i.value]
         ]),
-        c.value && !((N = d.value) != null && N.valid) ? (o(), r("p", mt, g(m.value), 1)) : y("", !0),
-        p("p", ht, ' Model value: "' + g(i.value) + '", is valid: ' + g((R = d.value) == null ? void 0 : R.valid), 1)
+        c.value && !((N = d.value) != null && N.valid) ? (o(), r("p", mt, g(m.value), 1)) : p("", !0),
+        y("p", ht, ' Model value: "' + g(i.value) + '", is valid: ' + g((R = d.value) == null ? void 0 : R.valid), 1)
       ], 2);
     };
   }
@@ -768,8 +769,8 @@ export {
   $t as BUTTON_MODES,
   bt as BUTTON_TYPES,
   kt as BUTTON_VARIATIONS,
-  Vt as CHECKBOX_GROUP_DIRECTIONS,
-  Bt as HEADLINE_TYPES,
+  Bt as CHECKBOX_GROUP_DIRECTIONS,
+  Vt as HEADLINE_TYPES,
   wt as ICON_SIZES,
   Lt as INPUT_TYPES,
   Tt as LINK_TARGETS,
@@ -786,9 +787,9 @@ export {
   Et as OnyxPageLayout,
   Mt as OnyxRadioButtonGroup,
   S as OnyxSkeleton,
-  zt as OnyxSwitch,
+  Pt as OnyxSwitch,
   Ut as TEXT_SIZES,
   Nt as TRUNCATION_TYPES,
-  Pt as TestInput,
+  zt as TestInput,
   Rt as createOnyx
 };

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.45",
+  "version": "1.0.0-alpha.46",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",