@base-framework/ui 1.2.17 → 1.2.19

package/dist/atoms.es.js

@@ -1,4 +1,4 @@
-import { c as e, f as t, h as o, i as n, k as r, l as i, m as u, n as l, t as p, w as I, J as c, L as m, M as d, U as g, $ as B, a0 as T, a1 as C, a4 as f, a5 as S, a6 as x, aa as h, af as k, am as M, ap as U, at as w, au as F, aw as H, ax as L, ay as P, aC as R, aH as V, aI as Z, aK as b, aO as D, aP as G, aQ as J, aR as W, aU as v, aV as y, aW as E, aZ as K, a_ as N } from "./full-page-BJUvF3X2.js";
+import { c as e, f as t, h as o, i as n, k as r, l as i, m as u, n as l, t as p, w as I, J as c, L as m, M as d, U as g, $ as B, a0 as T, a1 as C, a4 as f, a5 as S, a6 as x, aa as h, af as k, am as M, ap as U, at as w, au as F, aw as H, ax as L, ay as P, aC as R, aH as V, aI as Z, aK as b, aO as D, aP as G, aQ as J, aR as W, aU as v, aV as y, aW as E, aZ as K, a_ as N } from "./full-page-DLnHihAW.js";
 import { S as Q } from "./skeleton-BlY3opxG.js";
 export {
   e as Badge,

package/dist/{confirmation-Dn9GDvhl.js → confirmation-BXRI0wnL.js}

@@ -1,6 +1,6 @@
 import { Component as c, Html as m, Dom as y, base as w, Data as T, Builder as b, DateTime as g } from "@base-framework/base";
 import { Li as v, Span as u, Div as r, Ul as D, Button as S, I as x, OnState as B, Time as Y } from "@base-framework/atoms";
-import { ar as k, b0 as C, f as h, al as N, F as O } from "./full-page-BJUvF3X2.js";
+import { ar as k, b0 as C, f as h, al as N, F as O } from "./full-page-DLnHihAW.js";
 import { List as F, DynamicTime as E } from "@base-framework/organisms";
 class X extends c {
   /**

package/dist/{full-page-BJUvF3X2.js → full-page-DLnHihAW.js}

@@ -316,12 +316,16 @@ const ha = r((e, t) => {
   ...t,
   // @ts-ignore
   class: `bttn ${e.class} ${t.class || ""}`
-}, s)), St = (e) => () => {
-  if (e.allowHistory === !0 && globalThis.history.length > 2) {
-    globalThis.history.back();
-    return;
-  }
-  e.backUrl && app.navigate(e.backUrl);
+}, s)), St = (e) => {
+  const t = globalThis.history.length;
+  return () => {
+    const a = globalThis.history.length - t + 1;
+    if (e.allowHistory === !0 && t > 1) {
+      globalThis.history.go(-a);
+      return;
+    }
+    e.backUrl && app.navigate(e.backUrl);
+  };
 }, $t = (e) => r((t, s) => (t.icon = t.icon || u.arrows.left, t.click = t.click || St(t), xe({
   ...e,
   ...t

package/dist/index.es.js

@@ -1,10 +1,10 @@
-import { A as s, a as o, B as t, b as r, c as n, d as i, e as l, f as p, C as u, g as d, h as m, i as g, j as c, k as T, l as C, m as S, n as I, o as b, p as D, q as B, r as F, D as k, s as M, t as P, u as v, v as N, w as f, x as h, y as x, z as y, E as U, F as W, G as L, H as w, I as H, J as A, K as G, L as R, M as O, N as E, O as V, P as Z, Q as j, R as J, S as _, T as q, U as z, V as K, W as Q, X, Y, Z as $, _ as aa, $ as ea, a0 as sa, a1 as oa, a2 as ta, a3 as ra, a4 as na, a5 as ia, a6 as la, a7 as pa, a8 as ua, a9 as da, aa as ma, ab as ga, ac as ca, ad as Ta, ae as Ca, af as Sa, ag as Ia, ah as ba, ai as Da, aj as Ba, ak as Fa, al as ka, am as Ma, an as Pa, ao as va, ap as Na, aq as fa, ar as ha, as as xa, at as ya, au as Ua, av as Wa, aw as La, ax as wa, ay as Ha, az as Aa, aA as Ga, aB as Ra, aC as Oa, aD as Ea, aE as Va, aF as Za, aG as ja, aH as Ja, aI as _a, aJ as qa, aK as za, aL as Ka, aM as Qa, aN as Xa, aO as Ya, aP as $a, aQ as ae, aR as ee, aS as se, aT as oe, aU as te, aV as re, aW as ne, aX as ie, aY as le, aZ as pe, a_ as ue, a$ as de } from "./full-page-BJUvF3X2.js";
+import { A as s, a as o, B as t, b as r, c as n, d as i, e as l, f as p, C as u, g as d, h as m, i as g, j as c, k as T, l as C, m as S, n as I, o as b, p as D, q as B, r as F, D as k, s as M, t as P, u as v, v as N, w as f, x as h, y as x, z as y, E as U, F as W, G as L, H as w, I as H, J as A, K as G, L as R, M as O, N as E, O as V, P as Z, Q as j, R as J, S as _, T as q, U as z, V as K, W as Q, X, Y, Z as $, _ as aa, $ as ea, a0 as sa, a1 as oa, a2 as ta, a3 as ra, a4 as na, a5 as ia, a6 as la, a7 as pa, a8 as ua, a9 as da, aa as ma, ab as ga, ac as ca, ad as Ta, ae as Ca, af as Sa, ag as Ia, ah as ba, ai as Da, aj as Ba, ak as Fa, al as ka, am as Ma, an as Pa, ao as va, ap as Na, aq as fa, ar as ha, as as xa, at as ya, au as Ua, av as Wa, aw as La, ax as wa, ay as Ha, az as Aa, aA as Ga, aB as Ra, aC as Oa, aD as Ea, aE as Va, aF as Za, aG as ja, aH as Ja, aI as _a, aJ as qa, aK as za, aL as Ka, aM as Qa, aN as Xa, aO as Ya, aP as $a, aQ as ae, aR as ee, aS as se, aT as oe, aU as te, aV as re, aW as ne, aX as ie, aY as le, aZ as pe, a_ as ue, a$ as de } from "./full-page-DLnHihAW.js";
 import { S as ge } from "./skeleton-BlY3opxG.js";
 import { Icons as Te, MaterialSymbols as Ce } from "./icons.es.js";
-import { C as Ie, D as be, a as De, b as Be, c as Fe, d as ke, e as Me, M as Pe, N as ve, S as Ne, f as fe, g as he, h as xe, T as ye, i as Ue } from "./confirmation-Dn9GDvhl.js";
-import { B as Le, I as we, N as He, P as Ae, S as Ge, T as Re, a as Oe, b as Ee, U as Ve, c as Ze, d as je, e as Je, W as _e, f as qe, g as ze, h as Ke, i as Qe, j as Xe, k as Ye, l as $e, m as as, n as es } from "./signature-panel-Bu-traik.js";
-import { S as os } from "./sidebar-menu-BRTZ4oP4.js";
-import { B as rs, C as ns, F as is, a as ls, S as ps } from "./sidebar-menu-page-BfPM2fof.js";
+import { C as Ie, D as be, a as De, b as Be, c as Fe, d as ke, e as Me, M as Pe, N as ve, S as Ne, f as fe, g as he, h as xe, T as ye, i as Ue } from "./confirmation-BXRI0wnL.js";
+import { B as Le, I as we, N as He, P as Ae, S as Ge, T as Re, a as Oe, b as Ee, U as Ve, c as Ze, d as je, e as Je, W as _e, f as qe, g as ze, h as Ke, i as Qe, j as Xe, k as Ye, l as $e, m as as, n as es } from "./signature-panel-BhNd436C.js";
+import { S as os } from "./sidebar-menu-Dg6ZTk31.js";
+import { B as rs, C as ns, F as is, a as ls, S as ps } from "./sidebar-menu-page-CuWELCU9.js";
 import { A as ds, B as ms, F as gs, M as cs, T as Ts, a as Cs } from "./bside-template-C7AQgQ6H.js";
 import { F as Is, c as bs } from "./format-DE4rFWuD.js";
 import { I as Bs } from "./image-scaler-1G-JzJVG.js";

package/dist/molecules.es.js

@@ -1,5 +1,5 @@
-import { A as s, a as t, e as r, o as e, p as i, q as n, r as m, u as l, v as d, z as C, E as S, F as p, H as D, K as u, N as c, O as g, P as F, Q as T, R as P, S as b, T as f, V as w, W as A, X as I, a2 as M, a7 as N, ab as y, al as B, aq as E, ar as L, aE as R, aJ as U, aL as k, aN as v, aY as x } from "./full-page-BJUvF3X2.js";
-import { C as q, D as O, a as z, b as G, c as H, d as J, e as K, M as Q, N as V, S as W, f as X, g as Y, h as _, T as j, i as Z } from "./confirmation-Dn9GDvhl.js";
+import { A as s, a as t, e as r, o as e, p as i, q as n, r as m, u as l, v as d, z as C, E as S, F as p, H as D, K as u, N as c, O as g, P as F, Q as T, R as P, S as b, T as f, V as w, W as A, X as I, a2 as M, a7 as N, ab as y, al as B, aq as E, ar as L, aE as R, aJ as U, aL as k, aN as v, aY as x } from "./full-page-DLnHihAW.js";
+import { C as q, D as O, a as z, b as G, c as H, d as J, e as K, M as Q, N as V, S as W, f as X, g as Y, h as _, T as j, i as Z } from "./confirmation-BXRI0wnL.js";
 export {
   s as Alert,
   t as Avatar,

package/dist/organisms.es.js

@@ -1,6 +1,6 @@
-import { B as s, b as n, C as t, g as r, j as o, D as l, s as i, x as d, y as b, G as u, I as g, Y as v, _ as p, a3 as T, a8 as D, ac as k, ad as N, ae as c, ag as C, ah as B, ai as m, aj as y, ak as S, an as h, as as M, av as W, az as I, aA as U, aB as x, aD as H, aF as P, aG as G, aM as f, aS as L, aT as j, aX as F, a$ as O } from "./full-page-BJUvF3X2.js";
-import { B as z, I as A, N as R, P as X, S as Y, T as _, a as $, b as q, U as E, c as J, d as K, e as Q, W as V, f as Z, g as aa, h as ea, i as sa, j as na, k as ta, l as ra, m as oa, n as la } from "./signature-panel-Bu-traik.js";
-import { S as da } from "./sidebar-menu-BRTZ4oP4.js";
+import { B as s, b as n, C as t, g as r, j as o, D as l, s as i, x as d, y as b, G as u, I as g, Y as v, _ as p, a3 as T, a8 as D, ac as k, ad as N, ae as c, ag as C, ah as B, ai as m, aj as y, ak as S, an as h, as as M, av as W, az as I, aA as U, aB as x, aD as H, aF as P, aG as G, aM as f, aS as L, aT as j, aX as F, a$ as O } from "./full-page-DLnHihAW.js";
+import { B as z, I as A, N as R, P as X, S as Y, T as _, a as $, b as q, U as E, c as J, d as K, e as Q, W as V, f as Z, g as aa, h as ea, i as sa, j as na, k as ta, l as ra, m as oa, n as la } from "./signature-panel-BhNd436C.js";
+import { S as da } from "./sidebar-menu-Dg6ZTk31.js";
 export {
   s as BackButton,
   n as Backdrop,

package/dist/pages.es.js

@@ -1,5 +1,5 @@
-import { d as s, Z as g, a9 as n, ao as P } from "./full-page-BJUvF3X2.js";
-import { B as o, C as r, F as i, a as t, S as u } from "./sidebar-menu-page-BfPM2fof.js";
+import { d as s, Z as g, a9 as n, ao as P } from "./full-page-DLnHihAW.js";
+import { B as o, C as r, F as i, a as t, S as u } from "./sidebar-menu-page-CuWELCU9.js";
 export {
   s as BasicPage,
   o as BlankPage,

package/dist/{sidebar-menu-BRTZ4oP4.js → sidebar-menu-Dg6ZTk31.js}

@@ -1,5 +1,5 @@
 import { Div as r, Header as x, H1 as c } from "@base-framework/atoms";
-import { a3 as n } from "./full-page-BJUvF3X2.js";
+import { a3 as n } from "./full-page-DLnHihAW.js";
 const g = ({ title: l, options: a, class: s = "", mobileBorder: t = !1, sticky: e = !1, topNav: o = null, bottomNav: p = null }) => r({ class: `pb-12 p-4 pt-0 lg:p-6 lg:border-r w-full lg:max-w-[300px] flex-auto flex-col ${s}` }, [
   o,
   l && x({ class: "pb-4 md:pb-2 px-6 flex" }, [

package/dist/{sidebar-menu-page-BfPM2fof.js → sidebar-menu-page-CuWELCU9.js}

@@ -1,7 +1,7 @@
 import { Div as s } from "@base-framework/atoms";
-import { d as a, a9 as i, ao as r, ad as n } from "./full-page-BJUvF3X2.js";
+import { d as a, a9 as i, ao as r, ad as n } from "./full-page-DLnHihAW.js";
 import { F as l, A as d } from "./bside-template-C7AQgQ6H.js";
-import { S as c } from "./sidebar-menu-BRTZ4oP4.js";
+import { S as c } from "./sidebar-menu-Dg6ZTk31.js";
 class f extends a {
   /**
    * This will render the page.

package/dist/{signature-panel-Bu-traik.js → signature-panel-BhNd436C.js}

@@ -1,6 +1,6 @@
-import { Div as l, Button as b, On as j, Span as T, Nav as f, Ul as p, Section as y, Li as w, Canvas as z } from "@base-framework/atoms";
-import { Component as k, Data as U, DateTime as I, router as v, NavLink as S, base as L, Dom as B } from "@base-framework/base";
-import { f as C, an as A, aU as u, $ as F } from "./full-page-BJUvF3X2.js";
+import { Div as r, Button as v, On as j, Span as T, Nav as f, Ul as p, Section as y, Li as w, Canvas as z } from "@base-framework/atoms";
+import { Component as k, Data as I, DateTime as U, router as b, NavLink as S, base as L, Dom as B } from "@base-framework/base";
+import { f as C, an as A, aU as u, $ as F } from "./full-page-DLnHihAW.js";
 import { Icons as D } from "./icons.es.js";
 import { IntervalTimer as O } from "@base-framework/organisms";
 class Lt extends k {
@@ -18,7 +18,7 @@ class Lt extends k {
    * @returns {object}
    */
   render() {
-    return l({ class: this.class || "" }, this.children);
+    return r({ class: this.class || "" }, this.children);
   }
 }
 const Y = (s) => {
@@ -64,12 +64,12 @@ const Y = (s) => {
   for (let n = 1; n <= e; n++)
     a.push(new Date(s, t, n)), a.length === 7 && (i.push(a), a = []);
   return a.length > 0 && i.push(a), i;
-}, X = (s, t, e) => {
+}, V = (s, t, e) => {
   const i = /* @__PURE__ */ new Date();
   return i.getDate() === s && i.getMonth() === t && i.getFullYear() === e;
-}, V = ({ day: s, month: t, year: e, weekNumber: i, selectWeek: a }) => {
-  const n = X(s, t, e);
-  return b({
+}, X = ({ day: s, month: t, year: e, weekNumber: i, selectWeek: a }) => {
+  const n = V(s, t, e);
+  return v({
     text: s || "",
     disabled: !s,
     class: `
@@ -80,7 +80,7 @@ const Y = (s) => {
     click: () => a(i, e)
   });
 }, q = (s, t) => {
-  const e = new Date(s, t, 1).getDay(), i = new Date(s, t + 1, 0).getDate(), a = E(s, t, e), n = Array.from({ length: i }, (c, m) => new Date(s, t, m + 1)), o = (a.length + n.length) % 7, h = o === 0 ? 0 : 7 - o, r = G(s, t, h), d = [...a, ...n, ...r], g = [];
+  const e = new Date(s, t, 1).getDay(), i = new Date(s, t + 1, 0).getDate(), a = E(s, t, e), n = Array.from({ length: i }, (c, m) => new Date(s, t, m + 1)), o = (a.length + n.length) % 7, h = o === 0 ? 0 : 7 - o, l = G(s, t, h), d = [...a, ...n, ...l], g = [];
   for (let c = 0; c < d.length; c += 7) {
     const m = d.slice(c, c + 7), x = m.find((N) => N) || new Date(s, t, 1), { weekNumber: M, year: $ } = R(x);
     g.push({
@@ -92,47 +92,47 @@ const Y = (s) => {
   return g;
 }, H = ({ selectWeek: s }) => j("month", (t, e, { data: i }) => {
   const { year: a, month: n, currentDate: o } = i, h = q(a, n);
-  return l(
+  return r(
     { class: "grid grid-cols-8 gap-1 text-sm px-4 py-2" },
     [
       // Header row: "Week" label + day-of-week labels
-      l({ class: "text-xs text-center col-span-1 text-muted-foreground flex items-center" }, "Week"),
-      l(
+      r({ class: "text-xs text-center col-span-1 text-muted-foreground flex items-center" }, "Week"),
+      r(
         {
           class: "grid grid-cols-7 col-span-7 text-center text-muted-foreground items-center"
         },
         ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(
-          (r) => T({ class: "px-1 py-1", text: r })
+          (l) => T({ class: "px-1 py-1", text: l })
         )
       ),
       // Render each "week" row
       ...h.map(
-        ({ weekNumber: r, days: d, year: g }) => l({
+        ({ weekNumber: l, days: d, year: g }) => r({
           class: "grid grid-cols-8 col-span-8 items-center ring-primary rounded-sm px-1",
           onSet: ["currentWeek", {
-            ring: r
+            ring: l
           }]
         }, [
           // Left column: ISO week number
-          l({
+          r({
             class: "font-medium text-center col-span-1 rounded-sm cursor-pointer",
-            click: () => s(r, g),
+            click: () => s(l, g),
             // If you have a 'currentWeek' state, you can highlight it with 'onSet'
             onSet: ["currentWeek", {
-              "text-primary-foreground": r,
-              "bg-primary": r
+              "text-primary-foreground": l,
+              "bg-primary": l
             }],
-            text: r ? `W${r}` : ""
+            text: l ? `W${l}` : ""
           }),
           // The 7 cells for each day in the row
-          l(
+          r(
             { class: "grid grid-cols-7 col-span-7 text-center" },
             d.map(
-              (c) => V({
+              (c) => X({
                 year: c?.getFullYear() || null,
                 month: c?.getMonth() || null,
                 day: c?.getDate() || null,
-                weekNumber: r,
+                weekNumber: l,
                 selectWeek: s
               })
             )
@@ -154,7 +154,7 @@ const Y = (s) => {
     variant: "icon",
     icon: s === "Previous" ? D.chevron.single.left : D.chevron.single.right
   }
-), _ = ({ next: s, previous: t }) => l({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
+), _ = ({ next: s, previous: t }) => r({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
   T("[[monthName]] [[year]]"),
   W({
     label: "Previous",
@@ -181,7 +181,7 @@ class Wt extends k {
    */
   setData() {
     const t = /* @__PURE__ */ new Date(), e = this.selectedWeek || this.calculateCurrentWeek(t), i = P(e, t.getFullYear());
-    return new U({
+    return new I({
       monthName: this.getMonthName(i.getMonth()),
       year: i.getFullYear(),
       month: i.getMonth(),
@@ -218,7 +218,7 @@ class Wt extends k {
    * @returns {string}
    */
   getMonthName(t) {
-    return I.monthNames[t];
+    return U.monthNames[t];
   }
   /**
    * Updates the calendar to show the previous month.
@@ -272,7 +272,7 @@ class Wt extends k {
    * @returns {object}
    */
   render() {
-    return l({ class: "week-calendar-container border rounded-md p-3" }, [
+    return r({ class: "week-calendar-container border rounded-md p-3" }, [
       _({
         next: () => this.goToNextMonth(),
         previous: () => this.goToPreviousMonth()
@@ -318,7 +318,7 @@ class Tt extends k {
           class: "flex gap-x-4",
           map: [this.options, (t) => this.addLink(t)],
           watch: {
-            value: ["[[path]]", v.data],
+            value: ["[[path]]", b.data],
             callBack: this.updateLinks.bind(this)
           }
         })
@@ -331,7 +331,7 @@ class Tt extends k {
    * @returns {void}
    */
   afterSetup() {
-    const t = v.data.path;
+    const t = b.data.path;
     this.updateLinks(t);
   }
   /**
@@ -414,7 +414,7 @@ const Z = (s) => w(
     dataStateSet: ["selected", ["state", s.value, "active"]]
   },
   [
-    b({
+    v({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 rounded-md",
       onState: ["selected", { selected: s.value }],
       click: (t) => s.callBack(s.value)
@@ -439,7 +439,7 @@ class Mt extends u {
    */
   render() {
     const t = this.select.bind(this);
-    return l({ class: "" }, [
+    return r({ class: "" }, [
       et({
         class: this.class,
         options: this.options,
@@ -518,7 +518,7 @@ const st = (s) => w(
     dataStateSet: ["selected", ["state", s.value, "active"]]
   },
   [
-    b({
+    v({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 rounded-md disabled:opacity-50 disabled:cursor-not-allowed",
       onState: ["selected", { selected: s.value }],
       click: (t) => s.callBack(s.value),
@@ -574,14 +574,14 @@ class $t extends u {
 const nt = (s, t) => new RegExp(`${s}($|/|\\.).*`).test(t), ot = (s, t) => {
   const e = s.getLinkPath();
   return s.exact ? t === e : nt(e, t);
-}, rt = ({ text: s, href: t, exact: e }) => new S({
+}, lt = ({ text: s, href: t, exact: e }) => new S({
   text: s,
   href: t,
   exact: e,
   dataSet: ["selected", ["state", !0, "active"]],
   class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm"
 });
-class lt extends u {
+class rt extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -607,7 +607,7 @@ class lt extends u {
         class: "flex flex-auto flex-row",
         map: [this.options, (t) => this.addLink(t)],
         watch: {
-          value: ["[[path]]", v.data],
+          value: ["[[path]]", b.data],
           callBack: this.updateLinks.bind(this)
         }
       })
@@ -619,7 +619,7 @@ class lt extends u {
    * @returns {void}
    */
   afterSetup() {
-    const t = v.data.path;
+    const t = b.data.path;
     this.updateLinks(t);
   }
   /**
@@ -664,7 +664,7 @@ class lt extends u {
    * @returns {object}
    */
   addLink({ label: t, href: e, exact: i }) {
-    const a = rt({ text: t, href: e, exact: i });
+    const a = lt({ text: t, href: e, exact: i });
     return this.links.push(a), a;
   }
   /**
@@ -691,8 +691,8 @@ class Nt extends u {
    * @returns {object}
    */
   render() {
-    return l({ class: "tab-panel" }, [
-      new lt({
+    return r({ class: "tab-panel" }, [
+      new rt({
         class: this.class,
         options: this.options
       }),
@@ -729,7 +729,7 @@ const ct = (s) => w(
     dataStateSet: ["selected", ["state", s.value, "active"]]
   },
   [
-    b({
+    v({
       class: "flex flex-auto justify-center items-center px-4 py-3 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
       onState: ["selected", { selected: s.value }],
       click: (t) => s.callBack(s.value)
@@ -754,7 +754,7 @@ class jt extends u {
    */
   render() {
     const t = this.select.bind(this);
-    return l({ class: "underlined-button-tab-panel flex flex-auto flex-col" }, [
+    return r({ class: "underlined-button-tab-panel flex flex-auto flex-col" }, [
       dt({
         class: this.class,
         options: this.options,
@@ -824,7 +824,7 @@ const ut = (s) => w(
     dataStateSet: ["selected", ["state", s.value, "active"]]
   },
   [
-    b({
+    v({
       class: "flex flex-auto justify-center items-center px-4 py-3 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer",
       onState: ["selected", { selected: s.value }],
       click: (t) => s.callBack(s.value),
@@ -880,21 +880,21 @@ class zt extends u {
 const gt = (s, t) => new RegExp(`${s}($|/|\\.).*`).test(t), mt = (s, t) => {
   const e = s.getLinkPath();
   return s.exact ? t === e : gt(e, t);
-}, vt = ({ text: s, href: t, exact: e }) => new S({
+}, bt = ({ text: s, href: t, exact: e }) => new S({
   text: s,
   href: t,
   exact: e,
   dataSet: ["selected", ["state", !0, "active"]],
   class: "relative inline-flex items-center justify-center whitespace-nowrap px-4 py-3 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:transition-all after:duration-200 after:scale-x-0 data-[state=active]:after:scale-x-100"
 });
-class bt extends u {
+class vt extends u {
   /**
    * This will declare the props for the compiler.
    *
    * @returns {void}
    */
   declareProps() {
-    this.options = [], this.class = "", this.onSelect = null;
+    this.options = [], this.class = "", this.onSelect = null, this.scrollable = !1;
   }
   /**
    * This will configure the links.
@@ -908,12 +908,13 @@ class bt extends u {
    * @returns {object}
    */
   render() {
-    return f({ class: `border-b border-border ${this.class}` }, [
+    const t = this.scrollable ? "overflow-x-auto no-scrollbar" : "", e = this.scrollable ? "flex flex-row items-center min-w-max" : "flex flex-row items-center";
+    return f({ class: `border-b border-border ${t} ${this.class}` }, [
       p({
-        class: "flex flex-row items-center",
-        map: [this.options, (t) => this.addLink(t)],
+        class: e,
+        map: [this.options, (i) => this.addLink(i)],
         watch: {
-          value: ["[[path]]", v.data],
+          value: ["[[path]]", b.data],
           callBack: this.updateLinks.bind(this)
         }
       })
@@ -925,7 +926,7 @@ class bt extends u {
    * @returns {void}
    */
   afterSetup() {
-    const t = v.data.path;
+    const t = b.data.path;
     this.updateLinks(t);
   }
   /**
@@ -961,7 +962,7 @@ class bt extends u {
    * @returns {void}
    */
   updateLink(t, e) {
-    t.update(e);
+    t.update(e), e && this.scrollable && t.panel && t.panel.scrollIntoView({ behavior: "smooth", inline: "nearest", block: "nearest" });
   }
   /**
    * This will add a link.
@@ -970,7 +971,7 @@ class bt extends u {
    * @returns {object}
    */
   addLink({ label: t, href: e, exact: i }) {
-    const a = vt({ text: t, href: e, exact: i });
+    const a = bt({ text: t, href: e, exact: i });
     return this.links.push(a), a;
   }
   /**
@@ -982,14 +983,14 @@ class bt extends u {
     this.links = [];
   }
 }
-class Ut extends u {
+class It extends u {
   /**
    * This will declare the props for the compiler.
    *
    * @returns {void}
    */
   declareProps() {
-    this.options = [], this.class = "";
+    this.options = [], this.class = "", this.scrollable = !1;
   }
   /**
    * This will render the component.
@@ -997,10 +998,11 @@ class Ut extends u {
    * @returns {object}
    */
   render() {
-    return l({ class: "underlined-tab-panel flex flex-auto flex-col" }, [
-      new bt({
+    return r({ class: "underlined-tab-panel flex flex-auto flex-col" }, [
+      new vt({
         class: this.class,
-        options: this.options
+        options: this.options,
+        scrollable: this.scrollable
       }),
       y({
         class: "tab-content pt-6 flex flex-auto flex-col",
@@ -1100,8 +1102,8 @@ class kt extends k {
       e = d.clientX, i = d.clientY;
     } else
       e = t.x || t.clientX, i = t.y || t.clientY;
-    const h = parseInt((e - o.left) * n), r = parseInt((i - o.top) * n);
-    this.mouse.x = h, this.mouse.y = r;
+    const h = parseInt((e - o.left) * n), l = parseInt((i - o.top) * n);
+    this.mouse.x = h, this.mouse.y = l;
   }
   /**
    * Called when the pointer goes down on the canvas.
@@ -1176,12 +1178,12 @@ class kt extends k {
    */
   scale() {
     const t = this.canvas, e = this.container, i = B.getSize(e), a = this.targetSize, n = a.width, o = a.height;
-    let h = n + "px", r = o + "px";
+    let h = n + "px", l = o + "px";
     if (this.width = t.width = n, this.height = t.height = o, i.width !== 0 && i.height !== 0) {
       const d = i.width, g = i.height, c = d / n, m = g / o, x = Math.min(c, m);
-      h = n * x + "px", r = o * x + "px";
+      h = n * x + "px", l = o * x + "px";
     }
-    t.style.width = h, t.style.height = r;
+    t.style.width = h, t.style.height = l;
   }
   /**
    * Main drawing loop. If the mouse is down, adds a line
@@ -1255,7 +1257,7 @@ class kt extends k {
     this.timer.stop(), this.status = "stopped";
   }
 }
-class It extends k {
+class Ut extends k {
   /**
    * Sets up default properties for the signature panel.
    *
@@ -1271,13 +1273,13 @@ class It extends k {
    * @returns {object} The layout object for the component.
    */
   render() {
-    return l({ class: "signature-panel relative flex flex-auto overflow-hidden select-none" }, [
+    return r({ class: "signature-panel relative flex flex-auto overflow-hidden select-none" }, [
       F({
         cache: "hiddenInput",
         required: !0,
         bind: this.path + ".data"
       }),
-      l({ class: "absolute top-2 right-2" }, [
+      r({ class: "absolute top-2 right-2" }, [
         C({
           variant: "icon",
           icon: D.circleX,
@@ -1346,16 +1348,16 @@ export {
   Ct as I,
   Tt as N,
   Lt as P,
-  It as S,
+  Ut as S,
   Nt as T,
   jt as U,
   Wt as W,
   $t as a,
-  lt as b,
-  Ut as c,
+  rt as b,
+  It as c,
   zt as d,
-  bt as e,
-  V as f,
+  vt as e,
+  X as f,
   H as g,
   _ as h,
   R as i,

package/dist/types/components/organisms/tabs/underlined-tab-navigation.d.ts

@@ -23,6 +23,14 @@ export class UnderlinedTabNavigation extends Veil {
      * @member {function} callBack
      */
     onSelect: any;
+    /**
+     * Whether the tab navigation is scrollable.
+     * When true, the nav becomes horizontally scrollable
+     * and the active tab scrolls into view.
+     * @member {boolean} scrollable
+     * @default false
+     */
+    scrollable: boolean;
     links: any[];
     /**
      * This will render the component.

package/dist/types/components/organisms/tabs/underlined-tab.d.ts

@@ -19,6 +19,12 @@ export class UnderlinedTab extends Veil {
      * @default ''
      */
     class: string;
+    /**
+     * Whether the tab navigation is scrollable.
+     * @member {boolean} scrollable
+     * @default false
+     */
+    scrollable: boolean;
     /**
      * This will render the component.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.2.17",
+	"version": "1.2.19",
 	"description": "This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.",
 	"main": "./dist/index.es.js",
 	"scripts": {