@codeandfunction/callaloo 3.15.2 → 3.16.0

package/dist/components/Containers/CLCarousel/CLCarousel.js

@@ -0,0 +1,436 @@
+import './CLCarousel.css';
+import { defineComponent as re, computed as u, createElementBlock as c, openBlock as s, Fragment as j, createCommentVNode as C, unref as e, normalizeClass as l, renderList as me, createBlock as he, createElementVNode as y, createVNode as x, withCtx as X, createTextVNode as Y, toDisplayString as q, useCssVars as be, ref as r, onMounted as we, onUnmounted as pe, watch as Ce, renderSlot as Z, nextTick as se } from "vue";
+import { _ as E } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-CqgySW52.js";
+import { _ as ce } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-CTc6UiQV.js";
+import { CLPaginationType as $, CLColorVariants as B, CLSizes as W, CLIconSizes as D, CLIconNames as O, CLTextTypes as xe, CLAlign as A, CLOrder as R, CLColors as ye } from "../../../index.js";
+import { i as H, h as Pe, j as $e } from "../../../chunks/base-theme-B89pbWnC.js";
+import { u as Te } from "../../../chunks/useHasSlotContent-DDqs5uK9.js";
+const Q = /* @__PURE__ */ re({
+  name: "CLCarouselNavigation",
+  __name: "CLCarouselNavigation",
+  props: {
+    color: {},
+    currentPage: {},
+    enabled: { type: Boolean },
+    gotoPage: {},
+    moreAriaLabel: { default: "Navigate to page to see more results" },
+    moreLabel: {},
+    nextPageEnabled: { type: Boolean },
+    paginationType: {},
+    prefix: {},
+    prevPageEnabled: { type: Boolean },
+    showMore: {},
+    showNextItems: {},
+    showPrevItems: {},
+    totalPages: {},
+    variant: {}
+  },
+  setup(a) {
+    const o = a, i = u(() => [
+      `${o.prefix}__dots-container`
+    ]), I = u(() => [
+      `${o.prefix}__numbered-container`
+    ]), T = u(() => [
+      `${o.prefix}__inline-container`
+    ]), f = u(() => [
+      `${o.prefix}__prev-page`
+    ]), g = u(() => [
+      `${o.prefix}__next-page`
+    ]), N = u(() => [
+      `${o.prefix}__page-indicator`
+    ]), k = u(() => [
+      `${o.prefix}__show-more`
+    ]), L = (m) => o.currentPage === m, v = u(() => !o.enabled || !o.prevPageEnabled), w = u(() => !o.enabled || !o.nextPageEnabled);
+    return (m, h) => (s(), c(j, null, [
+      a.paginationType === e($).Dots ? (s(), c("div", {
+        key: 0,
+        class: l(e(i))
+      }, [
+        (s(!0), c(j, null, me(a.totalPages, (b) => (s(), he(e(E), {
+          key: `dot-${b}`,
+          "aria-label": `Show page ${b}`,
+          color: a.color,
+          disabled: L(b),
+          height: "0.75rem",
+          "on-click": () => a.gotoPage(b),
+          width: "0.75rem",
+          variant: L(b) ? e(B).Outline : a.variant,
+          wrap: ""
+        }, null, 8, ["aria-label", "color", "disabled", "on-click", "variant"]))), 128))
+      ], 2)) : C("", !0),
+      a.paginationType === e($).Numbered ? (s(), c("div", {
+        key: 1,
+        class: l(e(I))
+      }, [
+        y("div", {
+          class: l(e(f))
+        }, [
+          x(e(E), {
+            "aria-label": "Show previous page of slides",
+            color: a.color,
+            disabled: e(v),
+            "icon-before": e(O).ChevronLeft,
+            "icon-size": e(D).Tiny,
+            size: e(W).Tiny,
+            "on-click": a.showPrevItems,
+            variant: e(v) ? e(B).Text : a.variant
+          }, null, 8, ["color", "disabled", "icon-before", "icon-size", "size", "on-click", "variant"])
+        ], 2),
+        y("div", {
+          class: l(e(N))
+        }, [
+          x(e(ce), {
+            type: e(xe).Small
+          }, {
+            default: X(() => [
+              Y(q(a.currentPage) + " / " + q(a.totalPages), 1)
+            ]),
+            _: 1
+          }, 8, ["type"])
+        ], 2),
+        y("div", {
+          class: l(e(g))
+        }, [
+          x(e(E), {
+            "aria-label": "Show next page of slides",
+            color: a.color,
+            disabled: e(w),
+            "icon-before": e(O).ChevronRight,
+            "icon-size": e(D).Tiny,
+            size: e(W).Tiny,
+            "on-click": a.showNextItems,
+            variant: e(w) ? e(B).Text : a.variant
+          }, null, 8, ["color", "disabled", "icon-before", "icon-size", "size", "on-click", "variant"])
+        ], 2),
+        a.showMore ? (s(), c("div", {
+          key: 0,
+          class: l(e(k))
+        }, [
+          x(e(E), {
+            "aria-label": a.moreAriaLabel,
+            color: a.color,
+            size: e(W).Small,
+            "on-click": a.showMore,
+            variant: a.variant
+          }, {
+            default: X(() => [
+              Y(q(a.moreLabel), 1)
+            ]),
+            _: 1
+          }, 8, ["aria-label", "color", "size", "on-click", "variant"])
+        ], 2)) : C("", !0)
+      ], 2)) : C("", !0),
+      a.paginationType === e($).Inline ? (s(), c("div", {
+        key: 2,
+        class: l(e(T))
+      }, [
+        y("div", {
+          class: l(e(f))
+        }, [
+          x(e(E), {
+            "aria-label": "Show previous page of slides",
+            "align-content": e(A).Center,
+            color: a.color,
+            disabled: e(v),
+            "icon-before": e(O).ChevronLeft,
+            "icon-size": e(D).Small,
+            size: e(W).Tiny,
+            "on-click": a.showPrevItems,
+            variant: e(v) ? e(B).Text : a.variant,
+            width: "30px",
+            height: "30px",
+            wrap: ""
+          }, null, 8, ["align-content", "color", "disabled", "icon-before", "icon-size", "size", "on-click", "variant"])
+        ], 2),
+        y("div", {
+          class: l(e(g))
+        }, [
+          x(e(E), {
+            "aria-label": "Show next page of slides",
+            "align-content": e(A).Center,
+            color: a.color,
+            disabled: e(w),
+            "icon-before": e(O).ChevronRight,
+            "icon-size": e(D).Small,
+            size: e(W).Tiny,
+            "on-click": a.showNextItems,
+            variant: e(w) ? e(B).Text : a.variant,
+            width: "30px",
+            height: "30px",
+            wrap: ""
+          }, null, 8, ["align-content", "color", "disabled", "icon-before", "icon-size", "size", "on-click", "variant"])
+        ], 2)
+      ], 2)) : C("", !0)
+    ], 64));
+  }
+}), ke = ["data-testid"], Le = ["hidden"], Se = /* @__PURE__ */ re({
+  name: "CLCarousel",
+  __name: "CLCarousel",
+  props: {
+    color: { default: ye.Neutral },
+    controlAlign: { default: A.Right },
+    controlPosition: { default: R.Before },
+    enabled: { type: Boolean, default: !0 },
+    moreLabel: { default: "More" },
+    onShowMore: {},
+    paginationType: { default: $.Numbered },
+    perPage: { default: 3 },
+    perPageByBreakpoints: {},
+    testId: { default: "clll-carousel" },
+    title: {},
+    variant: { default: B.Soft },
+    width: { default: "100%" }
+  },
+  setup(a) {
+    be((t) => ({
+      v512ef87c: t.width,
+      v34e944c2: e(F)
+    }));
+    const o = "clll-carousel", i = a, I = r(), T = r(!1), f = r(1), g = r(i.perPage), N = Te("title"), k = r(!1), L = r(!1), v = r(!1), w = r(), m = r(!1), h = r(), b = r(), F = r("100%"), P = r(0), S = r(0), _ = () => {
+      if (i.perPageByBreakpoints?.length) {
+        g.value = i.perPage;
+        for (const [t, n] of i.perPageByBreakpoints)
+          window.matchMedia(`(min-width: ${t}px)`).matches && (g.value = n);
+      }
+    }, ee = () => {
+      if (h?.value && S.value) {
+        const n = Math.ceil(S.value / g.value);
+        P.value = n, n > 1 && (k.value = !0);
+      }
+    }, de = () => {
+      se(() => {
+        let t, n;
+        const d = h?.value;
+        if (d) {
+          const p = d?.querySelectorAll(
+            `div[class="${o}__slides"] > *`
+          ) ?? [], z = S.value - 1;
+          for (let M = 0; M < P.value; M++) {
+            const V = g.value * (M + 1) - 1, ge = V < z ? p[V] : p[z], ie = V < z ? V : z;
+            $e({ parent: d, child: ge, leftOffset: 40, rightOffset: 40, threshold: 0.5 }) && (ie === z ? (n = z, t = M + 1) : (n = ie, t = M + 1));
+          }
+          n !== void 0 && n > -1 && t && (f.value = t, t > 1 && (L.value = !0), t === 1 && (L.value = !1), t < P.value && (k.value = !0), t === P.value && (k.value = !1));
+        }
+      });
+    }, ae = (t) => {
+      I.value && se(() => {
+        const n = Pe(I.value) && !N.value;
+        !n && (t.title || t.controlPosition === R.Before) ? T.value = !1 : T.value = n;
+      });
+    }, U = (t) => {
+      const n = h?.value, d = n.offsetWidth;
+      if (n && d) {
+        const p = t - 1, z = d * p;
+        n.scrollTo({ left: z, behavior: "smooth" });
+      }
+    }, te = () => {
+      v.value = !0, f.value = 1, _(), ne(), ee();
+      const t = h?.value, n = t.offsetWidth;
+      if (t) {
+        const d = f.value - 1, p = n * d;
+        t.scrollLeft = p;
+      }
+      H && v.value && (window.clearTimeout(w.value), w.value = window.setTimeout(() => {
+        v.value && (v.value = !1), window.clearTimeout(w.value);
+      }, 300));
+    }, oe = () => {
+      v.value || (m.value = !0, H && m.value && (window.clearTimeout(b.value), b.value = window.setTimeout(() => {
+        m.value && G(), window.clearTimeout(b.value);
+      }, 200)));
+    }, G = () => {
+      v.value || (m.value = !1, de());
+    }, ne = () => {
+      const t = h?.value;
+      if (t) {
+        const n = t.offsetWidth;
+        S.value >= g.value ? F.value = `${n / g.value}px` : F.value = `${n / S.value}px`;
+      }
+    }, J = () => {
+      const t = h?.value, n = t.offsetWidth;
+      if (t && n) {
+        const d = f.value, p = n * d;
+        t.scrollTo({ left: p, behavior: "smooth" });
+      }
+    }, K = () => {
+      const t = h?.value, n = t.offsetWidth;
+      if (t && n) {
+        const d = f.value - 1, p = n * (d - 1);
+        t.scrollTo({ left: p, behavior: "smooth" });
+      }
+    };
+    we(() => {
+      if (H) {
+        window.addEventListener("resize", te);
+        const t = h?.value;
+        if (t) {
+          const n = t?.querySelectorAll(
+            `div[class="${o}__slides"] > *`
+          ) ?? [];
+          S.value = n.length, t.addEventListener("scroll", oe), t.addEventListener("scrollend", G);
+        }
+        ae(i), _(), ne(), ee();
+      }
+    }), pe(() => {
+      if (H) {
+        window.removeEventListener("resize", te), w.value && window.clearTimeout(w.value), b.value && window.clearTimeout(b.value);
+        const t = h?.value;
+        t && (t.removeEventListener("scroll", oe), t.removeEventListener("scrollend", G));
+      }
+    });
+    const ue = u(() => [
+      o,
+      `${o}--${i.controlAlign}`,
+      `${o}--${i.controlPosition}`,
+      `${o}--${i.paginationType}`,
+      i.enabled ? `${o}--enabled` : `${o}--disabled`,
+      T.value ? "" : `${o}--hastitle`,
+      i.onShowMore ? `${o}--has-more` : ""
+    ]), ve = u(() => [
+      `${o}__slide-controls`,
+      N.value ? `${o}__slide-controls--hascustomtitle` : ""
+    ]), fe = u(() => [
+      `${o}__slides`,
+      v.value ? `${o}__slides--resizing` : "",
+      m.value ? `${o}__slides--scrolling` : ""
+    ]), le = u(() => [
+      `${o}__navigation`,
+      `${o}__navigation--${i.controlAlign}`,
+      `${o}__navigation--${i.controlPosition}`
+    ]);
+    return Ce(i, (t) => {
+      ae(t);
+    }), (t, n) => (s(), c("div", {
+      class: l(e(ue)),
+      "data-testid": a.testId
+    }, [
+      y("div", {
+        ref_key: "beforeControls",
+        ref: I,
+        class: l(e(ve)),
+        hidden: e(T)
+      }, [
+        y("div", {
+          class: l(`${o}__custom-title`)
+        }, [
+          Z(t.$slots, "title")
+        ], 2),
+        a.title ? (s(), c("div", {
+          key: 0,
+          class: l(`${o}__title`)
+        }, [
+          x(e(ce), {
+            align: e(N) ? e(A).Center : e(A).Left,
+            label: "",
+            truncate: ""
+          }, {
+            default: X(() => [
+              Y(q(a.title), 1)
+            ]),
+            _: 1
+          }, 8, ["align"])
+        ], 2)) : C("", !0),
+        a.controlPosition === e(R).Before && ![e($).Inline, e($).Hidden].includes(a.paginationType) ? (s(), c(j, { key: 1 }, [
+          e(P) && e(S) > e(g) ? (s(), c("div", {
+            key: 0,
+            class: l(e(le))
+          }, [
+            x(Q, {
+              color: a.color,
+              "current-page": e(f),
+              enabled: !e(m),
+              "goto-page": U,
+              "more-label": a.moreLabel,
+              "next-page-enabled": e(k),
+              "pagination-type": a.paginationType,
+              "prev-page-enabled": e(L),
+              prefix: o,
+              "show-more": a.onShowMore,
+              "show-next-items": J,
+              "show-prev-items": K,
+              "total-pages": e(P),
+              variant: a.variant
+            }, null, 8, ["color", "current-page", "enabled", "more-label", "next-page-enabled", "pagination-type", "prev-page-enabled", "show-more", "total-pages", "variant"])
+          ], 2)) : C("", !0)
+        ], 64)) : C("", !0)
+      ], 10, Le),
+      y("div", {
+        ref_key: "scrollContainer",
+        ref: h,
+        class: l(e(fe)),
+        tabindex: "0"
+      }, [
+        Z(t.$slots, "default")
+      ], 2),
+      a.controlPosition === e(R).After && ![e($).Inline, e($).Hidden].includes(a.paginationType) ? (s(), c(j, { key: 0 }, [
+        e(P) && e(S) > e(g) ? (s(), c("div", {
+          key: 0,
+          class: l(`${o}__slide-controls`)
+        }, [
+          y("div", {
+            class: l(e(le))
+          }, [
+            x(Q, {
+              color: a.color,
+              "current-page": e(f),
+              enabled: !e(m),
+              "goto-page": U,
+              "more-label": a.moreLabel,
+              "next-page-enabled": e(k),
+              "pagination-type": a.paginationType,
+              prefix: o,
+              "prev-page-enabled": e(L),
+              "show-more": a.onShowMore,
+              "show-next-items": J,
+              "show-prev-items": K,
+              "total-pages": e(P),
+              variant: a.variant
+            }, null, 8, ["color", "current-page", "enabled", "more-label", "next-page-enabled", "pagination-type", "prev-page-enabled", "show-more", "total-pages", "variant"])
+          ], 2)
+        ], 2)) : C("", !0)
+      ], 64)) : C("", !0),
+      a.paginationType === e($).Inline ? (s(), c("div", {
+        key: 1,
+        class: l(`${o}__slide-controls ${o}__slide-controls--inline`)
+      }, [
+        y("div", {
+          class: l(`${o}__navigation`)
+        }, [
+          x(Q, {
+            color: a.color,
+            "current-page": e(f),
+            enabled: !e(m),
+            "goto-page": U,
+            "more-label": a.moreLabel,
+            "next-page-enabled": e(k),
+            "pagination-type": a.paginationType,
+            prefix: o,
+            "prev-page-enabled": e(L),
+            "show-more": a.onShowMore,
+            "show-next-items": J,
+            "show-prev-items": K,
+            "total-pages": e(P),
+            variant: a.variant
+          }, null, 8, ["color", "current-page", "enabled", "more-label", "next-page-enabled", "pagination-type", "prev-page-enabled", "show-more", "total-pages", "variant"])
+        ], 2)
+      ], 2)) : C("", !0)
+    ], 10, ke));
+  }
+}), ze = (a, o) => {
+  const i = a.__vccOpts || a;
+  for (const [I, T] of o)
+    i[I] = T;
+  return i;
+}, Ie = {}, Ee = {
+  class: /* @__PURE__ */ l(["clll-carousel__slide"])
+};
+function Be(a, o) {
+  return s(), c("div", Ee, [
+    Z(a.$slots, "default")
+  ]);
+}
+const Ne = /* @__PURE__ */ ze(Ie, [["render", Be]]), Me = Se;
+Me.Slide = Ne;
+export {
+  Me as CLCarousel,
+  Me as default
+};

package/dist/components/Containers/CLCarousel/CLCarousel.vue.d.ts

@@ -1,4 +1,4 @@
-import { CLAlign, CLColors, CLColorVariants, CLPaginationType, CLOrder } from '../../../index.ts';
+import { CLAlign, CLColors, CLColorVariants, CLPaginationType, CLOrder } from '../../../types';
 export interface CLCarouselProps {
     /** Sets the color of the carousel navigation components. The property can be one of `CLColors`, e.g. `CLColors.Primary`. */
     color?: CLColors;
@@ -31,8 +31,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CL
     color: CLColors;
     width: string;
     variant: CLColorVariants;
-    testId: string;
     enabled: boolean;
+    testId: string;
     moreLabel: string;
     paginationType: CLPaginationType;
     controlAlign: CLAlign;

package/dist/components/Containers/CLCarousel/CLCarouselNavigation.vue.d.ts

@@ -1,4 +1,4 @@
-import { CLColors, CLColorVariants, CLGenericFunction, CLPaginationType } from '../../../index.ts';
+import { CLColors, CLColorVariants, CLGenericFunction, CLPaginationType } from '../../../types';
 export interface CLCarouselNavigationProps {
     /** Sets the color of the navigation components. */
     color: CLColors;

package/dist/components/Containers/CLDisclosure/CLDisclosure.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-disclosure .clll-disclosure__trigger .clll-button{display:block}.clll-disclosure.clll-disclosure--tiny .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-disclosure.clll-disclosure--small .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2_5)}.clll-disclosure.clll-disclosure--medium .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3)}.clll-disclosure.clll-disclosure--large .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3_5)}.clll-disclosure.clll-disclosure--xlarge .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-4_5)}.clll-disclosure.clll-disclosure--padded .clll-disclosure__content.clll-disclosure__content--tiny{padding:var(--clll-py-sm) var(--clll-unit-2)}.clll-disclosure.clll-disclosure--padded .clll-disclosure__content.clll-disclosure__content--small{padding:var(--clll-py-md) var(--clll-unit-2_5)}.clll-disclosure.clll-disclosure--padded .clll-disclosure__content.clll-disclosure__content--medium{padding:var(--clll-py-lg) var(--clll-unit-3)}.clll-disclosure.clll-disclosure--padded .clll-disclosure__content.clll-disclosure__content--large{padding:var(--clll-py-xl) var(--clll-unit-3_5)}.clll-disclosure.clll-disclosure--padded .clll-disclosure__content.clll-disclosure__content--xlarge{padding:var(--clll-py-2xl) var(--clll-unit-4_5)}.clll-disclosure.clll-disclosure--expanded .clll-disclosure__trigger .clll-button.clll-button--rounded{border-bottom-left-radius:0;border-bottom-right-radius:0}.clll-disclosure.clll-disclosure--expanded .clll-disclosure__content{display:block}.clll-disclosure.clll-disclosure--collapsed .clll-disclosure__content{display:none}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-full,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-lg,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-md,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-sm,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-xs,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-xl,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-2xl,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-3xl,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-none,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-none .clll-{border-radius:0}.clll-disclosure.clll-disclosure--compact .clll-disclosure__trigger{padding:0}.clll-disclosure.clll-disclosure--compact .clll-disclosure__trigger .clll-button,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content.clll-disclosure__content--tiny,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content.clll-disclosure__content--small,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content.clll-disclosure__content--medium,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content.clll-disclosure__content--large,.clll-disclosure.clll-disclosure--compact .clll-disclosure__content.clll-disclosure__content--xlarge{padding:var(--clll-unit-1) 0}.clll-disclosure:not(.clll-disclosure--bordered){border:0}.clll-disclosure:not(.clll-disclosure--bordered) .clll-disclosure__trigger .clll-button{border:0}.clll-disclosure:not(.clll-disclosure--bordered) .clll-disclosure__content{border:0}.clll-disclosure .clll-disclosure__heading{display:flex;flex-direction:row;align-items:center}.clll-disclosure .clll-disclosure__heading .clll-heading{flex:1}.clll-disclosure:not(.clll-disclosure--hasheading) .clll-disclosure__text-subheading{flex:1 1 0%}

package/dist/components/Containers/CLDisclosure/CLDisclosure.js

@@ -0,0 +1,137 @@
+import './CLDisclosure.css';
+import { defineComponent as S, ref as g, computed as $, onBeforeUnmount as L, createElementBlock as I, openBlock as i, normalizeClass as o, unref as d, createElementVNode as c, createVNode as T, withCtx as u, createBlock as l, createCommentVNode as s, createTextVNode as b, toDisplayString as y, renderSlot as H } from "vue";
+import { _ as k } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-CqgySW52.js";
+import { _ as E } from "../../../chunks/CLHeading.vue_vue_type_style_index_0_lang-CbHdHW2E.js";
+import { _ as h } from "../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-zZ4zGuBt.js";
+import { _ as N } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-CTc6UiQV.js";
+import { CLColorVariants as R, CLSizes as w, CLTextTypes as A, CLIconSizes as D, CLIconNames as C, CLHeadingTypes as V, CLColors as p, CLBorderRadius as M, CLButtonTypes as U } from "../../../index.js";
+import { d as F } from "../../../chunks/utils-CFL9veAf.js";
+import { u as j } from "../../../chunks/useEsc-BGAp0d_1.js";
+const q = ["data-testid"], G = ["id", "aria-labelledby", "aria-hidden"], _ = /* @__PURE__ */ S({
+  name: "CLDisclosure",
+  __name: "CLDisclosure",
+  props: {
+    bordered: { type: Boolean, default: !0 },
+    borderRadius: { default: M.Medium },
+    color: { default: p.Neutral },
+    compact: { type: Boolean, default: !1 },
+    contentSpacing: { type: Boolean, default: !0 },
+    disclosureId: {},
+    expanded: { type: Boolean, default: !1 },
+    expandedIcon: { default: C.ChevronUp },
+    heading: {},
+    headingLevel: {},
+    headingType: { default: V.Section },
+    iconAfter: { default: C.ChevronDown },
+    iconAfterSize: { default: D.Medium },
+    iconBefore: {},
+    iconBeforeSize: {},
+    rounded: { type: Boolean, default: !0 },
+    subHeading: {},
+    subHeadingType: { default: A.Body },
+    testId: { default: "clll-disclosure" },
+    triggerButtonSize: { default: w.Medium },
+    variant: { default: R.Soft }
+  },
+  setup(e) {
+    const a = "clll-disclosure", t = e;
+    let f = g();
+    const n = g(t.expanded), v = $(() => [
+      a,
+      `${a}--${t.color}--${t.variant}`,
+      `${a}--${t.triggerButtonSize}`,
+      t.bordered ? `${a}--bordered` : "",
+      t.borderRadius ? `${a}--${t.borderRadius}` : "",
+      t.contentSpacing ? `${a}--padded` : `${a}--nopadding`,
+      t.compact ? `${a}--compact` : "",
+      n.value ? `${a}--expanded` : `${a}--collapsed`,
+      t.heading ? `${a}--hasheading` : "",
+      t.subHeading ? `${a}--hassubheading` : "",
+      t.rounded ? `${a}--rounded` : `${a}--box`
+    ]), B = $(() => [
+      `${a}__content`,
+      `${a}__content--${t.triggerButtonSize}`
+    ]), z = (r) => {
+      r && (f.value = r);
+    }, m = () => {
+      n.value ? n.value = !1 : n.value = !0;
+    }, { clearEventListeners: x } = j({ escHandler: m, triggerElem: f });
+    return L(() => {
+      x();
+    }), (r, J) => (i(), I("div", {
+      class: o([d(v), d(F)({ color: e.color, variant: e.variant })]),
+      "data-testid": e.testId
+    }, [
+      c("div", {
+        class: o(`${a}__trigger`)
+      }, [
+        T(d(k), {
+          id: `${a}__button--${e.disclosureId}`,
+          "aria-controls": `${a}--${e.disclosureId}`,
+          "aria-expanded": d(n),
+          "border-radius": e.borderRadius,
+          color: e.color,
+          "forward-ref": z,
+          "on-click": m,
+          size: e.triggerButtonSize,
+          type: d(U).Button,
+          rounded: e.rounded,
+          width: "100%",
+          variant: e.variant
+        }, {
+          default: u(() => [
+            c("span", {
+              class: o(`${a}__heading`)
+            }, [
+              e.iconBefore ? (i(), l(d(h), {
+                key: 0,
+                name: e.iconBefore,
+                size: e.iconBeforeSize
+              }, null, 8, ["name", "size"])) : s("", !0),
+              e.heading ? (i(), l(d(E), {
+                key: 1,
+                class: o(`${a}__text-heading`),
+                type: e.headingType,
+                level: e.headingLevel
+              }, {
+                default: u(() => [
+                  b(y(e.heading), 1)
+                ]),
+                _: 1
+              }, 8, ["class", "type", "level"])) : s("", !0),
+              e.subHeading ? (i(), l(d(N), {
+                key: 2,
+                class: o(`${a}__text-subheading`),
+                type: e.subHeadingType,
+                truncate: ""
+              }, {
+                default: u(() => [
+                  b(y(e.subHeading), 1)
+                ]),
+                _: 1
+              }, 8, ["class", "type"])) : s("", !0),
+              e.iconAfter ? (i(), l(d(h), {
+                key: 3,
+                name: d(n) ? e.expandedIcon : e.iconAfter,
+                size: e.iconAfterSize
+              }, null, 8, ["name", "size"])) : s("", !0)
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["id", "aria-controls", "aria-expanded", "border-radius", "color", "size", "type", "rounded", "variant"])
+      ], 2),
+      c("div", {
+        id: `${a}--${e.disclosureId}`,
+        "aria-labelledby": `${a}__button--${e.disclosureId}`,
+        "aria-hidden": !d(n),
+        class: o(d(B))
+      }, [
+        H(r.$slots, "default")
+      ], 10, G)
+    ], 10, q));
+  }
+});
+export {
+  _ as CLDisclosure,
+  _ as default
+};

package/dist/components/Containers/CLDisclosure/CLDisclosure.vue.d.ts

@@ -1,4 +1,4 @@
-import { CLBorderRadius, CLColors, CLColorVariants, CLHeadingLevels, CLHeadingTypes, CLIconNames, CLIconSizes, CLSizes, CLTextTypes } from '../../../index.ts';
+import { CLBorderRadius, CLColors, CLColorVariants, CLHeadingLevels, CLHeadingTypes, CLIconNames, CLIconSizes, CLSizes, CLTextTypes } from '../../../types';
 export interface CLDisclosureProps {
     /** When set to `true` adds borders to the disclosure's trigger container and content */
     bordered?: boolean;
@@ -47,11 +47,11 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CL
     color: CLColors;
     variant: CLColorVariants;
     borderRadius: CLBorderRadius;
-    testId: string;
-    bordered: boolean;
     rounded: boolean;
+    testId: string;
     iconAfter: CLIconNames;
     iconAfterSize: CLIconSizes;
+    bordered: boolean;
     compact: boolean;
     contentSpacing: boolean;
     expanded: boolean;

package/dist/components/Form/CLCheckbox/CLCheckbox.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-checkbox{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-checkbox .clll-checkbox__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-checkbox .clll-checkbox__label.clll-checkbox--haslabel>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-checkbox .clll-checkbox__checkbox-container{position:relative;overflow:hidden;border-radius:0;flex:none;display:inline-flex;align-items:center;box-sizing:border-box;overflow:visible}.clll-checkbox .clll-checkbox__checkbox-container .clll-checkbox__checkbox-frame .clll-checkbox__checkbox:not(:checked)+.clll-checkbox__icon{display:none}.clll-checkbox .clll-checkbox__icon{position:absolute;display:inline-flex}.clll-checkbox .clll-checkbox__checkbox{display:inline-block;appearance:none;cursor:pointer}.clll-checkbox.clll-checkbox--rounded .clll-checkbox__checkbox{border-radius:var(--clll-rounded-xs)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-full .clll-checkbox__checkbox{border-radius:var(--clll-rounded-full)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-lg .clll-checkbox__checkbox{border-radius:var(--clll-rounded-lg)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-md .clll-checkbox__checkbox{border-radius:var(--clll-rounded-md)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-sm .clll-checkbox__checkbox{border-radius:var(--clll-rounded-sm)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-xs .clll-checkbox__checkbox{border-radius:var(--clll-rounded-xs)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-xl .clll-checkbox__checkbox{border-radius:var(--clll-rounded-xl)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-2xl .clll-checkbox__checkbox{border-radius:var(--clll-rounded-2xl)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-3xl .clll-checkbox__checkbox{border-radius:var(--clll-rounded-3xl)}.clll-checkbox.clll-checkbox--rounded.clll-checkbox--rounded-none .clll-checkbox__checkbox{border-radius:0}.clll-checkbox.clll-checkbox--tiny .clll-checkbox__checkbox-container .clll-checkbox__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-1_5)}.clll-checkbox.clll-checkbox--tiny .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox,.clll-checkbox.clll-checkbox--tiny .clll-checkbox__checkbox-container .clll-checkbox__label .clll-radiobutton__radiobutton{width:var(--clll-unit-4);height:var(--clll-unit-4)}.clll-checkbox.clll-checkbox--small .clll-checkbox__checkbox-container .clll-checkbox__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-checkbox.clll-checkbox--small .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox,.clll-checkbox.clll-checkbox--small .clll-checkbox__checkbox-container .clll-checkbox__label .clll-radiobutton__radiobutton{width:var(--clll-unit-5);height:var(--clll-unit-5)}.clll-checkbox.clll-checkbox--medium .clll-checkbox__checkbox-container .clll-checkbox__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2_5)}.clll-checkbox.clll-checkbox--medium .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox,.clll-checkbox.clll-checkbox--medium .clll-checkbox__checkbox-container .clll-checkbox__label .clll-radiobutton__radiobutton{width:var(--clll-unit-6);height:var(--clll-unit-6)}.clll-checkbox.clll-checkbox--large .clll-checkbox__checkbox-container .clll-checkbox__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3)}.clll-checkbox.clll-checkbox--large .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox,.clll-checkbox.clll-checkbox--large .clll-checkbox__checkbox-container .clll-checkbox__label .clll-radiobutton__radiobutton{width:var(--clll-unit-7);height:var(--clll-unit-7)}.clll-checkbox.clll-checkbox--xlarge .clll-checkbox__checkbox-container .clll-checkbox__label>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3)}.clll-checkbox.clll-checkbox--xlarge .clll-checkbox__checkbox-container .clll-checkbox__label .clll-checkbox__checkbox,.clll-checkbox.clll-checkbox--xlarge .clll-checkbox__checkbox-container .clll-checkbox__label .clll-radiobutton__radiobutton{width:var(--clll-unit-8);height:var(--clll-unit-8)}