@codeandfunction/callaloo 3.15.3 → 3.16.0

package/dist/components/Form/CLCheckbox/CLCheckbox.js

@@ -0,0 +1,147 @@
+import './CLCheckbox.css';
+import { defineComponent as T, mergeModels as B, useTemplateRef as z, useModel as S, computed as y, createBlock as r, openBlock as f, withCtx as $, createElementVNode as s, createCommentVNode as C, normalizeClass as i, unref as n, withDirectives as M, vModelCheckbox as V, createVNode as q, createTextVNode as F, toDisplayString as N } from "vue";
+import { _ as I, c as R, a as D } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-xm2qDJGJ.js";
+import { _ as X } from "../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-zZ4zGuBt.js";
+import { _ as w } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-CTc6UiQV.js";
+import { CLSizes as o, CLIconSizes as u, CLTextTypes as c, CLIconNames as E, CLColorVariants as H, CLColors as O } from "../../../index.js";
+const U = ["data-testid"], j = ["for", "disabled"], A = ["id", "aria-label", "disabled", "form", "name", "required", "value"], Y = /* @__PURE__ */ T({
+  name: "CLCheckbox",
+  __name: "CLCheckbox",
+  props: /* @__PURE__ */ B({
+    ariaLabel: { default: void 0 },
+    borderRadius: { default: void 0 },
+    busy: { type: Boolean, default: !1 },
+    color: { default: O.Neutral },
+    disabled: { type: Boolean, default: !1 },
+    form: { default: void 0 },
+    id: {},
+    label: { default: void 0 },
+    messages: { default: () => [] },
+    messageType: { default: void 0 },
+    name: {},
+    onBlur: { type: Function, default: void 0 },
+    onChange: { type: Function, default: void 0 },
+    onFocus: { type: Function, default: void 0 },
+    required: { type: Boolean, default: !1 },
+    rounded: { type: Boolean, default: !0 },
+    size: { default: o.Small },
+    testId: { default: "clll-checkbox" },
+    value: { type: [String, Number, Boolean], default: void 0 },
+    variant: { default: H.Outline }
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e, { expose: x }) {
+    const v = {
+      [o.Tiny]: u.Tiny,
+      [o.Small]: u.Tiny,
+      [o.Medium]: u.Small,
+      [o.Large]: u.Medium,
+      [o.XL]: u.Medium
+    }, k = {
+      [o.Tiny]: c.Small,
+      [o.Small]: c.Medium,
+      [o.Medium]: c.Medium,
+      [o.Large]: c.Large,
+      [o.XL]: c.XL
+    }, l = e, m = z("checkbox-ref"), b = S(e, "modelValue"), a = "clll-checkbox", h = y(() => [
+      a,
+      l.borderRadius ? `${a}--${l.borderRadius}` : "",
+      l.busy ? `${a}--busy` : `${a}--ready`,
+      l.disabled ? `${a}--disabled` : `${a}--active`,
+      l.label ? `${a}--haslabel` : "",
+      `${a}--${l.color}`,
+      `${a}--${l.size}`,
+      l.messageType ? `${a}--${l.messageType}` : "",
+      l.rounded ? `${a}--rounded` : `${a}--box`,
+      l.required ? `${a}--required` : `${a}--optional`
+    ]), g = y(() => [
+      `${a}__checkbox-container`,
+      `${a}--${l.variant}`
+    ]), L = () => {
+      m.value && m.value.focus();
+    };
+    return x({
+      checkboxRef: m
+    }), (G, d) => (f(), r(I, null, {
+      default: $(() => [
+        s("span", {
+          class: i([
+            n(h),
+            n(R)({ color: e.color, component: "checkbox", disabled: e.disabled || e.busy, variant: e.variant })
+          ]),
+          "data-testid": e.testId
+        }, [
+          s("span", {
+            class: i(n(g)),
+            onClick: L
+          }, [
+            s("label", {
+              for: e.id,
+              class: i(`${a}__label`),
+              disabled: e.disabled
+            }, [
+              s("span", {
+                class: i([`${a}__checkbox-frame`, "form-control-flex"])
+              }, [
+                M(s("input", {
+                  id: e.id,
+                  ref: "checkbox-ref",
+                  "onUpdate:modelValue": d[0] || (d[0] = (t) => b.value = t),
+                  "aria-label": e.ariaLabel,
+                  class: i(`${a}__checkbox`),
+                  disabled: e.disabled || e.busy,
+                  form: e.form,
+                  name: e.name,
+                  required: e.required,
+                  type: "checkbox",
+                  value: e.value,
+                  onBlur: d[1] || (d[1] = //@ts-ignore
+                  (...t) => e.onBlur && e.onBlur(...t)),
+                  onChange: d[2] || (d[2] = //@ts-ignore
+                  (...t) => e.onChange && e.onChange(...t)),
+                  onFocus: d[3] || (d[3] = //@ts-ignore
+                  (...t) => e.onFocus && e.onFocus(...t))
+                }, null, 42, A), [
+                  [V, b.value]
+                ]),
+                s("span", {
+                  class: i(`${a}__icon`)
+                }, [
+                  q(n(X), {
+                    name: n(E).Check,
+                    size: v[e.size]
+                  }, null, 8, ["name", "size"])
+                ], 2)
+              ], 2),
+              e.label ? (f(), r(n(w), {
+                key: 0,
+                as: "span",
+                type: k[e.size],
+                class: i(e.required ? `${a}__label--required` : "")
+              }, {
+                default: $(() => [
+                  F(N(e.label), 1)
+                ]),
+                _: 1
+              }, 8, ["type", "class"])) : C("", !0)
+            ], 10, j)
+          ], 2)
+        ], 10, U),
+        e.id ? (f(), r(D, {
+          key: 0,
+          id: e.id,
+          messages: e.messages,
+          "message-type": e.messageType
+        }, null, 8, ["id", "messages", "message-type"])) : C("", !0)
+      ]),
+      _: 1
+    }));
+  }
+});
+export {
+  Y as CLCheckbox,
+  Y as default
+};

package/dist/components/Form/CLCheckbox/CLCheckbox.vue.d.ts

@@ -1,4 +1,4 @@
-import { CLBorderRadius, CLColors, CLColorVariants, CLGenericFunction, CLGenericFocusFunction, CLSizes } from '../../../index.ts';
+import { CLBorderRadius, CLColors, CLColorVariants, CLGenericFunction, CLGenericFocusFunction, CLSizes } from '../../../types';
 export interface CLCheckboxProps {
     /** Sets the aria-label on the input. It should be used when there is no label present. */
     ariaLabel?: string;
@@ -57,16 +57,16 @@ declare const _default: import('vue').DefineComponent<{
     label: string;
     variant: CLColorVariants.Outline | CLColorVariants.Ghost;
     borderRadius: CLBorderRadius;
+    rounded: boolean;
     testId: string;
-    required: boolean;
     onFocus: CLGenericFocusFunction;
     onBlur: CLGenericFocusFunction;
     onChange: CLGenericFunction;
+    size: CLSizes;
+    required: boolean;
     ariaLabel: string;
     busy: boolean;
-    rounded: boolean;
     disabled: boolean;
-    size: CLSizes;
     value: string | number | boolean;
     messages: string[];
     messageType: CLColors;

package/dist/components/Form/CLFormLabel/CLFormLabel.vue.d.ts

@@ -15,8 +15,8 @@ export interface CLFormLabelProps {
 }
 declare const _default: import('vue').DefineComponent<CLFormLabelProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLFormLabelProps> & Readonly<{}>, {
     testId: string;
-    required: boolean;
     size: CLSizes;
+    required: boolean;
     cssPrefix: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLabelElement>;
 export default _default;

package/dist/components/Form/CLInput/CLInput.css

@@ -0,0 +1 @@
+.clll-input__input-prefix--string{font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased}.clll-input__input-suffix--string{font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased}.clll-input__selected-color-tools{display:flex}.clll-input__selected-color-tools>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-0_5)}.clll-input__selected-color-tools .clll-button{flex:none}:root{--clll-unit-0: 0;--clll-unit-0_5: .125rem;--clll-unit-1: .25rem;--clll-unit-1_5: .375rem;--clll-unit-2: .5rem;--clll-unit-2_5: .625rem;--clll-unit-3: .75rem;--clll-unit-3_5: .875rem;--clll-unit-4: 1rem;--clll-unit-4_5: 1.125rem;--clll-unit-5: 1.25rem;--clll-unit-5_5: 1.375rem;--clll-unit-6: 1.5rem;--clll-unit-6_5: 1.625rem;--clll-unit-7: 1.75rem;--clll-unit-7_5: 1.875rem;--clll-unit-8: 2rem;--clll-unit-8_5: 2.125rem;--clll-unit-9_5: 2.375rem;--clll-unit-10: 2.5rem;--clll-unit-10_5: 2.625rem;--clll-unit-12: 3rem;--clll-unit-14: 3.5rem;--clll-unit-14_5: 3.625rem;--clll-unit-18: 4.5rem}.form-addon-flex{display:flex;align-items:center;justify-content:center;pointer-events:none;user-select:none}.form-addon-flex--left{left:0}.form-addon-flex--right{right:0}.form-addon-flex--icon{z-index:10;box-sizing:border-box}.form-addon-flex--string{position:relative}.form-addon-radius--left-full{border-top-left-radius:var(--clll-rounded-full);border-bottom-left-radius:var(--clll-rounded-full)}.form-addon-radius--right-full{border-top-right-radius:var(--clll-rounded-full);border-bottom-right-radius:var(--clll-rounded-full)}.form-addon-radius--left-lg{border-top-left-radius:var(--clll-rounded-lg);border-bottom-left-radius:var(--clll-rounded-lg)}.form-addon-radius--right-lg{border-top-right-radius:var(--clll-rounded-lg);border-bottom-right-radius:var(--clll-rounded-lg)}.form-addon-radius--left-md{border-top-left-radius:var(--clll-rounded-md);border-bottom-left-radius:var(--clll-rounded-md)}.form-addon-radius--right-md{border-top-right-radius:var(--clll-rounded-md);border-bottom-right-radius:var(--clll-rounded-md)}.form-addon-radius--left-sm{border-top-left-radius:var(--clll-rounded-sm);border-bottom-left-radius:var(--clll-rounded-sm)}.form-addon-radius--right-sm{border-top-right-radius:var(--clll-rounded-sm);border-bottom-right-radius:var(--clll-rounded-sm)}.form-addon-radius--left-xs{border-top-left-radius:var(--clll-rounded-xs);border-bottom-left-radius:var(--clll-rounded-xs)}.form-addon-radius--right-xs{border-top-right-radius:var(--clll-rounded-xs);border-bottom-right-radius:var(--clll-rounded-xs)}.form-addon-radius--left-xl{border-top-left-radius:var(--clll-rounded-xl);border-bottom-left-radius:var(--clll-rounded-xl)}.form-addon-radius--right-xl{border-top-right-radius:var(--clll-rounded-xl);border-bottom-right-radius:var(--clll-rounded-xl)}.form-addon-radius--left-2xl{border-top-left-radius:var(--clll-rounded-2xl);border-bottom-left-radius:var(--clll-rounded-2xl)}.form-addon-radius--right-2xl{border-top-right-radius:var(--clll-rounded-2xl);border-bottom-right-radius:var(--clll-rounded-2xl)}.form-addon-radius--left-3xl{border-top-left-radius:var(--clll-rounded-3xl);border-bottom-left-radius:var(--clll-rounded-3xl)}.form-addon-radius--right-3xl{border-top-right-radius:var(--clll-rounded-3xl);border-bottom-right-radius:var(--clll-rounded-3xl)}.form-addon-radius--left-none{border-top-left-radius:0;border-bottom-left-radius:0}.form-addon-radius--right-none{border-top-right-radius:0;border-bottom-right-radius:0}.form-control-flex{display:inline-flex;align-items:center;justify-content:center;position:relative}.form-counter-flex{display:flex;align-items:center;justify-content:flex-end;max-width:100px;box-sizing:border-box;flex:1;position:relative;pointer-events:none;user-select:none}.form-select-icon-flex{position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;pointer-events:none}:root{--clll-rounded-full: 9999px;--clll-rounded-none: 0;--clll-rounded-xs: var(--clll-unit-1);--clll-rounded-sm: var(--clll-unit-2);--clll-rounded-md: var(--clll-unit-3);--clll-rounded-lg: var(--clll-unit-4);--clll-rounded-xl: var(--clll-unit-5);--clll-rounded-2xl: var(--clll-unit-6);--clll-rounded-3xl: var(--clll-unit-7);--clll-px-xs: var(--clll-unit-1_5);--clll-px-sm: var(--clll-unit-2);--clll-px-md: var(--clll-unit-2_5);--clll-px-lg: var(--clll-unit-3);--clll-px-xl: var(--clll-unit-3_5);--clll-px-2xl: var(--clll-unit-4);--clll-px-3xl: var(--clll-unit-4_5);--clll-px-s-xs: calc(var(--clll-px-xs) * .5);--clll-px-s-sm: calc(var(--clll-px-sm) * .5);--clll-py-xs: calc(var(--clll-unit-1) - 1px);--clll-py-sm: calc(var(--clll-unit-1_5) - 1px);--clll-py-md: calc(var(--clll-unit-2) - 1px);--clll-py-lg: var(--clll-unit-2);--clll-py-xl: var(--clll-unit-2_5);--clll-py-2xl: var(--clll-unit-3);--clll-py-3xl: var(--clll-unit-3_5);--clll-py-4xl: var(--clll-unit-4);--clll-py-s-xs: calc(var(--clll-py-xs) * .5);--clll-z-index-10: 10}.clll-input{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;align-items:flex-start;overflow:visible}.clll-input .clll-input__input-container{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;display:flex;align-items:stretch;overflow:visible}.clll-input .clll-input__input-container .clll-input__input-border-control{display:flex;align-items:center;width:100%}.clll-input .clll-input__input{display:inline-block;appearance:none;font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased}.clll-input.clll-input--hascustomprefix,.clll-input.clll-input--hascustomsuffix,.clll-input.clll-input--grouped,.clll-input.clll-input--ghost{border-radius:var(--clll-rounded-xs)}.clll-input.clll-input--hascustomprefix:focus,.clll-input.clll-input--hascustomprefix:focus-within,.clll-input.clll-input--hascustomsuffix:focus,.clll-input.clll-input--hascustomsuffix:focus-within,.clll-input.clll-input--grouped:focus,.clll-input.clll-input--grouped:focus-within,.clll-input.clll-input--ghost:focus,.clll-input.clll-input--ghost:focus-within{border-color:transparent}.clll-input .clll-input__char-counter,.clll-input .clll-input__selected-color{display:flex;align-items:center;justify-content:center;pointer-events:none;user-select:none}.clll-input.clll-input--rounded .clll-input__input-container,.clll-input.clll-input--rounded .clll-input__input{border-radius:var(--clll-rounded-xs)}.clll-input.clll-input--rounded.clll-input--rounded-full .clll-input__input-container{border-radius:var(--clll-rounded-full)}.clll-input.clll-input--rounded.clll-input--rounded-lg .clll-input__input-container{border-radius:var(--clll-rounded-lg)}.clll-input.clll-input--rounded.clll-input--rounded-md .clll-input__input-container{border-radius:var(--clll-rounded-md)}.clll-input.clll-input--rounded.clll-input--rounded-sm .clll-input__input-container{border-radius:var(--clll-rounded-sm)}.clll-input.clll-input--rounded.clll-input--rounded-xs .clll-input__input-container{border-radius:var(--clll-rounded-xs)}.clll-input.clll-input--rounded.clll-input--rounded-xl .clll-input__input-container{border-radius:var(--clll-rounded-xl)}.clll-input.clll-input--rounded.clll-input--rounded-2xl .clll-input__input-container{border-radius:var(--clll-rounded-2xl)}.clll-input.clll-input--rounded.clll-input--rounded-3xl .clll-input__input-container{border-radius:var(--clll-rounded-3xl)}.clll-input.clll-input--rounded.clll-input--rounded-none .clll-input__input-container{border-radius:0}.clll-input.clll-input--rounded.clll-input--rounded-full .clll-input__input{border-radius:var(--clll-rounded-full)}.clll-input.clll-input--rounded.clll-input--rounded-lg .clll-input__input{border-radius:var(--clll-rounded-lg)}.clll-input.clll-input--rounded.clll-input--rounded-md .clll-input__input{border-radius:var(--clll-rounded-md)}.clll-input.clll-input--rounded.clll-input--rounded-sm .clll-input__input{border-radius:var(--clll-rounded-sm)}.clll-input.clll-input--rounded.clll-input--rounded-xs .clll-input__input{border-radius:var(--clll-rounded-xs)}.clll-input.clll-input--rounded.clll-input--rounded-xl .clll-input__input{border-radius:var(--clll-rounded-xl)}.clll-input.clll-input--rounded.clll-input--rounded-2xl .clll-input__input{border-radius:var(--clll-rounded-2xl)}.clll-input.clll-input--rounded.clll-input--rounded-3xl .clll-input__input{border-radius:var(--clll-rounded-3xl)}.clll-input.clll-input--rounded.clll-input--rounded-none .clll-input__input{border-radius:0}.clll-input.clll-input--rounded:not(.clll-input--hasiconprefix).clll-input--hasprefix .clll-input__input{border-top-left-radius:0;border-bottom-left-radius:0}.clll-input.clll-input--rounded:not(.clll-input--hasiconsuffix).clll-input--hassuffix .clll-input__input{border-top-right-radius:0;border-bottom-right-radius:0}.clll-input.clll-input--tiny .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5);padding:var(--clll-py-xs) var(--clll-px-sm)}.clll-input.clll-input--tiny .clll-input__input-container .clll-input__input::file-selector-button{padding:var(--clll-py-sm) var(--clll-px-sm);margin-right:var(--clll-px-sm)}.clll-input.clll-input--tiny.clll-input--hascharcounter .clll-input__input-container .clll-input__char-counter{padding:0 var(--clll-px-sm)}.clll-input.clll-input--tiny.clll-input--hasprefix .clll-input__input-prefix:not(.clll-input__input-prefix--string){padding-left:var(--clll-unit-1);padding-right:var(--clll-unit-1)}.clll-input.clll-input--tiny.clll-input--hasprefix .clll-input__input-prefix--string{padding-left:var(--clll-unit-1)}.clll-input.clll-input--tiny.clll-input--hasprefix .clll-input__input{padding-left:var(--clll-unit-0)}.clll-input.clll-input--tiny.clll-input--hassuffix .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-left:var(--clll-unit-1);padding-right:var(--clll-unit-1)}.clll-input.clll-input--tiny.clll-input--hassuffix .clll-input__input-suffix--string{padding-right:var(--clll-unit-1)}.clll-input.clll-input--tiny.clll-input--hassuffix .clll-input__input{padding-right:var(--clll-unit-0)}.clll-input.clll-input--tiny.clll-input--hascustomprefix,.clll-input.clll-input--tiny.clll-input--hascustomsuffix{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5)}.clll-input.clll-input--tiny.clll-input--hascustomprefix .clll-input__input{padding-left:0}.clll-input.clll-input--tiny.clll-input--hascustomsuffix .clll-input__input{padding-right:0}.clll-input.clll-input--tiny.clll-input--grouped .clll-input__input-prefix,.clll-input.clll-input--tiny.clll-input--grouped .clll-input__input-suffix{padding:var(--clll-unit-1_5)}.clll-input.clll-input--tiny.clll-input--grouped .clll-input__input-preffix--string,.clll-input.clll-input--tiny.clll-input--grouped .clll-input__input-suffix--string{padding-top:0;padding-bottom:0}.clll-input.clll-input--tiny.clll-input--grouped.clll-input--hasiconprefix .clll-input__input,.clll-input.clll-input--tiny.clll-input--grouped.clll-input--hascustomprefix .clll-input__input{padding-left:var(--clll-unit-1_5)}.clll-input.clll-input--tiny.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input,.clll-input.clll-input--tiny.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input{padding-right:var(--clll-unit-1_5)}.clll-input.clll-input--tiny.clll-input--color .clll-input__input-container>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-input.clll-input--tiny.clll-input--color .clll-input__input-container .clll-input__input{border-radius:var(--clll-rounded-full);height:var(--clll-unit-5_5);width:var(--clll-unit-5_5)}.clll-input.clll-input--tiny.clll-input--color .clll-input__input-container .clll-input__selected-color{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5)}.clll-input.clll-input--small .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6);padding:var(--clll-py-sm) var(--clll-px-md)}.clll-input.clll-input--small .clll-input__input-container .clll-input__input::file-selector-button{padding:var(--clll-py-md) var(--clll-px-md);margin-right:var(--clll-px-md)}.clll-input.clll-input--small.clll-input--hascharcounter .clll-input__input-container .clll-input__char-counter{padding:0 var(--clll-px-md)}.clll-input.clll-input--small.clll-input--hasprefix .clll-input__input-prefix:not(.clll-input__input-prefix--string){padding-left:var(--clll-unit-1_5);padding-right:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--hasprefix .clll-input__input-prefix--string{padding-left:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--hasprefix .clll-input__input{padding-left:var(--clll-unit-0)}.clll-input.clll-input--small.clll-input--hassuffix .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-left:var(--clll-unit-1_5);padding-right:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--hassuffix .clll-input__input-suffix--string{padding-right:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--hassuffix .clll-input__input{padding-right:var(--clll-unit-0)}.clll-input.clll-input--small.clll-input--hascustomprefix,.clll-input.clll-input--small.clll-input--hascustomsuffix{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6)}.clll-input.clll-input--small.clll-input--hascustomprefix .clll-input__input{padding-left:0}.clll-input.clll-input--small.clll-input--hascustomsuffix .clll-input__input{padding-right:0}.clll-input.clll-input--small.clll-input--grouped .clll-input__input-prefix,.clll-input.clll-input--small.clll-input--grouped .clll-input__input-suffix{padding:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--grouped .clll-input__input-preffix--string,.clll-input.clll-input--small.clll-input--grouped .clll-input__input-suffix--string{padding-top:0;padding-bottom:0}.clll-input.clll-input--small.clll-input--grouped.clll-input--hasiconprefix .clll-input__input,.clll-input.clll-input--small.clll-input--grouped.clll-input--hascustomprefix .clll-input__input{padding-left:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input,.clll-input.clll-input--small.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input{padding-right:var(--clll-unit-1_5)}.clll-input.clll-input--small.clll-input--color .clll-input__input-container>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-input.clll-input--small.clll-input--color .clll-input__input-container .clll-input__input{border-radius:var(--clll-rounded-full);height:var(--clll-unit-6_5);width:var(--clll-unit-6_5)}.clll-input.clll-input--small.clll-input--color .clll-input__input-container .clll-input__selected-color{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6)}.clll-input.clll-input--medium .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5);padding:var(--clll-py-md) var(--clll-px-lg)}.clll-input.clll-input--medium .clll-input__input-container .clll-input__input::file-selector-button{padding:var(--clll-py-xl) var(--clll-px-lg);margin-right:var(--clll-px-lg)}.clll-input.clll-input--medium.clll-input--hascharcounter .clll-input__input-container .clll-input__char-counter{padding:0 var(--clll-px-lg)}.clll-input.clll-input--medium.clll-input--hasprefix .clll-input__input-prefix:not(.clll-input__input-prefix--string){padding-left:var(--clll-unit-2_5);padding-right:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--hasprefix .clll-input__input-prefix--string{padding-left:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--hasprefix .clll-input__input{padding-left:var(--clll-unit-0)}.clll-input.clll-input--medium.clll-input--hassuffix .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-left:var(--clll-unit-2_5);padding-right:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--hassuffix .clll-input__input-suffix--string{padding-right:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--hassuffix .clll-input__input{padding-right:var(--clll-unit-0)}.clll-input.clll-input--medium.clll-input--hascustomprefix,.clll-input.clll-input--medium.clll-input--hascustomsuffix{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5)}.clll-input.clll-input--medium.clll-input--hascustomprefix .clll-input__input{padding-left:0}.clll-input.clll-input--medium.clll-input--hascustomsuffix .clll-input__input{padding-right:0}.clll-input.clll-input--medium.clll-input--grouped .clll-input__input-prefix,.clll-input.clll-input--medium.clll-input--grouped .clll-input__input-suffix{padding:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--grouped .clll-input__input-preffix--string,.clll-input.clll-input--medium.clll-input--grouped .clll-input__input-suffix--string{padding-top:0;padding-bottom:0}.clll-input.clll-input--medium.clll-input--grouped.clll-input--hasiconprefix .clll-input__input,.clll-input.clll-input--medium.clll-input--grouped.clll-input--hascustomprefix .clll-input__input{padding-left:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input,.clll-input.clll-input--medium.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input{padding-right:var(--clll-unit-2_5)}.clll-input.clll-input--medium.clll-input--color .clll-input__input-container>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-input.clll-input--medium.clll-input--color .clll-input__input-container .clll-input__input{border-radius:var(--clll-rounded-full);height:var(--clll-unit-7_5);width:var(--clll-unit-7_5)}.clll-input.clll-input--medium.clll-input--color .clll-input__input-container .clll-input__selected-color{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5)}.clll-input.clll-input--large .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7);padding:var(--clll-py-lg) var(--clll-px-2xl)}.clll-input.clll-input--large .clll-input__input-container .clll-input__input::file-selector-button{padding:var(--clll-py-2xl) var(--clll-px-2xl);margin-right:var(--clll-px-2xl)}.clll-input.clll-input--large.clll-input--hascharcounter .clll-input__input-container .clll-input__char-counter{padding:0 var(--clll-px-2xl)}.clll-input.clll-input--large.clll-input--hasprefix .clll-input__input-prefix:not(.clll-input__input-prefix--string){padding-left:var(--clll-unit-3_5);padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--hasprefix .clll-input__input-prefix--string{padding-left:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--hasprefix .clll-input__input{padding-left:var(--clll-unit-0)}.clll-input.clll-input--large.clll-input--hassuffix .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-left:var(--clll-unit-3_5);padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--hassuffix .clll-input__input-suffix--string{padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--hassuffix .clll-input__input{padding-right:var(--clll-unit-0)}.clll-input.clll-input--large.clll-input--hascustomprefix,.clll-input.clll-input--large.clll-input--hascustomsuffix{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7)}.clll-input.clll-input--large.clll-input--hascustomprefix .clll-input__input{padding-left:0}.clll-input.clll-input--large.clll-input--hascustomsuffix .clll-input__input{padding-right:0}.clll-input.clll-input--large.clll-input--grouped .clll-input__input-prefix,.clll-input.clll-input--large.clll-input--grouped .clll-input__input-suffix{padding:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--grouped .clll-input__input-preffix--string,.clll-input.clll-input--large.clll-input--grouped .clll-input__input-suffix--string{padding-top:0;padding-bottom:0}.clll-input.clll-input--large.clll-input--grouped.clll-input--hasiconprefix .clll-input__input,.clll-input.clll-input--large.clll-input--grouped.clll-input--hascustomprefix .clll-input__input{padding-left:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input,.clll-input.clll-input--large.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input{padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--large.clll-input--color .clll-input__input-container>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-input.clll-input--large.clll-input--color .clll-input__input-container .clll-input__input{border-radius:var(--clll-rounded-full);height:var(--clll-unit-8_5);width:var(--clll-unit-8_5)}.clll-input.clll-input--large.clll-input--color .clll-input__input-container .clll-input__selected-color{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7)}.clll-input.clll-input--xlarge .clll-input__input-container .clll-input__input{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5);padding:var(--clll-py-2xl) var(--clll-px-3xl)}.clll-input.clll-input--xlarge .clll-input__input-container .clll-input__input::file-selector-button{padding:var(--clll-py-4xl) var(--clll-px-3xl);margin-right:var(--clll-px-3xl)}.clll-input.clll-input--xlarge.clll-input--hascharcounter .clll-input__input-container .clll-input__char-counter{padding:0 var(--clll-px-3xl)}.clll-input.clll-input--xlarge.clll-input--hasprefix .clll-input__input-prefix:not(.clll-input__input-prefix--string){padding-left:var(--clll-unit-3_5);padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--hasprefix .clll-input__input-prefix--string{padding-left:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--hasprefix .clll-input__input{padding-left:var(--clll-unit-0)}.clll-input.clll-input--xlarge.clll-input--hassuffix .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-left:var(--clll-unit-3_5);padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--hassuffix .clll-input__input-suffix--string{padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--hassuffix .clll-input__input{padding-right:var(--clll-unit-0)}.clll-input.clll-input--xlarge.clll-input--hascustomprefix,.clll-input.clll-input--xlarge.clll-input--hascustomsuffix{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5)}.clll-input.clll-input--xlarge.clll-input--hascustomprefix .clll-input__input{padding-left:0}.clll-input.clll-input--xlarge.clll-input--hascustomsuffix .clll-input__input{padding-right:0}.clll-input.clll-input--xlarge.clll-input--grouped .clll-input__input-prefix,.clll-input.clll-input--xlarge.clll-input--grouped .clll-input__input-suffix{padding:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--grouped .clll-input__input-preffix--string,.clll-input.clll-input--xlarge.clll-input--grouped .clll-input__input-suffix--string{padding-top:0;padding-bottom:0}.clll-input.clll-input--xlarge.clll-input--grouped.clll-input--hasiconprefix .clll-input__input,.clll-input.clll-input--xlarge.clll-input--grouped.clll-input--hascustomprefix .clll-input__input{padding-left:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input,.clll-input.clll-input--xlarge.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input{padding-right:var(--clll-unit-3_5)}.clll-input.clll-input--xlarge.clll-input--color .clll-input__input-container>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-input.clll-input--xlarge.clll-input--color .clll-input__input-container .clll-input__input{border-radius:var(--clll-rounded-full);height:var(--clll-unit-9_5);width:var(--clll-unit-9_5)}.clll-input.clll-input--xlarge.clll-input--color .clll-input__input-container .clll-input__selected-color{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5)}.clll-input.clll-input--grouped.clll-input--hasiconprefix .clll-input__input-container,.clll-input.clll-input--grouped.clll-input--hascustomprefix .clll-input__input-container{padding-left:0}.clll-input.clll-input--grouped.clll-input--hasiconsuffix .clll-input__input-container,.clll-input.clll-input--grouped.clll-input--hascustomsuffix .clll-input__input-container{padding-right:0}.clll-input.clll-input--grouped.clll-input--hascharcounter .clll-input__input-suffix{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:0}.clll-input.clll-input--grouped.clll-input--hascharcounter .clll-input__char-counter{border-top-right-radius:var(--clll-rounded-xs);border-bottom-right-radius:var(--clll-rounded-xs)}.clll-input.clll-input--hassuffix.clll-input--hascharcounter .clll-input__input-suffix,.clll-input.clll-input--hassuffix.clll-input--hascharcounter .clll-input__input-suffix:not(.clll-input__input-suffix--string){padding-right:0}.clll-input.clll-input--fluid,.clll-input.clll-input--fluid .clll-input__input-container,.clll-input.clll-input--fluid .clll-input__input-container .clll-input__input{width:100%}.clll-input.clll-input--vertical{flex-direction:column}.clll-input.clll-input--vertical.clll-input--haslabel>:not([hidden])~:not([hidden]){margin-top:var(--clll-unit-1_5)}.clll-input.clll-input--horizontal.clll-input--haslabel{flex-direction:row;align-items:center;flex-wrap:wrap}.clll-input.clll-input--horizontal.clll-input--haslabel .clll-input__label,.clll-input.clll-input--horizontal.clll-input--haslabel .clll-input__input-container{width:50%}.clll-input.clll-input--hidden .clll-input__input-container{display:none}.clll-input.clll-input--file .clll-input__input-container .clll-input__input{cursor:pointer;padding-top:0;padding-left:0;padding-bottom:0;white-space:nowrap}.clll-input.clll-input--file .clll-input__input-container .clll-input__input::file-selector-button{cursor:pointer;border:0}.clll-input.clll-input--file.clll-input--readonly .clll-input__input{pointer-events:none;cursor:not-allowed}.clll-input.clll-input--color .clll-input__input-container .clll-input__input{cursor:pointer;padding:0;border:0}.clll-input.clll-input--color .clll-input__input-container .clll-input__input.--nocolor{opacity:0}.clll-input.clll-input--color .clll-input__input-container .clll-input__input-border-control{overflow:hidden;border-radius:var(--clll-rounded-full);background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>');width:auto}.clll-input.clll-input--color .clll-input__input-container .clll-input__selected-color{font-family:monospace;-webkit-font-smoothing:antialiased}.clll-input.clll-input--color.clll-input--disabled .clll-input__input{cursor:default}.clll-input.clll-input--color.clll-input--readonly .clll-input__input{pointer-events:none;cursor:not-allowed}.clll-input.clll-input--hascharcounter .clll-input__char-counter{pointer-events:none;justify-content:flex-end;max-width:100px;box-sizing:border-box;flex:1;position:relative}.clll-input ::-webkit-color-swatch-wrapper{padding:0}.clll-input ::-webkit-color-swatch{border:0}

package/dist/components/Form/CLInput/CLInput.js

@@ -0,0 +1,378 @@
+import './CLInput.css';
+import { defineComponent as v, computed as I, createElementBlock as p, openBlock as n, normalizeClass as x, unref as a, createBlock as m, Fragment as M, createTextVNode as q, toDisplayString as R, createVNode as K, ref as w, watch as T, createCommentVNode as g, mergeModels as N, useTemplateRef as Q, useModel as W, withCtx as Y, createElementVNode as L, withDirectives as Z, vModelDynamic as _, isRef as ee } from "vue";
+import { _ as le, i as te, a as ae } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-xm2qDJGJ.js";
+import { _ as ie } from "../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-ORvye4vi.js";
+import { _ as oe } from "../../../chunks/CLFormCharCounter.vue_vue_type_style_index_0_lang-CJ4VrvmR.js";
+import { _ as X } from "../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-zZ4zGuBt.js";
+import { CLSizes as u, CLBorderRadius as H, CLIconSizes as r, CLIconNames as h, CLColors as k, CLColorVariants as S, CLInputTypes as o, CLOrientation as B, CLCharCounterLayout as ne } from "../../../index.js";
+import { _ as ue } from "../../../chunks/CLPill.vue_vue_type_style_index_0_lang-BXGTb6A6.js";
+import { _ as P } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-CqgySW52.js";
+const de = ["data-testid"], E = /* @__PURE__ */ v({
+  name: "CLInputPrefix",
+  __name: "CLInputPrefix",
+  props: {
+    borderRadius: { default: H.XS },
+    grouped: { type: Boolean, default: !1 },
+    prefix: {},
+    size: { default: u.Small },
+    testId: { default: "clll-input-prefix" }
+  },
+  setup(e) {
+    const d = e, s = "clll-input", l = (i) => Object.values(h).includes(i), $ = (i) => i, t = (i) => i?.replace("rounded-", "") || "xs", y = {
+      [u.Tiny]: r.Tiny,
+      [u.Small]: r.Small,
+      [u.Medium]: r.Medium,
+      [u.Large]: r.Large,
+      [u.XL]: r.XL
+    }, C = I(() => [
+      `${s}__input-prefix`,
+      "form-addon-flex",
+      "form-addon-flex--left",
+      l(d.prefix) ? `${s}__input-prefix--icon form-addon-flex--icon` : `${s}__input-prefix--string form-addon-flex--string`,
+      { "--input-group": d.grouped || d.prefix },
+      d.grouped ? `form-addon-radius--left-${t(d.borderRadius)}` : ""
+    ]);
+    return (i, b) => (n(), p("span", {
+      class: x(a(C)),
+      "data-testid": e.testId
+    }, [
+      l(e.prefix) ? (n(), m(a(X), {
+        key: 0,
+        name: $(e.prefix),
+        size: y[e.size]
+      }, null, 8, ["name", "size"])) : (n(), p(M, { key: 1 }, [
+        q(R(e.prefix), 1)
+      ], 64))
+    ], 10, de));
+  }
+}), se = ["data-testid"], O = /* @__PURE__ */ v({
+  name: "CLInputSuffix",
+  __name: "CLInputSuffix",
+  props: {
+    borderRadius: { default: H.XS },
+    grouped: { type: Boolean, default: !1 },
+    suffix: {},
+    size: { default: u.Small },
+    testId: { default: "clll-input-suffix" }
+  },
+  setup(e) {
+    const d = e, s = "clll-input", l = (i) => Object.values(h).includes(i), $ = (i) => i, t = (i) => i?.replace("rounded-", "") || "xs", y = {
+      [u.Tiny]: r.Tiny,
+      [u.Small]: r.Small,
+      [u.Medium]: r.Medium,
+      [u.Large]: r.Large,
+      [u.XL]: r.XL
+    }, C = I(() => [
+      `${s}__input-suffix`,
+      "form-addon-flex",
+      "form-addon-flex--right",
+      l(d.suffix) ? `${s}__input-suffix--icon form-addon-flex--icon` : `${s}__input-suffix--string form-addon-flex--string`,
+      { "--input-group": d.grouped || d.suffix },
+      d.grouped ? `form-addon-radius--right-${t(d.borderRadius)}` : ""
+    ]);
+    return (i, b) => (n(), p("span", {
+      class: x(a(C)),
+      "data-testid": e.testId
+    }, [
+      l(e.suffix) ? (n(), m(a(X), {
+        key: 0,
+        name: $(e.suffix),
+        size: y[e.size]
+      }, null, 8, ["name", "size"])) : (n(), p(M, { key: 1 }, [
+        q(R(e.suffix), 1)
+      ], 64))
+    ], 10, se));
+  }
+}), re = ["data-testid"], U = /* @__PURE__ */ v({
+  name: "CLInputPill",
+  __name: "CLInputPill",
+  props: {
+    color: { default: k.Neutral },
+    label: {},
+    testId: { default: "clll-input-pill" }
+  },
+  setup(e) {
+    const d = "clll-input";
+    return (s, l) => (n(), p("span", {
+      class: x(`${d}__pill`),
+      "data-testid": e.testId
+    }, [
+      K(a(ue), {
+        color: e.color,
+        label: e.label,
+        variant: a(S).Soft
+      }, null, 8, ["color", "label", "variant"])
+    ], 10, re));
+  }
+}), ce = ["data-testid"], j = /* @__PURE__ */ v({
+  name: "CLInputColorTools",
+  __name: "CLInputColorTools",
+  props: {
+    copied: { type: Boolean, default: !1 },
+    initialValue: { default: void 0 },
+    modelValue: { default: void 0 },
+    size: { default: u.Small },
+    testId: { default: "clll-input-color-tools" }
+  },
+  emits: ["copy", "reset", "update:copied"],
+  setup(e, { emit: d }) {
+    const s = e, l = d, $ = "clll-input", t = w(s.copied), y = {
+      [u.Tiny]: r.Tiny,
+      [u.Small]: r.Small,
+      [u.Medium]: r.Medium,
+      [u.Large]: r.Large,
+      [u.XL]: r.XL
+    }, C = async () => {
+      try {
+        s.modelValue && (await navigator.clipboard.writeText(s.modelValue.toString()), t.value = !0, l("update:copied", !0), l("copy"));
+      } catch (b) {
+        console.error(b);
+      }
+    }, i = () => {
+      l("reset", s.initialValue);
+    };
+    return T(() => s.copied, (b) => {
+      t.value = b;
+    }), T(() => s.modelValue, () => {
+      t.value = !1, l("update:copied", !1);
+    }), (b, F) => (n(), p("span", {
+      class: x(`${$}__selected-color-tools`),
+      "data-testid": e.testId
+    }, [
+      e.modelValue ? (n(), m(a(P), {
+        key: 0,
+        "aria-label": "Copy color to clipboard",
+        class: x(`${$}__copy-to-clipboard`),
+        color: a(k).Neutral,
+        "icon-before": a(t) ? a(h).Check : a(h).Copy,
+        "icon-size": y[e.size],
+        "on-click": C,
+        size: e.size,
+        title: a(t) ? "Color copied to clipboard" : "Copy color to clipboard",
+        variant: a(S).Ghost,
+        wrap: ""
+      }, null, 8, ["class", "color", "icon-before", "icon-size", "size", "title", "variant"])) : g("", !0),
+      e.modelValue ? (n(), m(a(P), {
+        key: 1,
+        "aria-label": "Reset selected color",
+        class: x(`${$}__reset-selected-color`),
+        color: a(k).Neutral,
+        "on-click": i,
+        "icon-before": a(h).Restore,
+        "icon-size": y[e.size],
+        size: e.size,
+        title: "Reset selected color",
+        variant: a(S).Ghost,
+        wrap: ""
+      }, null, 8, ["class", "color", "icon-before", "icon-size", "size", "variant"])) : g("", !0)
+    ], 10, ce));
+  }
+}), fe = ["data-testid"], me = ["id", "name", "aria-label", "autocomplete", "disabled", "form", "maxlength", "minlength", "pattern", "placeholder", "readonly", "required", "spellcheck", "type"], xe = /* @__PURE__ */ v({
+  name: "CLInput",
+  __name: "CLInput",
+  props: /* @__PURE__ */ N({
+    ariaLabel: { default: void 0 },
+    autoComplete: { type: Boolean, default: void 0 },
+    borderRadius: { default: void 0 },
+    busy: { type: Boolean, default: !1 },
+    charCounter: { type: Boolean, default: !1 },
+    color: { default: k.Neutral },
+    disabled: { type: Boolean, default: !1 },
+    fluid: { type: Boolean, default: !1 },
+    form: { default: void 0 },
+    grouped: { type: Boolean, default: !1 },
+    id: {},
+    label: { default: void 0 },
+    maxLength: { default: void 0 },
+    messages: { default: () => [] },
+    messageType: { default: void 0 },
+    minLength: { default: void 0 },
+    name: {},
+    onBlur: { type: Function, default: void 0 },
+    onChange: { type: Function, default: void 0 },
+    onFocus: { type: Function, default: void 0 },
+    onInput: { type: Function, default: void 0 },
+    orientation: { default: B.Vertical },
+    pattern: { default: void 0 },
+    pill: { default: void 0 },
+    placeholder: { default: void 0 },
+    prefix: { default: void 0 },
+    readonly: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    rounded: { type: Boolean, default: !0 },
+    size: { default: u.Small },
+    spellCheck: { type: Boolean, default: void 0 },
+    suffix: { default: void 0 },
+    testId: { default: "clll-input" },
+    type: { default: o.Text },
+    variant: { default: S.Outline }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ N(["reset"], ["update:modelValue"]),
+  setup(e, { expose: d, emit: s }) {
+    const l = e, $ = s, t = "clll-input", y = w(!1), C = Q("input-elem"), i = W(e, "modelValue");
+    l.type === o.Color && !i.value && (i.value = "#FFFFFF");
+    const b = i.value?.toString(), F = (z) => Object.values(h).includes(z), A = I(() => [
+      t,
+      l.borderRadius ? `${t}--${l.borderRadius}` : "",
+      l.busy ? `${t}--busy` : `${t}--ready`,
+      `${t}--${l.color}`,
+      `${t}--${l.size}`,
+      `${t}--${l.type}`,
+      `${t}--${l.variant}`,
+      l.disabled || l.busy ? `${t}--disabled` : `${t}--active`,
+      l.fluid || l.orientation === B.Horizontal ? `${t}--fluid` : `${t}--fixed`,
+      l.grouped ? `${t}--grouped` : "",
+      l.label ? `${t}--haslabel` : "",
+      l.messageType ? `${t}--${l.messageType}` : "",
+      l.orientation ? `${t}--${l.orientation}` : "",
+      l.pill ? `${t}--haspill` : "",
+      l.charCounter && l.maxLength && [o.Email, o.None, o.Text, o.Url].includes(l.type) ? `${t}--hascharcounter` : "",
+      l.prefix && ![o.Color, o.File].includes(l.type) ? `${t}--hasprefix` : "",
+      l.prefix && ![o.Color, o.File].includes(l.type) ? F(l.prefix) ? `${t}--hasiconprefix` : `${t}--hascustomprefix` : "",
+      l.readonly ? `${t}--readonly` : `${t}--writeable`,
+      l.rounded ? `${t}--rounded` : `${t}--box`,
+      l.required ? `${t}--required` : `${t}--optional`,
+      l.suffix && ![o.Color, o.File].includes(l.type) ? `${t}--hassuffix` : "",
+      l.suffix && ![o.Color, o.File].includes(l.type) ? F(l.suffix) ? `${t}--hasiconsuffix` : `${t}--hascustomsuffix` : ""
+    ]), D = I(() => [
+      `${t}__input`,
+      { "--nocolor": l.type === o.Color && !i.value },
+      { "--input-group": l.grouped || l.prefix || l.suffix }
+    ]), G = (z) => {
+      i.value = z, $("reset", i.value);
+    }, J = () => {
+      C.value && C.value.focus();
+    };
+    return T(i, () => {
+      y.value = !1;
+    }), d({
+      inputRef: C
+    }), (z, c) => (n(), m(le, {
+      fluid: e.fluid,
+      "has-pill": !!e.pill,
+      "has-char-counter": !!(e.charCounter && e.maxLength),
+      orientation: e.orientation
+    }, {
+      default: Y(() => [
+        L("span", {
+          class: x([
+            a(A),
+            a(te)({ color: e.color, component: "input", disabled: e.disabled || e.busy, readonly: e.readonly, variant: e.variant })
+          ]),
+          "data-testid": e.testId
+        }, [
+          e.label ? (n(), m(ie, {
+            key: 0,
+            "css-prefix": t,
+            "html-for": e.id,
+            label: e.label,
+            required: e.required,
+            size: e.size
+          }, null, 8, ["html-for", "label", "required", "size"])) : g("", !0),
+          L("span", {
+            class: x([`${t}__input-container`, "--focus-within"]),
+            onClick: J
+          }, [
+            e.prefix && ![a(o).Color, a(o).File].includes(e.type) ? (n(), m(E, {
+              key: 0,
+              prefix: e.prefix,
+              size: e.size,
+              grouped: e.grouped,
+              "border-radius": e.borderRadius
+            }, null, 8, ["prefix", "size", "grouped", "border-radius"])) : g("", !0),
+            L("span", {
+              class: x(`${t}__input-border-control`)
+            }, [
+              Z(L("input", {
+                id: e.id,
+                ref: "input-elem",
+                "onUpdate:modelValue": c[0] || (c[0] = (f) => i.value = f),
+                name: e.name,
+                "aria-label": e.ariaLabel,
+                autocomplete: e.autoComplete ? "on" : "off",
+                class: x(a(D)),
+                disabled: e.disabled || e.busy,
+                form: e.form,
+                maxlength: e.maxLength,
+                minlength: e.minLength,
+                pattern: e.pattern,
+                placeholder: e.placeholder,
+                readonly: e.readonly,
+                required: e.required,
+                spellcheck: e.spellCheck,
+                type: e.type,
+                onBlur: c[1] || (c[1] = //@ts-ignore
+                (...f) => e.onBlur && e.onBlur(...f)),
+                onChange: c[2] || (c[2] = //@ts-ignore
+                (...f) => e.onChange && e.onChange(...f)),
+                onFocus: c[3] || (c[3] = //@ts-ignore
+                (...f) => e.onFocus && e.onFocus(...f)),
+                onInput: c[4] || (c[4] = //@ts-ignore
+                (...f) => e.onInput && e.onInput(...f))
+              }, null, 42, me), [
+                [_, i.value]
+              ])
+            ], 2),
+            e.type === a(o).Color ? (n(), p("span", {
+              key: 1,
+              class: x(`${t}__selected-color`)
+            }, R(i.value || "none"), 3)) : g("", !0),
+            e.type === a(o).Color ? (n(), m(j, {
+              key: 2,
+              modelValue: i.value,
+              "onUpdate:modelValue": c[5] || (c[5] = (f) => i.value = f),
+              copied: a(y),
+              "onUpdate:copied": c[6] || (c[6] = (f) => ee(y) ? y.value = f : null),
+              "initial-value": a(b),
+              size: e.size,
+              onReset: G
+            }, null, 8, ["modelValue", "copied", "initial-value", "size"])) : g("", !0),
+            e.suffix && ![a(o).Color, a(o).File].includes(e.type) ? (n(), m(O, {
+              key: 3,
+              suffix: e.suffix,
+              size: e.size,
+              grouped: e.grouped,
+              "border-radius": e.borderRadius
+            }, null, 8, ["suffix", "size", "grouped", "border-radius"])) : g("", !0),
+            e.charCounter && e.maxLength && [a(o).Email, a(o).None, a(o).Text, a(o).Url].includes(e.type) ? (n(), m(oe, {
+              key: 4,
+              color: e.color,
+              "css-prefix": t,
+              "current-length": i.value ? i.value.toString().length : 0,
+              "max-length": e.maxLength,
+              layout: a(ne).Inline,
+              size: e.size
+            }, null, 8, ["color", "current-length", "max-length", "layout", "size"])) : g("", !0)
+          ], 2)
+        ], 10, fe),
+        e.pill && e.label && e.orientation === a(B).Horizontal ? (n(), p("span", {
+          key: 0,
+          class: x(`${t}__spacer`)
+        }, null, 2)) : g("", !0),
+        e.pill ? (n(), m(U, {
+          key: 1,
+          label: e.pill,
+          color: e.color
+        }, null, 8, ["label", "color"])) : g("", !0),
+        e.id ? (n(), m(ae, {
+          key: 2,
+          id: e.id,
+          messages: e.messages,
+          "message-type": e.messageType
+        }, null, 8, ["id", "messages", "message-type"])) : g("", !0)
+      ]),
+      _: 1
+    }, 8, ["fluid", "has-pill", "has-char-counter", "orientation"]));
+  }
+}), V = xe;
+V.Prefix = E;
+V.Suffix = O;
+V.Pill = U;
+V.ColorTools = j;
+export {
+  V as CLInput,
+  V as default
+};

package/dist/components/Form/CLInput/CLInput.vue.d.ts

@@ -90,21 +90,21 @@ declare const _default: import('vue').DefineComponent<{
     pattern: string;
     variant: CLColorVariants.Outline | CLColorVariants.Ghost;
     borderRadius: CLBorderRadius;
+    fluid: boolean;
+    rounded: boolean;
     testId: string;
     type: CLInputTypes;
-    required: boolean;
-    prefix: string | CLIconNames;
     onFocus: CLGenericFocusFunction;
     onBlur: CLGenericFocusFunction;
     onChange: CLGenericFunction;
     onInput: CLGenericInputFunction;
+    size: CLSizes;
+    required: boolean;
+    prefix: string | CLIconNames;
     ariaLabel: string;
     busy: boolean;
-    rounded: boolean;
-    fluid: boolean;
     disabled: boolean;
     pill: string;
-    size: CLSizes;
     placeholder: string;
     orientation: CLOrientation;
     readonly: boolean;

package/dist/components/Form/CLInput/CLInputPill.vue.d.ts

@@ -1,4 +1,4 @@
-import { CLColors } from '../../../index.ts';
+import { CLColors } from '../../../types';
 export interface CLInputPillProps {
     /** Color of the pill */
     color?: CLColors;