@fewangsit/wangsvue-presets 1.0.100 → 1.0.102-alpha.0

package/supplyasset/index.es.js

@@ -1,4 +1,7 @@
-const w = {
+var z = Object.defineProperty;
+var _ = (e, t, a) => t in e ? z(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
+var b = (e, t, a) => _(e, typeof t != "symbol" ? t + "" : t, a);
+const A = {
   accordiontab: {
     header: ({ props: e }) => ({
       class: [
@@ -60,7 +63,7 @@ const w = {
       leaveToClass: "max-h-0"
     }
   }
-}, s = {
+}, d = {
   root: ({ props: e }) => ({
     class: [
       // Alignment
@@ -108,7 +111,7 @@ const w = {
     "icon-class": "w-[10px] h-[10px] !text-[10px]",
     "data-wv-section": "removebutton"
   })
-}, y = {
+}, S = {
   root: ({ context: e }) => ({
     class: [
       // Font
@@ -146,7 +149,7 @@ const w = {
       }
     ]
   })
-}, p = {
+}, T = {
   root: ({ props: e, context: t }) => ({
     class: [
       "relative",
@@ -441,7 +444,7 @@ const w = {
       }
     ]
   })
-}, k = {
+}, N = {
   root: ({ props: e }) => ({
     class: [
       "rounded ring-1 ring-success-500 p-[5px] ring-inset",
@@ -458,7 +461,7 @@ const w = {
     "data-wv-section": "icon",
     severity: "success"
   }
-}, C = {
+}, P = {
   root: ({ context: e }) => ({
     class: [
       "rounded ring-1 ring-general-500 p-[5px] ring-inset",
@@ -475,7 +478,7 @@ const w = {
     ],
     "data-wv-section": "icon"
   })
-}, j = {
+}, F = {
   buttontrigger: {
     root: ({ context: e }) => ({
       class: [
@@ -525,7 +528,7 @@ const w = {
   inputtext: {
     class: "!h-max !py-0 !px-0"
   }
-}, z = {
+}, I = {
   root: ["w-max"],
   button: {
     class: [
@@ -534,7 +537,7 @@ const w = {
     "data-sp-section": "button-split"
   },
   menuButton: "!rounded-ss-none !rounded-es-none"
-}, u = navigator.userAgent.includes("Firefox"), _ = {
+}, h = navigator.userAgent.includes("Firefox"), V = {
   root: ({ props: e }) => ({
     class: [
       // Display and Position
@@ -817,11 +820,12 @@ const w = {
   daylabel: ({ context: e }) => ({
     class: [
       // Flexbox and Alignment
-      "flex items-center justify-center",
+      { flex: !e.date.otherMonth },
+      { hidden: e.date.otherMonth },
+      "items-center justify-center",
       // 'mx-auto',
       // Shape & Size
       "w-8 h-8",
-      { hidden: e.date.otherMonth },
       // Colors
       {
         "bg-general-100": e.date.today && !e.selected,
@@ -991,8 +995,8 @@ const w = {
     class: [
       "w-[39px] h-[26px] flex justify-center items-center ring-general-200 rounded",
       {
-        "ring-1": u,
-        "ring-[0.5px]": !u
+        "ring-1": h,
+        "ring-[0.5px]": !h
       }
     ]
   },
@@ -1117,7 +1121,7 @@ const w = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, A = {
+}, E = {
   root: {
     class: [
       //Shape
@@ -1146,7 +1150,7 @@ const w = {
   footer: {
     class: ["inline-flex gap-1 text-xs items-center"]
   }
-}, V = {
+}, $ = {
   root: {
     class: [
       // Flexbox
@@ -1260,7 +1264,7 @@ const w = {
       }
     ]
   })
-}, S = {
+}, B = {
   button: ({ props: e, buttonClass: t }) => ({
     class: [
       t,
@@ -1299,7 +1303,7 @@ const w = {
   buttondownload: {
     "data-wv-section": "changelog-dialog-button-download"
   }
-}, l = {
+}, o = {
   root: {
     class: [
       "relative",
@@ -1409,7 +1413,7 @@ const w = {
   tooltipicon: {
     class: "text-primary-700 w-[10px] h-[10px]"
   }
-}, F = {
+}, U = {
   copybutton: {
     class: "peer-hover:visible scale-125 !absolute top-2 right-2 z-50"
   },
@@ -1429,7 +1433,7 @@ const w = {
       "px-2 bg-primary-100 sticky left-0 text-right select-none"
     ]
   }
-}, P = {
+}, G = {
   menustart: {
     class: ""
   },
@@ -1453,7 +1457,7 @@ const w = {
       { invisible: e.dragable === !1 }
     ]
   })
-}, T = {
+}, L = {
   root: {
     "data-wv-name": "datatable",
     "data-wv-section": "root",
@@ -1669,7 +1673,7 @@ const w = {
     class: "",
     template: "FirstPageLink PrevPageLink PageLinks JumpToPageInput NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
   })
-}, h = {
+}, C = {
   root: ({ state: e }) => ({
     class: [
       // Shape
@@ -1862,7 +1866,7 @@ const w = {
     leaveActiveClass: "transition-all duration-200 ease-out",
     leaveToClass: "opacity-0 scale-75 mask-active"
   }
-}, I = {
+}, R = {
   root: {
     class: ["!w-[clamp(360px,75vw,400px)]"],
     "data-wv-name": (e) => e ?? "root",
@@ -1903,7 +1907,7 @@ const w = {
     class: "flex items-end justify-end gap-1 !mt-0",
     "data-wv-section": "dialog-confirm-footer"
   }
-}, $ = {
+}, M = {
   root: {
     class: ["max-w-[90vw]"],
     style: (e) => `width: ${e}`,
@@ -1974,7 +1978,7 @@ const w = {
   savesubmitbutton: {
     "data-wv-section": "save-submit-button"
   }
-}, n = {
+}, r = {
   root: ({ props: e, state: t }) => ({
     class: [
       // Display and Position
@@ -2013,9 +2017,9 @@ const w = {
       ]
     };
   },
-  token: s.root({ props: { severity: "dark" } }),
-  tokenLabel: s.input({ props: {}, context: {} }),
-  removeTokenIcon: s.removebutton({
+  token: d.root({ props: { severity: "dark" } }),
+  tokenLabel: d.input({ props: {}, context: {} }),
+  removeTokenIcon: d.removebutton({
     props: { badgeSeverity: "dark" }
   }),
   loadingplaceholder: {
@@ -2092,12 +2096,12 @@ const w = {
     ]
   },
   headerCheckbox: {
-    ...l,
+    ...o,
     root: {
-      class: ["!mx-auto", ...l.root.class]
+      class: ["!mx-auto", ...o.root.class]
     }
   },
-  itemCheckbox: l,
+  itemCheckbox: o,
   closeButton: {
     class: ["hidden"]
   },
@@ -2245,7 +2249,7 @@ const w = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, M = {
+}, O = {
   root: ({ props: e, state: t }) => ({
     class: [
       // Display and Position
@@ -2410,12 +2414,12 @@ const w = {
       "bg-transparent"
     ]
   },
-  header: n == null ? void 0 : n.header,
-  filtercontainer: n == null ? void 0 : n.filtercontainer,
-  filterinput: n == null ? void 0 : n.filterinput,
-  filtericon: n == null ? void 0 : n.filtericon,
-  loadingicon: n == null ? void 0 : n.loadingicon,
-  dropdownicon: ({ state: e }) => n.dropdownicon({ state: e }),
+  header: r == null ? void 0 : r.header,
+  filtercontainer: r == null ? void 0 : r.filtercontainer,
+  filterinput: r == null ? void 0 : r.filterinput,
+  filtericon: r == null ? void 0 : r.filtericon,
+  loadingicon: r == null ? void 0 : r.loadingicon,
+  dropdownicon: ({ state: e }) => r.dropdownicon({ state: e }),
   clearicon: {
     class: [
       // Color
@@ -2437,7 +2441,7 @@ const w = {
   loadingplaceholder: {
     class: "text-general-200 font-light"
   }
-}, R = {
+}, D = {
   // :class="['ts-form', { 'sticky-buttons': props.stickyButtons }]"
   root: () => ({
     class: [
@@ -2478,14 +2482,14 @@ const w = {
   "validator-message": {
     class: ["static w-max transform-none"]
   }
-}, B = [
+}, W = [
   {
     "ring-1 p-[1px]": navigator.userAgent.includes("Firefox"),
     "ring-[0.5px] p-[0.5px]": !navigator.userAgent.includes("Firefox")
   },
   "ring-inset",
   "ring-general-200"
-], L = {
+], K = {
   css: `
     *[data-pd-ripple="true"]{
         overflow: hidden;
@@ -2562,7 +2566,7 @@ const w = {
         }
     }
 `
-}, D = {
+}, Y = {
   root: ({ props: e }) => ({
     class: [
       "relative inline-block",
@@ -2700,7 +2704,7 @@ const w = {
     leaveActiveClass: "transition-all duration-150 ease-in",
     leaveToClass: "opacity-0 scale-75"
   }
-}, E = {
+}, H = {
   root: ({ props: e }) => ({
     class: [
       "rounded-md p-3",
@@ -2730,16 +2734,16 @@ const w = {
       "font-medium"
     ]
   }
-}, v = {
+}, j = {
   root: ({ props: e, context: t, parent: a }) => {
-    var r, i;
+    var n, i;
     return {
       class: [
         "px-3 py-[5px] w-full bg-transparent",
         // Size
         "h-max",
         {
-          "max-h-[43px]": (i = (r = a.instance) == null ? void 0 : r.placeholder) == null ? void 0 : i.includes("password")
+          "max-h-[43px]": (i = (n = a.instance) == null ? void 0 : n.placeholder) == null ? void 0 : i.includes("password")
         },
         // Font
         "text-general-800 text-xs tracking-[0.02em] font-medium",
@@ -2754,15 +2758,15 @@ const w = {
       ]
     };
   }
-}, g = navigator.userAgent.includes("Firefox"), O = {
+}, v = navigator.userAgent.includes("Firefox"), q = {
   root: ({ context: e }) => ({
     class: [
       "flex flex-wrap gap-x-0.5 gap-y-[5px] items-center",
       "min-h-[26px] h-fit w-full",
       "ring-inset rounded px-[12px] py-[3px]",
       {
-        "ring-[1px]": g,
-        "ring-[0.5px]": !g
+        "ring-[1px]": v,
+        "ring-[0.5px]": !v
       },
       { "!ring-danger-500 !dark:ring-danger-500": e.invalidInput },
       { "!ring-general-200 !dark:ring-general-200": !e.invalidInput },
@@ -2771,7 +2775,7 @@ const w = {
   }),
   input: ({ context: e, parent: t, props: a }) => ({
     class: [
-      ...v.root({
+      ...j.root({
         props: a,
         context: e,
         parent: t
@@ -2787,7 +2791,7 @@ const w = {
   erroroverlaypanel: {
     class: ["px-3 py-1 text-[12px] text-general-800"]
   }
-}, f = navigator.userAgent.includes("Firefox"), H = {
+}, w = navigator.userAgent.includes("Firefox"), J = {
   root: ({ props: e }) => ({
     class: [
       {
@@ -2799,8 +2803,8 @@ const w = {
         "[&:has(:focus)]:!ring-primary-700 [&:has(:focus)_.inputgroupaddon]:!ring-primary-700": e.ring !== "none"
       },
       {
-        "ring-[1px] [&_.inputgroupaddon]:ring-[1px]": f && e.ring !== "none",
-        "ring-[0.5px] [&_.inputgroupaddon]:ring-[0.5px]": !f && e.ring !== "none"
+        "ring-[1px] [&_.inputgroupaddon]:ring-[1px]": w && e.ring !== "none",
+        "ring-[0.5px] [&_.inputgroupaddon]:ring-[0.5px]": !w && e.ring !== "none"
       },
       "[&_.inputgroupaddon[data-addon-variant=plain]]:!ring-[0px]",
       "[&:has(input)]:cursor-text",
@@ -2812,7 +2816,7 @@ const w = {
     ],
     "data-wv-section": "inputgroup"
   })
-}, N = {
+}, Z = {
   root: ({ props: e }) => ({
     class: [
       "inputgroupaddon",
@@ -2842,13 +2846,13 @@ const w = {
     "data-addon-variant": e.addonVariant
     // Used in inputgroup to set styling
   })
-}, b = "text-xs font-medium tracking-[0.02em] leading-[18px]", m = "h-[26px]", q = {
+}, y = "text-xs font-medium tracking-[0.02em] leading-[18px]", p = "h-[26px]", Q = {
   root: ({ props: e, parent: t }) => ({
     class: [
       // Layout
       "flex items-center self-stretch shrink-0 grow",
       //Size
-      m,
+      p,
       // Spacing
       "py-1 px-3",
       // Border
@@ -2861,7 +2865,7 @@ const w = {
       class: [
         "border-0 h-full w-full outline-none",
         "bg-inherit",
-        b,
+        y,
         "placeholder:text-general-200 placeholder:font-light",
         t.disabled ? "text-general-200" : "text-general-800"
       ]
@@ -2869,8 +2873,8 @@ const w = {
   },
   inputresizer: {
     class: [
-      b,
-      m,
+      y,
+      p,
       "user-select-none py-1 px-3 block min-w-4 text-transparent"
     ]
   },
@@ -2909,7 +2913,7 @@ const w = {
       }
     ]
   })
-}, c = ({ isFirefoxBased: e, invalidInput: t }) => [
+}, g = ({ isFirefoxBased: e, invalidInput: t }) => [
   { "ring-[1px]": e, "ring-[0.5px]": !e },
   { "!ring-danger-500": t },
   "ring-inset",
@@ -2919,23 +2923,23 @@ const w = {
   "[&:has(:focus)]:ring-1",
   "bg-white",
   "z-[0] [&:has(:focus)]:z-[12]"
-], G = {
+], X = {
   dialcode: {
     root: (e) => ({
-      class: [...c(e), "rounded-l rounded-r-none"]
+      class: [...g(e), "rounded-l rounded-r-none"]
     }),
-    dropdownicon: ({ state: e }) => n.dropdownicon({ state: e })
+    dropdownicon: ({ state: e }) => r.dropdownicon({ state: e })
   },
   input: (e) => ({
     class: [
-      ...c(e),
+      ...g(e),
       "rounded-r rounded-l-none -ml-[1px]",
       "focus:bg-none",
       "focus:ring-primary-700",
       "focus:ring-1"
     ]
   })
-}, J = {
+}, ee = {
   root: {
     class: [
       // Position
@@ -3035,7 +3039,7 @@ const w = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, Y = {
+}, te = {
   root: ({ props: e }) => ({
     class: [
       // Spacing and Shape
@@ -3111,7 +3115,7 @@ const w = {
     leaveActiveClass: "overflow-hidden transition-all duration-300 ease-in",
     leaveToClass: "max-h-0 opacity-0 !m-0"
   }
-}, Z = {
+}, ae = {
   root: {
     class: [
       "h-max",
@@ -3142,7 +3146,7 @@ const w = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, K = {
+}, ne = {
   root: {
     class: [
       // Flex & Alignment
@@ -3586,7 +3590,7 @@ const w = {
   current: {
     class: ["text-xs font-normal leading-6 px-3"]
   }
-}, Q = {
+}, re = {
   root: ({ props: e }) => ({
     class: [
       "w-full",
@@ -3640,7 +3644,7 @@ const w = {
     ]
   },
   meterlabel: ({ instance: e }) => {
-    var t, a, r;
+    var t, a, n;
     return {
       class: [
         // Size
@@ -3649,7 +3653,7 @@ const w = {
         {
           "bg-red-500/50": ((t = e == null ? void 0 : e.meter) == null ? void 0 : t.strength) == "weak",
           "bg-orange-500/50": ((a = e == null ? void 0 : e.meter) == null ? void 0 : a.strength) == "medium",
-          "bg-green-500/50": ((r = e == null ? void 0 : e.meter) == null ? void 0 : r.strength) == "strong"
+          "bg-green-500/50": ((n = e == null ? void 0 : e.meter) == null ? void 0 : n.strength) == "strong"
         },
         // Transitions
         "transition-all duration-1000 ease-in-out"
@@ -3675,7 +3679,7 @@ const w = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, x = navigator.userAgent.includes("Firefox"), o = {
+}, k = navigator.userAgent.includes("Firefox"), u = {
   root: ({ props: e }) => ({
     class: [
       // Alignments
@@ -3714,7 +3718,7 @@ const w = {
         "before:left-0.5": e.modelValue != e.trueValue
       },
       // Colors
-      { "ring-1": x, "ring-[0.5px]": !x },
+      { "ring-1": k, "ring-[0.5px]": !k },
       {
         "before:bg-white": e.modelValue == e.trueValue,
         "before:bg-general-100": e.modelValue !== e.trueValue,
@@ -3788,8 +3792,8 @@ const w = {
   tooltipicon: {
     class: "text-primary-700 w-[10px] h-[10px]"
   }
-}, U = {
-  root: ({ props: e }) => ({
+}, ie = {
+  root: ({ props: e, state: t }) => ({
     class: [
       "relative",
       // Flexbox & Alignment
@@ -3802,10 +3806,10 @@ const w = {
       "rounded-full",
       // Colors
       {
-        "bg-white": !e.disabled || e.value == e.modelValue,
-        "bg-general-50": e.disabled && e.value != e.modelValue,
-        "ring-general-100": !e.disabled && e.value != e.modelValue,
-        "ring-primary-700": !e.disabled && e.value == e.modelValue,
+        "bg-white": !e.disabled || t.checked,
+        "bg-general-50": e.disabled && !t.checked,
+        "ring-general-100": !e.disabled && !t.checked,
+        "ring-primary-700": !e.disabled && t.checked,
         "ring-general-200": e.disabled
       },
       {
@@ -3817,7 +3821,7 @@ const w = {
     "data-wv-name": "buttonradio",
     "data-wv-section": "root"
   }),
-  box: ({ props: e }) => ({
+  box: ({ props: e, state: t }) => ({
     class: [
       // Size
       "w-2 h-2",
@@ -3832,8 +3836,8 @@ const w = {
       "transition duration-200 ease-in-out",
       // Colors
       {
-        "bg-primary-700": e.value == e.modelValue && e.value !== void 0 && !e.disabled,
-        "bg-general-200": e.value == e.modelValue && e.value !== void 0 && e.disabled
+        "bg-primary-700": t.checked && e.value !== void 0 && !e.disabled,
+        "bg-general-200": t.checked && e.value !== void 0 && e.disabled
       },
       // States
       {
@@ -3867,15 +3871,15 @@ const w = {
   icon: {
     class: "hidden"
   },
-  label: o.label,
-  labeltext: o.labeltext,
-  tooltipicon: o.tooltipicon
-}, W = {
+  label: u.label,
+  labeltext: u.labeltext,
+  tooltipicon: u.tooltipicon
+}, le = {
   root: {
     class: ["block absolute bg-surface-0/50 rounded-full pointer-events-none"],
     style: "transform: scale(0)"
   }
-}, X = {
+}, se = {
   root: {
     class: "relative"
   },
@@ -3982,12 +3986,15 @@ const w = {
       "max-w-full"
     ]
   })
-}, ee = {
+};
+function x(e, t) {
+  return { [e]: t }[e];
+}
+x("WANGS-TAB-MENU", {
   root: {
-    class: "overflow-x-auto",
-    style: "scrollbar-width: none"
+    class: "overflow-x-visible"
   },
-  menu: {
+  menu: ({ props: e }) => ({
     class: [
       // Flexbox
       "flex flex-1",
@@ -3995,14 +4002,15 @@ const w = {
       "list-none",
       "p-0 m-0",
       // Colors
-      "text-general-100"
+      "text-general-100",
+      { "w-max ring-1 ring-inset ring-general-100 rounded": e.type === "segmented" }
     ]
-  },
+  }),
   menuitem: {
     class: "mr-0"
   },
-  action: ({ context: e, state: t }) => {
-    var a, r;
+  action: ({ props: e, context: t }) => {
+    var a, n;
     return {
       class: [
         "relative",
@@ -4014,32 +4022,39 @@ const w = {
         // Spacing
         {
           "rounded-xl py-1 px-3": e.type === "pill",
-          "p-2 pb-1.5 pt-0.5 !h-6": e.type !== "pill",
-          "ml-1": e.type === "pill" && e.index !== 0
+          rounded: e.type === "segmented",
+          "p-2 pb-1.5 pt-0.5 !h-6": e.type === "tab",
+          "py-[5px] px-3 !h-6": e.type === "segmented",
+          "ml-1": e.type === "pill" && t.index !== 0,
+          "gap-1": t.item.icon
         },
         // Shape
         {
-          "border-b-2": e.type !== "pill"
+          "border-b-2": e.type === "tab",
+          "shadow-[-2px_2px_2px_rgba(0,0,0,0.25)] overflow-visible": e.type === "segmented" && t.active
         },
         // Colors and Conditions
         {
           "border-primary-700": t.active,
           "border-grayscale-400": !t.active,
-          "text-grayscale-600": !t.active,
-          "text-primary-700": t.active,
-          "bg-primary-50 text-primary-700": e.type === "pill" && t.active,
-          "bg-grayscale-200 text-grayscale-800": e.type === "pill" && !t.active,
+          "text-grayscale-600": !t.active && e.type === "tab",
+          "text-primary-700": t.active && e.type === "tab",
+          "bg-primary-700 text-white": e.type === "pill" && t.active,
+          "bg-grayscale-100 text-grayscale-800": e.type === "pill" && !t.active,
+          "bg-primary-500 text-white": e.type === "segmented" && t.active,
+          "!text-general-800": e.type === "segmented" && !t.active,
           "bg-transparent ": e.type !== "pill" && !t.active
         },
         // States
+        { "hover:bg-primary-50": e.type === "tab" },
         "focus-visible:outline-none focus-visible:outline-offset-0",
         {
           "focus-visible:border-primary-200 focus-visible:text-primary-400": !t.active
         },
         // Disabled States
         {
-          "pointer-events-none": (a = e.item) == null ? void 0 : a.disabled,
-          "opacity-60": (r = e.item) == null ? void 0 : r.disabled
+          "pointer-events-none": (a = t.item) == null ? void 0 : a.disabled,
+          "opacity-60": (n = t.item) == null ? void 0 : n.disabled
         },
         // Transitions
         "transition-all duration-200",
@@ -4055,10 +4070,319 @@ const w = {
   icon: {
     class: "mr-2"
   },
-  inkbar: {
-    class: "grow border-b-2 border-grayscale-400"
+  inkbar: ({ props: e }) => ({
+    class: ["grow border-b-2 border-grayscale-400", { hidden: e.type === "pill" || e.useTrailingLine === !1 || e.type === "segmented" }]
+  })
+});
+x("WANGS-INPUT-OTP", {
+  root: {
+    class: [
+      // Alignment
+      "flex items-center",
+      "gap-[6px]",
+      "w-max"
+    ]
+  },
+  input: ({ props: e, context: t, parent: a }) => ({
+    class: [
+      // Font
+      "text-[14px] leading-none font-medium",
+      // Flex & Alignment
+      { "flex-1 w-[1%]": a.tagName == "WANGS-INPUT-GROUP" },
+      "text-center",
+      // Spacing
+      "m-0",
+      // Size
+      "w-[42px] h-[42px]",
+      // Shape
+      { "rounded-md": a.tagName !== "WANGS-INPUT-GROUP" },
+      {
+        "first:rounded-l-md rounded-none last:rounded-r-md": a.tagName == "WANGS-INPUT-GROUP"
+      },
+      {
+        "border-0 border-y border-l last:border-r": a.tagName == "WANGS-INPUT-GROUP"
+      },
+      // Colors
+      "text-general-800 dark:text-general-800",
+      "placeholder:text-surface-400 dark:placeholder:text-surface-500",
+      "bg-white dark:bg-white",
+      {
+        "ring-1": navigator.userAgent.includes("Firefox"),
+        "ring-[0.5px]": !navigator.userAgent.includes("Firefox")
+      },
+      { "ring-general-200 dark:ring-general-200": !e.invalid },
+      // Invalid State
+      { "ring-danger-500 dark:ring-danger-500": e.invalid },
+      // States
+      {
+        "hover:bg-primary-50/50 hover:ring-primary-500 dark:hover:ring-primary-400": !t.disabled && !e.invalid,
+        "focus:bg-primary-50/50 focus:ring-primary-500 dark:focus:ring-primary-400": !t.disabled && !e.invalid,
+        "focus:outline-none focus:outline-offset-0": !t.disabled,
+        "opacity-60 select-none pointer-events-none cursor-default": t.disabled
+      },
+      // Filled State *for FloatLabel
+      { filled: a.tagName == "WANGS-FLOAT-LABEL" && t.filled },
+      // Misc
+      "appearance-none",
+      "transition-colors duration-200"
+    ]
+  })
+});
+const l = class l {
+  constructor() {
+    /**
+     * Stores base URLs associated with different app identifiers.
+     */
+    b(this, "_baseUrl", "");
+    if (globalThis[l.SINGLETON_KEY])
+      return globalThis[l.SINGLETON_KEY];
+    globalThis[l.SINGLETON_KEY] = this;
   }
-}, te = {
+  /**
+   * Registers a base URL for a specific app.
+   *
+   * @param base - The base URL to be used as a prefix for all routes in that app.
+   */
+  setNavigationBaseUrl(t) {
+    this._baseUrl = this.normalizeBase(t);
+  }
+  /**
+   * Retrieves the base URL for a specific app.
+   *
+   * @returns The base URL registered for the app or an empty string if not set.
+   */
+  getNavigationBaseUrl() {
+    return this._baseUrl;
+  }
+  /**
+   * Ensures the base URL ends with a single slash and removes trailing slashes.
+   *
+   * @param base - The base URL to normalize.
+   * @returns A clean base URL ending with a single `/`.
+   */
+  normalizeBase(t) {
+    return t.replace(/\/+$/, "").concat("/");
+  }
+  /**
+   * Prepends the base URL (if any) to the given path.
+   *
+   * @param path - The relative path to normalize.
+   * @returns A fully normalized path prefixed with the base URL if applicable.
+   */
+  normalizePath(t) {
+    const a = this.getNavigationBaseUrl();
+    if (!a)
+      return t;
+    const n = t.startsWith("/") ? t.slice(1) : t;
+    return `${a}${n}`;
+  }
+  /**
+   * Removes the specified base path from the beginning of a given route path.
+   *
+   * This is useful when your app is deployed under a subdirectory (e.g., `/base`)
+   * and you want to normalize the route path to match menu or route definitions
+   * that don't include the base.
+   *
+   * @param path - The full route path (e.g., `/base/about`).
+   * @param base - The optional base URL to remove (e.g., `/base`).
+   * @returns The normalized path without the base prefix (e.g., `/about`).
+   *
+   * @example
+   * stripBase('/base/home', '/base'); // returns '/home'
+   * stripBase('/about', '/base');     // returns '/about' (base not present)
+   * stripBase('/base', '/base');      // returns '/'
+   */
+  stripBase(t, a) {
+    return a || (a = this.getNavigationBaseUrl()), a !== "/" && t.startsWith(a) ? "/" + t.slice(a.length).replace(/^\/+/, "") : t;
+  }
+  /**
+   * Pushes a new entry to the browser's history stack.
+   *
+   * @param route - The target URL or path to push. Can be a string, URL object, or null.
+   * @param data - Optional state object associated with the history entry. Accessible via `history.state`.
+   * @param unused - Optional title parameter (currently unused due to limited browser support).
+   *
+   * @example
+   * Router.push('/about', { from: 'home' });
+   */
+  push(t, a = {}, n = "") {
+    var c;
+    const i = {
+      ...a,
+      ...history.state ?? {},
+      current: t,
+      back: (c = history.state) == null ? void 0 : c.current,
+      forward: void 0,
+      replaced: !1,
+      position: history.length + 1
+    };
+    window.history.pushState(i, n, t);
+  }
+  /**
+   * Replaces the current entry in the browser's history stack.
+   *
+   * @param route - The target URL or path to replace with. Can be a string, URL object, or null.
+   * @param data - Optional state object associated with the history entry. Accessible via `history.state`.
+   * @param unused - Optional title parameter (currently unused due to limited browser support).
+   *
+   * @example
+   * Router.replace('/login', { reason: 'session expired' });
+   */
+  replace(t, a = {}, n = "") {
+    const i = {
+      ...a,
+      ...history.state ?? {},
+      forward: void 0,
+      current: t,
+      replaced: !0
+    };
+    window.history.replaceState(i, n, t);
+  }
+  /**
+   * Dispatches a custom event before navigation occurs.
+   * Used to notify subscribers of an upcoming route change.
+   *
+   * @param route - The route that will be navigated to.
+   * @param mode - The navigation mode ('push' or 'replace').
+   * @param data - Optional state object for the navigation.
+   */
+  dispatchBeforeNavigationEvent(t, a, n) {
+    window.dispatchEvent(new CustomEvent("wangs-ui-core:before-navigation-event", {
+      detail: { route: t, mode: a, state: n }
+    }));
+  }
+  /**
+   * Dispatches a custom event after navigation occurs.
+   * Used to notify subscribers that the route has changed.
+   *
+   * @param route - The route that was navigated to.
+   * @param mode - The navigation mode ('push' or 'replace').
+   * @param data - Optional state object for the navigation.
+   */
+  dispatchNavigationEvent(t, a, n) {
+    window.dispatchEvent(new CustomEvent("wangs-ui-core:navigation-event", {
+      detail: { route: t, mode: a, state: n }
+    }));
+  }
+  /**
+   * Navigates to a specified route using the browser's History API.
+   *
+   * This updates the URL in the browser without reloading the page.
+   * It can either push a new entry to the history stack or replace the current one.
+   * Also dispatches custom events before and after the navigation.
+   *
+   * @param route - The target route to navigate to. Can be a string or URL object.
+   * @param navigationMode - Determines how navigation is handled.
+   *                          - `'push'` (default): Adds a new entry to the browser history.
+   *                          - `'replace'`: Replaces the current history entry.
+   * @param data - Optional state object associated with the history entry. Can be accessed via `history.state`.
+   * @param unused - Optional title parameter (currently unused due to browser support limitations).
+   *
+   * @example
+   * router.navigateToRoute('/about', 'push', { some: 'state' }, '',);
+   */
+  navigateToRoute(t, a = "push", n = {}, i = "") {
+    if (!t)
+      return;
+    const c = typeof t == "string" ? t : t.toString(), s = this.normalizePath(c);
+    if (s === location.pathname)
+      return console.warn("[WangsUIRouter] Navigation aborted: target route is the same as the current route.");
+    this.dispatchBeforeNavigationEvent(s, a, n), a === "push" ? this.push(s, n, i) : this.replace(s, n, i), this.dispatchNavigationEvent(s, a, n);
+  }
+};
+b(l, "SINGLETON_KEY", "__WANGS_UI_ROUTER_INSTANCE__");
+let m = l;
+new m();
+const oe = x("WANGS-TAB-MENU", {
+  root: {
+    class: "overflow-x-auto"
+  },
+  menu: ({ props: e }) => ({
+    class: [
+      // Flexbox
+      "flex flex-1",
+      // Spacing
+      "list-none",
+      "p-0 m-0",
+      // Colors
+      "text-general-100",
+      {
+        "w-max ring-1 ring-inset ring-general-100 rounded !m-[2px]": e.type === "segmented"
+      }
+    ]
+  }),
+  menuitem: {
+    class: "mr-0"
+  },
+  action: ({ props: e, context: t }) => {
+    var a, n;
+    return {
+      class: [
+        "relative",
+        // Font
+        "font-medium",
+        "text-xs leading-4 tracking-[0.02em]",
+        // Flexbox and Alignment
+        "flex items-center",
+        // Spacing
+        {
+          "rounded-xl py-1 px-3": e.type === "pill",
+          rounded: e.type === "segmented",
+          "p-2 pb-1.5 pt-0.5 !h-6": e.type === "tab",
+          "py-[5px] px-3 !h-[26px]": e.type === "segmented",
+          "ml-1": e.type === "pill" && t.index !== 0,
+          "gap-1": t.item.icon
+        },
+        // Shape
+        {
+          "border-b-2": e.type === "tab"
+        },
+        // Colors and Conditions
+        {
+          "border-primary-700": t.active,
+          "border-grayscale-400": !t.active,
+          "text-grayscale-600": !t.active && e.type === "tab",
+          "text-primary-700": t.active && e.type === "tab",
+          "bg-primary-700 text-white": e.type === "pill" && t.active,
+          "bg-grayscale-100 text-grayscale-800": e.type === "pill" && !t.active,
+          "bg-primary-500 text-white shadow-[-2px_2px_2px_rgba(0,0,0,0.25)]": e.type === "segmented" && t.active,
+          "!text-general-800": e.type === "segmented" && !t.active,
+          "bg-transparent ": e.type !== "pill" && !t.active
+        },
+        // States
+        { "hover:bg-primary-50": e.type === "tab" },
+        "focus-visible:outline-none focus-visible:outline-offset-0",
+        {
+          "focus-visible:border-primary-200 focus-visible:text-primary-400": !t.active
+        },
+        // Disabled States
+        {
+          "pointer-events-none": (a = t.item) == null ? void 0 : a.disabled,
+          "opacity-60": (n = t.item) == null ? void 0 : n.disabled
+        },
+        // Transitions
+        "transition-all duration-200",
+        // Misc
+        "cursor-pointer select-none text-decoration-none",
+        "overflow-hidden",
+        "user-select-none",
+        "!no-underline",
+        "whitespace-nowrap"
+      ]
+    };
+  },
+  icon: {
+    class: "mr-2"
+  },
+  inkbar: ({ props: e }) => ({
+    class: [
+      "grow border-b-2 border-grayscale-400",
+      {
+        hidden: e.type === "pill" || e.useTrailingLine === !1 || e.type === "segmented"
+      }
+    ]
+  })
+}), ce = {
   root: ({ context: e, props: t }) => ({
     class: [
       // Font
@@ -4076,7 +4400,7 @@ const w = {
       // Shape
       "rounded",
       "appearance-none",
-      ...B,
+      ...W,
       {
         "!ring-danger-500": e.invalidInput
       },
@@ -4094,16 +4418,16 @@ const w = {
     "data-wv-name": "textarea",
     "data-wv-section": "root"
   })
-}, d = (e) => {
+}, f = (e) => {
   if (!e) return !0;
   const t = Object.keys(e);
   return t.length ? t.every((a) => {
-    const r = e[a];
-    return typeof r == "object" ? Array.isArray(r) ? !r.length || r.every(
-      (i) => typeof i == "object" ? d(i) : i == null
-    ) : d(r) : r == null;
+    const n = e[a];
+    return typeof n == "object" ? Array.isArray(n) ? !n.length || n.every(
+      (i) => typeof i == "object" ? f(i) : i == null
+    ) : f(n) : n == null;
   }) : !0;
-}, ae = {
+}, de = {
   root: ({ props: e }) => ({
     class: ["flex flex-col grow", "text-xs font-normal text-grayscale-900"]
   }),
@@ -4134,18 +4458,37 @@ const w = {
   markerArrow: (e) => ({
     class: [
       "w-4 h-4 invisible transition-transform duration-200 ease-in-out text-grayscale-900",
-      { "!visible": e.detail && !d(e.detail) },
+      { "!visible": e.detail && !f(e.detail) },
       { "rotate-180": e.showDetail }
     ],
     "data-wv-section": "markerArrow"
   }),
+  markerDot: (e) => ({
+    class: [
+      "hidden w-[6px] h-[6px] m-[3px] rounded-full bg-black",
+      { "!flex": !e.detail || f(e.detail) }
+    ],
+    "data-wv-section": "markerDot"
+  }),
+  contentHeader: {
+    class: ["leading-5 cursor-pointer truncate !text-xs !font-bold"]
+  },
+  contentDetailKey: {
+    class: ["text-general-400 whitespace-nowrap"]
+  },
+  contentDetailValue: {
+    class: ["text-xs text-general-800"]
+  },
+  contentDate: {
+    class: ["text-xs font-medium"]
+  },
   connector: ({ props: e }) => ({
     class: ["w-[2px] grow bg-grayscale-900"]
   }),
   content: ({ props: e, context: t }) => ({
     class: ["grid grid-rows-[max-content,auto] pb-2.5 gap-1"]
   })
-}, ne = {
+}, ue = {
   root: ({ props: e }) => ({
     class: [
       //Size and Shape
@@ -4228,7 +4571,7 @@ const w = {
     leaveActiveClass: "!transition-[max-height_.45s_cubic-bezier(0,1,0,1),opacity_.3s,margin-bottom_.3s] overflow-hidden",
     leaveToClass: "max-h-0 opacity-0 mb-0"
   }
-}, re = {
+}, ge = {
   root: {
     class: [
       "relative",
@@ -4299,7 +4642,7 @@ const w = {
   icon: {
     class: [" mr-2", "text-surface-700/80"]
   }
-}, ie = {
+}, fe = {
   root: ({ context: e, props: t }) => ({
     class: [
       // Position
@@ -4335,7 +4678,7 @@ const w = {
       "break-words"
     ]
   }
-}, le = {
+}, be = {
   root: {
     class: [
       "relative",
@@ -4433,7 +4776,7 @@ const w = {
       // Color
     ]
   },
-  nodeCheckbox: l,
+  nodeCheckbox: o,
   nodeicon: () => ({
     class: ["!hidden"]
   }),
@@ -4503,7 +4846,7 @@ const w = {
       }
     ]
   })
-}, se = {
+}, me = {
   root: ({ props: e, state: t }) => ({
     class: [
       // Display and Position
@@ -4824,7 +5167,7 @@ const w = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, oe = {
+}, xe = {
   root: {
     class: [
       "relative",
@@ -4924,13 +5267,13 @@ const w = {
       "duration-200"
     ]
   }
-}, ce = {
+}, he = {
   root: {
     class: ["!mt-0 text-danger-500 text-xs font-light tracking-[0.02em]"],
     "data-wv-name": "validatormessage",
     "data-wv-section": "root"
   }
-}, de = {
+}, ve = {
   root: {
     class: "flex gap-2 items-center shrink-0",
     "data-wv-name": "buttonbulkaction",
@@ -4985,7 +5328,7 @@ const w = {
     class: "!p-0 !w-6 !h-6 [&_.icon]:!w-5 [&_.icon]:!h-5",
     "data-wv-section": "buttonclearselection"
   }
-}, ue = {
+}, we = {
   root: {
     class: "flex flex-nowrap items-center gap-1",
     "data-wv-name": "badgegroup",
@@ -4997,7 +5340,7 @@ const w = {
   },
   showmoredialog: {
     root: {
-      class: [h.root({ state: {} }).class, "w-[400px]"],
+      class: [C.root({ state: {} }).class, "w-[400px]"],
       "data-wv-section": "showmoredialog"
     },
     title: {
@@ -5010,7 +5353,7 @@ const w = {
     }
     // All section in Dialog Preset can be added here
   }
-}, ge = {
+}, ye = {
   root: {
     class: [
       "flex gap-[5px] items-center text-left h-[26px]",
@@ -5035,16 +5378,16 @@ const w = {
     content: ">",
     "data-wv-section": "separator"
   }
-}, fe = {
+}, pe = {
   currency: (e) => ({
-    class: [...c(e), "rounded-l rounded-r-none"],
+    class: [...g(e), "rounded-l rounded-r-none"],
     "data-wv-section": "currency"
   }),
   value: (e) => ({
-    class: [...c(e), "rounded-r rounded-l-none -ml-[1px]"],
+    class: [...g(e), "rounded-r rounded-l-none -ml-[1px]"],
     "data-wv-section": "value"
   })
-}, be = {
+}, ke = {
   root: {
     "data-wv-name": "fileupload",
     "data-wv-section": "root"
@@ -5066,7 +5409,7 @@ const w = {
   requirements: {
     class: "flex justify-start"
   }
-}, me = {
+}, Ce = {
   root: {
     class: [
       "flex flex-col items-start justify-start relative gap-1 w-full shrink-0 overflow-hidden"
@@ -5074,12 +5417,15 @@ const w = {
     "data-wv-name": "fieldwrapper",
     "data-wv-section": "root"
   },
-  label: ({ props: e }) => ({
+  label: ({ props: e, slots: t }) => ({
     class: [
       [
         "text-general-900 text-xs flex gap-[2px] font-medium tracking-[0.02em]",
         e.labelClass
-      ]
+      ],
+      {
+        "w-full": t["label-addon"]
+      }
     ],
     "data-wv-section": "fieldlabel"
   }),
@@ -5092,14 +5438,14 @@ const w = {
   arterisksign: {
     class: "text-danger-500"
   }
-}, xe = {
+}, je = {
   root: {
     class: [
       "bg-general-50 rounded-lg [&>*]:w-full [&>*]min-w-0",
       "grid items-end p-3 gap-x-3 gap-y-4"
     ]
   }
-}, he = {
+}, ze = {
   root: {
     class: [
       "w-screen h-screen fixed top-0 left-0 z-[9999999]",
@@ -5111,7 +5457,7 @@ const w = {
   animation: {
     class: ["w-[700px] h-auto"]
   }
-}, ve = {
+}, _e = {
   root: {
     class: "flex items-center gap-1"
   },
@@ -5145,7 +5491,7 @@ const w = {
       class: "flex flex-col gap-0.5 items-center justify-center"
     }
   }
-}, we = {
+}, Ae = {
   root: ({ props: e }) => ({
     class: [
       {
@@ -5221,79 +5567,79 @@ const w = {
       }
     ]
   })
-}, ye = {
-  badge: y,
-  ripple: W,
-  tooltip: ie
-}, pe = {
-  global: L,
-  directives: ye,
+}, Se = {
+  badge: S,
+  ripple: le,
+  tooltip: fe
+}, Ne = {
+  global: K,
+  directives: Se,
   // Forms
-  form: R,
-  filtercontainer: xe,
-  dropdown: M,
-  inputnumber: q,
-  inputphonenumber: G,
-  inputcurrency: fe,
-  inputtext: v,
-  inputbadge: O,
-  calendar: _,
-  checkbox: l,
-  buttonradio: U,
-  multiselect: n,
-  togglebutton: re,
-  toggleswitch: o,
-  inputgroup: H,
-  inputgroupaddon: N,
-  treeselect: se,
-  tristatecheckbox: oe,
-  textarea: te,
-  password: Q,
-  validatormessage: ce,
-  fileupload: be,
-  fieldwrapper: me,
+  form: D,
+  filtercontainer: je,
+  dropdown: O,
+  inputnumber: Q,
+  inputphonenumber: X,
+  inputcurrency: pe,
+  inputtext: j,
+  inputbadge: q,
+  calendar: V,
+  checkbox: o,
+  buttonradio: ie,
+  multiselect: r,
+  togglebutton: ge,
+  toggleswitch: u,
+  inputgroup: J,
+  inputgroupaddon: Z,
+  treeselect: me,
+  tristatecheckbox: xe,
+  textarea: ce,
+  password: re,
+  validatormessage: he,
+  fileupload: ke,
+  fieldwrapper: Ce,
   // Buttons
-  button: p,
-  buttondownload: k,
-  buttonbulkaction: de,
-  buttonsearch: j,
-  buttonsplit: z,
-  buttonfilter: C,
+  button: T,
+  buttondownload: N,
+  buttonbulkaction: ve,
+  buttonsearch: F,
+  buttonsplit: I,
+  buttonfilter: P,
   // Data
-  paginator: K,
-  datatable: T,
-  customcolumn: P,
-  tree: le,
-  timeline: ae,
-  changelog: S,
+  paginator: ne,
+  datatable: L,
+  customcolumn: G,
+  tree: be,
+  timeline: de,
+  changelog: B,
   // Panels
-  accordion: w,
-  card: A,
+  accordion: A,
+  card: E,
   // Menu
-  menu: J,
-  steps: X,
-  breadcrumb: ge,
-  tabmenu: ee,
+  menu: ee,
+  steps: se,
+  breadcrumb: ye,
+  tabmenu: oe,
   // Overlays
-  dialog: h,
-  dialogconfirm: I,
-  dialogform: $,
-  overlaypanel: Z,
+  dialog: C,
+  dialogconfirm: R,
+  dialogform: M,
+  overlaypanel: ae,
   // Messages
-  message: Y,
-  inlinemessage: E,
-  toast: ne,
+  message: te,
+  inlinemessage: H,
+  toast: ue,
   // Media
-  carousel: V,
+  carousel: $,
   // Misc
-  badge: s,
-  badgegroup: ue,
-  image: D,
-  loading: he,
-  codesnippet: F,
-  username: ve,
-  progressbar: we
+  badge: d,
+  badgegroup: we,
+  image: Y,
+  loading: ze,
+  codesnippet: U,
+  username: _e,
+  progressbar: Ae
 };
 export {
-  pe as default
+  Ne as default
 };