sit-onyx 1.0.0-alpha.48 → 1.0.0-alpha.49

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

@@ -1,5 +1,6 @@
 import type { OnyxCheckboxProps } from "../OnyxCheckbox/types";
-export type OnyxCheckboxGroupProps<TValue extends string | number | boolean = string | number | boolean> = {
+import type { SelectionOptionValue } from "../OnyxRadioButton/types";
+export type OnyxCheckboxGroupProps<TValue extends SelectionOptionValue = SelectionOptionValue> = {
     /**
      * Checkbox options.
      */
@@ -35,7 +36,7 @@ export type OnyxCheckboxGroupProps<TValue extends string | number | boolean = st
      */
     skeleton?: number;
 };
-export type CheckboxGroupOption<T extends string | number | boolean> = Omit<OnyxCheckboxProps, "modelValue" | "indeterminate"> & {
+export type CheckboxGroupOption<T extends SelectionOptionValue> = Omit<OnyxCheckboxProps, "modelValue" | "indeterminate" | "hideLabel"> & {
     id: T;
 };
 export declare const CHECKBOX_GROUP_DIRECTIONS: readonly ["horizontal", "vertical"];

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

@@ -0,0 +1,22 @@
+import type { Meta } from "@storybook/vue3";
+import OnyxListbox from "./OnyxListbox.vue";
+/**
+ * The listbox is a fundamental element utilized across various components such as
+ * dropdowns, navigation bars, paginations, tables, etc.
+ * It provides the users with the ability to open a small modal window,
+ * facilitating single or multi-selection based on the context in which it is employed.
+ */
+declare const meta: Meta<typeof OnyxListbox>;
+export default meta;
+/**
+ * This examples shows a default single select listbox.
+ */
+export declare const Default: {
+    args: {
+        label: string;
+        options: {
+            id: number;
+            label: string;
+        }[];
+    };
+};

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

@@ -0,0 +1,44 @@
+import type { SelectionOptionValue } from "../OnyxRadioButton/types";
+declare const _default: <TValue extends SelectionOptionValue = SelectionOptionValue>(__VLS_props: {
+    label: string;
+    modelValue?: TValue | undefined;
+    hideLabel?: boolean | undefined;
+    "onUpdate:modelValue"?: ((value: TValue | undefined) => any) | undefined;
+    options: import("./types").ListboxOption<TValue>[];
+} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
+    attrs: any;
+    slots: {};
+    emit: (evt: "update:modelValue", value: TValue | undefined) => void;
+} | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
+    props: {
+        label: string;
+        modelValue?: TValue | undefined;
+        hideLabel?: boolean | undefined;
+        "onUpdate:modelValue"?: ((value: TValue | undefined) => any) | undefined;
+        options: import("./types").ListboxOption<TValue>[];
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "update:modelValue", value: TValue | undefined) => void;
+}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: {
+        props: {
+            label: string;
+            modelValue?: TValue | undefined;
+            hideLabel?: boolean | undefined;
+            "onUpdate:modelValue"?: ((value: TValue | undefined) => any) | undefined;
+            options: import("./types").ListboxOption<TValue>[];
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+        attrs: any;
+        slots: {};
+        emit: (evt: "update:modelValue", value: TValue | undefined) => void;
+    } | undefined;
+};
+export default _default;
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -0,0 +1,35 @@
+import type { SelectionOptionValue } from "../OnyxRadioButton/types";
+export type OnyxListboxProps<TValue extends SelectionOptionValue = SelectionOptionValue> = {
+    /**
+     * Available options to choose from.
+     */
+    options: ListboxOption<TValue>[];
+    /**
+     * Label to show at the bottom.
+     *  Required due to accessibility / screen readers. If you want to visually hide the label, use the hideLabel property.
+     */
+    label: string;
+    /**
+     * Current value / selected options.
+     */
+    modelValue?: TValue;
+    /**
+     * If true, the label will be visually hidden.
+     * For accessibility / screen readers, the aria-label will still be set.
+     */
+    hideLabel?: boolean;
+};
+export type ListboxOption<T extends SelectionOptionValue = SelectionOptionValue> = {
+    /**
+     * Option ID / value to use when the option is selected.
+     */
+    id: T;
+    /**
+     * Label to show.
+     */
+    label: string;
+    /**
+     * Whether the option is disabled.
+     */
+    disabled?: boolean;
+};

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

@@ -0,0 +1,27 @@
+import type { OnyxListboxOptionProps } from "./types";
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<OnyxListboxOptionProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<OnyxListboxOptionProps>>>, {}, {}>, Readonly<{
+    /**
+     * Default slot to place the option label / text content.
+     */
+    default(props: Record<string, never>): unknown;
+}> & {
+    /**
+     * Default slot to place the option label / text content.
+     */
+    default(props: Record<string, never>): unknown;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,6 @@
+export type OnyxListboxOptionProps = {
+    /**
+     * Whether the option is focused.
+     */
+    focused?: boolean;
+};

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

@@ -1,9 +1,10 @@
-declare const _default: <TValue>(__VLS_props: {
+import type { SelectionOptionValue } from "./types";
+declare const _default: <TValue extends SelectionOptionValue = SelectionOptionValue>(__VLS_props: {
     required?: boolean | undefined;
     label: string;
     selected?: boolean | undefined;
-    value?: TValue | undefined;
-    id: string;
+    value?: unknown;
+    id: TValue;
     disabled?: boolean | undefined;
     loading?: boolean | undefined;
     skeleton?: boolean | undefined;
@@ -20,8 +21,8 @@ declare const _default: <TValue>(__VLS_props: {
         required?: boolean | undefined;
         label: string;
         selected?: boolean | undefined;
-        value?: TValue | undefined;
-        id: string;
+        value?: unknown;
+        id: TValue;
         disabled?: boolean | undefined;
         loading?: boolean | undefined;
         skeleton?: boolean | undefined;
@@ -42,8 +43,8 @@ declare const _default: <TValue>(__VLS_props: {
             required?: boolean | undefined;
             label: string;
             selected?: boolean | undefined;
-            value?: TValue | undefined;
-            id: string;
+            value?: unknown;
+            id: TValue;
             disabled?: boolean | undefined;
             loading?: boolean | undefined;
             skeleton?: boolean | undefined;

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

@@ -1,19 +1,20 @@
 import type { DensityProp } from "../../composables/density";
 import type { TruncationType } from "../../types/fonts";
+export type SelectionOptionValue = string | number | boolean;
 /**
  * TODO: move to dedicated file
  */
-export type SelectionOption<T = unknown> = {
+export type SelectionOption<T extends SelectionOptionValue = SelectionOptionValue, TValue = unknown> = {
     /**
      * id of the selection option, not of the radio button input
      */
-    id: string;
+    id: T;
     label: string;
     /**
      * An optional value.
      * It's not actually used by the selection controls, but can be used to associate data with this option.
      */
-    value?: T;
+    value?: TValue;
     disabled?: boolean;
     /**
      * Shows a loading indicator.
@@ -28,16 +29,17 @@ export type SelectionOption<T = unknown> = {
      */
     skeleton?: boolean;
 };
-export type SelectionProps<T> = SelectionOption<T> & {
-    selected?: boolean;
-};
-export type RadioButtonProps<TValue> = SelectionProps<TValue> & DensityProp & {
+export type RadioButtonProps<TValue extends SelectionOptionValue = SelectionOptionValue> = SelectionOption<TValue> & DensityProp & {
     /**
      * Identifier for the radio buttons in the group.
      * All radio buttons that should belong to the same radio group must have the same name.
      * See also: https://html.spec.whatwg.org/multipage/input.html#radio-button-group
      */
     name: string;
+    /**
+     * Whether the radio button is selected.
+     */
+    selected?: boolean;
     /**
      * If any radio button of a group is required, a radio button of the group must be checked.
      * But it doesn't have to be this particular option.

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

@@ -1,5 +1,5 @@
-import type { SelectionOption } from "../OnyxRadioButton/types";
-declare const _default: <TValue>(__VLS_props: {
+import type { SelectionOption, SelectionOptionValue } from "../OnyxRadioButton/types";
+declare const _default: <TValue extends SelectionOptionValue>(__VLS_props: {
     required?: boolean | undefined;
     disabled?: boolean | undefined;
     skeleton?: number | undefined;

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

@@ -1,7 +1,7 @@
-import type { RequiredMarkerProp } from "../../composables/required";
 import type { DensityProp } from "../../composables/density";
-import type { SelectionOption } from "../OnyxRadioButton/types";
-export type OnyxRadioButtonGroupProps<TValue> = DensityProp & RequiredMarkerProp & {
+import type { RequiredMarkerProp } from "../../composables/required";
+import type { SelectionOption, SelectionOptionValue } from "../OnyxRadioButton/types";
+export type OnyxRadioButtonGroupProps<TValue extends SelectionOptionValue> = DensityProp & RequiredMarkerProp & {
     /**
      * Unique name for the radio button group form element.
      * Will automatically filled, when it is not given.

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -5,6 +5,8 @@ export * from './components/OnyxButton/types';
 export * from './components/OnyxCheckbox/types';
 export { default as OnyxCheckboxGroup } from './components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue';
 export * from './components/OnyxCheckboxGroup/types';
+export { default as OnyxListbox } from './components/OnyxListbox/OnyxListbox.vue';
+export * from './components/OnyxListbox/types';
 export { default as OnyxHeadline } from './components/OnyxHeadline/OnyxHeadline.vue';
 export * from './components/OnyxHeadline/types';
 export { default as OnyxIcon } from './components/OnyxIcon/OnyxIcon.vue';