@codeandfunction/callaloo 3.15.3 → 3.16.0

package/README.md

@@ -13,6 +13,11 @@ Callaloo is a Vue UI library. It is easy to integrate into any Vue3+ project, ha
 
 ## Installation
 
+```sh [pnpm]
+$ pnpm add @codeandfunction/callaloo
+```
+
+
 ```sh
 npm install @codeandfunction/callaloo
 ```
@@ -29,9 +34,8 @@ The following example demonstrates how to use a Callaloo component in your Vue p
 
 ```tsx
 <script setup lang="ts">
-import '@codeandfunction/callaloo/styles.css';
-
-import { CLButton, CLThemeProvider } from '@codeandfunction/callaloo';
+import CLThemeProvider from '@codeandfunction/callaloo/CLThemeProvider';
+import CLButton from '@codeandfunction/callaloo/CLButton';
 
 const onClickHandler = (evt?: Event) => {
   alert('Hello World!');

package/dist/assets/CLFormCharCounter.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-form-char-counter{pointer-events:none;user-select:none}.clll-form-char-counter--inline{max-width:100px;box-sizing:border-box;flex:1;position:relative}.clll-form-char-counter--block{display:block;width:100%;text-align:right;box-sizing:border-box;position:relative}.clll-form-char-counter__char-counter__text{font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased}.clll-form-char-counter--tiny .clll-form-char-counter__char-counter__text{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5)}.clll-form-char-counter--small .clll-form-char-counter__char-counter__text{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6)}.clll-form-char-counter--medium .clll-form-char-counter__char-counter__text{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5)}.clll-form-char-counter--large .clll-form-char-counter__char-counter__text{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7)}.clll-form-char-counter--xlarge .clll-form-char-counter__char-counter__text{font-size:var(--clll-unit-5);line-height:var(--clll-unit-7_5)}

package/dist/assets/CLInputMessages.css

@@ -0,0 +1 @@
+.clll-form-field{position:relative;flex:none;display:inline-flex;flex-direction:column;flex-wrap:wrap;box-sizing:border-box}.clll-form-field.clll-form-field--fluid{width:100%}.clll-form-field.clll-form-field--haspill>:not([hidden])~:not([hidden]){margin-top:var(--clll-unit-1_5)}.clll-form-field.clll-form-field--horizontal{display:flex;flex-direction:row}.clll-form-field.clll-form-field--horizontal.clll-form-field--haspill .clll-input__pill,.clll-form-field.clll-form-field--horizontal.clll-form-field--haspill .clll-input__spacer{width:50%}:root{--clll-unit-0: 0;--clll-unit-0_5: .125rem;--clll-unit-1: .25rem;--clll-unit-1_5: .375rem;--clll-unit-2: .5rem;--clll-unit-2_5: .625rem;--clll-unit-3: .75rem;--clll-unit-3_5: .875rem;--clll-unit-4: 1rem;--clll-unit-4_5: 1.125rem;--clll-unit-5: 1.25rem;--clll-unit-5_5: 1.375rem;--clll-unit-6: 1.5rem;--clll-unit-6_5: 1.625rem;--clll-unit-7: 1.75rem;--clll-unit-7_5: 1.875rem;--clll-unit-8: 2rem;--clll-unit-8_5: 2.125rem;--clll-unit-9_5: 2.375rem;--clll-unit-10: 2.5rem;--clll-unit-10_5: 2.625rem;--clll-unit-12: 3rem;--clll-unit-14: 3.5rem;--clll-unit-14_5: 3.625rem;--clll-unit-18: 4.5rem}.form-addon-flex{display:flex;align-items:center;justify-content:center;pointer-events:none;user-select:none}.form-addon-flex--left{left:0}.form-addon-flex--right{right:0}.form-addon-flex--icon{z-index:10;box-sizing:border-box}.form-addon-flex--string{position:relative}.form-addon-radius--left-full{border-top-left-radius:var(--clll-rounded-full);border-bottom-left-radius:var(--clll-rounded-full)}.form-addon-radius--right-full{border-top-right-radius:var(--clll-rounded-full);border-bottom-right-radius:var(--clll-rounded-full)}.form-addon-radius--left-lg{border-top-left-radius:var(--clll-rounded-lg);border-bottom-left-radius:var(--clll-rounded-lg)}.form-addon-radius--right-lg{border-top-right-radius:var(--clll-rounded-lg);border-bottom-right-radius:var(--clll-rounded-lg)}.form-addon-radius--left-md{border-top-left-radius:var(--clll-rounded-md);border-bottom-left-radius:var(--clll-rounded-md)}.form-addon-radius--right-md{border-top-right-radius:var(--clll-rounded-md);border-bottom-right-radius:var(--clll-rounded-md)}.form-addon-radius--left-sm{border-top-left-radius:var(--clll-rounded-sm);border-bottom-left-radius:var(--clll-rounded-sm)}.form-addon-radius--right-sm{border-top-right-radius:var(--clll-rounded-sm);border-bottom-right-radius:var(--clll-rounded-sm)}.form-addon-radius--left-xs{border-top-left-radius:var(--clll-rounded-xs);border-bottom-left-radius:var(--clll-rounded-xs)}.form-addon-radius--right-xs{border-top-right-radius:var(--clll-rounded-xs);border-bottom-right-radius:var(--clll-rounded-xs)}.form-addon-radius--left-xl{border-top-left-radius:var(--clll-rounded-xl);border-bottom-left-radius:var(--clll-rounded-xl)}.form-addon-radius--right-xl{border-top-right-radius:var(--clll-rounded-xl);border-bottom-right-radius:var(--clll-rounded-xl)}.form-addon-radius--left-2xl{border-top-left-radius:var(--clll-rounded-2xl);border-bottom-left-radius:var(--clll-rounded-2xl)}.form-addon-radius--right-2xl{border-top-right-radius:var(--clll-rounded-2xl);border-bottom-right-radius:var(--clll-rounded-2xl)}.form-addon-radius--left-3xl{border-top-left-radius:var(--clll-rounded-3xl);border-bottom-left-radius:var(--clll-rounded-3xl)}.form-addon-radius--right-3xl{border-top-right-radius:var(--clll-rounded-3xl);border-bottom-right-radius:var(--clll-rounded-3xl)}.form-addon-radius--left-none{border-top-left-radius:0;border-bottom-left-radius:0}.form-addon-radius--right-none{border-top-right-radius:0;border-bottom-right-radius:0}.form-control-flex{display:inline-flex;align-items:center;justify-content:center;position:relative}.form-counter-flex{display:flex;align-items:center;justify-content:flex-end;max-width:100px;box-sizing:border-box;flex:1;position:relative;pointer-events:none;user-select:none}.form-select-icon-flex{position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;pointer-events:none}:root{--clll-rounded-full: 9999px;--clll-rounded-none: 0;--clll-rounded-xs: var(--clll-unit-1);--clll-rounded-sm: var(--clll-unit-2);--clll-rounded-md: var(--clll-unit-3);--clll-rounded-lg: var(--clll-unit-4);--clll-rounded-xl: var(--clll-unit-5);--clll-rounded-2xl: var(--clll-unit-6);--clll-rounded-3xl: var(--clll-unit-7);--clll-px-xs: var(--clll-unit-1_5);--clll-px-sm: var(--clll-unit-2);--clll-px-md: var(--clll-unit-2_5);--clll-px-lg: var(--clll-unit-3);--clll-px-xl: var(--clll-unit-3_5);--clll-px-2xl: var(--clll-unit-4);--clll-px-3xl: var(--clll-unit-4_5);--clll-px-s-xs: calc(var(--clll-px-xs) * .5);--clll-px-s-sm: calc(var(--clll-px-sm) * .5);--clll-py-xs: calc(var(--clll-unit-1) - 1px);--clll-py-sm: calc(var(--clll-unit-1_5) - 1px);--clll-py-md: calc(var(--clll-unit-2) - 1px);--clll-py-lg: var(--clll-unit-2);--clll-py-xl: var(--clll-unit-2_5);--clll-py-2xl: var(--clll-unit-3);--clll-py-3xl: var(--clll-unit-3_5);--clll-py-4xl: var(--clll-unit-4);--clll-py-s-xs: calc(var(--clll-py-xs) * .5);--clll-z-index-10: 10}.clll-input__message{margin-top:var(--clll-unit-1);width:100%}.clll-input__message .clll-input__message__text{font-size:var(--clll-unit-3);font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;margin:0}

package/dist/chunks/CLA11yButton.vue_vue_type_style_index_0_lang-COGwQtRU.js

@@ -0,0 +1,45 @@
+import { defineComponent as b, ref as p, computed as y, createElementBlock as k, openBlock as C, withKeys as B, normalizeClass as E, unref as s, renderSlot as x } from "vue";
+import { CLColors as A } from "../index.js";
+import { a as _ } from "./utils-Dg9e9uLW.js";
+const g = ["data-testid", "tabindex"], w = /* @__PURE__ */ b({
+  name: "CLA11yButton",
+  __name: "CLA11yButton",
+  props: {
+    color: { default: A.Neutral },
+    enabled: { type: Boolean, default: !1 },
+    fluid: { type: Boolean, default: !0 },
+    rounded: { type: Boolean, default: !0 },
+    testId: { default: "clll-a11y__button" }
+  },
+  setup(e) {
+    const t = e, u = ["a", "button"], n = p(), i = "clll-a11y__button", f = y(() => [
+      i,
+      t.enabled ? "--enabled" : "",
+      t.rounded ? "--rounded" : "",
+      t.fluid ? "--fluid" : ""
+    ]), c = (l) => {
+      if (!t.enabled) return;
+      const { target: a } = l, o = a ? a.closest("a,button") : void 0, r = [
+        ...n.value?.querySelectorAll("[data-expand-click-area]") ?? []
+      ];
+      if (r.length) {
+        const d = r[0], m = o ? u.includes(o.tagName.toLowerCase()) : null;
+        !o && d !== l.target && !m && d.click();
+      }
+    };
+    return (l, a) => (C(), k("div", {
+      ref_key: "refExpandedArea",
+      ref: n,
+      class: E([s(f), s(_)({ color: e.color })]),
+      "data-testid": e.testId,
+      tabindex: e.enabled ? 0 : void 0,
+      onClick: c,
+      onKeyup: B(c, ["enter"])
+    }, [
+      x(l.$slots, "default")
+    ], 42, g));
+  }
+});
+export {
+  w as _
+};

package/dist/chunks/CLButton.vue_vue_type_style_index_0_lang-CqgySW52.js

@@ -0,0 +1,128 @@
+import { defineComponent as C, useSlots as h, ref as S, computed as z, onMounted as B, nextTick as g, createBlock as n, openBlock as i, resolveDynamicComponent as L, normalizeStyle as k, normalizeClass as s, unref as l, withCtx as w, createCommentVNode as d, createElementBlock as A, renderSlot as R } from "vue";
+import { _ as c } from "./CLIcon.vue_vue_type_style_index_0_lang-zZ4zGuBt.js";
+import { _ as T } from "./CLSpinner.vue_vue_type_style_index_0_lang-CLccujHE.js";
+import { CLColorVariants as I, CLButtonTypes as x, CLLinkTarget as M, CLSizes as o, CLIconSizes as m, CLColors as F, CLAlign as b, CLPosition as N } from "../index.js";
+import { b as V } from "./utils-Dg9e9uLW.js";
+import { u as D } from "./useHasSlotContent-DDqs5uK9.js";
+const J = /* @__PURE__ */ C({
+  name: "CLButton",
+  __name: "CLButton",
+  props: {
+    active: { type: Boolean, default: !1 },
+    alignContent: { default: b.Center },
+    ariaLabel: { default: void 0 },
+    as: { default: "button" },
+    borderRadius: { default: void 0 },
+    busy: { type: Boolean, default: !1 },
+    color: { default: F.Neutral },
+    disabled: { type: Boolean, default: !1 },
+    elevated: { type: Boolean, default: !1 },
+    form: { default: void 0 },
+    forwardRef: { type: Function, default: void 0 },
+    height: { default: "auto" },
+    href: { default: void 0 },
+    iconAfter: { default: void 0 },
+    iconBefore: { default: void 0 },
+    iconAfterSize: { default: m.Small },
+    iconSize: { default: m.Small },
+    onClick: { type: Function, default: void 0 },
+    pill: { type: Boolean, default: !1 },
+    rounded: { type: Boolean, default: !0 },
+    size: { default: o.Small },
+    target: { default: M.Self },
+    testId: { default: "clll-button" },
+    title: { default: void 0 },
+    type: { default: x.Button },
+    variant: { default: I.Soft },
+    width: { default: "auto" },
+    wrap: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = e, r = D();
+    h();
+    const u = S(), a = "clll-button", y = z(() => [
+      a,
+      `${a}--${t.type}`,
+      `${a}--${t.color}--${t.variant}`,
+      `${a}--${t.size}`,
+      `${a}--${t.alignContent}`,
+      t.active ? `${a}--active` : "",
+      t.busy ? `${a}--busy` : "",
+      t.disabled ? `${a}--disabled` : "",
+      t.wrap ? `${a}--wrapped` : "",
+      t.rounded ? `${a}--rounded` : "",
+      t.borderRadius ? `${a}--${t.borderRadius}` : "",
+      r.value ? `${a}--has-content` : `${a}--no-content`,
+      t.iconBefore ? `${a}--icon-before` : "",
+      t.iconAfter ? `${a}--icon-after` : "",
+      t.elevated ? `${a}--elevated` : "",
+      t.pill ? `${a}--pill` : ""
+    ]), v = () => {
+      switch (t.size) {
+        case o.Medium:
+        case o.Large:
+          return o.Small;
+        case o.XL:
+          return o.Medium;
+        case o.Tiny:
+        default:
+          return o.Tiny;
+      }
+    };
+    B(() => {
+      g(() => {
+        u.value && t.forwardRef?.(u.value);
+      });
+    });
+    const $ = (f) => {
+      t.onClick?.(f);
+    };
+    return (f, E) => (i(), n(L(e.as), {
+      ref_key: "buttonRef",
+      ref: u,
+      "aria-label": e.ariaLabel,
+      class: s([l(y), l(V)({ color: e.color, variant: e.variant })]),
+      "data-testid": e.testId,
+      disabled: e.as === "button" ? e.busy || e.disabled : void 0,
+      form: e.as === "button" ? e.form : void 0,
+      href: e.as === "a" ? e.href : void 0,
+      target: e.as === "a" ? e.target : void 0,
+      title: e.title,
+      type: e.as === "button" ? e.type : void 0,
+      style: k({ width: e.width, height: e.height }),
+      onClick: $
+    }, {
+      default: w(() => [
+        e.iconBefore ? (i(), n(l(c), {
+          key: 0,
+          name: e.iconBefore,
+          size: e.iconSize,
+          "test-id": `${e.testId}-icon-before`
+        }, null, 8, ["name", "size", "test-id"])) : d("", !0),
+        l(r) ? (i(), A("span", {
+          key: 1,
+          class: s(`${a}__content`)
+        }, [
+          R(f.$slots, "default")
+        ], 2)) : d("", !0),
+        e.iconAfter ? (i(), n(l(c), {
+          key: 2,
+          name: e.iconAfter,
+          size: e.iconAfterSize,
+          "test-id": `${e.testId}-icon-after`
+        }, null, 8, ["name", "size", "test-id"])) : d("", !0),
+        e.busy ? (i(), n(l(T), {
+          key: 3,
+          align: l(b).Center,
+          position: l(N).Absolute,
+          size: v(),
+          color: e.color
+        }, null, 8, ["align", "position", "size", "color"])) : d("", !0)
+      ]),
+      _: 3
+    }, 8, ["aria-label", "class", "data-testid", "disabled", "form", "href", "target", "title", "type", "style"]));
+  }
+});
+export {
+  J as _
+};

package/dist/chunks/CLCard.vue_vue_type_style_index_0_lang-DSvubJfG.js

@@ -0,0 +1,252 @@
+import { defineComponent as W, useCssVars as I, useSlots as D, ref as v, computed as F, onMounted as K, nextTick as M, createElementBlock as r, openBlock as n, withKeys as q, normalizeClass as d, unref as l, createCommentVNode as o, createElementVNode as u, withDirectives as S, createVNode as z, vShow as x, createBlock as c, renderSlot as s, Fragment as G, withCtx as y, createTextVNode as k, toDisplayString as b } from "vue";
+import { _ as A } from "./CLHeading.vue_vue_type_style_index_0_lang-CbHdHW2E.js";
+import { _ as j } from "./CLLink.vue_vue_type_style_index_0_lang-D7BqWIqs.js";
+import { _ as m } from "./CLSkeleton.vue_vue_type_style_index_0_lang-D7_swcoA.js";
+import { _ as J } from "./CLText.vue_vue_type_style_index_0_lang-CTc6UiQV.js";
+import { CLColorVariants as E, CLCardTypes as P, CLHeadingTypes as Q, CLHeadingLevels as U, CLLinkTarget as X, CLOverflow as Y, CLLoading as Z, CLColors as p, CLAlign as _, CLOrder as O, CLTextTypes as ee } from "../index.js";
+import { c as ae } from "./utils-CFL9veAf.js";
+import { u as te } from "./useHasSlotContent-DDqs5uK9.js";
+const le = ["data-testid", "tabindex"], ie = ["alt", "loading", "src"], ne = ["alt", "loading", "src"], de = ["aria-label", "href", "target"], ye = /* @__PURE__ */ W({
+  name: "CLCard",
+  __name: "CLCard",
+  props: {
+    active: { type: Boolean, default: !1 },
+    align: { default: _.Left },
+    ariaLabel: {},
+    borderRadius: {},
+    bordered: { type: Boolean, default: !0 },
+    busy: { type: Boolean, default: !1 },
+    byline: {},
+    color: { default: p.Neutral },
+    compact: { type: Boolean, default: !1 },
+    elevated: { type: Boolean, default: !1 },
+    forwardRef: {},
+    height: { default: "auto" },
+    href: {},
+    image: {},
+    imageAltText: { default: "" },
+    imageHeight: { default: "auto" },
+    imageLoading: { default: Z.Eager },
+    imageOrder: {},
+    imageWidth: { default: "auto" },
+    onClick: {},
+    overflow: { default: Y.Hidden },
+    padded: { type: Boolean, default: !0 },
+    rounded: { type: Boolean, default: !0 },
+    target: { default: X.Self },
+    testId: { default: "clll-card" },
+    title: {},
+    titleHLevel: { default: U.H2 },
+    titleType: { default: Q.SubSection },
+    truncateTitle: { type: Boolean, default: !1 },
+    type: { default: P.Medium },
+    variant: { default: E.Soft },
+    width: { default: "auto" }
+  },
+  setup(e) {
+    I((i) => ({
+      v788294c1: i.width,
+      v7e01098c: i.height,
+      v561da727: i.overflow,
+      v6ce6f310: i.imageWidth,
+      v1628751d: i.imageHeight
+    }));
+    const a = "clll-card", t = e, C = te(), L = D(), $ = v(), w = v(), N = ["a", "button"], h = v(), V = F(() => [
+      a,
+      `${a}--${t.type}`,
+      `${a}--${t.color}-${t.variant}`,
+      `${a}--${t.variant}`,
+      `${a}--align-${t.align}`,
+      t.rounded ? `${a}--rounded` : `${a}--box`,
+      t.bordered ? `${a}--bordered` : "",
+      t.borderRadius ? `${a}--${t.borderRadius}` : "",
+      t.busy ? `${a}--busy` : `${a}--ready`,
+      t.compact ? `${a}--compact` : `${a}--no-compact`,
+      t.title || t.byline ? `${a}--has-header` : `${a}--no-header`,
+      $.value ? `${a}--has-heading` : `${a}--no-heading`,
+      C.value ? `${a}--has-content` : `${a}--no-content`,
+      w.value ? `${a}--has-footer` : `${a}--no-footer`,
+      t.image ? `${a}--has-image` : `${a}--has-no-image`,
+      t.imageOrder ? `${a}--image-${t.imageOrder}` : "",
+      t.active ? `${a}--active` : `${a}--inactive`,
+      t.onClick ? `${a}--has-link` : "",
+      t.truncateTitle ? `${a}--has-truncated-title` : "",
+      t.elevated ? `${a}--elevated` : "",
+      t.overflow ? `${a}--overflow-${t.overflow}` : "",
+      t.padded ? "" : `${a}--no-padding`
+    ]), T = (i) => {
+      if (t.busy || !t.onClick) return;
+      const { target: g } = i, f = g ? g.closest("a,button") : void 0, H = [
+        ...h.value?.querySelectorAll("[data-expand-click-area]") ?? []
+      ];
+      if (H.length) {
+        const B = H[0], R = f ? N.includes(f.tagName.toLowerCase()) : null;
+        !f && B !== i.target && !R && B.click();
+      }
+    };
+    return K(async () => {
+      await M(), h.value && t.forwardRef?.(h.value), $.value = L?.heading, w.value = L?.footer;
+    }), (i, g) => (n(), r("div", {
+      ref_key: "refExpandedArea",
+      ref: h,
+      class: d([l(V), l(ae)({ color: e.color, variant: e.variant })]),
+      "data-testid": e.testId,
+      tabindex: e.onClick ? 0 : void 0,
+      onClick: T,
+      onKeyup: q(T, ["enter"])
+    }, [
+      e.image && (e.imageOrder === l(O).Before || !e.imageOrder) ? (n(), r("div", {
+        key: 0,
+        class: d(`${a}__image`)
+      }, [
+        S(z(l(m), {
+          width: e.imageWidth,
+          height: e.imageHeight,
+          rounded: !1
+        }, null, 8, ["width", "height"]), [
+          [x, e.busy]
+        ]),
+        S(u("img", {
+          alt: e.imageAltText,
+          class: d(`${a}__image__elem`),
+          loading: e.imageLoading,
+          src: e.image
+        }, null, 10, ie), [
+          [x, !e.busy]
+        ])
+      ], 2)) : o("", !0),
+      u("div", {
+        class: d(`${a}__content`)
+      }, [
+        u("div", {
+          class: d(`${a}__header`)
+        }, [
+          e.busy ? (n(), c(l(m), {
+            key: 0,
+            height: "28px"
+          })) : o("", !0),
+          e.busy ? (n(), c(l(m), {
+            key: 1,
+            width: "70%",
+            height: "16px"
+          })) : o("", !0),
+          !e.onClick && !e.href ? (n(), r(G, { key: 2 }, [
+            s(i.$slots, "heading"),
+            e.title && !e.busy ? (n(), c(l(A), {
+              key: 0,
+              align: e.align,
+              class: d(`${a}__heading`),
+              color: e.color,
+              level: e.titleHLevel,
+              truncate: e.truncateTitle,
+              type: e.titleType
+            }, {
+              default: y(() => [
+                k(b(e.title), 1)
+              ]),
+              _: 1
+            }, 8, ["align", "class", "color", "level", "truncate", "type"])) : o("", !0)
+          ], 64)) : e.title || l($) && (e.onClick || e.href) ? (n(), c(l(j), {
+            key: 3,
+            "aria-label": e.ariaLabel,
+            color: e.color,
+            href: e.href,
+            target: e.target,
+            "on-click": e.onClick,
+            "data-expand-click-area": ""
+          }, {
+            default: y(() => [
+              s(i.$slots, "heading"),
+              e.title && !e.busy ? (n(), c(l(A), {
+                key: 0,
+                align: e.align,
+                class: d(`${a}__heading`),
+                color: e.color,
+                level: e.titleHLevel,
+                truncate: e.truncateTitle,
+                type: e.titleType
+              }, {
+                default: y(() => [
+                  k(b(e.title), 1)
+                ]),
+                _: 1
+              }, 8, ["align", "class", "color", "level", "truncate", "type"])) : o("", !0)
+            ]),
+            _: 3
+          }, 8, ["aria-label", "color", "href", "target", "on-click"])) : o("", !0),
+          s(i.$slots, "byline"),
+          e.byline && !e.busy ? (n(), c(l(J), {
+            key: 4,
+            align: e.align,
+            class: d(`${a}__byline`),
+            color: e.color,
+            type: l(ee).Small
+          }, {
+            default: y(() => [
+              k(b(e.byline), 1)
+            ]),
+            _: 1
+          }, 8, ["align", "class", "color", "type"])) : o("", !0)
+        ], 2),
+        u("div", {
+          class: d(`${a}__slot`)
+        }, [
+          u("div", {
+            ref: "slot-content",
+            class: d([`${a}__slot-content`, { busy: e.busy }])
+          }, [
+            l(C) && e.busy ? (n(), c(l(m), {
+              key: 0,
+              width: "100%",
+              height: "100%"
+            })) : o("", !0),
+            u("div", null, [
+              s(i.$slots, "default")
+            ])
+          ], 2)
+        ], 2),
+        u("div", {
+          class: d(`${a}__footer`)
+        }, [
+          s(i.$slots, "footer")
+        ], 2)
+      ], 2),
+      e.image && e.imageOrder === l(O).After ? (n(), r("div", {
+        key: 1,
+        class: d(`${a}__image`)
+      }, [
+        e.busy ? (n(), c(l(m), {
+          key: 0,
+          width: e.imageWidth,
+          height: e.imageHeight,
+          rounded: !1
+        }, null, 8, ["width", "height"])) : o("", !0),
+        s(i.$slots, "image"),
+        e.busy ? o("", !0) : (n(), r("img", {
+          key: 1,
+          alt: e.imageAltText,
+          class: d(`${a}__image__elem`),
+          loading: e.imageLoading,
+          src: e.image
+        }, null, 10, ne))
+      ], 2)) : o("", !0),
+      !e.title && (e.onClick || e.href) ? (n(), r("a", {
+        key: 2,
+        "aria-label": e.ariaLabel,
+        class: "sr-only",
+        href: e.href,
+        target: e.target,
+        "data-expand-click-area": "",
+        onClick: g[0] || (g[0] = //@ts-ignore
+        (...f) => e.onClick && e.onClick(...f))
+      }, null, 8, de)) : o("", !0),
+      e.onClick && e.variant !== l(E).Ghost ? (n(), r("div", {
+        key: 3,
+        class: d(`${a}__hover-elem`)
+      }, null, 2)) : o("", !0)
+    ], 42, le));
+  }
+});
+export {
+  ye as _
+};

package/dist/chunks/CLFormCharCounter.vue_vue_type_style_index_0_lang-CJ4VrvmR.js

@@ -0,0 +1,38 @@
+import { defineComponent as l, computed as a, createElementBlock as n, openBlock as s, normalizeClass as u, unref as m, createElementVNode as i, toDisplayString as r } from "vue";
+import { CLSizes as f, CLCharCounterLayout as o, CLColors as h } from "../index.js";
+const d = ["data-testid"], C = {
+  "aria-live": "polite",
+  class: "clll-form-char-counter__char-counter__text",
+  role: "status"
+}, g = /* @__PURE__ */ l({
+  name: "CLFormCharCounter",
+  __name: "CLFormCharCounter",
+  props: {
+    color: { default: h.Neutral },
+    cssPrefix: {},
+    currentLength: {},
+    layout: { default: o.Block },
+    maxLength: {},
+    size: { default: f.Small },
+    testId: { default: "clll-form-char-counter" }
+  },
+  setup(t) {
+    const e = t, c = a(() => [
+      `${e.cssPrefix}__char-counter`,
+      "clll-form-char-counter",
+      `clll-form-char-counter--${e.layout}`,
+      `clll-form-char-counter--${e.size}`,
+      `clll-form-char-counter--${e.color}`,
+      e.layout === o.Inline ? "form-counter-flex" : ""
+    ]);
+    return (_, L) => (s(), n("span", {
+      class: u(m(c)),
+      "data-testid": t.testId
+    }, [
+      i("div", C, r(t.currentLength) + "/" + r(t.maxLength), 1)
+    ], 10, d));
+  }
+});
+export {
+  g as _
+};

package/dist/chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-ORvye4vi.js

@@ -0,0 +1,43 @@
+import { defineComponent as r, createElementBlock as i, openBlock as o, normalizeClass as a, createVNode as m, unref as d, withCtx as n, createTextVNode as c, toDisplayString as f } from "vue";
+import { _ as u } from "./CLText.vue_vue_type_style_index_0_lang-CTc6UiQV.js";
+import { CLSizes as l, CLTextTypes as t } from "../index.js";
+const b = ["for", "data-testid"], h = /* @__PURE__ */ r({
+  name: "CLFormLabel",
+  __name: "CLFormLabel",
+  props: {
+    cssPrefix: { default: "clll-form" },
+    htmlFor: {},
+    label: {},
+    required: { type: Boolean, default: !1 },
+    size: { default: l.Small },
+    testId: { default: "clll-form-label" }
+  },
+  setup(e) {
+    const s = {
+      [l.Tiny]: t.Tiny,
+      [l.Small]: t.Small,
+      [l.Medium]: t.Medium,
+      [l.Large]: t.Body,
+      [l.XL]: t.Body
+    };
+    return (y, L) => (o(), i("label", {
+      for: e.htmlFor,
+      class: a(`${e.cssPrefix}__label`),
+      "data-testid": e.testId
+    }, [
+      m(d(u), {
+        as: "span",
+        type: s[e.size],
+        class: a(e.required ? `${e.cssPrefix}__label--required` : "")
+      }, {
+        default: n(() => [
+          c(f(e.label), 1)
+        ]),
+        _: 1
+      }, 8, ["type", "class"])
+    ], 10, b));
+  }
+});
+export {
+  h as _
+};

package/dist/chunks/CLHeading.vue_vue_type_style_index_0_lang-CbHdHW2E.js

@@ -0,0 +1,50 @@
+import { defineComponent as i, computed as r, createBlock as u, openBlock as f, resolveDynamicComponent as p, unref as o, normalizeClass as m, withCtx as g, renderSlot as C } from "vue";
+import { CLHeadingTypes as l, CLColors as $, CLAlign as L, CLHeadingLevels as n } from "../index.js";
+import { t as h } from "./utils-DYzsHCvl.js";
+const T = /* @__PURE__ */ i({
+  name: "CLHeading",
+  __name: "CLHeading",
+  props: {
+    align: { default: L.Left },
+    bolder: { type: Boolean, default: !1 },
+    color: { default: $.Secondary },
+    level: {},
+    testId: { default: "clll-heading" },
+    truncate: { type: Boolean, default: !1 },
+    type: { default: l.Title }
+  },
+  setup(a) {
+    const e = a, t = "clll-heading", s = r(() => {
+      if (e.level) return e.level;
+      switch (e.type) {
+        case l.Section:
+          return n.H2;
+        case l.SubSection:
+          return n.H3;
+        case l.PageTitle:
+        case l.Title:
+        default:
+          return n.H1;
+      }
+    }), c = r(() => [
+      t,
+      `${t}--${e.align}`,
+      `${t}--${e.color}`,
+      `${t}--${e.truncate ? "wrap" : "nowrap"}`,
+      `${t}--${e.type}`,
+      e.bolder ? `${t}--bolder` : ""
+    ]);
+    return (d, y) => (f(), u(p(o(s)), {
+      class: m([o(c), o(h)({ color: a.color })]),
+      "data-testid": a.testId
+    }, {
+      default: g(() => [
+        C(d.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class", "data-testid"]));
+  }
+});
+export {
+  T as _
+};