@uoguelph/web-components 1.8.0-rc.0 → 1.9.0-rc.1

package/dist/uofg-web-components/uofg-modal.esm.js

@@ -1,340 +1,221 @@
-import { c as j, S as R, i as U, y as m, a as J, s as K, F as N, z as G, b as H, e as B, d as I, g as L, h as r, A as _, j as M, k as E, m as P, w as k, u as Q, l as V, n as W, t as v, o as A, p as X, q as Y, x as Z, B as C } from "./font-awesome-icon-B0B9COBP.js";
-import { t as q } from "./bundle-mjs-BpzLJ4dA.js";
-const x = (n) => Array.from(n.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], audio[controls], video[controls], details, summary, [tabindex]:not([tabindex="-1"])'));
-function $(n) {
-  let e, i, c, b, u, p, g, w, l, y, h;
-  b = new N({ props: { icon: G } });
-  const f = (
-    /*#slots*/
-    n[14].default
-  ), a = H(
-    f,
-    n,
-    /*$$scope*/
-    n[13],
-    null
-  );
-  return {
-    c() {
-      e = B("div"), i = B("div"), c = B("button"), I(b.$$.fragment), u = L(), a && a.c(), r(c, "class", "absolute right-8 top-8 z-[2] flex h-12 w-12 items-center justify-center border-0 bg-transparent text-3xl p-2 text-[var(--uofg-modal-dismiss-color,white)]"), r(c, "part", "dismiss-button"), r(c, "aria-label", "Close modal"), r(i, "part", "content"), r(i, "class", p = q(
-        "z-1 absolute left-1/2 h-fit max-h-full max-w-full -translate-x-1/2 overflow-auto w-full sm:w-fit sm:p-8 transition-transform motion-reduce:transition-none",
-        /*isOpen*/
-        n[0] && "visible opacity-100",
-        /*isOpen*/
-        n[0] && /*centered*/
-        n[3] && "translate-y-[calc(-50%_-_50px)]",
-        (!/*isOpen*/
-        n[0] && !/*centered*/
-        n[3] || /*isOpen*/
-        n[0] && /*centered*/
-        n[3]) && "translate-y-[-50px]"
-      )), r(e, "class", "fixed left-0 top-0 z-[1000] flex h-screen w-screen bg-black bg-opacity-50 transition-[opacity,visibility]"), r(e, "role", g = /*alertDialog*/
-      n[5] ? "alertdialog" : "dialog"), r(e, "aria-modal", w = /*isOpen*/
-      n[0] ? "true" : ""), r(
-        e,
-        "aria-label",
-        /*label*/
-        n[4]
-      ), r(e, "tabindex", -1), _(
-        e,
-        "visible",
-        /*isOpen*/
-        n[0]
-      ), _(
-        e,
-        "opacity-100",
-        /*isOpen*/
-        n[0]
-      ), _(e, "invisible", !/*isOpen*/
-      n[0]), _(e, "opacity-0", !/*isOpen*/
-      n[0]);
-    },
-    m(s, o) {
-      M(s, e, o), E(e, i), E(i, c), P(b, c, null), n[15](c), E(i, u), a && a.m(i, null), n[17](e), l = !0, y || (h = [
-        k(
-          c,
-          "click",
-          /*click_handler*/
-          n[16]
-        ),
-        k(
-          e,
-          "click",
-          /*handleOnClick*/
-          n[6]
-        ),
-        k(
-          e,
-          "keyup",
-          /*handleKeyUp*/
-          n[7]
-        ),
-        k(
-          e,
-          "focusout",
-          /*handleFocusOut*/
-          n[8]
-        )
-      ], y = !0);
-    },
-    p(s, [o]) {
-      a && a.p && (!l || o & /*$$scope*/
-      8192) && Q(
-        a,
-        f,
-        s,
-        /*$$scope*/
-        s[13],
-        l ? W(
-          f,
-          /*$$scope*/
-          s[13],
-          o,
-          null
-        ) : V(
-          /*$$scope*/
-          s[13]
-        ),
-        null
-      ), (!l || o & /*isOpen, centered*/
-      9 && p !== (p = q(
-        "z-1 absolute left-1/2 h-fit max-h-full max-w-full -translate-x-1/2 overflow-auto w-full sm:w-fit sm:p-8 transition-transform motion-reduce:transition-none",
-        /*isOpen*/
-        s[0] && "visible opacity-100",
-        /*isOpen*/
-        s[0] && /*centered*/
-        s[3] && "translate-y-[calc(-50%_-_50px)]",
-        (!/*isOpen*/
-        s[0] && !/*centered*/
-        s[3] || /*isOpen*/
-        s[0] && /*centered*/
-        s[3]) && "translate-y-[-50px]"
-      ))) && r(i, "class", p), (!l || o & /*alertDialog*/
-      32 && g !== (g = /*alertDialog*/
-      s[5] ? "alertdialog" : "dialog")) && r(e, "role", g), (!l || o & /*isOpen*/
-      1 && w !== (w = /*isOpen*/
-      s[0] ? "true" : "")) && r(e, "aria-modal", w), (!l || o & /*label*/
-      16) && r(
-        e,
-        "aria-label",
-        /*label*/
-        s[4]
-      ), (!l || o & /*isOpen*/
-      1) && _(
-        e,
-        "visible",
-        /*isOpen*/
-        s[0]
-      ), (!l || o & /*isOpen*/
-      1) && _(
-        e,
-        "opacity-100",
-        /*isOpen*/
-        s[0]
-      ), (!l || o & /*isOpen*/
-      1) && _(e, "invisible", !/*isOpen*/
-      s[0]), (!l || o & /*isOpen*/
-      1) && _(e, "opacity-0", !/*isOpen*/
-      s[0]);
-    },
-    i(s) {
-      l || (v(b.$$.fragment, s), v(a, s), l = !0);
-    },
-    o(s) {
-      A(b.$$.fragment, s), A(a, s), l = !1;
-    },
-    d(s) {
-      s && X(e), Y(b), n[15](null), a && a.d(s), n[17](null), y = !1, Z(h);
-    }
-  };
+import { z as q, A as D, B as F, C as T, S as z, l as j, c as R, p as U, a as l, D as _, E as y, F as G, b as J, d as K, e as L, f as M, j as O, G as N, h as o, i as Y, k as H, t as v, s as I, u as P, w as Q, x as V, r as x } from "./font-awesome-icon-tL6xr2rJ.js";
+import { a as W } from "./slot-dkmGAqBq.js";
+import { t as X } from "./bundle-mjs-BpzLJ4dA.js";
+function E(a, t) {
+  return a === t || (a == null ? void 0 : a[z]) === t;
 }
-function ee(n, e, i) {
-  let { $$slots: c = {}, $$scope: b } = e, { isOpen: u } = e, { centered: p } = e, { autoOpen: g } = e, { label: w } = e, { alertDialog: l } = e, { staticBackdrop: y } = e, { dismissButton: h } = e, { container: f } = e, { el: a } = e, { inertElements: s } = e;
-  const o = (t) => {
-    y && t.target === t.currentTarget && i(0, u = !1);
-  }, D = (t) => {
-    t.key === "Escape" && i(0, u = !1);
-  }, S = (t) => {
-    var O;
-    if (u && !f.contains(t.relatedTarget) && !a.contains(t.relatedTarget))
-      if (t.preventDefault(), t.target === h) {
-        const d = x(a);
-        (O = d[d.length - 1]) == null || O.focus();
-      } else
-        h.focus();
-  };
-  function F(t) {
-    C[t ? "unshift" : "push"](() => {
-      h = t, i(2, h);
-    });
-  }
-  const z = () => i(0, u = !1);
-  function T(t) {
-    C[t ? "unshift" : "push"](() => {
-      f = t, i(1, f);
-    });
-  }
-  return n.$$set = (t) => {
-    "isOpen" in t && i(0, u = t.isOpen), "centered" in t && i(3, p = t.centered), "autoOpen" in t && i(10, g = t.autoOpen), "label" in t && i(4, w = t.label), "alertDialog" in t && i(5, l = t.alertDialog), "staticBackdrop" in t && i(11, y = t.staticBackdrop), "dismissButton" in t && i(2, h = t.dismissButton), "container" in t && i(1, f = t.container), "el" in t && i(12, a = t.el), "inertElements" in t && i(9, s = t.inertElements), "$$scope" in t && i(13, b = t.$$scope);
-  }, n.$$.update = () => {
-    if (n.$$.dirty & /*autoOpen*/
-    1024 && g && i(0, u = !0), n.$$.dirty & /*isOpen, container, el, inertElements*/
-    4611) {
-      if (u) {
+function B(a = {}, t, s, c) {
+  return q(() => {
+    var i, r;
+    return D(() => {
+      i = r, r = [], F(() => {
+        a !== s(...r) && (t(a, ...r), i && E(s(...i), a) && t(null, ...i));
+      });
+    }), () => {
+      T(() => {
+        r && E(s(...r), a) && t(null, ...r);
+      });
+    };
+  }), a;
+}
+const Z = (a) => Array.from(a.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], audio[controls], video[controls], details, summary, [tabindex]:not([tabindex="-1"])')), $ = (a, t, s) => {
+  !t() && a.target === a.currentTarget && s(!1);
+}, ee = (a, t) => {
+  a.key === "Escape" && t(!1);
+}, te = (a, t, s, c, i) => {
+  var r;
+  if (t() && !s().contains(a.relatedTarget) && !c().contains(a.relatedTarget))
+    if (a.preventDefault(), a.target === i()) {
+      const d = Z(c());
+      (r = d[d.length - 1]) == null || r.focus();
+    } else
+      i().focus();
+};
+var ae = (a, t) => t(!1), se = M('<div class="fixed left-0 top-0 z-[1000] flex h-screen w-screen bg-black bg-opacity-50 transition-[opacity,visibility]"><div part="content"><button class="absolute right-0 top-0 -translate-x-1/2 translate-y-1/2 z-[2] flex aspect-square w-8 items-center justify-center text-white text-lg transition-colors bg-black hover:bg-red focus:bg-red rounded-full p-2" aria-label="Close modal"><!></button> <!></div></div>');
+function ne(a, t) {
+  U(t, !0);
+  let s = l(t, "isOpen", 15), c = l(t, "centered", 7), i = l(t, "autoOpen", 7), r = l(t, "label", 7), d = l(t, "alertDialog", 7), k = l(t, "staticBackdrop", 7), m = l(t, "dismissButton", 7), f = l(t, "container", 7), b = l(t, "el", 7), p = l(t, "inertElements", 7);
+  _(() => {
+    i() && s(!0);
+  }), _(() => {
+    if (s()) {
+      window.requestAnimationFrame(() => {
         window.requestAnimationFrame(() => {
           window.requestAnimationFrame(() => {
-            window.requestAnimationFrame(() => {
-              f.focus();
-            });
+            f().focus();
           });
         });
-        let t = a;
-        for (; t !== null && t !== document.body; ) {
-          const O = t.parentElement;
-          if (O === null) {
-            const d = t.getRootNode();
-            if (d instanceof ShadowRoot) {
-              t = d.host;
-              continue;
-            }
+      });
+      let e = b();
+      for (; e !== null && e !== document.body; ) {
+        const h = e.parentElement;
+        if (h === null) {
+          const u = e.getRootNode();
+          if (u instanceof ShadowRoot) {
+            e = u.host;
+            continue;
           }
-          if (O !== null)
-            for (const d of O.children)
-              d !== t && !d.inert && (d.inert = !0, s.push(d));
-          t = O, a.dispatchEvent(new CustomEvent("opened", { bubbles: !0, composed: !0 }));
         }
-      } else {
-        for (const t of s)
-          t.removeAttribute("inert");
-        i(9, s = []), a.dispatchEvent(new CustomEvent("closed", { bubbles: !0, composed: !0 }));
+        if (h !== null)
+          for (const u of h.children)
+            u !== e && !u.inert && (u.inert = !0, p().push(u));
+        e = h;
       }
-      document.body.style.overflow = u ? "hidden" : "";
+      b().dispatchEvent(new CustomEvent("opened", { bubbles: !0, composed: !0 }));
+    } else {
+      for (const e of p())
+        e.removeAttribute("inert");
+      p([]), b().dispatchEvent(new CustomEvent("closed", { bubbles: !0, composed: !0 }));
     }
-  }, [
-    u,
-    f,
-    h,
-    p,
-    w,
-    l,
-    o,
-    D,
-    S,
+    document.body.style.overflow = s() ? "hidden" : "";
+  });
+  var n = se();
+  y(n, "tabindex", -1), n.__click = [$, k, s], n.__keyup = [ee, s], n.__focusout = [
+    te,
     s,
-    g,
-    y,
-    a,
+    f,
     b,
-    c,
-    F,
-    z,
-    T
+    m
   ];
+  var w = O(n);
+  const A = Q(() => V(X("z-1 absolute left-1/2 h-fit max-h-full max-w-full -translate-x-1/2 overflow-auto w-full sm:w-fit sm:p-8 transition-transform motion-reduce:transition-none", s() && "visible opacity-100", !s() && !c() && "translate-y-[-50px]", !s() && c() && "translate-y-[calc(-50%_-_50px)] top-1/2", s() && c() && "translate-y-[-50%] top-1/2")));
+  var g = O(w);
+  g.__click = [ae, s];
+  var C = O(g);
+  G(C, { icon: N }), x(g), B(g, (e) => m(e), () => m());
+  var S = H(g, 2);
+  return W(S, t, "default", {}), x(w), x(n), B(n, (e) => f(e), () => f()), J(() => {
+    y(n, "role", d() ? "alertdialog" : "dialog"), y(n, "aria-modal", s() ? "true" : ""), y(n, "aria-label", r()), v(n, "visible", s()), v(n, "opacity-100", s()), v(n, "invisible", !s()), v(n, "opacity-0", !s()), I(w, P(A));
+  }), K(a, n), L({
+    get isOpen() {
+      return s();
+    },
+    set isOpen(e) {
+      s(e), o();
+    },
+    get centered() {
+      return c();
+    },
+    set centered(e) {
+      c(e), o();
+    },
+    get autoOpen() {
+      return i();
+    },
+    set autoOpen(e) {
+      i(e), o();
+    },
+    get label() {
+      return r();
+    },
+    set label(e) {
+      r(e), o();
+    },
+    get alertDialog() {
+      return d();
+    },
+    set alertDialog(e) {
+      d(e), o();
+    },
+    get staticBackdrop() {
+      return k();
+    },
+    set staticBackdrop(e) {
+      k(e), o();
+    },
+    get dismissButton() {
+      return m();
+    },
+    set dismissButton(e) {
+      m(e), o();
+    },
+    get container() {
+      return f();
+    },
+    set container(e) {
+      f(e), o();
+    },
+    get el() {
+      return b();
+    },
+    set el(e) {
+      b(e), o();
+    },
+    get inertElements() {
+      return p();
+    },
+    set inertElements(e) {
+      p(e), o();
+    }
+  });
 }
-class te extends R {
-  constructor(e) {
-    super(), U(this, e, ee, $, K, {
-      isOpen: 0,
-      centered: 3,
-      autoOpen: 10,
-      label: 4,
-      alertDialog: 5,
-      staticBackdrop: 11,
-      dismissButton: 2,
-      container: 1,
-      el: 12,
-      inertElements: 9
-    });
-  }
-  get isOpen() {
-    return this.$$.ctx[0];
-  }
-  set isOpen(e) {
-    this.$$set({ isOpen: e }), m();
-  }
-  get centered() {
-    return this.$$.ctx[3];
-  }
-  set centered(e) {
-    this.$$set({ centered: e }), m();
-  }
-  get autoOpen() {
-    return this.$$.ctx[10];
-  }
-  set autoOpen(e) {
-    this.$$set({ autoOpen: e }), m();
-  }
-  get label() {
-    return this.$$.ctx[4];
-  }
-  set label(e) {
-    this.$$set({ label: e }), m();
-  }
-  get alertDialog() {
-    return this.$$.ctx[5];
-  }
-  set alertDialog(e) {
-    this.$$set({ alertDialog: e }), m();
-  }
-  get staticBackdrop() {
-    return this.$$.ctx[11];
-  }
-  set staticBackdrop(e) {
-    this.$$set({ staticBackdrop: e }), m();
-  }
-  get dismissButton() {
-    return this.$$.ctx[2];
-  }
-  set dismissButton(e) {
-    this.$$set({ dismissButton: e }), m();
-  }
-  get container() {
-    return this.$$.ctx[1];
-  }
-  set container(e) {
-    this.$$set({ container: e }), m();
-  }
-  get el() {
-    return this.$$.ctx[12];
-  }
-  set el(e) {
-    this.$$set({ el: e }), m();
-  }
-  get inertElements() {
-    return this.$$.ctx[9];
-  }
-  set inertElements(e) {
-    this.$$set({ inertElements: e }), m();
-  }
-}
-customElements.define("uofg-modal", j(te, { isOpen: {}, centered: { reflect: !0, type: "Boolean", attribute: "centered" }, autoOpen: { reflect: !0, type: "Boolean", attribute: "auto-open" }, label: { reflect: !0, type: "String", attribute: "label" }, alertDialog: { reflect: !0, type: "String", attribute: "alert-dialog" }, staticBackdrop: { reflect: !0, type: "Boolean", attribute: "static-backdrop" }, dismissButton: {}, container: {}, el: {}, inertElements: {} }, ["default"], [], !0, (n) => class extends n {
-  constructor() {
-    super(), J(this.shadowRoot), this.el = this, this.inertElements = [];
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    for (const e of this.inertElements)
-      e.removeAttribute("inert");
-  }
-  getState() {
-    return this.isOpen;
-  }
-  setState(e) {
-    this.isOpen = e;
-  }
-  toggle() {
-    return this.isOpen = !this.isOpen, this.isOpen;
-  }
-  close() {
-    this.isOpen = !1;
-  }
-  open() {
-    this.isOpen = !0;
+j(["click", "keyup", "focusout"]);
+customElements.define("uofg-modal", R(
+  ne,
+  {
+    label: {
+      attribute: "label",
+      reflect: !0,
+      type: "String"
+    },
+    alertDialog: {
+      attribute: "alert-dialog",
+      reflect: !0,
+      type: "String"
+    },
+    centered: {
+      attribute: "centered",
+      reflect: !0,
+      type: "Boolean"
+    },
+    autoOpen: {
+      attribute: "auto-open",
+      reflect: !0,
+      type: "Boolean"
+    },
+    staticBackdrop: {
+      attribute: "static-backdrop",
+      reflect: !0,
+      type: "Boolean"
+    },
+    isOpen: {},
+    dismissButton: {},
+    container: {},
+    el: {},
+    inertElements: {}
+  },
+  ["default"],
+  [],
+  !0,
+  (a) => class extends a {
+    constructor() {
+      super(), Y(this.shadowRoot), this.el = this, this.inertElements = [];
+    }
+    connectedCallback() {
+      super.connectedCallback();
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      for (const t of this.inertElements)
+        t.removeAttribute("inert");
+    }
+    getState() {
+      return this.isOpen;
+    }
+    setState(t) {
+      this.isOpen = t;
+    }
+    toggle() {
+      return this.isOpen = !this.isOpen, this.isOpen;
+    }
+    close() {
+      this.isOpen = !1;
+    }
+    open() {
+      this.isOpen = !0;
+    }
   }
-}));
+));
 export {
-  te as default
+  ne as default
 };

package/dist/uofg-web-components/uofg-web-components.css

@@ -1 +1 @@
-:root{font-size:62.5%}body{font-size:1.6rem;font-family:sans-serif;margin:0;padding:0}uofg-header{display:block;width:100%}uofg-header *{display:none}uofg-header:defined{height:-moz-fit-content!important;height:fit-content!important}uofg-header:not(:defined){height:5rem!important;background-color:#000}@media screen and (min-width: 1024px){uofg-header:not(:defined){height:14rem!important}}uofg-header:not(:defined):has(*),uofg-header:not(:defined)[page-title]{height:10rem!important}@media screen and (min-width: 1024px){uofg-header:not(:defined):has(*),uofg-header:not(:defined)[page-title]{height:18rem!important}}uofg-header:not(:defined):has(*)[variant=dual-brand],uofg-header:not(:defined)[page-title][variant=dual-brand]{height:11.5rem!important}@media screen and (min-width: 1024px){uofg-header:not(:defined):has(*)[variant=dual-brand],uofg-header:not(:defined)[page-title][variant=dual-brand]{height:14rem!important}}uofg-footer{display:block}uofg-modal{display:block;position:fixed;visibility:hidden;z-index:1000}uofg-alert{display:block;max-width:100rem}
+:root{font-size:62.5%}body{font-size:1.6rem;margin:0;padding:0}uofg-header{display:block;width:100%}uofg-header *{display:none}uofg-header:defined{height:-moz-fit-content!important;height:fit-content!important}uofg-header:not(:defined){height:5rem!important;background-color:#000}@media screen and (min-width: 1024px){uofg-header:not(:defined){height:14rem!important;background:linear-gradient(180deg,#fff,#fff 28%,#000 28%,#000)}}uofg-header:not(:defined):has(*),uofg-header:not(:defined)[page-title]{height:10rem!important;background:linear-gradient(0deg,#ddd,#ddd 50%,#000 50%,#000)}@media screen and (min-width: 1024px){uofg-header:not(:defined):has(*),uofg-header:not(:defined)[page-title]{height:18rem!important;background:linear-gradient(180deg,#fff,#fff 22%,#000 22%,#000 78%,#ddd 78%,#ddd)}}uofg-header:not(:defined):has(*)[variant=dual-brand],uofg-header:not(:defined)[page-title][variant=dual-brand]{height:11.5rem!important}@media screen and (min-width: 1024px){uofg-header:not(:defined):has(*)[variant=dual-brand],uofg-header:not(:defined)[page-title][variant=dual-brand]{height:14rem!important}}uofg-footer{display:block}uofg-modal{display:block;position:fixed;visibility:hidden;z-index:1000}uofg-alert{display:block;max-width:100rem}

package/dist/uofg-web-components/window-BjFv1LQ0.js

@@ -0,0 +1,25 @@
+import { A as w, z as d, aC as f, aD as v, aE as n } from "./font-awesome-icon-tL6xr2rJ.js";
+function m(a, e, c = e) {
+  var u = a === "x", s = () => n(() => {
+    r = !0, clearTimeout(t), t = setTimeout(l, 100), c(window[u ? "scrollX" : "scrollY"]);
+  });
+  addEventListener("scroll", s, {
+    passive: !0
+  });
+  var r = !1, t, l = () => {
+    r = !1;
+  }, i = !0;
+  w(() => {
+    var o = e();
+    i ? i = !1 : !r && o != null && (r = !0, clearTimeout(t), scrollTo(window.scrollX, o), t = setTimeout(l, 100));
+  }), d(s), f(() => {
+    removeEventListener("scroll", s);
+  });
+}
+function T(a, e) {
+  v(window, ["resize"], () => n(() => e(window[a])));
+}
+export {
+  T as a,
+  m as b
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uoguelph/web-components",
-  "version": "1.8.0-rc.0",
+  "version": "1.9.0-rc.1",
   "description": "University of Guelph Web Components Library",
   "module": "dist/uofg-web-components/uofg-web-components.esm.js",
   "type": "module",
@@ -12,26 +12,41 @@
     "dev": "vite",
     "build": "vite build",
     "format": "npx prettier --write .",
-    "prepublishOnly": "npm run build && npmignore --auto"
+    "prepublishOnly": "npm run build && npmignore --auto",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "export $(cat .env | xargs) && npx chromatic --project-token=$CHROMACTIC_PROJECT_TOKEN"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.4",
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@storybook/addon-a11y": "^8.5.0",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/addon-interactions": "^8.5.0",
+    "@storybook/addon-links": "^8.5.0",
+    "@storybook/addon-svelte-csf": "^5.0.0-next.23",
+    "@storybook/blocks": "^8.5.0",
+    "@storybook/svelte": "^8.5.0",
+    "@storybook/svelte-vite": "^8.5.0",
+    "@storybook/test": "^8.5.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "autoprefixer": "^10.4.18",
     "eslint": "^8.57.0",
-    "eslint-plugin-svelte": "^2.35.1",
+    "eslint-plugin-storybook": "^0.11.2",
+    "eslint-plugin-svelte": "^2.45.1",
     "npmignore": "^0.3.1",
     "postcss": "^8.4.35",
     "prettier": "^3.3.2",
-    "prettier-plugin-svelte": "^3.2.4",
+    "prettier-plugin-svelte": "^3.2.6",
     "prettier-plugin-tailwindcss": "^0.5.12",
-    "svelte": "^4.2.12",
-    "svelte-check": "^3.6.6",
+    "storybook": "^8.4.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.1",
-    "vite": "^5.1.6",
+    "vite": "^5.4.4",
     "vite-plugin-full-reload": "^1.1.0"
   },
   "publishConfig": {