@bobbykim/manguito-theme 1.2.0 → 1.4.0

package/dist/directives.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./index-CKV6der_.cjs"),a=require("vue"),g=(t,e)=>{if(t.tagName==="A"){const o=t.getAttribute("href");return o?o.charAt(0)==="#"?o.substring(1):o:null}return e||null},v=t=>t?document.getElementById(t):null,p=t=>t.hasAttribute("visible"),u=t=>{const o=t.getAttribute("visible")==="true"?"false":"true";t.setAttribute("visible",o)},m=t=>{const e=`div[accordion="${t}"]`;return Array.from(document.querySelectorAll(e))},A=(t,e)=>{m(e).forEach(r=>{r.id===t.id?u(r):r.getAttribute("visible")==="true"&&r.setAttribute("visible","false")})},C=t=>{u(t)},b=t=>e=>{e.preventDefault();const o=e.target,r=g(o,t),l=v(r);if(!l){console.warn(`[v-collapse] Target element not found: ${r}`);return}if(!p(l)){console.warn(`[v-collapse] Target element missing 'visible' attribute: ${r}`);return}const n=l.getAttribute("accordion");n?A(l,n):C(l)},h={mounted(t,e){t.__HandleToggler=b(e.arg),t.addEventListener("click",t.__HandleToggler)},unmounted(t){t.__HandleToggler&&(t.removeEventListener("click",t.__HandleToggler),delete t.__HandleToggler)}},H=t=>e=>{e.preventDefault();const o=e.target,r=g(o,t),l=v(r);if(!l){console.warn(`[v-toggle] Target element not found: ${r}`);return}if(!p(l)){console.warn(`[v-toggle] Target element mission visible 'visible' attribute: ${r}`);return}u(l)},k={mounted(t,e){t.__ClickToggleHandler=H(e.arg),t.addEventListener("click",t.__ClickToggleHandler)},unmounted(t){t.__ClickToggleHandler&&(t.removeEventListener("click",t.__ClickToggleHandler),delete t.__ClickToggleHandler)}};let y=0;const s=(t,e,o,r)=>{if(t.hasAttribute(o))return t.getAttribute(o);if(typeof e.value=="object"&&e.value!==null&&r in e.value)return e.value[r]},E=(t,e)=>{if(t.hasAttribute("title"))return t.getAttribute("title")||void 0;if(typeof e.value=="string")return e.value;if(typeof e.value=="object"&&e.value?.title)return e.value.title},I=t=>{const e=Object.keys(t.modifiers);return e.length>0?e[0]:void 0},w=(t,e)=>{t.classList.add("relative","group","overflow-visible"),t.__TooltipId||(t.__TooltipId=`mcl-tooltip-${++y}`);const o=t.__TooltipId,r=E(t,e),l=s(t,e,"color","color"),n=s(t,e,"text-color","textColor"),c=s(t,e,"tooltip-width","width"),i=typeof e.value=="object"?e.value.customClass:void 0,_=I(e),T=a.createVNode(d.tooltip,{id:o,direction:_,content:r,color:l,textColor:n,width:c,customClass:i});a.render(T,t),t.setAttribute("aria-describedby",o)},x=t=>{a.render(null,t),t.removeAttribute("aria-describedby"),delete t.__TooltipId},f={mounted(t,e){t.__HandleTooltip=o=>w(t,o),t.__UnmountTooltip=()=>x(t),t.__HandleTooltip(e)},updated(t,e,o,r){const l=e.value!==e.oldValue;let n=!1;const c=r.dirs?.find(i=>i.dir===f);if(c){const i=c.arg;e.arg!==i&&(n=!0)}(l||n)&&t.__HandleTooltip(e)},unmounted(t){t.__UnmountTooltip()}};exports.vClickOutside=d.vClickOutside;exports.vCollapse=h;exports.vToggle=k;exports.vTooltip=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("./index-BjeE_nEZ.cjs"),a=require("vue"),v=(t,e)=>{if(t.tagName==="A"){const o=t.getAttribute("href");return o?o.charAt(0)==="#"?o.substring(1):o:null}return e||null},p=t=>t?document.getElementById(t):null,f=t=>t.hasAttribute("visible"),u=t=>{const o=t.getAttribute("visible")==="true"?"false":"true";t.setAttribute("visible",o)},b=t=>{const e=`div[accordion="${t}"]`;return Array.from(document.querySelectorAll(e))},C=(t,e)=>{b(e).forEach(r=>{r.id===t.id?u(r):r.getAttribute("visible")==="true"&&r.setAttribute("visible","false")})},A=t=>{u(t)},h=t=>e=>{e.preventDefault();const o=e.target,r=v(o,t),l=p(r);if(!l){console.warn(`[v-collapse] Target element not found: ${r}`);return}if(!f(l)){console.warn(`[v-collapse] Target element missing 'visible' attribute: ${r}`);return}const n=l.getAttribute("accordion");n?C(l,n):A(l)};let d=!1;const H=()=>{d||(d=!0,console.warn("[v-collapse] v-collapse is sunsetted: no collapse component reacts to it, including the base Collapse. Call toggle() on a Collapse template ref or bind :visible, and wrap accordions in <AccordionGroup>. It will be removed in the next major release."))},k={mounted(t,e){H(),t.__HandleToggler=h(e.arg),t.addEventListener("click",t.__HandleToggler)},unmounted(t){t.__HandleToggler&&(t.removeEventListener("click",t.__HandleToggler),delete t.__HandleToggler)}},w=t=>e=>{e.preventDefault();const o=e.target,r=v(o,t),l=p(r);if(!l){console.warn(`[v-toggle] Target element not found: ${r}`);return}if(!f(l)){console.warn(`[v-toggle] Target element mission visible 'visible' attribute: ${r}`);return}u(l)},y={mounted(t,e){t.__ClickToggleHandler=w(e.arg),t.addEventListener("click",t.__ClickToggleHandler)},unmounted(t){t.__ClickToggleHandler&&(t.removeEventListener("click",t.__ClickToggleHandler),delete t.__ClickToggleHandler)}};let I=0;const c=(t,e,o,r)=>{if(t.hasAttribute(o))return t.getAttribute(o);if(typeof e.value=="object"&&e.value!==null&&r in e.value)return e.value[r]},E=(t,e)=>{if(t.hasAttribute("title"))return t.getAttribute("title")||void 0;if(typeof e.value=="string")return e.value;if(typeof e.value=="object"&&e.value?.title)return e.value.title},x=t=>{const e=Object.keys(t.modifiers);return e.length>0?e[0]:void 0},V=(t,e)=>{t.classList.add("relative","group","overflow-visible"),t.__TooltipId||(t.__TooltipId=`mcl-tooltip-${++I}`);const o=t.__TooltipId,r=E(t,e),l=c(t,e,"color","color"),n=c(t,e,"text-color","textColor"),s=c(t,e,"tooltip-width","width"),i=typeof e.value=="object"?e.value.customClass:void 0,m=x(e),T=a.createVNode(g.tooltip,{id:o,direction:m,content:r,color:l,textColor:n,width:s,customClass:i});a.render(T,t),t.setAttribute("aria-describedby",o)},$=t=>{a.render(null,t),t.removeAttribute("aria-describedby"),delete t.__TooltipId},_={mounted(t,e){t.__HandleTooltip=o=>V(t,o),t.__UnmountTooltip=()=>$(t),t.__HandleTooltip(e)},updated(t,e,o,r){const l=e.value!==e.oldValue;let n=!1;const s=r.dirs?.find(i=>i.dir===_);if(s){const i=s.arg;e.arg!==i&&(n=!0)}(l||n)&&t.__HandleTooltip(e)},unmounted(t){t.__UnmountTooltip()}};exports.vClickOutside=g.vClickOutside;exports.vCollapse=k;exports.vToggle=y;exports.vTooltip=_;

package/dist/directives.d.ts

@@ -77,14 +77,22 @@ export declare const vClickOutside: Directive<ClickOutsideElement, ClickOutsideV
 /**
  * Vue directive for collapsible elements with accordion support.
  *
- * @deprecated `MclCollapseA` and `MclCollapseB` now manage state internally via the
- * `useCollapseState` composable. This directive no longer has any effect on those
- * components and will be removed in a future release.
+ * @deprecated Sunsetted. No collapse component reacts to this directive,
+ * including the base `Collapse`, `MclCollapseA`, and `MclCollapseB`: they manage
+ * state internally via the `useCollapseState` composable. Mounting it logs a
+ * warning once per page. It will be removed in the next major release.
  *
- * Migrate accordion groups to the `AccordionGroup` wrapper component:
+ * - `v-collapse:<id>` on a trigger → call `toggle()` on a `Collapse` template ref,
+ *   or bind `:visible`.
+ * - `accordion="<name>"` on a panel → wrap the panels in `<AccordionGroup>`.
  *
  * @example
- * // Preferred: AccordionGroup wrapper
+ * // Standalone base Collapse
+ * <button @click="collapseRef?.toggle()">Toggle</button>
+ * <Collapse ref="collapseRef" id="panel-1">...</Collapse>
+ *
+ * @example
+ * // Accordion
  * import { AccordionGroup } from '@bobbykim/manguito-theme'
  * import { MclCollapseA } from '@bobbykim/mcl-collapse'
  *
@@ -92,11 +100,6 @@ export declare const vClickOutside: Directive<ClickOutsideElement, ClickOutsideV
  *   <MclCollapseA collapse-id="item1" title="Item 1">...</MclCollapseA>
  *   <MclCollapseA collapse-id="item2" title="Item 2">...</MclCollapseA>
  * </AccordionGroup>
- *
- * @example
- * // Preferred: standalone collapse (no wrapper needed)
- * <MclCollapseA collapse-id="item1" title="Item 1">...</MclCollapseA>
- *
  */
 export declare const vCollapse: Directive<CollapseElement>;
 

package/dist/directives.js

@@ -1,32 +1,32 @@
-import { t as _ } from "./index-r-cHwpQM.js";
-import { v as N } from "./index-r-cHwpQM.js";
-import { createVNode as m, render as u } from "vue";
-const d = (t, e) => {
+import { t as _ } from "./index-CzXHE-4G.js";
+import { v as O } from "./index-CzXHE-4G.js";
+import { createVNode as T, render as d } from "vue";
+const g = (t, e) => {
   if (t.tagName === "A") {
     const o = t.getAttribute("href");
     return o ? o.charAt(0) === "#" ? o.substring(1) : o : null;
   }
   return e || null;
-}, g = (t) => t ? document.getElementById(t) : null, v = (t) => t.hasAttribute("visible"), a = (t) => {
+}, v = (t) => t ? document.getElementById(t) : null, p = (t) => t.hasAttribute("visible"), c = (t) => {
   const o = t.getAttribute("visible") === "true" ? "false" : "true";
   t.setAttribute("visible", o);
-}, T = (t) => {
+}, b = (t) => {
   const e = `div[accordion="${t}"]`;
   return Array.from(document.querySelectorAll(e));
 }, A = (t, e) => {
-  T(e).forEach((r) => {
-    r.id === t.id ? a(r) : r.getAttribute("visible") === "true" && r.setAttribute("visible", "false");
+  b(e).forEach((r) => {
+    r.id === t.id ? c(r) : r.getAttribute("visible") === "true" && r.setAttribute("visible", "false");
   });
 }, C = (t) => {
-  a(t);
-}, b = (t) => (e) => {
+  c(t);
+}, h = (t) => (e) => {
   e.preventDefault();
-  const o = e.target, r = d(o, t), l = g(r);
+  const o = e.target, r = g(o, t), l = v(r);
   if (!l) {
     console.warn(`[v-collapse] Target element not found: ${r}`);
     return;
   }
-  if (!v(l)) {
+  if (!p(l)) {
     console.warn(
       `[v-collapse] Target element missing 'visible' attribute: ${r}`
     );
@@ -34,42 +34,48 @@ const d = (t, e) => {
   }
   const n = l.getAttribute("accordion");
   n ? A(l, n) : C(l);
-}, $ = {
+};
+let u = !1;
+const H = () => {
+  u || (u = !0, console.warn(
+    "[v-collapse] v-collapse is sunsetted: no collapse component reacts to it, including the base Collapse. Call toggle() on a Collapse template ref or bind :visible, and wrap accordions in <AccordionGroup>. It will be removed in the next major release."
+  ));
+}, L = {
   mounted(t, e) {
-    t.__HandleToggler = b(e.arg), t.addEventListener("click", t.__HandleToggler);
+    H(), t.__HandleToggler = h(e.arg), t.addEventListener("click", t.__HandleToggler);
   },
   unmounted(t) {
     t.__HandleToggler && (t.removeEventListener("click", t.__HandleToggler), delete t.__HandleToggler);
   }
-}, h = (t) => (e) => {
+}, k = (t) => (e) => {
   e.preventDefault();
-  const o = e.target, r = d(o, t), l = g(r);
+  const o = e.target, r = g(o, t), l = v(r);
   if (!l) {
     console.warn(`[v-toggle] Target element not found: ${r}`);
     return;
   }
-  if (!v(l)) {
+  if (!p(l)) {
     console.warn(
       `[v-toggle] Target element mission visible 'visible' attribute: ${r}`
     );
     return;
   }
-  a(l);
-}, D = {
+  c(l);
+}, j = {
   mounted(t, e) {
-    t.__ClickToggleHandler = h(e.arg), t.addEventListener("click", t.__ClickToggleHandler);
+    t.__ClickToggleHandler = k(e.arg), t.addEventListener("click", t.__ClickToggleHandler);
   },
   unmounted(t) {
     t.__ClickToggleHandler && (t.removeEventListener("click", t.__ClickToggleHandler), delete t.__ClickToggleHandler);
   }
 };
-let H = 0;
-const s = (t, e, o, r) => {
+let w = 0;
+const a = (t, e, o, r) => {
   if (t.hasAttribute(o))
     return t.getAttribute(o);
   if (typeof e.value == "object" && e.value !== null && r in e.value)
     return e.value[r];
-}, k = (t, e) => {
+}, I = (t, e) => {
   if (t.hasAttribute("title"))
     return t.getAttribute("title") || void 0;
   if (typeof e.value == "string")
@@ -79,40 +85,40 @@ const s = (t, e, o, r) => {
 }, E = (t) => {
   const e = Object.keys(t.modifiers);
   return e.length > 0 ? e[0] : void 0;
-}, I = (t, e) => {
-  t.classList.add("relative", "group", "overflow-visible"), t.__TooltipId || (t.__TooltipId = `mcl-tooltip-${++H}`);
-  const o = t.__TooltipId, r = k(t, e), l = s(t, e, "color", "color"), n = s(
+}, x = (t, e) => {
+  t.classList.add("relative", "group", "overflow-visible"), t.__TooltipId || (t.__TooltipId = `mcl-tooltip-${++w}`);
+  const o = t.__TooltipId, r = I(t, e), l = a(t, e, "color", "color"), n = a(
     t,
     e,
     "text-color",
     "textColor"
-  ), c = s(
+  ), s = a(
     t,
     e,
     "tooltip-width",
     "width"
-  ), i = typeof e.value == "object" ? e.value.customClass : void 0, p = E(e), f = m(_, {
+  ), i = typeof e.value == "object" ? e.value.customClass : void 0, f = E(e), m = T(_, {
     id: o,
-    direction: p,
+    direction: f,
     content: r,
     color: l,
     textColor: n,
-    width: c,
+    width: s,
     customClass: i
   });
-  u(f, t), t.setAttribute("aria-describedby", o);
+  d(m, t), t.setAttribute("aria-describedby", o);
 }, y = (t) => {
-  u(null, t), t.removeAttribute("aria-describedby"), delete t.__TooltipId;
-}, w = {
+  d(null, t), t.removeAttribute("aria-describedby"), delete t.__TooltipId;
+}, V = {
   mounted(t, e) {
-    t.__HandleTooltip = (o) => I(t, o), t.__UnmountTooltip = () => y(t), t.__HandleTooltip(e);
+    t.__HandleTooltip = (o) => x(t, o), t.__UnmountTooltip = () => y(t), t.__HandleTooltip(e);
   },
   updated(t, e, o, r) {
     const l = e.value !== e.oldValue;
     let n = !1;
-    const c = r.dirs?.find((i) => i.dir === w);
-    if (c) {
-      const i = c.arg;
+    const s = r.dirs?.find((i) => i.dir === V);
+    if (s) {
+      const i = s.arg;
       e.arg !== i && (n = !0);
     }
     (l || n) && t.__HandleTooltip(e);
@@ -122,8 +128,8 @@ const s = (t, e, o, r) => {
   }
 };
 export {
-  N as vClickOutside,
-  $ as vCollapse,
-  D as vToggle,
-  w as vTooltip
+  O as vClickOutside,
+  L as vCollapse,
+  j as vToggle,
+  V as vTooltip
 };

package/dist/index-BjeE_nEZ.cjs

@@ -0,0 +1 @@
+"use strict";const v=require("isomorphic-dompurify"),l=require("vue"),c=require("./index-CsKLajvY.cjs"),f=(e,t,o)=>!t||!(t instanceof Node)||e===t||e.contains(t)?!1:o?.length?!o.some(n=>n===t||n.contains(t)):!0,u=e=>typeof e.value=="function"?{handler:e.value,events:["click"]}:{handler:e.value.handler,events:e.value.events||["click"],excludeElements:e.value.excludeElements},p=(e,t)=>{const o=(n=[],r=[])=>n.length===r.length&&n.every((i,s)=>i===r[s]);return e.handler===t.handler&&o(e.events,t.events)&&o(e.excludeElements,t.excludeElements)},d=(e,t,o)=>n=>{f(e,n.target,o)&&t(n)},m={mounted(e,t){const{handler:o,events:n,excludeElements:r}=u(t);e.__ClickOutsideHandler=d(e,o,r),n.forEach(i=>{document.addEventListener(i,e.__ClickOutsideHandler,!0)})},updated(e,t){const o=u({...t,value:t.oldValue});if(e.__ClickOutsideHandler&&p(o,u(t)))return;e.__ClickOutsideHandler&&o.events.forEach(s=>{document.removeEventListener(s,e.__ClickOutsideHandler,!0)});const{handler:n,events:r,excludeElements:i}=u(t);e.__ClickOutsideHandler=d(e,n,i),r.forEach(s=>{document.addEventListener(s,e.__ClickOutsideHandler,!0)})},unmounted(e,t){if(e.__ClickOutsideHandler){const{events:o}=u(t);o.forEach(n=>{document.removeEventListener(n,e.__ClickOutsideHandler,!0)}),delete e.__ClickOutsideHandler}}},a={left:"tooltip-left",top:"tooltip-top",bottom:"tooltip-bottom",right:"tooltip-right"},h=l.defineComponent({name:"Tooltip",props:{id:{type:String,default:void 0},direction:{type:String,default:"right"},color:{type:String,default:"dark-3"},textColor:{type:String,default:"white"},width:{type:[Number,String],default:80},customClass:{type:String,default:""},content:{type:String,required:!0}},setup(e){const t="invisible opacity-0 group-hover:visible group-hover:opacity-100 group-focus:visible group-focus:opacity-100 z-[100] tooltip",o=l.computed(()=>[c.generateClass.bgColorVariant({color:e.color}),c.generateClass.textColorVariant({color:e.textColor})].join(" ")),n=l.computed(()=>({width:`${e.width}px`})),r=l.computed(()=>a[e.direction]||a.right),i=l.computed(()=>[t,r.value,o.value,e.customClass]);return()=>l.h("div",{id:e.id,class:i.value,role:"tooltip",innerHTML:v.sanitize(e.content),style:[n.value]})}});exports.tooltip=h;exports.vClickOutside=m;

package/dist/index-CzXHE-4G.js

@@ -0,0 +1,108 @@
+import v from "isomorphic-dompurify";
+import { defineComponent as f, computed as u, h as m } from "vue";
+import { g as c } from "./index-CDXrm85l.js";
+const p = (t, e, o) => !e || !(e instanceof Node) || t === e || t.contains(e) ? !1 : o?.length ? !o.some(
+  (n) => n === e || n.contains(e)
+) : !0, s = (t) => typeof t.value == "function" ? {
+  handler: t.value,
+  events: ["click"]
+} : {
+  handler: t.value.handler,
+  events: t.value.events || ["click"],
+  excludeElements: t.value.excludeElements
+}, h = (t, e) => {
+  const o = (n = [], r = []) => n.length === r.length && n.every((i, l) => i === r[l]);
+  return t.handler === e.handler && o(t.events, e.events) && o(t.excludeElements, e.excludeElements);
+}, a = (t, e, o) => (n) => {
+  p(t, n.target, o) && e(n);
+}, k = {
+  mounted(t, e) {
+    const { handler: o, events: n, excludeElements: r } = s(e);
+    t.__ClickOutsideHandler = a(t, o, r), n.forEach((i) => {
+      document.addEventListener(i, t.__ClickOutsideHandler, !0);
+    });
+  },
+  updated(t, e) {
+    const o = s({
+      ...e,
+      value: e.oldValue
+    });
+    if (t.__ClickOutsideHandler && h(o, s(e)))
+      return;
+    t.__ClickOutsideHandler && o.events.forEach((l) => {
+      document.removeEventListener(l, t.__ClickOutsideHandler, !0);
+    });
+    const { handler: n, events: r, excludeElements: i } = s(e);
+    t.__ClickOutsideHandler = a(t, n, i), r.forEach((l) => {
+      document.addEventListener(l, t.__ClickOutsideHandler, !0);
+    });
+  },
+  unmounted(t, e) {
+    if (t.__ClickOutsideHandler) {
+      const { events: o } = s(e);
+      o.forEach((n) => {
+        document.removeEventListener(n, t.__ClickOutsideHandler, !0);
+      }), delete t.__ClickOutsideHandler;
+    }
+  }
+}, d = {
+  left: "tooltip-left",
+  top: "tooltip-top",
+  bottom: "tooltip-bottom",
+  right: "tooltip-right"
+}, y = f({
+  // eslint-disable-next-line vue/multi-word-component-names -- exported component; renaming it would change its public name
+  name: "Tooltip",
+  props: {
+    id: {
+      type: String,
+      default: void 0
+    },
+    direction: {
+      type: String,
+      default: "right"
+    },
+    color: {
+      type: String,
+      default: "dark-3"
+    },
+    textColor: {
+      type: String,
+      default: "white"
+    },
+    width: {
+      type: [Number, String],
+      default: 80
+    },
+    customClass: {
+      type: String,
+      default: ""
+    },
+    content: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(t) {
+    const e = "invisible opacity-0 group-hover:visible group-hover:opacity-100 group-focus:visible group-focus:opacity-100 z-[100] tooltip", o = u(() => [
+      c.bgColorVariant({ color: t.color }),
+      c.textColorVariant({ color: t.textColor })
+    ].join(" ")), n = u(() => ({ width: `${t.width}px` })), r = u(() => d[t.direction] || d.right), i = u(() => [
+      e,
+      r.value,
+      o.value,
+      t.customClass
+    ]);
+    return () => m("div", {
+      id: t.id,
+      class: i.value,
+      role: "tooltip",
+      innerHTML: v.sanitize(t.content),
+      style: [n.value]
+    });
+  }
+});
+export {
+  y as t,
+  k as v
+};

package/dist/mcl-theme-v4.css

@@ -403,10 +403,16 @@
   }
 
   .btn-group .btn {
-    outline: none;
     border-radius: 0;
   }
 
+  /* Keep the standard focus ring in a group, and lift the focused button so
+     its neighbours don't paint over the ring (#110). */
+  .btn-group .btn:focus {
+    position: relative;
+    z-index: 1;
+  }
+
   .btn-group .btn:first-child {
     border-top-left-radius: theme(--radius-sm);
     border-bottom-left-radius: theme(--radius-sm);

package/dist/useModalScrollLock-ONrBOk5v.js

@@ -0,0 +1,56 @@
+import { useMutationObserver as d, useScrollLock as f } from "@vueuse/core";
+import { ref as b, provide as g, inject as m, computed as v, isRef as r, watch as a, shallowRef as I, onMounted as A } from "vue";
+const C = (e) => e.getAttribute("visible") === "true", M = (e) => e.type === "attributes" && e.attributeName === "visible", h = (e, t) => d(
+  e,
+  (s) => {
+    const o = s.find(M);
+    if (!o)
+      return;
+    const u = o.target, l = C(u);
+    t(l);
+  },
+  {
+    attributes: !0,
+    attributeFilter: ["visible"]
+    // only watch the visible attribute
+  }
+), i = /* @__PURE__ */ Symbol("accordion"), k = () => {
+  const e = b(null);
+  g(i, { openId: e });
+}, L = (e, t = !1) => {
+  const s = m(i, null);
+  if (s) {
+    const o = v(() => s.openId.value === e), u = () => {
+      s.openId.value = o.value ? null : e;
+    }, l = () => {
+      s.openId.value = e;
+    }, c = () => {
+      o.value && (s.openId.value = null);
+    };
+    return (r(t) ? t.value : t) && s.openId.value === null && l(), r(t) && a(t, (n) => n ? l() : c()), { isOpen: o, toggle: u, open: l, close: c };
+  } else {
+    const o = b(r(t) ? t.value : t);
+    return r(t) && a(t, (n) => {
+      o.value = n;
+    }), { isOpen: v(() => o.value), toggle: () => {
+      o.value = !o.value;
+    }, open: () => {
+      o.value = !0;
+    }, close: () => {
+      o.value = !1;
+    } };
+  }
+}, R = (e) => {
+  const t = I(null), s = f(t);
+  A(() => {
+    t.value = document.documentElement, s.value = e.value;
+  }), a(e, (o) => {
+    s.value = o;
+  });
+};
+export {
+  R as a,
+  h as o,
+  k as p,
+  L as u
+};

package/dist/useModalScrollLock-X2enYbzG.cjs

@@ -0,0 +1 @@
+"use strict";const a=require("@vueuse/core"),s=require("vue"),b=e=>e.getAttribute("visible")==="true",d=e=>e.type==="attributes"&&e.attributeName==="visible",f=(e,t)=>a.useMutationObserver(e,l=>{const o=l.find(d);if(!o)return;const c=o.target,u=b(c);t(u)},{attributes:!0,attributeFilter:["visible"]}),v=Symbol("accordion"),p=()=>{const e=s.ref(null);s.provide(v,{openId:e})},g=(e,t=!1)=>{const l=s.inject(v,null);if(l){const o=s.computed(()=>l.openId.value===e),c=()=>{l.openId.value=o.value?null:e},u=()=>{l.openId.value=e},r=()=>{o.value&&(l.openId.value=null)};return(s.isRef(t)?t.value:t)&&l.openId.value===null&&u(),s.isRef(t)&&s.watch(t,n=>n?u():r()),{isOpen:o,toggle:c,open:u,close:r}}else{const o=s.ref(s.isRef(t)?t.value:t);return s.isRef(t)&&s.watch(t,n=>{o.value=n}),{isOpen:s.computed(()=>o.value),toggle:()=>{o.value=!o.value},open:()=>{o.value=!0},close:()=>{o.value=!1}}}},A=e=>{const t=s.shallowRef(null),l=a.useScrollLock(t);s.onMounted(()=>{t.value=document.documentElement,l.value=e.value}),s.watch(e,o=>{l.value=o})};exports.observeVisibleAttr=f;exports.provideAccordion=p;exports.useCollapseState=g;exports.useModalScrollLock=A;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "main theme file for manguito components library. Other MCL components will need to import this file to run.",
   "type": "module",
   "publishConfig": {
@@ -81,6 +81,7 @@
     "build": "vite build && cp lib/style/mcl-theme-v4.css dist/mcl-theme-v4.css",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:dist": "node scripts/check-dist-ssr.mjs"
+    "test:dist": "node scripts/check-dist-ssr.mjs",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json"
   }
 }

package/dist/index-CKV6der_.cjs

@@ -1 +0,0 @@
-"use strict";const v=require("isomorphic-dompurify"),r=require("vue"),u=require("./index-CsKLajvY.cjs"),f=(t,e,i)=>!e||!(e instanceof Node)||t===e||t.contains(e)?!1:i?.length?!i.some(o=>o===e||o.contains(e)):!0,s=t=>typeof t.value=="function"?{handler:t.value,events:["click"]}:{handler:t.value.handler,events:t.value.events||["click"],excludeElements:t.value.excludeElements},c=(t,e,i)=>o=>{f(t,o.target,i)&&e(o)},p={mounted(t,e){const{handler:i,events:o,excludeElements:l}=s(e);t.__ClickOutsideHandler=c(t,i,l),o.forEach(n=>{document.addEventListener(n,t.__ClickOutsideHandler,!0)})},updated(t,e){t.__ClickOutsideHandler&&s({...e,value:e.oldValue}).events.forEach(a=>{document.removeEventListener(a,t.__ClickOutsideHandler,!0)});const{handler:i,events:o,excludeElements:l}=s(e);t.__ClickOutsideHandler=c(t,i,l),o.forEach(n=>{document.addEventListener(n,t.__ClickOutsideHandler,!0)})},unmounted(t,e){if(t.__ClickOutsideHandler){const{events:i}=s(e);i.forEach(o=>{document.removeEventListener(o,t.__ClickOutsideHandler,!0)}),delete t.__ClickOutsideHandler}}},d={left:"tooltip-left",top:"tooltip-top",bottom:"tooltip-bottom",right:"tooltip-right"},C=r.defineComponent({name:"Tooltip",props:{id:{type:String,default:void 0},direction:{type:String,default:"right"},color:{type:String,default:"dark-3"},textColor:{type:String,default:"white"},width:{type:[Number,String],default:80},customClass:{type:String,default:""},content:{type:String,required:!0}},setup(t){const e="invisible opacity-0 group-hover:visible group-hover:opacity-100 group-focus:visible group-focus:opacity-100 z-[100] tooltip",i=r.computed(()=>[u.generateClass.bgColorVariant({color:t.color}),u.generateClass.textColorVariant({color:t.textColor})].join(" ")),o=r.computed(()=>({width:`${t.width}px`})),l=r.computed(()=>d[t.direction]||d.right),n=r.computed(()=>[e,l.value,i.value,t.customClass]);return()=>r.h("div",{id:t.id,class:n.value,role:"tooltip",innerHTML:v.sanitize(t.content),style:[o.value]})}});exports.tooltip=C;exports.vClickOutside=p;

package/dist/index-r-cHwpQM.js

@@ -1,101 +0,0 @@
-import f from "isomorphic-dompurify";
-import { defineComponent as v, computed as l, h as p } from "vue";
-import { g as u } from "./index-CDXrm85l.js";
-const m = (t, e, i) => !e || !(e instanceof Node) || t === e || t.contains(e) ? !1 : i?.length ? !i.some(
-  (o) => o === e || o.contains(e)
-) : !0, s = (t) => typeof t.value == "function" ? {
-  handler: t.value,
-  events: ["click"]
-} : {
-  handler: t.value.handler,
-  events: t.value.events || ["click"],
-  excludeElements: t.value.excludeElements
-}, c = (t, e, i) => (o) => {
-  m(t, o.target, i) && e(o);
-}, O = {
-  mounted(t, e) {
-    const { handler: i, events: o, excludeElements: r } = s(e);
-    t.__ClickOutsideHandler = c(t, i, r), o.forEach((n) => {
-      document.addEventListener(n, t.__ClickOutsideHandler, !0);
-    });
-  },
-  updated(t, e) {
-    t.__ClickOutsideHandler && s({
-      ...e,
-      value: e.oldValue
-    }).events.forEach((d) => {
-      document.removeEventListener(d, t.__ClickOutsideHandler, !0);
-    });
-    const { handler: i, events: o, excludeElements: r } = s(e);
-    t.__ClickOutsideHandler = c(t, i, r), o.forEach((n) => {
-      document.addEventListener(n, t.__ClickOutsideHandler, !0);
-    });
-  },
-  unmounted(t, e) {
-    if (t.__ClickOutsideHandler) {
-      const { events: i } = s(e);
-      i.forEach((o) => {
-        document.removeEventListener(o, t.__ClickOutsideHandler, !0);
-      }), delete t.__ClickOutsideHandler;
-    }
-  }
-}, a = {
-  left: "tooltip-left",
-  top: "tooltip-top",
-  bottom: "tooltip-bottom",
-  right: "tooltip-right"
-}, k = v({
-  name: "Tooltip",
-  props: {
-    id: {
-      type: String,
-      default: void 0
-    },
-    direction: {
-      type: String,
-      default: "right"
-    },
-    color: {
-      type: String,
-      default: "dark-3"
-    },
-    textColor: {
-      type: String,
-      default: "white"
-    },
-    width: {
-      type: [Number, String],
-      default: 80
-    },
-    customClass: {
-      type: String,
-      default: ""
-    },
-    content: {
-      type: String,
-      required: !0
-    }
-  },
-  setup(t) {
-    const e = "invisible opacity-0 group-hover:visible group-hover:opacity-100 group-focus:visible group-focus:opacity-100 z-[100] tooltip", i = l(() => [
-      u.bgColorVariant({ color: t.color }),
-      u.textColorVariant({ color: t.textColor })
-    ].join(" ")), o = l(() => ({ width: `${t.width}px` })), r = l(() => a[t.direction] || a.right), n = l(() => [
-      e,
-      r.value,
-      i.value,
-      t.customClass
-    ]);
-    return () => p("div", {
-      id: t.id,
-      class: n.value,
-      role: "tooltip",
-      innerHTML: f.sanitize(t.content),
-      style: [o.value]
-    });
-  }
-});
-export {
-  k as t,
-  O as v
-};

package/dist/useModalScrollLock-BUdEkX4m.cjs

@@ -1 +0,0 @@
-"use strict";const n=require("@vueuse/core"),o=require("vue"),v=e=>e.getAttribute("visible")==="true",b=e=>e.type==="attributes"&&e.attributeName==="visible",d=(e,s)=>n.useMutationObserver(e,l=>{const t=l.find(b);if(!t)return;const u=t.target,c=v(u);s(c)},{attributes:!0,attributeFilter:["visible"]}),r=Symbol("accordion"),p=()=>{const e=o.ref(null);o.provide(r,{openId:e})},g=(e,s=!1)=>{const l=o.inject(r,null);if(l){const t=o.computed(()=>l.openId.value===e);return{isOpen:t,toggle:()=>{l.openId.value=t.value?null:e},open:()=>{l.openId.value=e},close:()=>{t.value&&(l.openId.value=null)}}}else{const t=o.ref(o.isRef(s)?s.value:s);return o.isRef(s)&&o.watch(s,i=>{t.value=i}),{isOpen:o.computed(()=>t.value),toggle:()=>{t.value=!t.value},open:()=>{t.value=!0},close:()=>{t.value=!1}}}},f=e=>{const s=o.shallowRef(null),l=n.useScrollLock(s);o.onMounted(()=>{s.value=document.documentElement,l.value=e.value}),o.watch(e,t=>{l.value=t})};exports.observeVisibleAttr=d;exports.provideAccordion=p;exports.useCollapseState=g;exports.useModalScrollLock=f;

package/dist/useModalScrollLock-CZPywtVE.js

@@ -1,56 +0,0 @@
-import { useMutationObserver as p, useScrollLock as d } from "@vueuse/core";
-import { ref as c, provide as g, inject as f, computed as u, isRef as r, watch as a, shallowRef as m, onMounted as A } from "vue";
-const I = (e) => e.getAttribute("visible") === "true", C = (e) => e.type === "attributes" && e.attributeName === "visible", h = (e, o) => p(
-  e,
-  (s) => {
-    const t = s.find(C);
-    if (!t)
-      return;
-    const l = t.target, n = I(l);
-    o(n);
-  },
-  {
-    attributes: !0,
-    attributeFilter: ["visible"]
-    // only watch the visible attribute
-  }
-), i = /* @__PURE__ */ Symbol("accordion"), k = () => {
-  const e = c(null);
-  g(i, { openId: e });
-}, L = (e, o = !1) => {
-  const s = f(i, null);
-  if (s) {
-    const t = u(() => s.openId.value === e);
-    return { isOpen: t, toggle: () => {
-      s.openId.value = t.value ? null : e;
-    }, open: () => {
-      s.openId.value = e;
-    }, close: () => {
-      t.value && (s.openId.value = null);
-    } };
-  } else {
-    const t = c(r(o) ? o.value : o);
-    return r(o) && a(o, (b) => {
-      t.value = b;
-    }), { isOpen: u(() => t.value), toggle: () => {
-      t.value = !t.value;
-    }, open: () => {
-      t.value = !0;
-    }, close: () => {
-      t.value = !1;
-    } };
-  }
-}, R = (e) => {
-  const o = m(null), s = d(o);
-  A(() => {
-    o.value = document.documentElement, s.value = e.value;
-  }), a(e, (t) => {
-    s.value = t;
-  });
-};
-export {
-  R as a,
-  h as o,
-  k as p,
-  L as u
-};