sit-onyx 0.1.0-alpha.4 → 0.1.0-alpha.5

package/README.md

@@ -1,10 +1,12 @@
-<p>
-  <a href="https://gruppe.schwarz">
-  <div align="center">
-    <img src="../../.github/schwarz-group.svg" width="400px" />
-    </div>
-  </a>
-</p>
+<div align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-light.svg">
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg">
+    <img alt="onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg" width="160px">
+  </picture>
+</div>
+
+<br>
 
 # onyx
 

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

@@ -0,0 +1,24 @@
+import type { Meta } from "@storybook/vue3";
+import OnyxHeadline from "./OnyxHeadline.vue";
+/**
+ * Headline that can e.g. be used to structure the page content.
+ */
+declare const meta: Meta<typeof OnyxHeadline>;
+export default meta;
+/**
+ * This example shows a default h1 headline.
+ */
+export declare const Default: {
+    args: {
+        is: "h1";
+    };
+};
+/**
+ * This example shows a h1 headline with the monospace font family.
+ */
+export declare const Monospace: {
+    args: {
+        monospace: true;
+        is: "h1";
+    };
+};

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

@@ -0,0 +1,41 @@
+import type { OnyxHeadlineProps } from "./types";
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxHeadlineProps>, {
+    monospace: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxHeadlineProps>, {
+    monospace: boolean;
+}>>>, {
+    monospace: boolean;
+}, {}>, Readonly<{
+    /**
+     * Headline content.
+     */
+    default(): unknown;
+}> & {
+    /**
+     * Headline content.
+     */
+    default(): 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_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,11 @@
+export type OnyxHeadlineProps = {
+    /**
+     * Headline type. Please note that only h1-h4 are intended to be used from UX perspective.
+     * h5 and h6 will have the same styles as h4 and should only be used for semantic reasons.
+     */
+    is: HeadlineType;
+    /** If `true`, the monospace font family will be used instead of the default one. */
+    monospace?: boolean;
+};
+export declare const HEADLINE_TYPES: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
+export type HeadlineType = (typeof HEADLINE_TYPES)[number];

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

@@ -56,9 +56,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onChange?: ((value: string) => any) | undefined;
     onValidityChange?: ((state: ValidityState) => any) | undefined;
 }, {
+    type: "number" | "search" | "email" | "tel" | "url" | "password" | "text";
     modelValue: string | number;
     label: string;
-    type: "number" | "search" | "email" | "tel" | "url" | "password" | "text";
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),V={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.'}},v={validations:V},_=Symbol(),b=t=>{const n=r.computed(()=>r.unref(t==null?void 0:t.locale)??"en-US"),e=r.computed(()=>t!=null&&t.messages&&n.value in t.messages?t.messages[n.value]:v),a=r.computed(()=>(s,l={})=>{let m=y(s,e.value)??y(s,v)??"";const o=typeof l.n=="number"?l.n:void 0;return m=I(m,o),T(m,l)});return{locale:n,t:a}},E=t=>{r.provide(_,b(t))},P=()=>r.inject(_,()=>b(),!0),y=(t,n)=>{const e=t.split(".").reduce((a,s)=>!a||typeof a=="string"?a:a[s],n);return e&&typeof e=="string"?e:void 0},I=(t,n)=>{const e=t.split(" | ").map(s=>s.trim());if(e.length<=1)return t;let a=1;return n===0&&(a=0),n&&(n<=0||n>1)&&(a=2),e.length===2?a===1?e[0]:e[1]:e[a]},T=(t,n)=>n?Object.entries(n).reduce((a,[s,l])=>l===void 0?a:a.replace(new RegExp(`{${s}}`,"gi"),l.toString()),t).replace(/\s?{.*}\s?/gi,""):t,x=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([t,n])=>n.enumerable).map(([t])=>t),L=t=>x().reduce((n,e)=>(n[e]=t[e],n),{}),O=t=>{if(t.valueMissing)return"valueMissing";const n=x().filter(e=>e!=="valid").sort();for(const e of n)if(e in t&&t[e])return e},C=(t,n)=>{const e=Object.entries(t).filter(([s,l])=>l!==void 0),a=Object.entries(n).filter(([s,l])=>l!==void 0);return e.length!==a.length?!1:e.every(([s,l])=>l===n[s])},N={key:0,class:"onyx-input__error","aria-live":"polite"},q={class:"onyx-input__info"},w=Object.keys(v.validations.typeMismatch),D=r.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(t,{emit:n}){var p;const e=t,a=n,{t:s}=P(),{errorMessage:l}=r.toRefs(e),m=r.ref(!1),o=r.ref(null),u=r.ref((p=o.value)==null?void 0:p.validity),d=r.computed({get:()=>e.modelValue,set:i=>a("update:modelValue",i)}),M=r.computed(()=>{if(!u.value||u.value.valid)return"";const i=O(u.value);if(e.errorMessage||i==="customError")return e.errorMessage;if(!i)return"";if(i==="typeMismatch"){const c=w.includes(e.type)?e.type:"generic";return s.value(`validations.typeMismatch.${c}`,{value:d.value})}return s.value(`validations.${i}`,{value:d.value,n:d.value.toString().length,minLength:e.minLength,maxLength:e.maxLength,min:e.min,max:e.max,step:e.step})}),S=i=>{const c=i.target;a("change",c.value)};return r.watch([o,l],()=>{o.value&&o.value.setCustomValidity(e.errorMessage||"")}),r.watch([o,d,l],()=>{if(!o.value)return;const i=L(o.value.validity);(!u.value||!C(i,u.value))&&(u.value=i,a("validityChange",u.value))},{immediate:!0}),(i,c)=>{var g,h;return r.openBlock(),r.createElementBlock("label",{class:r.normalizeClass(["onyx-input",{"onyx-input--touched":m.value}])},[r.createElementVNode("span",{class:r.normalizeClass(["onyx-input__label",{"onyx-input__label--required":e.required}])},r.toDisplayString(e.label),3),r.withDirectives(r.createElementVNode("input",r.mergeProps(e,{ref_key:"inputElement",ref:o,"onUpdate:modelValue":c[0]||(c[0]=f=>d.value=f),onChange:S,onBlur:c[1]||(c[1]=f=>m.value=!0)}),null,16),[[r.vModelDynamic,d.value]]),m.value&&!((g=u.value)!=null&&g.valid)?(r.openBlock(),r.createElementBlock("p",N,r.toDisplayString(M.value),1)):r.createCommentVNode("",!0),r.createElementVNode("p",q,'Model value: "'+r.toDisplayString(d.value)+'", is valid: '+r.toDisplayString((h=u.value)==null?void 0:h.valid),1)],2)}}}),U=(t,n)=>{const e=t.__vccOpts||t;for(const[a,s]of n)e[a]=s;return e},j=U(D,[["__scopeId","data-v-6632dbdc"]]);exports.TestInput=j;exports.provideI18n=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),M=t.defineComponent({__name:"OnyxHeadline",props:{is:{},monospace:{type:Boolean,default:!1}},setup(n){const a=n;return(e,r)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(a.is),{class:t.normalizeClass(["onyx-headline",`onyx-headline--${a.is}`,a.monospace?"onyx-headline--monospace":""])},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},8,["class"]))}}),V=["h1","h2","h3","h4","h5","h6"],P={tooShort:"Please lengthen this text to {minLength} characters or more (you are currently using 1 character) | Please lengthen this text to {minLength} characters or more (you are currently using {n} characters)",tooLong:"Please shorten this text to {maxLength} characters or less (you are currently using 1 character) | Please shorten this text to {maxLength} characters or less (you are currently using {n} characters)",rangeUnderflow:"Value must be greater than or equal to {min}",rangeOverflow:"Value must be less than or equal to {max}",patternMismatch:"Please match the format requested.",valueMissing:"Please fill in this field.",stepMismatch:"Please enter a value that is a multiple of {step}.",badInput:'"{value}" does not match the expected type.',typeMismatch:{generic:'"{value}" does not match the expected type.',email:'"{value}" must be a valid email address.',number:'"{value}" must be a number.',tel:'"{value}" must be a valid phone number.',url:'"{value}" must a valid URL.'}},p={validations:P},_=Symbol(),x=n=>{const a=t.computed(()=>t.unref(n==null?void 0:n.locale)??"en-US"),e=t.computed(()=>n!=null&&n.messages&&a.value in n.messages?n.messages[a.value]:p),r=t.computed(()=>(s,l={})=>{let d=y(s,e.value)??y(s,p)??"";const i=typeof l.n=="number"?l.n:void 0;return d=L(d,i),O(d,l)});return{locale:a,t:r}},I=n=>{t.provide(_,x(n))},T=()=>t.inject(_,()=>x(),!0),y=(n,a)=>{const e=n.split(".").reduce((r,s)=>!r||typeof r=="string"?r:r[s],a);return e&&typeof e=="string"?e:void 0},L=(n,a)=>{const e=n.split(" | ").map(s=>s.trim());if(e.length<=1)return n;let r=1;return a===0&&(r=0),a&&(a<=0||a>1)&&(r=2),e.length===2?r===1?e[0]:e[1]:e[r]},O=(n,a)=>a?Object.entries(a).reduce((r,[s,l])=>l===void 0?r:r.replace(new RegExp(`{${s}}`,"gi"),l.toString()),n).replace(/\s?{.*}\s?/gi,""):n,b=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([n,a])=>a.enumerable).map(([n])=>n),C=n=>b().reduce((a,e)=>(a[e]=n[e],a),{}),D=n=>{if(n.valueMissing)return"valueMissing";const a=b().filter(e=>e!=="valid").sort();for(const e of a)if(e in n&&n[e])return e},N=(n,a)=>{const e=Object.entries(n).filter(([s,l])=>l!==void 0),r=Object.entries(a).filter(([s,l])=>l!==void 0);return e.length!==r.length?!1:e.every(([s,l])=>l===a[s])},w={key:0,class:"onyx-input__error","aria-live":"polite"},B={class:"onyx-input__info"},k=Object.keys(p.validations.typeMismatch),q=t.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:a}){var v;const e=n,r=a,{t:s}=T(),{errorMessage:l}=t.toRefs(e),d=t.ref(!1),i=t.ref(null),u=t.ref((v=i.value)==null?void 0:v.validity),m=t.computed({get:()=>e.modelValue,set:o=>r("update:modelValue",o)}),E=t.computed(()=>{if(!u.value||u.value.valid)return"";const o=D(u.value);if(e.errorMessage||o==="customError")return e.errorMessage;if(!o)return"";if(o==="typeMismatch"){const c=k.includes(e.type)?e.type:"generic";return s.value(`validations.typeMismatch.${c}`,{value:m.value})}return s.value(`validations.${o}`,{value:m.value,n:m.value.toString().length,minLength:e.minLength,maxLength:e.maxLength,min:e.min,max:e.max,step:e.step})}),S=o=>{const c=o.target;r("change",c.value)};return t.watch([i,l],()=>{i.value&&i.value.setCustomValidity(e.errorMessage||"")}),t.watch([i,m,l],()=>{if(!i.value)return;const o=C(i.value.validity);(!u.value||!N(o,u.value))&&(u.value=o,r("validityChange",u.value))},{immediate:!0}),(o,c)=>{var g,h;return t.openBlock(),t.createElementBlock("label",{class:t.normalizeClass(["onyx-input",{"onyx-input--touched":d.value}])},[t.createElementVNode("span",{class:t.normalizeClass(["onyx-input__label",{"onyx-input__label--required":e.required}])},t.toDisplayString(e.label),3),t.withDirectives(t.createElementVNode("input",t.mergeProps(e,{ref_key:"inputElement",ref:i,"onUpdate:modelValue":c[0]||(c[0]=f=>m.value=f),onChange:S,onBlur:c[1]||(c[1]=f=>d.value=!0)}),null,16),[[t.vModelDynamic,m.value]]),d.value&&!((g=u.value)!=null&&g.valid)?(t.openBlock(),t.createElementBlock("p",w,t.toDisplayString(E.value),1)):t.createCommentVNode("",!0),t.createElementVNode("p",B,'Model value: "'+t.toDisplayString(m.value)+'", is valid: '+t.toDisplayString((h=u.value)==null?void 0:h.valid),1)],2)}}}),U=(n,a)=>{const e=n.__vccOpts||n;for(const[r,s]of a)e[r]=s;return e},j=U(q,[["__scopeId","data-v-6632dbdc"]]);exports.HEADLINE_TYPES=V;exports.OnyxHeadline=M;exports.TestInput=j;exports.provideI18n=I;

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export { default as OnyxHeadline } from './components/OnyxHeadline/OnyxHeadline.vue';
+export * from './components/OnyxHeadline/types';
 export { default as TestInput } from './components/TestInput/TestInput.vue';
 export * from './types/i18n';
 export * from './types/utils';

package/dist/index.js

@@ -1,5 +1,26 @@
-import { provide as C, inject as U, computed as d, unref as q, defineComponent as w, toRefs as N, ref as p, watch as b, openBlock as M, createElementBlock as V, normalizeClass as E, createElementVNode as g, toDisplayString as v, withDirectives as j, mergeProps as D, vModelDynamic as k, createCommentVNode as z } from "vue";
-const B = {
+import { defineComponent as S, openBlock as g, createBlock as w, resolveDynamicComponent as N, normalizeClass as f, withCtx as U, renderSlot as q, provide as D, inject as $, computed as d, unref as j, toRefs as B, ref as v, watch as E, createElementBlock as V, createElementVNode as h, toDisplayString as p, withDirectives as k, mergeProps as z, vModelDynamic as R, createCommentVNode as A } from "vue";
+const ae = /* @__PURE__ */ S({
+  __name: "OnyxHeadline",
+  props: {
+    is: {},
+    monospace: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    const n = t;
+    return (e, a) => (g(), w(N(n.is), {
+      class: f([
+        "onyx-headline",
+        `onyx-headline--${n.is}`,
+        n.monospace ? "onyx-headline--monospace" : ""
+      ])
+    }, {
+      default: U(() => [
+        q(e.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), re = ["h1", "h2", "h3", "h4", "h5", "h6"], H = {
   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}",
@@ -15,46 +36,46 @@ const B = {
     tel: '"{value}" must be a valid phone number.',
     url: '"{value}" must a valid URL.'
   }
-}, h = {
-  validations: B
-}, L = Symbol(), S = (t) => {
-  const r = d(() => q(t == null ? void 0 : t.locale) ?? "en-US"), e = d(() => t != null && t.messages && r.value in t.messages ? t.messages[r.value] : h), a = d(() => (n, s = {}) => {
-    let c = P(n, e.value) ?? P(n, h) ?? "";
+}, y = {
+  validations: H
+}, L = Symbol(), O = (t) => {
+  const n = d(() => j(t == null ? void 0 : t.locale) ?? "en-US"), e = d(() => t != null && t.messages && n.value in t.messages ? t.messages[n.value] : y), a = d(() => (r, s = {}) => {
+    let c = P(r, e.value) ?? P(r, y) ?? "";
     const i = typeof s.n == "number" ? s.n : void 0;
-    return c = $(c, i), A(c, s);
+    return c = F(c, i), J(c, s);
   });
-  return { locale: r, t: a };
-}, Z = (t) => {
-  C(L, S(t));
-}, R = () => U(L, () => S(), !0), P = (t, r) => {
-  const e = t.split(".").reduce((a, n) => !a || typeof a == "string" ? a : a[n], r);
+  return { locale: n, t: a };
+}, se = (t) => {
+  D(L, O(t));
+}, Y = () => $(L, () => O(), !0), P = (t, n) => {
+  const e = t.split(".").reduce((a, r) => !a || typeof a == "string" ? a : a[r], n);
   return e && typeof e == "string" ? e : void 0;
-}, $ = (t, r) => {
-  const e = t.split(" | ").map((n) => n.trim());
+}, F = (t, n) => {
+  const e = t.split(" | ").map((r) => r.trim());
   if (e.length <= 1)
     return t;
   let a = 1;
-  return r === 0 && (a = 0), r && (r <= 0 || r > 1) && (a = 2), e.length === 2 ? a === 1 ? e[0] : e[1] : e[a];
-}, A = (t, r) => r ? Object.entries(r).reduce((a, [n, s]) => s === void 0 ? a : a.replace(new RegExp(`{${n}}`, "gi"), s.toString()), t).replace(/\s?{.*}\s?/gi, "") : t, I = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([t, r]) => r.enumerable).map(([t]) => t), F = (t) => I().reduce(
-  (r, e) => (r[e] = t[e], r),
+  return n === 0 && (a = 0), n && (n <= 0 || n > 1) && (a = 2), e.length === 2 ? a === 1 ? e[0] : e[1] : e[a];
+}, J = (t, n) => n ? Object.entries(n).reduce((a, [r, s]) => s === void 0 ? a : a.replace(new RegExp(`{${r}}`, "gi"), s.toString()), t).replace(/\s?{.*}\s?/gi, "") : t, I = () => Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([t, n]) => n.enumerable).map(([t]) => t), K = (t) => I().reduce(
+  (n, e) => (n[e] = t[e], n),
   {}
-), Y = (t) => {
+), G = (t) => {
   if (t.valueMissing)
     return "valueMissing";
-  const r = I().filter((e) => e !== "valid").sort();
-  for (const e of r)
+  const n = I().filter((e) => e !== "valid").sort();
+  for (const e of n)
     if (e in t && t[e])
       return e;
-}, J = (t, r) => {
-  const e = Object.entries(t).filter(([n, s]) => s !== void 0), a = Object.entries(r).filter(([n, s]) => s !== void 0);
-  return e.length !== a.length ? !1 : e.every(([n, s]) => s === r[n]);
-}, K = {
+}, Q = (t, n) => {
+  const e = Object.entries(t).filter(([r, s]) => s !== void 0), a = Object.entries(n).filter(([r, s]) => s !== void 0);
+  return e.length !== a.length ? !1 : e.every(([r, s]) => s === n[r]);
+}, W = {
   key: 0,
   class: "onyx-input__error",
   "aria-live": "polite"
-}, G = { class: "onyx-input__info" }, H = Object.keys(
-  h.validations.typeMismatch
-), Q = /* @__PURE__ */ w({
+}, X = { class: "onyx-input__info" }, Z = Object.keys(
+  y.validations.typeMismatch
+), ee = /* @__PURE__ */ S({
   __name: "TestInput",
   props: {
     modelValue: { default: "" },
@@ -70,24 +91,24 @@ const B = {
     minLength: {}
   },
   emits: ["update:modelValue", "change", "validityChange"],
-  setup(t, { emit: r }) {
-    var f;
-    const e = t, a = r, { t: n } = R(), { errorMessage: s } = N(e), c = p(!1), i = p(null), u = p((f = i.value) == null ? void 0 : f.validity), m = d({
+  setup(t, { emit: n }) {
+    var _;
+    const e = t, a = n, { t: r } = Y(), { errorMessage: s } = B(e), c = v(!1), i = v(null), o = v((_ = i.value) == null ? void 0 : _.validity), m = d({
       get: () => e.modelValue,
       set: (l) => a("update:modelValue", l)
-    }), O = d(() => {
-      if (!u.value || u.value.valid)
+    }), T = d(() => {
+      if (!o.value || o.value.valid)
         return "";
-      const l = Y(u.value);
+      const l = G(o.value);
       if (e.errorMessage || l === "customError")
         return e.errorMessage;
       if (!l)
         return "";
       if (l === "typeMismatch") {
-        const o = H.includes(e.type) ? e.type : "generic";
-        return n.value(`validations.typeMismatch.${o}`, { value: m.value });
+        const u = Z.includes(e.type) ? e.type : "generic";
+        return r.value(`validations.typeMismatch.${u}`, { value: m.value });
       }
-      return n.value(`validations.${l}`, {
+      return r.value(`validations.${l}`, {
         value: m.value,
         n: m.value.toString().length,
         minLength: e.minLength,
@@ -96,50 +117,52 @@ const B = {
         max: e.max,
         step: e.step
       });
-    }), T = (l) => {
-      const o = l.target;
-      a("change", o.value);
+    }), C = (l) => {
+      const u = l.target;
+      a("change", u.value);
     };
-    return b([i, s], () => {
+    return E([i, s], () => {
       i.value && i.value.setCustomValidity(e.errorMessage || "");
-    }), b(
+    }), E(
       [i, m, s],
       () => {
         if (!i.value)
           return;
-        const l = F(i.value.validity);
-        (!u.value || !J(l, u.value)) && (u.value = l, a("validityChange", u.value));
+        const l = K(i.value.validity);
+        (!o.value || !Q(l, o.value)) && (o.value = l, a("validityChange", o.value));
       },
       { immediate: !0 }
-    ), (l, o) => {
-      var y, _;
-      return M(), V("label", {
-        class: E(["onyx-input", { "onyx-input--touched": c.value }])
+    ), (l, u) => {
+      var x, b;
+      return g(), V("label", {
+        class: f(["onyx-input", { "onyx-input--touched": c.value }])
       }, [
-        g("span", {
-          class: E(["onyx-input__label", { "onyx-input__label--required": e.required }])
-        }, v(e.label), 3),
-        j(g("input", D(e, {
+        h("span", {
+          class: f(["onyx-input__label", { "onyx-input__label--required": e.required }])
+        }, p(e.label), 3),
+        k(h("input", z(e, {
           ref_key: "inputElement",
           ref: i,
-          "onUpdate:modelValue": o[0] || (o[0] = (x) => m.value = x),
-          onChange: T,
-          onBlur: o[1] || (o[1] = (x) => c.value = !0)
+          "onUpdate:modelValue": u[0] || (u[0] = (M) => m.value = M),
+          onChange: C,
+          onBlur: u[1] || (u[1] = (M) => c.value = !0)
         }), null, 16), [
-          [k, m.value]
+          [R, m.value]
         ]),
-        c.value && !((y = u.value) != null && y.valid) ? (M(), V("p", K, v(O.value), 1)) : z("", !0),
-        g("p", G, 'Model value: "' + v(m.value) + '", is valid: ' + v((_ = u.value) == null ? void 0 : _.valid), 1)
+        c.value && !((x = o.value) != null && x.valid) ? (g(), V("p", W, p(T.value), 1)) : A("", !0),
+        h("p", X, 'Model value: "' + p(m.value) + '", is valid: ' + p((b = o.value) == null ? void 0 : b.valid), 1)
       ], 2);
     };
   }
-}), W = (t, r) => {
+}), te = (t, n) => {
   const e = t.__vccOpts || t;
-  for (const [a, n] of r)
-    e[a] = n;
+  for (const [a, r] of n)
+    e[a] = r;
   return e;
-}, ee = /* @__PURE__ */ W(Q, [["__scopeId", "data-v-6632dbdc"]]);
+}, le = /* @__PURE__ */ te(ee, [["__scopeId", "data-v-6632dbdc"]]);
 export {
-  ee as TestInput,
-  Z as provideI18n
+  re as HEADLINE_TYPES,
+  ae as OnyxHeadline,
+  le as TestInput,
+  se as provideI18n
 };