@codeandfunction/callaloo 3.16.3 → 3.16.5

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

@@ -1,15 +1,15 @@
 import '../../../assets/core.css';
 import './CLInput.css';
 import '../../../assets/shared/form-utilities.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-BNGT0om7.js";
-import { _ as ie } from "../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-Cw3nPc64.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-BaCl5yQI.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-DYXrV-YE.js";
-import { _ as P } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-N3EWoTbB.js";
-const de = ["data-testid"], E = /* @__PURE__ */ v({
+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, normalizeStyle as Z, withDirectives as _, vModelDynamic as ee, isRef as le } from "vue";
+import { _ as te, i as ae, a as ie } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-Bt5xgOT4.js";
+import { _ as oe } from "../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-CaHCD2xF.js";
+import { _ as ne } 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--1FTkRVd.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 ue } from "../../../index.js";
+import { _ as de } from "../../../chunks/CLPill.vue_vue_type_style_index_0_lang-DwNvvX0v.js";
+import { _ as P } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-B4xTt-xw.js";
+const se = ["data-testid"], E = /* @__PURE__ */ v({
   name: "CLInputPrefix",
   __name: "CLInputPrefix",
   props: {
@@ -45,9 +45,9 @@ const de = ["data-testid"], E = /* @__PURE__ */ v({
       }, null, 8, ["name", "size"])) : (n(), p(M, { key: 1 }, [
         q(R(e.prefix), 1)
       ], 64))
-    ], 10, de));
+    ], 10, se));
   }
-}), se = ["data-testid"], O = /* @__PURE__ */ v({
+}), re = ["data-testid"], O = /* @__PURE__ */ v({
   name: "CLInputSuffix",
   __name: "CLInputSuffix",
   props: {
@@ -83,9 +83,9 @@ const de = ["data-testid"], E = /* @__PURE__ */ v({
       }, null, 8, ["name", "size"])) : (n(), p(M, { key: 1 }, [
         q(R(e.suffix), 1)
       ], 64))
-    ], 10, se));
+    ], 10, re));
   }
-}), re = ["data-testid"], U = /* @__PURE__ */ v({
+}), ce = ["data-testid"], U = /* @__PURE__ */ v({
   name: "CLInputPill",
   __name: "CLInputPill",
   props: {
@@ -99,14 +99,14 @@ const de = ["data-testid"], E = /* @__PURE__ */ v({
       class: x(`${d}__pill`),
       "data-testid": e.testId
     }, [
-      K(a(ue), {
+      K(a(de), {
         color: e.color,
         label: e.label,
         variant: a(S).Soft
       }, null, 8, ["color", "label", "variant"])
-    ], 10, re));
+    ], 10, ce));
   }
-}), ce = ["data-testid"], j = /* @__PURE__ */ v({
+}), fe = ["data-testid"], j = /* @__PURE__ */ v({
   name: "CLInputColorTools",
   __name: "CLInputColorTools",
   props: {
@@ -167,9 +167,9 @@ const de = ["data-testid"], E = /* @__PURE__ */ v({
         variant: a(S).Ghost,
         wrap: ""
       }, null, 8, ["class", "color", "icon-before", "icon-size", "size", "variant"])) : g("", !0)
-    ], 10, ce));
+    ], 10, fe));
   }
-}), fe = ["data-testid"], me = ["id", "name", "aria-label", "autocomplete", "disabled", "form", "maxlength", "minlength", "pattern", "placeholder", "readonly", "required", "spellcheck", "type"], xe = /* @__PURE__ */ v({
+}), me = ["data-testid"], xe = ["id", "name", "aria-label", "autocomplete", "disabled", "form", "maxlength", "minlength", "pattern", "placeholder", "readonly", "required", "spellcheck", "type"], ye = /* @__PURE__ */ v({
   name: "CLInput",
   __name: "CLInput",
   props: /* @__PURE__ */ N({
@@ -252,7 +252,7 @@ const de = ["data-testid"], E = /* @__PURE__ */ v({
       y.value = !1;
     }), d({
       inputRef: C
-    }), (z, c) => (n(), m(le, {
+    }), (z, c) => (n(), m(te, {
       fluid: e.fluid,
       "has-pill": !!e.pill,
       "has-char-counter": !!(e.charCounter && e.maxLength),
@@ -260,13 +260,11 @@ const de = ["data-testid"], E = /* @__PURE__ */ v({
     }, {
       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 })
-          ]),
+          class: x(a(A)),
+          style: Z(a(ae)({ color: e.color, disabled: e.disabled || e.busy, readonly: e.readonly, variant: e.variant })),
           "data-testid": e.testId
         }, [
-          e.label ? (n(), m(ie, {
+          e.label ? (n(), m(oe, {
             key: 0,
             "css-prefix": t,
             "html-for": e.id,
@@ -288,7 +286,7 @@ const de = ["data-testid"], E = /* @__PURE__ */ v({
             L("span", {
               class: x(`${t}__input-border-control`)
             }, [
-              Z(L("input", {
+              _(L("input", {
                 id: e.id,
                 ref: "input-elem",
                 "onUpdate:modelValue": c[0] || (c[0] = (f) => i.value = f),
@@ -314,8 +312,8 @@ const de = ["data-testid"], E = /* @__PURE__ */ v({
                 (...f) => e.onFocus && e.onFocus(...f)),
                 onInput: c[4] || (c[4] = //@ts-ignore
                 (...f) => e.onInput && e.onInput(...f))
-              }, null, 42, me), [
-                [_, i.value]
+              }, null, 42, xe), [
+                [ee, i.value]
               ])
             ], 2),
             e.type === a(o).Color ? (n(), p("span", {
@@ -327,7 +325,7 @@ const de = ["data-testid"], E = /* @__PURE__ */ v({
               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),
+              "onUpdate:copied": c[6] || (c[6] = (f) => le(y) ? y.value = f : null),
               "initial-value": a(b),
               size: e.size,
               onReset: G
@@ -339,17 +337,17 @@ const de = ["data-testid"], E = /* @__PURE__ */ v({
               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, {
+            e.charCounter && e.maxLength && [a(o).Email, a(o).None, a(o).Text, a(o).Url].includes(e.type) ? (n(), m(ne, {
               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,
+              layout: a(ue).Inline,
               size: e.size
             }, null, 8, ["color", "current-length", "max-length", "layout", "size"])) : g("", !0)
           ], 2)
-        ], 10, fe),
+        ], 14, me),
         e.pill && e.label && e.orientation === a(B).Horizontal ? (n(), p("span", {
           key: 0,
           class: x(`${t}__spacer`)
@@ -359,7 +357,7 @@ const de = ["data-testid"], E = /* @__PURE__ */ v({
           label: e.pill,
           color: e.color
         }, null, 8, ["label", "color"])) : g("", !0),
-        e.id ? (n(), m(ae, {
+        e.id ? (n(), m(ie, {
           key: 2,
           id: e.id,
           messages: e.messages,
@@ -369,7 +367,7 @@ const de = ["data-testid"], E = /* @__PURE__ */ v({
       _: 1
     }, 8, ["fluid", "has-pill", "has-char-counter", "orientation"]));
   }
-}), V = xe;
+}), V = ye;
 V.Prefix = E;
 V.Suffix = O;
 V.Pill = U;

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

@@ -86,14 +86,14 @@ declare const _default: import('vue').DefineComponent<{
 }>, {
     color: CLColors;
     variant: CLColorVariants.Outline | CLColorVariants.Ghost;
-    form: string;
-    label: string;
-    pattern: string;
     borderRadius: CLBorderRadius;
     fluid: boolean;
     rounded: boolean;
     testId: string;
     type: CLInputTypes;
+    form: string;
+    label: string;
+    pattern: string;
     onFocus: CLGenericFocusFunction;
     onBlur: CLGenericFocusFunction;
     onChange: CLGenericFunction;

package/dist/components/Form/CLRadioButton/CLRadioButton.css

@@ -1 +1 @@
-.clll-radiobutton{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;align-items:flex-start;flex-direction:column;overflow:visible}.clll-radiobutton .clll-radiobutton__label{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;overflow:visible;text-align:left;user-select:none;cursor:pointer}.clll-radiobutton .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-radiobutton .clll-radiobutton__radiobutton-container{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;overflow:visible}.clll-radiobutton .clll-radiobutton__radiobutton-container .clll-radiobutton__radiobutton-frame .clll-radiobutton__radiobutton:not(:checked)+.clll-radiobutton__indicator{display:none}.clll-radiobutton .clll-radiobutton__indicator{position:absolute;display:inline-flex;background-color:#fff}.clll-radiobutton .clll-radiobutton__radiobutton{display:inline-block;appearance:none;border-width:1px;cursor:pointer}.clll-radiobutton.clll-radiobutton--rounded .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-full)}.clll-radiobutton.clll-radiobutton--rounded:not(.clll-radiobutton--rounded-none) .clll-radiobutton__indicator{border-radius:var(--clll-rounded-full)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-full .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-full)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-lg .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-lg)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-md .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-md)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-sm .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-sm)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-xs .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-xs)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-xl .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-xl)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-2xl .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-2xl)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-3xl .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-3xl)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-none .clll-radiobutton__radiobutton{border-radius:0}.clll-radiobutton.clll-radiobutton--tiny .clll-radiobutton__radiobutton-container .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-1_5)}.clll-radiobutton.clll-radiobutton--tiny .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-checkbox__checkbox,.clll-radiobutton.clll-radiobutton--tiny .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton{width:var(--clll-unit-4);height:var(--clll-unit-4)}.clll-radiobutton.clll-radiobutton--tiny .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__indicator{width:var(--clll-unit-1_5);height:var(--clll-unit-1_5)}.clll-radiobutton.clll-radiobutton--small .clll-radiobutton__radiobutton-container .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-radiobutton.clll-radiobutton--small .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-checkbox__checkbox,.clll-radiobutton.clll-radiobutton--small .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton{width:var(--clll-unit-5);height:var(--clll-unit-5)}.clll-radiobutton.clll-radiobutton--small .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__indicator{width:var(--clll-unit-2);height:var(--clll-unit-2)}.clll-radiobutton.clll-radiobutton--medium .clll-radiobutton__radiobutton-container .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2_5)}.clll-radiobutton.clll-radiobutton--medium .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-checkbox__checkbox,.clll-radiobutton.clll-radiobutton--medium .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton{width:var(--clll-unit-6);height:var(--clll-unit-6)}.clll-radiobutton.clll-radiobutton--medium .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__indicator{width:var(--clll-unit-2_5);height:var(--clll-unit-2_5)}.clll-radiobutton.clll-radiobutton--large .clll-radiobutton__radiobutton-container .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3)}.clll-radiobutton.clll-radiobutton--large .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-checkbox__checkbox,.clll-radiobutton.clll-radiobutton--large .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton{width:var(--clll-unit-7);height:var(--clll-unit-7)}.clll-radiobutton.clll-radiobutton--large .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__indicator{width:var(--clll-unit-3);height:var(--clll-unit-3)}.clll-radiobutton.clll-radiobutton--xlarge .clll-radiobutton__radiobutton-container .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3)}.clll-radiobutton.clll-radiobutton--xlarge .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-checkbox__checkbox,.clll-radiobutton.clll-radiobutton--xlarge .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton{width:var(--clll-unit-8);height:var(--clll-unit-8)}.clll-radiobutton.clll-radiobutton--xlarge .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__indicator{width:var(--clll-unit-3_5);height:var(--clll-unit-3_5)}
+.clll-radiobutton{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;align-items:flex-start;flex-direction:column;overflow:visible}.clll-radiobutton.clll-radiobutton--haslabel .clll-radiobutton__label .clll-text.clll-radiobutton__label--required:after{position:relative;top:var(--clll-unit-1);content:"*";font-size:var(--clll-unit-4_5);font-weight:500;font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;color:var(--clll-checkbox-required-asterisk-color, red);text-decoration:unset;margin-inline-start:var(--clll-unit-0_5);box-sizing:content-box;line-height:0}.clll-radiobutton .clll-radiobutton__label{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;overflow:visible;text-align:left;user-select:none;cursor:pointer}.clll-radiobutton .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-radiobutton .clll-radiobutton__radiobutton-container{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;overflow:visible}.clll-radiobutton .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton-frame .clll-radiobutton__radiobutton:not(:checked)+.clll-radiobutton__indicator{display:none}.clll-radiobutton .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton-frame .clll-radiobutton__radiobutton:focus-visible{outline-color:var(--clll-checkbox-focus-border, transparent);outline-style:solid;outline-width:var(--clll-checkbox-outline-width, 2px);box-shadow:0 0 0 var(--clll-unit-0) var(--clll-checkbox-focus-shadow, transparent);outline-offset:-1px}.clll-radiobutton .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton-frame .clll-radiobutton__radiobutton:checked{background-color:var(--clll-checkbox-checked-bg, white)}.clll-radiobutton .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton-frame .clll-radiobutton__radiobutton:disabled:checked{background-color:var(--clll-checkbox-disabled-bg, transparent)}.clll-radiobutton .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton-frame .clll-radiobutton__radiobutton:disabled:focus-visible{outline-color:var(--clll-checkbox-disabled-border, transparent);outline-style:solid;outline-width:var(--clll-checkbox-outline-width, 2px);box-shadow:0 0 0 var(--clll-unit-0) var(--clll-checkbox-focus-shadow, transparent);outline-offset:-1px}.clll-radiobutton .clll-radiobutton__indicator{position:absolute;display:inline-flex;background-color:var(--clll-checkbox-indicator-color, inherit)}.clll-radiobutton .clll-radiobutton__radiobutton{display:inline-block;appearance:none;border-width:1px;cursor:pointer;background-color:var(--clll-checkbox-bg, white);border-color:var(--clll-checkbox-border, transparent);border-style:solid;margin:0}.clll-radiobutton.clll-radiobutton--disabled .clll-radiobutton__radiobutton-container .clll-radiobutton__label{cursor:not-allowed}.clll-radiobutton.clll-radiobutton--disabled .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton-frame .clll-radiobutton__indicator{background-color:var(--clll-checkbox-disabled-indicator-color, transparent)}.clll-radiobutton.clll-radiobutton--rounded .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-full)}.clll-radiobutton.clll-radiobutton--rounded:not(.clll-radiobutton--rounded-none) .clll-radiobutton__indicator{border-radius:var(--clll-rounded-full)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-full .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-full)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-lg .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-lg)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-md .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-md)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-sm .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-sm)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-xs .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-xs)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-xl .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-xl)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-2xl .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-2xl)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-3xl .clll-radiobutton__radiobutton{border-radius:var(--clll-rounded-3xl)}.clll-radiobutton.clll-radiobutton--rounded.clll-radiobutton--rounded-none .clll-radiobutton__radiobutton{border-radius:0}.clll-radiobutton.clll-radiobutton--rounded:not([class*=clll-radiobutton--rounded-]).clll-radiobutton--rounded .clll-radiobutton__radiobutton{border-radius:var(--clll-checkbox-theme-radius, var(--clll-rounded-full))}.clll-radiobutton.clll-radiobutton--rounded:not([class*=clll-radiobutton--rounded-]).clll-radiobutton--rounded .clll-radiobutton__indicator{border-radius:var(--clll-checkbox-theme-radius, var(--clll-rounded-full))}.clll-radiobutton.clll-radiobutton--tiny .clll-radiobutton__radiobutton-container .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-1_5)}.clll-radiobutton.clll-radiobutton--tiny .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-checkbox__checkbox,.clll-radiobutton.clll-radiobutton--tiny .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton{width:var(--clll-unit-4);height:var(--clll-unit-4)}.clll-radiobutton.clll-radiobutton--tiny .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__indicator{width:var(--clll-unit-1_5);height:var(--clll-unit-1_5)}.clll-radiobutton.clll-radiobutton--small .clll-radiobutton__radiobutton-container .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-radiobutton.clll-radiobutton--small .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-checkbox__checkbox,.clll-radiobutton.clll-radiobutton--small .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton{width:var(--clll-unit-5);height:var(--clll-unit-5)}.clll-radiobutton.clll-radiobutton--small .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__indicator{width:var(--clll-unit-2);height:var(--clll-unit-2)}.clll-radiobutton.clll-radiobutton--medium .clll-radiobutton__radiobutton-container .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2_5)}.clll-radiobutton.clll-radiobutton--medium .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-checkbox__checkbox,.clll-radiobutton.clll-radiobutton--medium .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton{width:var(--clll-unit-6);height:var(--clll-unit-6)}.clll-radiobutton.clll-radiobutton--medium .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__indicator{width:var(--clll-unit-2_5);height:var(--clll-unit-2_5)}.clll-radiobutton.clll-radiobutton--large .clll-radiobutton__radiobutton-container .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3)}.clll-radiobutton.clll-radiobutton--large .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-checkbox__checkbox,.clll-radiobutton.clll-radiobutton--large .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton{width:var(--clll-unit-7);height:var(--clll-unit-7)}.clll-radiobutton.clll-radiobutton--large .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__indicator{width:var(--clll-unit-3);height:var(--clll-unit-3)}.clll-radiobutton.clll-radiobutton--xlarge .clll-radiobutton__radiobutton-container .clll-radiobutton__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3)}.clll-radiobutton.clll-radiobutton--xlarge .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-checkbox__checkbox,.clll-radiobutton.clll-radiobutton--xlarge .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__radiobutton{width:var(--clll-unit-8);height:var(--clll-unit-8)}.clll-radiobutton.clll-radiobutton--xlarge .clll-radiobutton__radiobutton-container .clll-radiobutton__label .clll-radiobutton__indicator{width:var(--clll-unit-3_5);height:var(--clll-unit-3_5)}

package/dist/components/Form/CLRadioButton/CLRadioButton.js

@@ -1,11 +1,11 @@
 import '../../../assets/core.css';
 import './CLRadioButton.css';
 import '../../../assets/shared/form-utilities.css';
-import { defineComponent as k, mergeModels as x, useModel as T, useTemplateRef as h, computed as f, createBlock as m, openBlock as c, withCtx as $, createElementVNode as n, createCommentVNode as y, normalizeClass as d, unref as u, withDirectives as R, vModelRadio as q, createTextVNode as V, toDisplayString as M } from "vue";
-import { _ as S, c as z, a as F } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-BNGT0om7.js";
-import { _ as N } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-Cz9Sv2AC.js";
-import { CLSizes as s, CLTextTypes as i, CLColorVariants as w, CLColors as D } from "../../../index.js";
-const I = ["data-testid"], X = ["for"], E = ["id", "aria-label", "checked", "disabled", "name", "value", "required"], A = /* @__PURE__ */ k({
+import { defineComponent as k, mergeModels as x, useModel as T, useTemplateRef as h, computed as f, createBlock as m, openBlock as c, withCtx as y, createElementVNode as s, createCommentVNode as $, normalizeStyle as R, normalizeClass as d, unref as u, withDirectives as q, vModelRadio as S, createTextVNode as V, toDisplayString as z } from "vue";
+import { _ as M, c as F, a as N } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-Bt5xgOT4.js";
+import { _ as w } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-BJoS9z9q.js";
+import { CLSizes as n, CLTextTypes as i, CLColorVariants as D, CLColors as I } from "../../../index.js";
+const X = ["data-testid"], E = ["for"], H = ["id", "aria-label", "checked", "disabled", "name", "value", "required"], G = /* @__PURE__ */ k({
   name: "CLRadioButton",
   __name: "CLRadioButton",
   props: /* @__PURE__ */ x({
@@ -13,7 +13,7 @@ const I = ["data-testid"], X = ["for"], E = ["id", "aria-label", "checked", "dis
     borderRadius: {},
     busy: { type: Boolean },
     checked: { type: Boolean },
-    color: { default: D.Neutral },
+    color: { default: I.Neutral },
     disabled: { type: Boolean },
     form: {},
     id: {},
@@ -23,10 +23,10 @@ const I = ["data-testid"], X = ["for"], E = ["id", "aria-label", "checked", "dis
     name: {},
     required: { type: Boolean },
     rounded: { type: Boolean, default: !0 },
-    size: { default: s.Small },
+    size: { default: n.Small },
     testId: { default: "clll-radiobutton" },
     value: { type: [String, Number, Boolean] },
-    variant: { default: w.Outline },
+    variant: { default: D.Outline },
     onBlur: {},
     onChange: {},
     onFocus: {}
@@ -37,11 +37,11 @@ const I = ["data-testid"], X = ["for"], E = ["id", "aria-label", "checked", "dis
   emits: ["update:modelValue"],
   setup(e, { expose: C }) {
     const g = {
-      [s.Tiny]: i.Small,
-      [s.Small]: i.Medium,
-      [s.Medium]: i.Medium,
-      [s.Large]: i.Large,
-      [s.XL]: i.XL
+      [n.Tiny]: i.Small,
+      [n.Small]: i.Medium,
+      [n.Medium]: i.Medium,
+      [n.Large]: i.Large,
+      [n.XL]: i.XL
     }, l = e, a = "clll-radiobutton", b = T(e, "modelValue"), r = h("radiobutton-ref"), v = () => {
       r.value && r.value.focus();
     }, B = f(() => [
@@ -61,24 +61,25 @@ const I = ["data-testid"], X = ["for"], E = ["id", "aria-label", "checked", "dis
     ]);
     return C({
       radiobuttonRef: r
-    }), (H, t) => (c(), m(S, null, {
-      default: $(() => [
-        n("span", {
-          class: d([u(B), u(z)({ color: e.color, component: "radiobutton", disabled: e.disabled || e.busy, variant: e.variant })]),
+    }), (O, t) => (c(), m(M, null, {
+      default: y(() => [
+        s("span", {
+          class: d(u(B)),
+          style: R(u(F)({ color: e.color, disabled: e.disabled || e.busy, variant: e.variant })),
           "data-testid": e.testId
         }, [
-          n("span", {
+          s("span", {
             class: d(u(L)),
             onClick: v
           }, [
-            n("label", {
+            s("label", {
               for: e.id,
               class: d(`${a}__label`)
             }, [
-              n("span", {
+              s("span", {
                 class: d([`${a}__radiobutton-frame`, "form-control-flex"])
               }, [
-                R(n("input", {
+                q(s("input", {
                   id: e.id,
                   ref: "radiobutton-ref",
                   "onUpdate:modelValue": t[0] || (t[0] = (o) => b.value = o),
@@ -96,39 +97,39 @@ const I = ["data-testid"], X = ["for"], E = ["id", "aria-label", "checked", "dis
                   (...o) => e.onChange && e.onChange(...o)),
                   onFocus: t[3] || (t[3] = //@ts-ignore
                   (...o) => e.onFocus && e.onFocus(...o))
-                }, null, 42, E), [
-                  [q, b.value]
+                }, null, 42, H), [
+                  [S, b.value]
                 ]),
-                n("span", {
+                s("span", {
                   class: d(`${a}__indicator`)
                 }, null, 2)
               ], 2),
-              e.label ? (c(), m(u(N), {
+              e.label ? (c(), m(u(w), {
                 key: 0,
                 as: "span",
                 type: g[e.size],
                 class: d(e.required ? `${a}__label--required` : "")
               }, {
-                default: $(() => [
-                  V(M(e.label), 1)
+                default: y(() => [
+                  V(z(e.label), 1)
                 ]),
                 _: 1
-              }, 8, ["type", "class"])) : y("", !0)
-            ], 10, X)
+              }, 8, ["type", "class"])) : $("", !0)
+            ], 10, E)
           ], 2)
-        ], 10, I),
-        e.id ? (c(), m(F, {
+        ], 14, X),
+        e.id ? (c(), m(N, {
           key: 0,
           id: e.id,
           messages: e.messages,
           "message-type": e.messageType
-        }, null, 8, ["id", "messages", "message-type"])) : y("", !0)
+        }, null, 8, ["id", "messages", "message-type"])) : $("", !0)
       ]),
       _: 1
     }));
   }
 });
 export {
-  A as CLRadioButton,
-  A as default
+  G as CLRadioButton,
+  G as default
 };

package/dist/components/Form/CLSelect/CLSelect.css

@@ -1 +1 @@
-.clll-select{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-select.clll-select--haslabel .clll-select__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-1)}.clll-select .clll-select__select-container{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;overflow:visible}.clll-select .clll-select__select-container .clll-select__select{display:inline-block;appearance:none;font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased}.clll-select .clll-select__icon{pointer-events:none}.clll-select.clll-select--rounded .clll-select__select-container,.clll-select.clll-select--rounded .clll-select__select{border-radius:var(--clll-rounded-xs)}.clll-select.clll-select--rounded.clll-select--rounded-full .clll-select__select-container{border-radius:var(--clll-rounded-full)}.clll-select.clll-select--rounded.clll-select--rounded-lg .clll-select__select-container{border-radius:var(--clll-rounded-lg)}.clll-select.clll-select--rounded.clll-select--rounded-md .clll-select__select-container{border-radius:var(--clll-rounded-md)}.clll-select.clll-select--rounded.clll-select--rounded-sm .clll-select__select-container{border-radius:var(--clll-rounded-sm)}.clll-select.clll-select--rounded.clll-select--rounded-xs .clll-select__select-container{border-radius:var(--clll-rounded-xs)}.clll-select.clll-select--rounded.clll-select--rounded-xl .clll-select__select-container{border-radius:var(--clll-rounded-xl)}.clll-select.clll-select--rounded.clll-select--rounded-2xl .clll-select__select-container{border-radius:var(--clll-rounded-2xl)}.clll-select.clll-select--rounded.clll-select--rounded-3xl .clll-select__select-container{border-radius:var(--clll-rounded-3xl)}.clll-select.clll-select--rounded.clll-select--rounded-none .clll-select__select-container{border-radius:0}.clll-select.clll-select--rounded.clll-select--rounded-full .clll-select__select{border-radius:var(--clll-rounded-full)}.clll-select.clll-select--rounded.clll-select--rounded-lg .clll-select__select{border-radius:var(--clll-rounded-lg)}.clll-select.clll-select--rounded.clll-select--rounded-md .clll-select__select{border-radius:var(--clll-rounded-md)}.clll-select.clll-select--rounded.clll-select--rounded-sm .clll-select__select{border-radius:var(--clll-rounded-sm)}.clll-select.clll-select--rounded.clll-select--rounded-xs .clll-select__select{border-radius:var(--clll-rounded-xs)}.clll-select.clll-select--rounded.clll-select--rounded-xl .clll-select__select{border-radius:var(--clll-rounded-xl)}.clll-select.clll-select--rounded.clll-select--rounded-2xl .clll-select__select{border-radius:var(--clll-rounded-2xl)}.clll-select.clll-select--rounded.clll-select--rounded-3xl .clll-select__select{border-radius:var(--clll-rounded-3xl)}.clll-select.clll-select--rounded.clll-select--rounded-none .clll-select__select{border-radius:0}.clll-select.clll-select--tiny .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5);padding:var(--clll-py-xs) var(--clll-px-xs);padding-right:var(--clll-unit-5)}.clll-select.clll-select--tiny .clll-select__select-container .clll-select__icon{padding-right:var(--clll-unit-1)}.clll-select.clll-select--small .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6);padding:var(--clll-py-sm) var(--clll-px-sm);padding-right:var(--clll-unit-7)}.clll-select.clll-select--small .clll-select__select-container .clll-select__icon{padding-right:var(--clll-unit-2)}.clll-select.clll-select--medium .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5);padding:var(--clll-py-md) var(--clll-px-md);padding-right:var(--clll-unit-10)}.clll-select.clll-select--medium .clll-select__select-container .clll-select__icon{padding-right:var(--clll-unit-3)}.clll-select.clll-select--large .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7);padding:var(--clll-py-lg) var(--clll-px-lg);padding-right:var(--clll-unit-14)}.clll-select.clll-select--large .clll-select__select-container .clll-select__icon{padding-right:var(--clll-unit-3_5)}.clll-select.clll-select--xlarge .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5);padding:var(--clll-py-xl) var(--clll-px-xl);padding-right:var(--clll-unit-18)}.clll-select.clll-select--xlarge .clll-select__select-container .clll-select__icon{padding-right:var(--clll-unit-4)}.clll-select.clll-select--fluid,.clll-select.clll-select--fluid .clll-select__select-container,.clll-select.clll-select--fluid .clll-select__select-container .clll-select__select{width:100%}.clll-select.clll-select--vertical{flex-direction:column}.clll-select.clll-select--vertical.clll-select--haslabel>:not([hidden])~:not([hidden]){margin-top:var(--clll-unit-1_5)}.clll-select.clll-select--horizontal.clll-select--haslabel{flex-direction:row;align-items:center;flex-wrap:wrap}.clll-select.clll-select--horizontal.clll-select--haslabel .clll-select__label,.clll-select.clll-select--horizontal.clll-select--haslabel .clll-select__select-container{width:50%}.clll-select.clll-select--hidden{display:none}
+.clll-select{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-select.clll-select--haslabel .clll-select__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-1)}.clll-select.clll-select--haslabel .clll-select__label .clll-text.clll-select__label--required:after{position:relative;top:var(--clll-unit-1);content:"*";font-size:var(--clll-unit-4_5);font-weight:500;font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;color:var(--clll-select-required-asterisk-color, red);text-decoration:unset;margin-inline-start:var(--clll-unit-0_5);box-sizing:content-box;line-height:0}.clll-select .clll-select__select-container{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;overflow:visible}.clll-select .clll-select__select-container:focus-within{outline-color:var(--clll-select-focus-border, transparent);outline-style:solid;outline-width:2px;outline-offset:-1px}.clll-select .clll-select__select-container .clll-select__select{display:inline-block;appearance:none;background-color:var(--clll-select-bg, white);border-color:var(--clll-select-border, transparent);border-style:solid;border-width:1px;color:var(--clll-select-text, inherit);margin:0;font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased}.clll-select .clll-select__select-container .clll-select__select::placeholder{color:var(--clll-select-text-placeholder, transparent)}.clll-select .clll-select__select-container .clll-select__select:focus{outline-color:var(--clll-select-focus-border, transparent);outline-style:solid;outline-width:2px;box-shadow:0 0 0 var(--clll-unit-0) var(--clll-select-focus-shadow, transparent);outline-offset:-1px}.clll-select .clll-select__select-container .clll-select__select:disabled{border-color:var(--clll-select-disabled-border, transparent);background-color:var(--clll-select-disabled-bg, transparent);color:var(--clll-select-text-placeholder, transparent)}.clll-select .clll-select__select-container .clll-select__select:disabled::placeholder{color:var(--clll-select-text-placeholder, transparent)}.clll-select .clll-select__icon{pointer-events:none}.clll-select .clll-select__icon .clll-icon{color:var(--clll-select-icon-color, inherit)}.clll-select.clll-select--disabled{cursor:default}.clll-select.clll-select--disabled .clll-select__select-container{border-color:var(--clll-select-disabled-border, transparent)}.clll-select.clll-select--disabled .clll-select__icon .clll-icon{color:var(--clll-select-disabled-icon-color, transparent)}.clll-select.clll-select--ghost .clll-select__select-container,.clll-select.clll-select--ghost .clll-select__select{background-color:transparent;border:0;padding-left:var(--clll-select-ghost-padding, 0);padding-top:var(--clll-select-ghost-padding, 0);padding-bottom:var(--clll-select-ghost-padding, 0);border-radius:0}.clll-select.clll-select--ghost .clll-select__select-container:focus,.clll-select.clll-select--ghost .clll-select__select-container:focus-within,.clll-select.clll-select--ghost .clll-select__select:focus,.clll-select.clll-select--ghost .clll-select__select:focus-within{outline:none}.clll-select.clll-select--rounded:not(.clll-select--ghost) .clll-select__select-container,.clll-select.clll-select--rounded:not(.clll-select--ghost) .clll-select__select{border-radius:var(--clll-rounded-xs)}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-full .clll-select__select-container{border-radius:var(--clll-rounded-full)}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-lg .clll-select__select-container{border-radius:var(--clll-rounded-lg)}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-md .clll-select__select-container{border-radius:var(--clll-rounded-md)}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-sm .clll-select__select-container{border-radius:var(--clll-rounded-sm)}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-xs .clll-select__select-container{border-radius:var(--clll-rounded-xs)}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-xl .clll-select__select-container{border-radius:var(--clll-rounded-xl)}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-2xl .clll-select__select-container{border-radius:var(--clll-rounded-2xl)}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-3xl .clll-select__select-container{border-radius:var(--clll-rounded-3xl)}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-none .clll-select__select-container{border-radius:0}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-full .clll-select__select{border-radius:var(--clll-rounded-full)}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-lg .clll-select__select{border-radius:var(--clll-rounded-lg)}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-md .clll-select__select{border-radius:var(--clll-rounded-md)}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-sm .clll-select__select{border-radius:var(--clll-rounded-sm)}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-xs .clll-select__select{border-radius:var(--clll-rounded-xs)}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-xl .clll-select__select{border-radius:var(--clll-rounded-xl)}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-2xl .clll-select__select{border-radius:var(--clll-rounded-2xl)}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-3xl .clll-select__select{border-radius:var(--clll-rounded-3xl)}.clll-select.clll-select--rounded:not(.clll-select--ghost).clll-select--rounded-none .clll-select__select{border-radius:0}.clll-select.clll-select--rounded:not(.clll-select--ghost):not([class*=clll-select--rounded-]).clll-select--rounded .clll-select__select-container,.clll-select.clll-select--rounded:not(.clll-select--ghost):not([class*=clll-select--rounded-]).clll-select--rounded .clll-select__select{border-radius:var(--clll-select-theme-radius, var(--clll-rounded-xs))}.clll-select.clll-select--rounded.clll-select--ghost .clll-select__select-container,.clll-select.clll-select--rounded.clll-select--ghost .clll-select__select{border-radius:0}.clll-select.clll-select--tiny:not(.clll-select--ghost) .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5);padding:var(--clll-py-xs) var(--clll-unit-6) var(--clll-py-xs) var(--clll-px-xs)}.clll-select.clll-select--tiny.clll-select--ghost .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5)}.clll-select.clll-select--tiny .clll-select__select-container .clll-select__select{padding-right:var(--clll-unit-6)}.clll-select.clll-select--tiny .clll-select__select-container .clll-select__icon{padding-right:var(--clll-unit-1)}.clll-select.clll-select--small:not(.clll-select--ghost) .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6);padding:var(--clll-py-sm) var(--clll-unit-7) var(--clll-py-sm) var(--clll-px-sm)}.clll-select.clll-select--small.clll-select--ghost .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6)}.clll-select.clll-select--small .clll-select__select-container .clll-select__select{padding-right:var(--clll-unit-7)}.clll-select.clll-select--small .clll-select__select-container .clll-select__icon{padding-right:var(--clll-unit-2)}.clll-select.clll-select--medium:not(.clll-select--ghost) .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5);padding:var(--clll-py-md) var(--clll-unit-10) var(--clll-py-md) var(--clll-px-md)}.clll-select.clll-select--medium.clll-select--ghost .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5)}.clll-select.clll-select--medium .clll-select__select-container .clll-select__select{padding-right:var(--clll-unit-10)}.clll-select.clll-select--medium .clll-select__select-container .clll-select__icon{padding-right:var(--clll-unit-3)}.clll-select.clll-select--large:not(.clll-select--ghost) .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7);padding:var(--clll-py-lg) var(--clll-unit-14) var(--clll-py-lg) var(--clll-px-lg)}.clll-select.clll-select--large.clll-select--ghost .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7)}.clll-select.clll-select--large .clll-select__select-container .clll-select__select{padding-right:var(--clll-unit-14)}.clll-select.clll-select--large .clll-select__select-container .clll-select__icon{padding-right:var(--clll-unit-3_5)}.clll-select.clll-select--xlarge:not(.clll-select--ghost) .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5);padding:var(--clll-py-xl) var(--clll-unit-18) var(--clll-py-xl) var(--clll-px-xl)}.clll-select.clll-select--xlarge.clll-select--ghost .clll-select__select-container .clll-select__select{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5)}.clll-select.clll-select--xlarge .clll-select__select-container .clll-select__select{padding-right:var(--clll-unit-18)}.clll-select.clll-select--xlarge .clll-select__select-container .clll-select__icon{padding-right:var(--clll-unit-4)}.clll-select.clll-select--fluid,.clll-select.clll-select--fluid .clll-select__select-container,.clll-select.clll-select--fluid .clll-select__select-container .clll-select__select{width:100%}.clll-select.clll-select--vertical{flex-direction:column}.clll-select.clll-select--vertical.clll-select--haslabel>:not([hidden])~:not([hidden]){margin-top:var(--clll-unit-1_5)}.clll-select.clll-select--horizontal.clll-select--haslabel{flex-direction:row;align-items:center;flex-wrap:wrap}.clll-select.clll-select--horizontal.clll-select--haslabel .clll-select__label,.clll-select.clll-select--horizontal.clll-select--haslabel .clll-select__select-container{width:50%}.clll-select.clll-select--hidden{display:none}

package/dist/components/Form/CLSelect/CLSelect.js

@@ -1,19 +1,19 @@
 import '../../../assets/core.css';
 import './CLSelect.css';
 import '../../../assets/shared/form-utilities.css';
-import { defineComponent as B, mergeModels as h, useModel as S, useTemplateRef as q, computed as x, createBlock as f, openBlock as o, withCtx as T, createElementVNode as d, createCommentVNode as b, normalizeClass as r, unref as u, withDirectives as V, createElementBlock as $, Fragment as k, renderList as M, toDisplayString as F, vModelSelect as I, createVNode as N } from "vue";
-import { _ as R, s as D, a as w } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-BNGT0om7.js";
-import { _ as E } from "../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-Cw3nPc64.js";
-import { _ as H } from "../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-BaCl5yQI.js";
-import { CLSizes as n, CLIconSizes as s, CLOrientation as y, CLIconNames as O, CLColorVariants as P, CLColors as U } from "../../../index.js";
-const X = ["data-testid"], j = ["id", "aria-label", "disabled", "name", "placeholder", "form", "required"], A = ["value", "selected", "disabled"], Z = /* @__PURE__ */ B({
+import { defineComponent as B, mergeModels as S, useModel as h, useTemplateRef as q, computed as x, createBlock as f, openBlock as s, withCtx as T, createElementVNode as d, createCommentVNode as b, normalizeStyle as V, normalizeClass as r, unref as u, withDirectives as k, createElementBlock as $, Fragment as M, renderList as F, toDisplayString as I, vModelSelect as N, createVNode as R } from "vue";
+import { _ as D, s as w, a as E } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-Bt5xgOT4.js";
+import { _ as H } from "../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-CaHCD2xF.js";
+import { _ as O } from "../../../chunks/CLIcon.vue_vue_type_style_index_0_lang--1FTkRVd.js";
+import { CLSizes as n, CLIconSizes as o, CLOrientation as y, CLIconNames as P, CLColorVariants as U, CLColors as X } from "../../../index.js";
+const j = ["data-testid"], A = ["id", "aria-label", "disabled", "name", "placeholder", "form", "required"], G = ["value", "selected", "disabled"], p = /* @__PURE__ */ B({
   name: "CLSelect",
   __name: "CLSelect",
-  props: /* @__PURE__ */ h({
+  props: /* @__PURE__ */ S({
     ariaLabel: {},
     borderRadius: {},
     busy: { type: Boolean },
-    color: { default: U.Neutral },
+    color: { default: X.Neutral },
     disabled: { type: Boolean },
     fluid: { type: Boolean, default: !1 },
     form: {},
@@ -32,7 +32,7 @@ const X = ["data-testid"], j = ["id", "aria-label", "disabled", "name", "placeho
     rounded: { type: Boolean, default: !0 },
     size: { default: n.Small },
     testId: { default: "clll-select" },
-    variant: { default: P.Outline }
+    variant: { default: U.Outline }
   }, {
     modelValue: {},
     modelModifiers: {}
@@ -40,14 +40,14 @@ const X = ["data-testid"], j = ["id", "aria-label", "disabled", "name", "placeho
   emits: ["update:modelValue"],
   setup(e, { expose: C }) {
     const g = {
-      [n.Tiny]: s.Tiny,
-      [n.Small]: s.Tiny,
-      [n.Medium]: s.Small,
-      [n.Large]: s.Medium,
-      [n.XL]: s.Medium
-    }, a = e, l = "clll-select", m = S(e, "modelValue"), c = q("select-ref"), v = () => {
+      [n.Tiny]: o.Tiny,
+      [n.Small]: o.Tiny,
+      [n.Medium]: o.Small,
+      [n.Large]: o.Medium,
+      [n.XL]: o.Medium
+    }, a = e, l = "clll-select", m = h(e, "modelValue"), c = q("select-ref"), v = () => {
       c.value && c.value.focus();
-    }, L = x(() => [
+    }, z = x(() => [
       l,
       a.borderRadius ? `${l}--${a.borderRadius}` : "",
       a.busy ? `${l}--busy` : `${l}--ready`,
@@ -64,16 +64,17 @@ const X = ["data-testid"], j = ["id", "aria-label", "disabled", "name", "placeho
     ]);
     return C({
       selectRef: c
-    }), (G, i) => (o(), f(R, {
+    }), (J, i) => (s(), f(D, {
       fluid: e.fluid,
       orientation: e.orientation
     }, {
       default: T(() => [
         d("span", {
-          class: r([u(L), u(D)({ color: e.color, component: "input", disabled: e.disabled || e.busy, variant: e.variant })]),
+          class: r(u(z)),
+          style: V(u(w)({ color: e.color, disabled: e.disabled || e.busy, variant: e.variant })),
           "data-testid": e.testId
         }, [
-          e.label ? (o(), f(E, {
+          e.label ? (s(), f(H, {
             key: 0,
             "css-prefix": l,
             "html-for": e.id,
@@ -85,7 +86,7 @@ const X = ["data-testid"], j = ["id", "aria-label", "disabled", "name", "placeho
             class: r(`${l}__select-container`),
             onClick: v
           }, [
-            V(d("select", {
+            k(d("select", {
               id: e.id,
               ref: "select-ref",
               "onUpdate:modelValue": i[0] || (i[0] = (t) => m.value = t),
@@ -103,26 +104,26 @@ const X = ["data-testid"], j = ["id", "aria-label", "disabled", "name", "placeho
               onFocus: i[3] || (i[3] = //@ts-ignore
               (...t) => e.onFocus && e.onFocus(...t))
             }, [
-              e.options ? (o(!0), $(k, { key: 0 }, M(e.options, (t, z) => (o(), $("option", {
-                key: `${e.id}-option-${z}`,
+              e.options ? (s(!0), $(M, { key: 0 }, F(e.options, (t, L) => (s(), $("option", {
+                key: `${e.id}-option-${L}`,
                 value: t.value,
                 selected: t.value === m.value,
                 disabled: t.disabled
-              }, F(t.label), 9, A))), 128)) : b("", !0)
-            ], 42, j), [
-              [I, m.value]
+              }, I(t.label), 9, G))), 128)) : b("", !0)
+            ], 42, A), [
+              [N, m.value]
             ]),
             d("span", {
               class: r([`${l}__icon`, "form-select-icon-flex"])
             }, [
-              N(u(H), {
-                name: u(O).ChevronDown,
+              R(u(O), {
+                name: u(P).ChevronDown,
                 size: g[e.size]
               }, null, 8, ["name", "size"])
             ], 2)
           ], 2)
-        ], 10, X),
-        e.id ? (o(), f(w, {
+        ], 14, j),
+        e.id ? (s(), f(E, {
           key: 0,
           id: e.id,
           messages: e.messages,
@@ -134,6 +135,6 @@ const X = ["data-testid"], j = ["id", "aria-label", "disabled", "name", "placeho
   }
 });
 export {
-  Z as CLSelect,
-  Z as default
+  p as CLSelect,
+  p as default
 };

package/dist/components/Form/CLTextArea/CLTextArea.css

@@ -1 +1 @@
-.clll-textarea{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;flex-direction:column;align-items:flex-start;overflow:visible}.clll-textarea .clll-textarea__input-container{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;overflow:visible}.clll-textarea .clll-textarea__input{resize:none;display:inline-block;appearance:none;background-color:#fff;font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased}.clll-textarea.clll-textarea--resizable .clll-textarea__input{resize:both}.clll-textarea.clll-textarea--rounded .clll-textarea__input-container,.clll-textarea.clll-textarea--rounded .clll-textarea__input{border-radius:var(--clll-rounded-xs)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-full .clll-textarea__input-container{border-radius:var(--clll-rounded-full)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-lg .clll-textarea__input-container{border-radius:var(--clll-rounded-lg)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-md .clll-textarea__input-container{border-radius:var(--clll-rounded-md)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-sm .clll-textarea__input-container{border-radius:var(--clll-rounded-sm)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-xs .clll-textarea__input-container{border-radius:var(--clll-rounded-xs)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-xl .clll-textarea__input-container{border-radius:var(--clll-rounded-xl)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-2xl .clll-textarea__input-container{border-radius:var(--clll-rounded-2xl)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-3xl .clll-textarea__input-container{border-radius:var(--clll-rounded-3xl)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-none .clll-textarea__input-container{border-radius:0}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-full .clll-textarea__input{border-radius:var(--clll-rounded-full)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-lg .clll-textarea__input{border-radius:var(--clll-rounded-lg)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-md .clll-textarea__input{border-radius:var(--clll-rounded-md)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-sm .clll-textarea__input{border-radius:var(--clll-rounded-sm)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-xs .clll-textarea__input{border-radius:var(--clll-rounded-xs)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-xl .clll-textarea__input{border-radius:var(--clll-rounded-xl)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-2xl .clll-textarea__input{border-radius:var(--clll-rounded-2xl)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-3xl .clll-textarea__input{border-radius:var(--clll-rounded-3xl)}.clll-textarea.clll-textarea--rounded.clll-textarea--rounded-none .clll-textarea__input{border-radius:0}.clll-textarea.clll-textarea--tiny .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5);padding:var(--clll-py-xs) var(--clll-px-sm)}.clll-textarea.clll-textarea--small .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6);padding:var(--clll-py-sm) var(--clll-px-md)}.clll-textarea.clll-textarea--medium .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5);padding:var(--clll-py-md) var(--clll-px-lg)}.clll-textarea.clll-textarea--large .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7);padding:var(--clll-py-lg) var(--clll-px-2xl)}.clll-textarea.clll-textarea--xlarge .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5);padding:var(--clll-py-2xl) var(--clll-px-3xl)}.clll-textarea.clll-textarea--fluid,.clll-textarea.clll-textarea--fluid .clll-textarea__input-container,.clll-textarea.clll-textarea--fluid .clll-textarea__input-container .clll-textarea__input{width:100%}.clll-textarea.clll-textarea--vertical{flex-direction:column}.clll-textarea.clll-textarea--vertical.clll-textarea--haslabel>:not([hidden])~:not([hidden]){margin-top:var(--clll-unit-1_5)}.clll-textarea.clll-textarea--horizontal.clll-textarea--haslabel{flex-direction:row;flex-wrap:wrap}.clll-textarea.clll-textarea--horizontal.clll-textarea--haslabel .clll-textarea__label{padding-top:var(--clll-unit-1_5)}.clll-textarea.clll-textarea--horizontal.clll-textarea--haslabel .clll-textarea__label,.clll-textarea.clll-textarea--horizontal.clll-textarea--haslabel .clll-textarea__input-container{width:50%}.clll-textarea.clll-textarea--hascharcounter>:not([hidden])~:not([hidden]){margin-top:var(--clll-unit-1)}
+.clll-textarea{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;flex-direction:column;align-items:flex-start;overflow:visible}.clll-textarea.clll-textarea--haslabel .clll-textarea__label .clll-text.clll-textarea__label--required:after{position:relative;top:var(--clll-unit-1);content:"*";font-size:var(--clll-unit-4_5);font-weight:500;font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;color:var(--clll-input-required-asterisk-color, red);text-decoration:unset;margin-inline-start:var(--clll-unit-0_5);box-sizing:content-box;line-height:0}.clll-textarea .clll-textarea__input-container{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;overflow:visible;background-color:var(--clll-input-bg, white)}.clll-textarea .clll-textarea__input-container:focus-within{outline-color:var(--clll-input-focus-border, transparent);outline-style:solid;outline-width:2px;outline-offset:-1px}.clll-textarea .clll-textarea__input{resize:none;display:inline-block;appearance:none;background-color:var(--clll-input-bg, white);border-color:var(--clll-input-border, transparent);border-style:solid;border-width:1px;color:var(--clll-input-text, inherit);font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased}.clll-textarea .clll-textarea__input::placeholder{color:var(--clll-input-text-placeholder, transparent)}.clll-textarea .clll-textarea__input:focus{outline-color:var(--clll-input-focus-border, transparent);outline-style:solid;outline-width:2px;box-shadow:0 0 0 var(--clll-unit-0) var(--clll-input-focus-shadow, transparent);outline-offset:-1px}.clll-textarea .clll-textarea__input:disabled{border-color:var(--clll-input-disabled-border, transparent);background-color:var(--clll-input-disabled-bg, transparent);color:var(--clll-input-text-placeholder, transparent)}.clll-textarea .clll-textarea__input:disabled::placeholder{color:var(--clll-input-text-placeholder, transparent)}.clll-textarea .clll-textarea__input:read-only{border-color:var(--clll-input-readonly-border, transparent);background-color:var(--clll-input-readonly-bg, transparent);color:var(--clll-input-text-placeholder, transparent)}.clll-textarea .clll-textarea__input:read-only::placeholder{color:var(--clll-input-text-placeholder, transparent)}.clll-textarea.clll-textarea--disabled{cursor:default}.clll-textarea.clll-textarea--disabled .clll-textarea__input-container{border-color:var(--clll-input-disabled-border, transparent)}.clll-textarea.clll-textarea--readonly{cursor:not-allowed}.clll-textarea.clll-textarea--readonly .clll-textarea__input-container{border-color:var(--clll-input-readonly-border, transparent);pointer-events:none}.clll-textarea.clll-textarea--resizable .clll-textarea__input{resize:both}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost) .clll-textarea__input-container,.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost) .clll-textarea__input{border-radius:var(--clll-rounded-xs)}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-full .clll-textarea__input-container{border-radius:var(--clll-rounded-full)}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-lg .clll-textarea__input-container{border-radius:var(--clll-rounded-lg)}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-md .clll-textarea__input-container{border-radius:var(--clll-rounded-md)}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-sm .clll-textarea__input-container{border-radius:var(--clll-rounded-sm)}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-xs .clll-textarea__input-container{border-radius:var(--clll-rounded-xs)}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-xl .clll-textarea__input-container{border-radius:var(--clll-rounded-xl)}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-2xl .clll-textarea__input-container{border-radius:var(--clll-rounded-2xl)}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-3xl .clll-textarea__input-container{border-radius:var(--clll-rounded-3xl)}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-none .clll-textarea__input-container{border-radius:0}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-full .clll-textarea__input{border-radius:var(--clll-rounded-full)}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-lg .clll-textarea__input{border-radius:var(--clll-rounded-lg)}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-md .clll-textarea__input{border-radius:var(--clll-rounded-md)}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-sm .clll-textarea__input{border-radius:var(--clll-rounded-sm)}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-xs .clll-textarea__input{border-radius:var(--clll-rounded-xs)}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-xl .clll-textarea__input{border-radius:var(--clll-rounded-xl)}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-2xl .clll-textarea__input{border-radius:var(--clll-rounded-2xl)}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-3xl .clll-textarea__input{border-radius:var(--clll-rounded-3xl)}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost).clll-textarea--rounded-none .clll-textarea__input{border-radius:0}.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost):not([class*=clll-textarea--rounded-]).clll-textarea--rounded .clll-textarea__input-container,.clll-textarea.clll-textarea--rounded:not(.clll-textarea--ghost):not([class*=clll-textarea--rounded-]).clll-textarea--rounded .clll-textarea__input{border-radius:var(--clll-input-theme-radius, var(--clll-rounded-xs))}.clll-textarea.clll-textarea--rounded.clll-textarea--ghost .clll-textarea__input-container,.clll-textarea.clll-textarea--rounded.clll-textarea--ghost .clll-textarea__input{border-radius:0}.clll-textarea.clll-textarea--tiny:not(.clll-textarea--ghost) .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5);padding:var(--clll-py-xs) var(--clll-px-sm)}.clll-textarea.clll-textarea--tiny.clll-textarea--ghost .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5)}.clll-textarea.clll-textarea--small:not(.clll-textarea--ghost) .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6);padding:var(--clll-py-sm) var(--clll-px-md)}.clll-textarea.clll-textarea--small.clll-textarea--ghost .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6)}.clll-textarea.clll-textarea--medium:not(.clll-textarea--ghost) .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5);padding:var(--clll-py-md) var(--clll-px-lg)}.clll-textarea.clll-textarea--medium.clll-textarea--ghost .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5)}.clll-textarea.clll-textarea--large:not(.clll-textarea--ghost) .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7);padding:var(--clll-py-lg) var(--clll-px-2xl)}.clll-textarea.clll-textarea--large.clll-textarea--ghost .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7)}.clll-textarea.clll-textarea--xlarge:not(.clll-textarea--ghost) .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5);padding:var(--clll-py-2xl) var(--clll-px-3xl)}.clll-textarea.clll-textarea--xlarge.clll-textarea--ghost .clll-textarea__input-container .clll-textarea__input{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5)}.clll-textarea.clll-textarea--fluid,.clll-textarea.clll-textarea--fluid .clll-textarea__input-container,.clll-textarea.clll-textarea--fluid .clll-textarea__input-container .clll-textarea__input{width:100%}.clll-textarea.clll-textarea--vertical{flex-direction:column}.clll-textarea.clll-textarea--vertical.clll-textarea--haslabel>:not([hidden])~:not([hidden]){margin-top:var(--clll-unit-1_5)}.clll-textarea.clll-textarea--horizontal.clll-textarea--haslabel{flex-direction:row;flex-wrap:wrap}.clll-textarea.clll-textarea--horizontal.clll-textarea--haslabel .clll-textarea__label{padding-top:var(--clll-unit-1_5)}.clll-textarea.clll-textarea--horizontal.clll-textarea--haslabel .clll-textarea__label,.clll-textarea.clll-textarea--horizontal.clll-textarea--haslabel .clll-textarea__input-container{width:50%}.clll-textarea.clll-textarea--hascharcounter>:not([hidden])~:not([hidden]){margin-top:var(--clll-unit-1)}.clll-textarea.clll-textarea--ghost .clll-textarea__input-container,.clll-textarea.clll-textarea--ghost .clll-input__input-border-control,.clll-textarea.clll-textarea--ghost .clll-textarea__input{background-color:transparent;border:0;padding:var(--clll-input-ghost-padding, 0);border-radius:0}.clll-textarea.clll-textarea--ghost .clll-textarea__input-container:focus,.clll-textarea.clll-textarea--ghost .clll-textarea__input-container:focus-within,.clll-textarea.clll-textarea--ghost .clll-input__input-border-control:focus,.clll-textarea.clll-textarea--ghost .clll-input__input-border-control:focus-within,.clll-textarea.clll-textarea--ghost .clll-textarea__input:focus,.clll-textarea.clll-textarea--ghost .clll-textarea__input:focus-within{outline:none}