sit-onyx 1.0.0-alpha.30 → 1.0.0-alpha.32

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

@@ -46,3 +46,21 @@ export declare const WithIcon: {
         icon: string;
     };
 };
+/**
+ * This example shows the button with truncation.
+ */
+export declare const WithTruncation: {
+    args: {
+        label: string;
+    };
+    decorators: import("@storybook/vue3").Decorator;
+};
+/**
+ * This example shows a skeleton button.
+ */
+export declare const Skeleton: {
+    args: {
+        skeleton: true;
+        label: string;
+    };
+};

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

@@ -5,6 +5,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     type: string;
     variation: string;
     mode: string;
+    skeleton: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxButtonProps>, {
@@ -13,6 +14,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     type: string;
     variation: string;
     mode: string;
+    skeleton: boolean;
 }>>> & {
     onClick?: (() => any) | undefined;
 }, {
@@ -21,6 +23,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     disabled: boolean;
     variation: "primary" | "secondary" | "danger";
     mode: "default" | "outline" | "plain";
+    skeleton: boolean;
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -23,6 +23,10 @@ export type OnyxButtonProps = {
      * An icon which will be displayed on the left side of the label.
      */
     icon?: string;
+    /**
+     * Whether to show a skeleton button.
+     */
+    skeleton?: boolean;
 };
 export declare const BUTTON_TYPES: readonly ["button", "submit", "reset"];
 export type ButtonType = (typeof BUTTON_TYPES)[number];

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

@@ -51,3 +51,21 @@ export declare const WithoutLabel: {
         label: string;
     };
 };
+/**
+ * A checkbox with truncation. You can set the "truncation" property to choose between the different truncation types.
+ */
+export declare const WithTruncation: {
+    args: {
+        label: string;
+    };
+    decorators: import("@storybook/vue3").Decorator[];
+};
+/**
+ * This example shows a skeleton checkbox.
+ */
+export declare const Skeleton: {
+    args: {
+        skeleton: true;
+        label: string;
+    };
+};

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

@@ -1,26 +1,29 @@
 import type { OnyxCheckboxProps } from "./types";
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxCheckboxProps>, {
     modelValue: boolean;
-    label: string;
     indeterminate: boolean;
     disabled: boolean;
     required: boolean;
+    truncation: string;
+    skeleton: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxCheckboxProps>, {
     modelValue: boolean;
-    label: string;
     indeterminate: boolean;
     disabled: boolean;
     required: boolean;
+    truncation: string;
+    skeleton: boolean;
 }>>> & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }, {
     required: boolean;
-    label: string;
     disabled: boolean;
+    skeleton: boolean;
     modelValue: boolean;
     indeterminate: boolean;
+    truncation: "ellipsis" | "multiline";
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -1,3 +1,4 @@
+import type { TruncationType } from "../../types/fonts";
 export type OnyxCheckboxProps = {
     /**
      * Whether the checkbox is checked.
@@ -25,4 +26,12 @@ export type OnyxCheckboxProps = {
      * For accessibility / screen readers, the aria-label will still be set.
      */
     hideLabel?: boolean;
+    /**
+     * How to truncate the label if it exceeds the max width.
+     */
+    truncation?: TruncationType;
+    /**
+     * Whether to show a skeleton button.
+     */
+    skeleton?: boolean;
 };

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

@@ -18,16 +18,25 @@ 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;
         })[];
     };
 };
@@ -44,16 +53,25 @@ 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;
         })[];
     };
 };
@@ -70,16 +88,25 @@ 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;
         })[];
     };
 };
@@ -96,16 +123,52 @@ 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;
+        })[];
+    };
+};
+/**
+ * A checkbox group with long labels that will be truncated.
+ * You can set the "truncation" property of the options to choose between the different truncation types.
+ */
+export declare const WithTruncation: {
+    args: {
+        options: ({
+            label: string;
+            id: string;
+            required?: undefined;
+            truncation?: undefined;
+        } | {
+            label: string;
+            id: string;
+            required: true;
+            truncation?: undefined;
+        } | {
+            label: string;
+            id: string;
+            truncation: "multiline";
+            required?: undefined;
         })[];
+        headline: string;
+        modelValue: string[];
     };
+    decorators: import("@storybook/vue3").Decorator[];
 };

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

@@ -18,7 +18,7 @@ export type OnyxCheckboxGroupProps<TValue extends string | number | boolean = st
     direction?: CheckboxGroupDirection;
     /**
      * If true, an additional checkbox will be displayed to check/uncheck all options.
-     * Disabled checkboxes will be excluded from the check/uncheck behavior.
+     * Disabled and skeleton checkboxes will be excluded from the check/uncheck behavior.
      */
     withCheckAll?: boolean;
     /**

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

@@ -16,3 +16,28 @@ export declare const Default: {
         value: string;
     };
 };
+/**
+ * This example shows a radio truncated radio button.
+ * You can set the "truncation" property to choose between the different truncation types.
+ */
+export declare const WithTruncation: {
+    args: {
+        label: string;
+        id: string;
+        name: string;
+        value: string;
+    };
+    decorators: import("@storybook/vue3").Decorator[];
+};
+/**
+ * This example shows a skeleton radio button.
+ */
+export declare const Skeleton: {
+    args: {
+        skeleton: true;
+        id: string;
+        label: string;
+        name: string;
+        value: string;
+    };
+};

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

@@ -5,6 +5,8 @@ declare const _default: <TValue>(__VLS_props: {
     value?: TValue | undefined;
     id: string;
     disabled?: boolean | undefined;
+    skeleton?: boolean | undefined;
+    truncation?: "ellipsis" | "multiline" | undefined;
     name: string;
     errorMessage?: string | undefined;
 } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
@@ -19,6 +21,8 @@ declare const _default: <TValue>(__VLS_props: {
         value?: TValue | undefined;
         id: string;
         disabled?: boolean | undefined;
+        skeleton?: boolean | undefined;
+        truncation?: "ellipsis" | "multiline" | undefined;
         name: string;
         errorMessage?: string | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
@@ -37,6 +41,8 @@ declare const _default: <TValue>(__VLS_props: {
             value?: TValue | undefined;
             id: string;
             disabled?: boolean | undefined;
+            skeleton?: boolean | undefined;
+            truncation?: "ellipsis" | "multiline" | undefined;
             name: string;
             errorMessage?: string | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
@@ -47,3 +53,6 @@ declare const _default: <TValue>(__VLS_props: {
     } | undefined;
 };
 export default _default;
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -1,3 +1,4 @@
+import type { TruncationType } from "../../types/fonts";
 /**
  * TODO: move to dedicated file
  */
@@ -13,6 +14,14 @@ export type SelectionOption<T = unknown> = {
      */
     value?: T;
     disabled?: boolean;
+    /**
+     * How to truncate the label if it exceeds the max width.
+     */
+    truncation?: TruncationType;
+    /**
+     * Whether to show a skeleton button.
+     */
+    skeleton?: boolean;
 };
 export type SelectionProps<T> = SelectionOption<T> & {
     selected?: boolean;

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

@@ -1,6 +1,6 @@
 import type { Meta } from "@storybook/vue3";
-import OnyxRadioButtonGroup from "./OnyxRadioButtonGroup.vue";
 import type { SelectionOption } from "../OnyxRadioButton/types";
+import OnyxRadioButtonGroup from "./OnyxRadioButtonGroup.vue";
 /**
  * Radio buttons in UI design are interactive elements that allow users to make a single selection from a set of mutually exclusive options.
  * Users can choose only one option at the time, making radio buttons ideal for scenarios where a single, distinct choice is required.
@@ -39,3 +39,23 @@ export declare const Horizontal: {
         direction: "horizontal";
     };
 };
+/**
+ * A radio group with long labels that will be truncated.
+ * You can set the "truncation" property of the options to choose between the different truncation types.
+ */
+export declare const WithTruncation: {
+    args: {
+        options: ({
+            label: string;
+            id: string;
+            truncation?: undefined;
+        } | {
+            label: string;
+            id: string;
+            truncation: "multiline";
+        })[];
+        headline: string;
+        modelValue: SelectionOption<string>;
+    };
+    decorators: import("@storybook/vue3").Decorator[];
+};

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

@@ -32,3 +32,21 @@ export declare const Invalid: {
         label: string;
     };
 };
+/**
+ * A switch with truncation. You can set the "truncation" property to choose between the different truncation types.
+ */
+export declare const WithTruncation: {
+    args: {
+        label: string;
+    };
+    decorators: import("@storybook/vue3").Decorator[];
+};
+/**
+ * This example shows a skeleton switch.
+ */
+export declare const Skeleton: {
+    args: {
+        skeleton: true;
+        label: string;
+    };
+};

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

@@ -3,6 +3,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     modelValue: boolean;
     disabled: boolean;
     required: boolean;
+    truncation: string;
+    skeleton: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => void;
     validityChange: (state: ValidityState) => void;
@@ -10,13 +12,17 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     modelValue: boolean;
     disabled: boolean;
     required: boolean;
+    truncation: string;
+    skeleton: boolean;
 }>>> & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onValidityChange?: ((state: ValidityState) => any) | undefined;
 }, {
     required: boolean;
     disabled: boolean;
+    skeleton: boolean;
     modelValue: boolean;
+    truncation: "ellipsis" | "multiline";
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -1,3 +1,4 @@
+import type { TruncationType } from "../../types/fonts";
 export type OnyxSwitchProps = {
     /**
      * Whether the switch should be checked or not.
@@ -24,4 +25,12 @@ export type OnyxSwitchProps = {
      * For accessibility / screen readers, the aria-label will still be set.
      */
     hideLabel?: boolean;
+    /**
+     * How to truncate the label if it exceeds the max width.
+     */
+    truncation?: TruncationType;
+    /**
+     * Whether to show a skeleton button.
+     */
+    skeleton?: boolean;
 };

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