@codeandfunction/callaloo 3.15.3 → 3.16.1

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

@@ -0,0 +1 @@
+: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-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)}

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

@@ -0,0 +1,132 @@
+import './CLRadioButton.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-RMOT1TQk.js";
+import { _ as N } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-V7LSR7DF.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({
+  name: "CLRadioButton",
+  __name: "CLRadioButton",
+  props: /* @__PURE__ */ x({
+    ariaLabel: {},
+    borderRadius: {},
+    busy: { type: Boolean },
+    checked: { type: Boolean },
+    color: { default: D.Neutral },
+    disabled: { type: Boolean },
+    form: {},
+    id: {},
+    label: {},
+    messages: {},
+    messageType: {},
+    name: {},
+    required: { type: Boolean },
+    rounded: { type: Boolean, default: !0 },
+    size: { default: s.Small },
+    testId: { default: "clll-radiobutton" },
+    value: { type: [String, Number, Boolean] },
+    variant: { default: w.Outline },
+    onBlur: {},
+    onChange: {},
+    onFocus: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  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
+    }, l = e, a = "clll-radiobutton", b = T(e, "modelValue"), r = h("radiobutton-ref"), v = () => {
+      r.value && r.value.focus();
+    }, B = f(() => [
+      a,
+      l.borderRadius ? `${a}--${l.borderRadius}` : "",
+      l.busy ? `${a}--busy` : `${a}--ready`,
+      `${a}--${l.color}`,
+      `${a}--${l.size}`,
+      l.disabled ? `${a}--disabled` : `${a}--active`,
+      l.label ? `${a}--haslabel` : "",
+      l.messageType ? `${a}--${l.messageType}` : "",
+      l.rounded ? `${a}--rounded` : `${a}--box`,
+      l.required ? `${a}--required` : `${a}--optional`
+    ]), L = f(() => [
+      `${a}__radiobutton-container`,
+      `${a}--${l.variant}`
+    ]);
+    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 })]),
+          "data-testid": e.testId
+        }, [
+          n("span", {
+            class: d(u(L)),
+            onClick: v
+          }, [
+            n("label", {
+              for: e.id,
+              class: d(`${a}__label`)
+            }, [
+              n("span", {
+                class: d([`${a}__radiobutton-frame`, "form-control-flex"])
+              }, [
+                R(n("input", {
+                  id: e.id,
+                  ref: "radiobutton-ref",
+                  "onUpdate:modelValue": t[0] || (t[0] = (o) => b.value = o),
+                  "aria-label": e.ariaLabel,
+                  class: d(`${a}__radiobutton`),
+                  checked: e.checked,
+                  disabled: e.disabled || e.busy,
+                  name: e.name,
+                  value: e.value,
+                  required: e.required,
+                  type: "radio",
+                  onBlur: t[1] || (t[1] = //@ts-ignore
+                  (...o) => e.onBlur && e.onBlur(...o)),
+                  onChange: t[2] || (t[2] = //@ts-ignore
+                  (...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]
+                ]),
+                n("span", {
+                  class: d(`${a}__indicator`)
+                }, null, 2)
+              ], 2),
+              e.label ? (c(), m(u(N), {
+                key: 0,
+                as: "span",
+                type: g[e.size],
+                class: d(e.required ? `${a}__label--required` : "")
+              }, {
+                default: $(() => [
+                  V(M(e.label), 1)
+                ]),
+                _: 1
+              }, 8, ["type", "class"])) : y("", !0)
+            ], 10, X)
+          ], 2)
+        ], 10, I),
+        e.id ? (c(), m(F, {
+          key: 0,
+          id: e.id,
+          messages: e.messages,
+          "message-type": e.messageType
+        }, null, 8, ["id", "messages", "message-type"])) : y("", !0)
+      ]),
+      _: 1
+    }));
+  }
+});
+export {
+  A as CLRadioButton,
+  A as default
+};

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

@@ -56,8 +56,8 @@ declare const _default: import('vue').DefineComponent<{
 }>, {
     color: CLColors;
     variant: CLColorVariants.Outline | CLColorVariants.Ghost;
-    testId: string;
     rounded: boolean;
+    testId: string;
     size: CLSizes;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     'radiobutton-ref': HTMLInputElement;

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

@@ -0,0 +1 @@
+: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-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}

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

@@ -0,0 +1,137 @@
+import './CLSelect.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-RMOT1TQk.js";
+import { _ as E } from "../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-fddy-FWI.js";
+import { _ as H } from "../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-CZB8svPf.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({
+  name: "CLSelect",
+  __name: "CLSelect",
+  props: /* @__PURE__ */ h({
+    ariaLabel: {},
+    borderRadius: {},
+    busy: { type: Boolean },
+    color: { default: U.Neutral },
+    disabled: { type: Boolean },
+    fluid: { type: Boolean, default: !1 },
+    form: {},
+    id: {},
+    label: {},
+    messages: {},
+    messageType: {},
+    name: {},
+    onBlur: {},
+    onChange: {},
+    onFocus: {},
+    orientation: { default: y.Vertical },
+    options: {},
+    placeholder: {},
+    required: { type: Boolean },
+    rounded: { type: Boolean, default: !0 },
+    size: { default: n.Small },
+    testId: { default: "clll-select" },
+    variant: { default: P.Outline }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  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 = () => {
+      c.value && c.value.focus();
+    }, L = x(() => [
+      l,
+      a.borderRadius ? `${l}--${a.borderRadius}` : "",
+      a.busy ? `${l}--busy` : `${l}--ready`,
+      `${l}--${a.color}`,
+      `${l}--${a.size}`,
+      `${l}--${a.variant}`,
+      a.disabled || a.busy ? `${l}--disabled` : `${l}--active`,
+      a.fluid || a.orientation === y.Horizontal ? `${l}--fluid` : `${l}--fixed`,
+      a.label ? `${l}--haslabel` : "",
+      a.messageType ? `${l}--${a.messageType}` : "",
+      a.orientation ? `${l}--${a.orientation}` : "",
+      a.rounded ? `${l}--rounded` : `${l}--box`,
+      a.required ? `${l}--required` : `${l}--optional`
+    ]);
+    return C({
+      selectRef: c
+    }), (G, i) => (o(), f(R, {
+      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 })]),
+          "data-testid": e.testId
+        }, [
+          e.label ? (o(), f(E, {
+            key: 0,
+            "css-prefix": l,
+            "html-for": e.id,
+            label: e.label,
+            required: e.required,
+            size: e.size
+          }, null, 8, ["html-for", "label", "required", "size"])) : b("", !0),
+          d("span", {
+            class: r(`${l}__select-container`),
+            onClick: v
+          }, [
+            V(d("select", {
+              id: e.id,
+              ref: "select-ref",
+              "onUpdate:modelValue": i[0] || (i[0] = (t) => m.value = t),
+              "aria-label": e.ariaLabel,
+              class: r(`${l}__select`),
+              disabled: e.disabled || e.busy,
+              name: e.name,
+              placeholder: e.placeholder,
+              form: e.form,
+              required: e.required,
+              onBlur: i[1] || (i[1] = //@ts-ignore
+              (...t) => e.onBlur && e.onBlur(...t)),
+              onChange: i[2] || (i[2] = //@ts-ignore
+              (...t) => e.onChange && e.onChange(...t)),
+              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}`,
+                value: t.value,
+                selected: t.value === m.value,
+                disabled: t.disabled
+              }, F(t.label), 9, A))), 128)) : b("", !0)
+            ], 42, j), [
+              [I, m.value]
+            ]),
+            d("span", {
+              class: r([`${l}__icon`, "form-select-icon-flex"])
+            }, [
+              N(u(H), {
+                name: u(O).ChevronDown,
+                size: g[e.size]
+              }, null, 8, ["name", "size"])
+            ], 2)
+          ], 2)
+        ], 10, X),
+        e.id ? (o(), f(w, {
+          key: 0,
+          id: e.id,
+          messages: e.messages,
+          "message-type": e.messageType
+        }, null, 8, ["id", "messages", "message-type"])) : b("", !0)
+      ]),
+      _: 1
+    }, 8, ["fluid", "orientation"]));
+  }
+});
+export {
+  Z as CLSelect,
+  Z as default
+};

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

@@ -1,4 +1,4 @@
-import { CLBorderRadius, CLColors, CLColorVariants, CLGenericFocusFunction, CLGenericFunction, CLOption, CLOrientation, CLSizes } from '../../../index.ts';
+import { CLBorderRadius, CLColors, CLColorVariants, CLGenericFocusFunction, CLGenericFunction, CLOption, CLOrientation, CLSizes } from '../../../types';
 export interface CLSelectProps {
     /** Sets the aria-label on the input. It should be used when there is no label present. */
     ariaLabel?: string;
@@ -60,9 +60,9 @@ declare const _default: import('vue').DefineComponent<{
 }>, {
     color: CLColors;
     variant: CLColorVariants.Outline | CLColorVariants.Ghost;
-    testId: string;
-    rounded: boolean;
     fluid: boolean;
+    rounded: boolean;
+    testId: string;
     size: CLSizes;
     orientation: CLOrientation;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

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

@@ -0,0 +1 @@
+: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-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)}

package/dist/components/Form/CLTextArea/CLTextArea.js

@@ -0,0 +1,149 @@
+import './CLTextArea.css';
+import { defineComponent as g, mergeModels as $, useTemplateRef as x, useModel as C, computed as L, createBlock as i, openBlock as r, withCtx as B, createElementVNode as u, createCommentVNode as s, normalizeClass as m, unref as c, withDirectives as z, vModelText as v } from "vue";
+import { _ as k, i as T, a as q } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-RMOT1TQk.js";
+import { _ as V } from "../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-fddy-FWI.js";
+import { _ as w } from "../../../chunks/CLFormCharCounter.vue_vue_type_style_index_0_lang-CJ4VrvmR.js";
+import { CLOrientation as f, CLCharCounterLayout as I, CLColorVariants as F, CLSizes as R, CLColors as M } from "../../../index.js";
+const A = ["data-testid"], N = ["id", "aria-label", "autocomplete", "cols", "disabled", "form", "maxlength", "minlength", "name", "pattern", "placeholder", "readonly", "required", "spellcheck", "rows"], U = /* @__PURE__ */ g({
+  name: "CLTextArea",
+  __name: "CLTextArea",
+  props: /* @__PURE__ */ $({
+    ariaLabel: {},
+    autoComplete: { type: Boolean },
+    borderRadius: {},
+    busy: { type: Boolean },
+    charCounter: { type: Boolean },
+    color: { default: M.Neutral },
+    cols: {},
+    disabled: { type: Boolean },
+    fluid: { type: Boolean, default: !1 },
+    form: {},
+    id: {},
+    label: {},
+    maxLength: {},
+    messages: {},
+    messageType: {},
+    minLength: {},
+    name: {},
+    onBlur: {},
+    onChange: {},
+    onFocus: {},
+    onInput: {},
+    orientation: { default: f.Vertical },
+    pattern: {},
+    placeholder: {},
+    readonly: { type: Boolean },
+    required: { type: Boolean },
+    resizable: { type: Boolean, default: !1 },
+    rounded: { type: Boolean, default: !0 },
+    rows: {},
+    size: { default: R.Small },
+    spellCheck: { type: Boolean },
+    testId: { default: "clll-textarea" },
+    variant: { default: F.Outline }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e, { expose: h }) {
+    const t = e, a = "clll-textarea", d = x("textarea-ref"), o = C(e, "modelValue"), y = () => {
+      d.value && d.value.focus();
+    }, b = L(() => [
+      a,
+      t.borderRadius ? `${a}--${t.borderRadius}` : "",
+      t.busy ? `${a}--busy` : `${a}--ready`,
+      `${a}--${t.color}`,
+      `${a}--${t.size}`,
+      `${a}--${t.variant}`,
+      t.disabled || t.busy ? `${a}--disabled` : `${a}--active`,
+      t.charCounter && t.maxLength ? `${a}--hascharcounter` : "",
+      t.fluid || t.orientation === f.Horizontal ? `${a}--fluid` : `${a}--fixed`,
+      t.label ? `${a}--haslabel` : "",
+      t.messageType ? `${a}--${t.messageType}` : "",
+      t.orientation ? `${a}--${t.orientation}` : "",
+      t.resizable ? `${a}--resizable` : "",
+      t.readonly ? `${a}--readonly` : `${a}--writeable`,
+      t.rounded ? `${a}--rounded` : `${a}--box`,
+      t.required ? `${a}--required` : `${a}--optional`
+    ]);
+    return h({
+      textareaRef: d
+    }), (S, l) => (r(), i(k, {
+      fluid: e.fluid,
+      "has-char-counter": !!(e.charCounter && e.maxLength),
+      orientation: e.orientation
+    }, {
+      default: B(() => [
+        u("span", {
+          class: m([c(b), c(T)({ color: e.color, component: "textarea", disabled: e.disabled || e.busy, readonly: e.readonly, variant: e.variant })]),
+          "data-testid": e.testId
+        }, [
+          e.label ? (r(), i(V, {
+            key: 0,
+            "css-prefix": a,
+            "html-for": e.id,
+            label: e.label,
+            required: e.required,
+            size: e.size
+          }, null, 8, ["html-for", "label", "required", "size"])) : s("", !0),
+          u("span", {
+            class: m(`${a}__input-container`),
+            onClick: y
+          }, [
+            z(u("textarea", {
+              id: e.id,
+              ref: "textarea-ref",
+              "onUpdate:modelValue": l[0] || (l[0] = (n) => o.value = n),
+              "aria-label": e.ariaLabel,
+              autocomplete: e.autoComplete ? "on" : "off",
+              class: m(`${a}__input`),
+              cols: e.cols,
+              disabled: e.disabled || e.busy,
+              form: e.form,
+              maxlength: e.maxLength,
+              minlength: e.minLength,
+              name: e.name,
+              pattern: e.pattern,
+              placeholder: e.placeholder,
+              readonly: e.readonly,
+              required: e.required,
+              spellcheck: e.spellCheck,
+              rows: e.rows,
+              onBlur: l[1] || (l[1] = //@ts-ignore
+              (...n) => e.onBlur && e.onBlur(...n)),
+              onChange: l[2] || (l[2] = //@ts-ignore
+              (...n) => e.onChange && e.onChange(...n)),
+              onFocus: l[3] || (l[3] = //@ts-ignore
+              (...n) => e.onFocus && e.onFocus(...n)),
+              onInput: l[4] || (l[4] = //@ts-ignore
+              (...n) => e.onInput && e.onInput(...n))
+            }, null, 42, N), [
+              [v, o.value]
+            ])
+          ], 2),
+          e.charCounter && e.maxLength ? (r(), i(w, {
+            key: 1,
+            "css-prefix": a,
+            "current-length": o.value ? o.value.toString().length : 0,
+            "max-length": e.maxLength,
+            color: e.color,
+            size: e.size,
+            layout: c(I).Block
+          }, null, 8, ["current-length", "max-length", "color", "size", "layout"])) : s("", !0)
+        ], 10, A),
+        e.id ? (r(), i(q, {
+          key: 0,
+          id: e.id,
+          messages: e.messages,
+          "message-type": e.messageType
+        }, null, 8, ["id", "messages", "message-type"])) : s("", !0)
+      ]),
+      _: 1
+    }, 8, ["fluid", "has-char-counter", "orientation"]));
+  }
+});
+export {
+  U as CLTextArea,
+  U as default
+};

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

@@ -80,9 +80,9 @@ declare const _default: import('vue').DefineComponent<{
 }>, {
     color: CLColors;
     variant: CLColorVariants.Outline | CLColorVariants.Ghost;
-    testId: string;
-    rounded: boolean;
     fluid: boolean;
+    rounded: boolean;
+    testId: string;
     size: CLSizes;
     orientation: CLOrientation;
     resizable: boolean;

package/dist/components/Form/index.d.ts

@@ -1,9 +1,5 @@
-import { CLCheckbox } from './CLCheckbox';
-import { CLFormCharCounter } from './CLFormCharCounter';
-import { CLFormLabel } from './CLFormLabel';
-import { CLInput } from './CLInput';
-import { CLRadioButton } from './CLRadioButton';
-import { CLSelect } from './CLSelect';
-import { CLTextArea } from './CLTextArea';
-export { CLCheckbox, CLFormCharCounter, CLFormLabel, CLInput, CLRadioButton, CLSelect, CLTextArea };
-export type { CLInputColorTools, CLInputPill, CLInputPrefix, CLInputSuffix } from './CLInput';
+export { CLCheckbox } from './CLCheckbox';
+export { CLInput } from './CLInput';
+export { CLRadioButton } from './CLRadioButton';
+export { CLSelect } from './CLSelect';
+export { CLTextArea } from './CLTextArea';

package/dist/components/Indicators/CLBadge/CLBadge.css

@@ -0,0 +1 @@
+: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-badge{position:relative;overflow:hidden;border-radius:var(--clll-rounded-full);flex:none;display:inline-flex;align-items:center;box-sizing:border-box;padding:var(--clll-py-xs) var(--clll-px-xs)}.clll-badge.clll-badge--rounded-full,.clll-badge.clll-badge--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-badge.clll-badge--rounded-lg,.clll-badge.clll-badge--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-badge.clll-badge--rounded-md,.clll-badge.clll-badge--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-badge.clll-badge--rounded-sm,.clll-badge.clll-badge--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-badge.clll-badge--rounded-xs,.clll-badge.clll-badge--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-badge.clll-badge--rounded-xl,.clll-badge.clll-badge--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-badge.clll-badge--rounded-2xl,.clll-badge.clll-badge--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-badge.clll-badge--rounded-3xl,.clll-badge.clll-badge--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-badge.clll-badge--rounded-none,.clll-badge.clll-badge--rounded-none .clll-{border-radius:0}.clll-badge .clll-badge__count{font-weight:400;font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;margin:0;font-size:var(--clll-unit-3);line-height:var(--clll-unit-5)}.clll-badge.clll-badge--elevated{box-shadow:0 0 var(--clll-unit-3) var(--clll-unit-0_5) #0000001f,0 0 var(--clll-unit-1) var(--clll-unit-0_5) #00000005}

package/dist/components/Indicators/CLBadge/CLBadge.js

@@ -0,0 +1,40 @@
+import './CLBadge.css';
+import { defineComponent as c, computed as n, createElementBlock as m, openBlock as u, normalizeClass as s, unref as r, createElementVNode as f, toDisplayString as b } from "vue";
+import { CLColorVariants as g, CLColors as p } from "../../../index.js";
+import { b as C } from "../../../chunks/utils-DFnkOeYP.js";
+const v = ["data-testid"], h = /* @__PURE__ */ c({
+  name: "CLBadge",
+  __name: "CLBadge",
+  props: {
+    borderRadius: {},
+    color: { default: p.Neutral },
+    elevated: { type: Boolean, default: !1 },
+    label: {},
+    limit: {},
+    testId: { default: "clll-badge" },
+    variant: { default: g.Soft }
+  },
+  setup(a) {
+    const e = a, t = "clll-badge", d = n(() => {
+      const l = e.limit ?? 0, o = e.label ?? "";
+      return l && o.toString().length > l ? `${o.toString().slice(0, l)}+` : o;
+    }), i = n(() => [
+      t,
+      e.borderRadius ? `${t}--${e.borderRadius}` : "",
+      e.elevated ? `${t}--elevated` : "",
+      `${t}--${e.color}--${e.variant}`
+    ]);
+    return (l, o) => (u(), m("div", {
+      class: s([r(i), r(C)({ color: a.color, variant: a.variant })]),
+      "data-testid": a.testId
+    }, [
+      f("span", {
+        class: s(`${t}__count`)
+      }, b(r(d)), 3)
+    ], 10, v));
+  }
+});
+export {
+  h as CLBadge,
+  h as default
+};

package/dist/components/Indicators/CLBadge/CLBadge.vue.d.ts

@@ -18,7 +18,7 @@ export interface CLBadgeProps {
 declare const _default: import('vue').DefineComponent<CLBadgeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLBadgeProps> & Readonly<{}>, {
     color: CLColors;
     variant: CLColorVariants;
-    elevated: boolean;
     testId: string;
+    elevated: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/Indicators/CLBanner/CLBanner.css

@@ -0,0 +1 @@
+: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-banner{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;width:var(--v42ada450);height:var(--v46a4d956);padding:var(--clll-py-3xl) var(--clll-px-2xl)}.clll-banner .clll-banner__content{position:relative;display:flex;align-items:center;z-index:var(--clll-z-index-10);flex-wrap:wrap;flex:1 1 0%}.clll-banner .clll-banner__content .clll-banner__nested_content{display:flex;flex-direction:column;flex-grow:1;gap:var(--clll-unit-0_5)}.clll-banner .clll-banner__content .clll-banner__action-button{display:flex;justify-content:flex-end;flex-grow:1}.clll-banner.clll-banner--dismissable .clll-banner__content{padding-right:var(--clll-unit-14)}.clll-banner.clll-banner--dismissable .clll-banner__dismiss-button{position:absolute;top:var(--clll-unit-4);right:var(--clll-unit-4);z-index:var(--clll-z-index-10)}.clll-banner.clll-banner--actionable .clll-banner__content{gap:var(--clll-px-md)}.clll-banner.clll-banner--rounded{border-radius:var(--clll-rounded-sm)}.clll-banner.clll-banner--rounded.clll-banner--rounded-full,.clll-banner.clll-banner--rounded.clll-banner--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-banner.clll-banner--rounded.clll-banner--rounded-lg,.clll-banner.clll-banner--rounded.clll-banner--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-banner.clll-banner--rounded.clll-banner--rounded-md,.clll-banner.clll-banner--rounded.clll-banner--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-banner.clll-banner--rounded.clll-banner--rounded-sm,.clll-banner.clll-banner--rounded.clll-banner--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-banner.clll-banner--rounded.clll-banner--rounded-xs,.clll-banner.clll-banner--rounded.clll-banner--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-banner.clll-banner--rounded.clll-banner--rounded-xl,.clll-banner.clll-banner--rounded.clll-banner--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-banner.clll-banner--rounded.clll-banner--rounded-2xl,.clll-banner.clll-banner--rounded.clll-banner--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-banner.clll-banner--rounded.clll-banner--rounded-3xl,.clll-banner.clll-banner--rounded.clll-banner--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-banner.clll-banner--rounded.clll-banner--rounded-none,.clll-banner.clll-banner--rounded.clll-banner--rounded-none .clll-{border-radius:0}.clll-banner.clll-banner--busy{pointer-events:none}.clll-banner.clll-banner--align-left{text-align:left}.clll-banner.clll-banner--align-center{text-align:center}.clll-banner.clll-banner--align-right{text-align:right}.clll-banner.clll-banner--bordered{border-style:solid;border-top-width:1px;border-left-width:1px;border-right-width:1px}.clll-banner .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}