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

package/fixedasset/index.es.js

@@ -1,4 +1,7 @@
-const h = {
+var j = Object.defineProperty;
+var A = (e, t, r) => t in e ? j(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var b = (e, t, r) => A(e, typeof t != "symbol" ? t + "" : t, r);
+const T = {
   accordiontab: {
     header: ({ props: e }) => ({
       class: [
@@ -60,7 +63,7 @@ const h = {
       leaveToClass: "max-h-0"
     }
   }
-}, y = {
+}, _ = {
   root: ({ props: e }) => ({
     class: [
       "relative",
@@ -289,7 +292,7 @@ const h = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, w = {
+}, N = {
   root: ({ props: e, parent: t }) => {
     var r, i, n;
     return {
@@ -329,13 +332,13 @@ const h = {
   image: {
     class: "h-full w-full rounded-full"
   }
-}, k = {
+}, I = {
   root: {
     class: "flex items-center ml-4",
     "data-wv-name": "usergroup",
     "data-wv-section": "root"
   }
-}, o = {
+}, c = {
   root: ({ props: e }) => ({
     class: [
       // Alignment
@@ -381,7 +384,7 @@ const h = {
     "icon-class": "w-[10px] h-[10px] !text-[10px]",
     "data-wv-section": "removebutton"
   })
-}, C = {
+}, F = {
   root: ({ context: e }) => ({
     class: [
       // Font
@@ -419,7 +422,7 @@ const h = {
       }
     ]
   })
-}, z = {
+}, S = {
   root: ({ props: e, context: t }) => ({
     class: [
       "relative",
@@ -714,7 +717,7 @@ const h = {
       }
     ]
   })
-}, j = {
+}, P = {
   root: ({ props: e }) => ({
     class: [
       "rounded ring-1 ring-success-500 p-[5px] ring-inset",
@@ -731,7 +734,7 @@ const h = {
     "data-wv-section": "icon",
     severity: "success"
   }
-}, A = {
+}, V = {
   root: ({ context: e }) => ({
     class: [
       "rounded ring-1 ring-general-500 p-[5px] ring-inset",
@@ -748,7 +751,7 @@ const h = {
     ],
     "data-wv-section": "icon"
   })
-}, _ = {
+}, U = {
   buttontrigger: {
     root: ({ context: e }) => ({
       class: [
@@ -797,7 +800,7 @@ const h = {
   inputtext: {
     class: "!h-max !py-0 !px-0"
   }
-}, F = {
+}, E = {
   root: ["w-max"],
   button: {
     class: [
@@ -806,7 +809,7 @@ const h = {
     "data-ts-section": "button-split"
   },
   menuButton: "!rounded-ss-none !rounded-es-none"
-}, u = navigator.userAgent.includes("Firefox"), I = {
+}, x = navigator.userAgent.includes("Firefox"), B = {
   root: ({ props: e }) => ({
     class: [
       // Display and Position
@@ -1264,8 +1267,8 @@ const h = {
     class: [
       "w-[39px] h-[26px] flex justify-center items-center ring-general-200 rounded",
       {
-        "ring-1": u,
-        "ring-[0.5px]": !u
+        "ring-1": x,
+        "ring-[0.5px]": !x
       }
     ]
   },
@@ -1390,7 +1393,7 @@ const h = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, T = {
+}, G = {
   root: {
     class: [
       //Shape
@@ -1419,7 +1422,7 @@ const h = {
   footer: {
     class: ["inline-flex gap-1 text-xs items-center"]
   }
-}, V = {
+}, $ = {
   root: {
     class: [
       // Flexbox
@@ -1533,7 +1536,7 @@ const h = {
       }
     ]
   })
-}, S = {
+}, O = {
   root: ({ props: e, state: t }) => ({
     class: [
       // Display and Position
@@ -1712,7 +1715,7 @@ const h = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, P = {
+}, L = {
   button: ({ props: e, buttonClass: t }) => ({
     class: [
       t,
@@ -1751,7 +1754,7 @@ const h = {
   buttondownload: {
     "data-wv-section": "changelog-dialog-button-download"
   }
-}, a = {
+}, d = {
   root: {
     class: [
       "relative",
@@ -1861,7 +1864,7 @@ const h = {
   tooltipicon: {
     class: "text-primary-500 w-[10px] h-[10px]"
   }
-}, $ = {
+}, R = {
   root: {
     class: [
       // Flexbox
@@ -1987,7 +1990,7 @@ const h = {
       "cursor-pointer"
     ]
   }
-}, B = {
+}, W = {
   copybutton: {
     class: "peer-hover:visible scale-125 !absolute top-2 right-2 z-50"
   },
@@ -2007,7 +2010,7 @@ const h = {
       "px-2 bg-primary-100 sticky left-0 text-right select-none"
     ]
   }
-}, R = {
+}, D = {
   root: ({ props: e }) => ({
     class: [
       // Display
@@ -2116,7 +2119,7 @@ const h = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, L = {
+}, Y = {
   root: {
     class: [
       // Shape
@@ -2217,7 +2220,7 @@ const h = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, D = {
+}, H = {
   root: {
     class: [
       // Sizing and Shape
@@ -2321,7 +2324,7 @@ const h = {
     enterFromClass: "opacity-0",
     enterActiveClass: "transition-opacity duration-250"
   }
-}, E = {
+}, K = {
   menustart: {
     class: ""
   },
@@ -2345,7 +2348,7 @@ const h = {
       { invisible: e.dragable === !1 }
     ]
   })
-}, O = {
+}, q = {
   root: {
     "data-wv-name": "datatable",
     "data-wv-section": "root",
@@ -2561,7 +2564,7 @@ const h = {
     class: "",
     template: "FirstPageLink PrevPageLink PageLinks JumpToPageInput NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
   })
-}, G = {
+}, J = {
   content: {
     class: [
       // Spacing
@@ -2594,7 +2597,7 @@ const h = {
       "border-surface-200 border-b"
     ]
   }
-}, N = {
+}, X = {
   listbutton: ({ props: e }) => ({
     class: [
       // Font
@@ -2639,7 +2642,7 @@ const h = {
       "cursor-pointer select-none overflow-hidden"
     ]
   })
-}, x = {
+}, C = {
   root: ({ state: e }) => ({
     class: [
       // Shape
@@ -2834,7 +2837,7 @@ const h = {
     leaveActiveClass: "transition-all duration-200 ease-out",
     leaveToClass: "opacity-0 scale-75 mask-active"
   }
-}, H = {
+}, Z = {
   root: {
     class: ["!w-[clamp(360px,75vw,400px)]"],
     "data-wv-name": (e) => e ?? "root",
@@ -2875,7 +2878,7 @@ const h = {
     class: "flex items-end justify-end gap-1 !mt-0",
     "data-wv-section": "dialog-confirm-footer"
   }
-}, q = {
+}, Q = {
   root: {
     class: ["max-w-[90vw]"],
     style: (e) => `width: ${e}`,
@@ -2940,7 +2943,7 @@ const h = {
   savesubmitbutton: {
     "data-wv-section": "save-submit-button"
   }
-}, Y = {
+}, ee = {
   root: ({ props: e }) => ({
     class: [
       // Flex and Position
@@ -2998,7 +3001,7 @@ const h = {
       "bg-surface-0"
     ]
   }
-}, J = {
+}, te = {
   root: ({ props: e }) => ({
     class: [
       // Positioning
@@ -3115,9 +3118,9 @@ const h = {
       ]
     };
   },
-  token: o.root({ props: { severity: "dark" } }),
-  tokenLabel: o.input({ props: {}, context: {} }),
-  removeTokenIcon: o.removebutton({
+  token: c.root({ props: { severity: "dark" } }),
+  tokenLabel: c.input({ props: {}, context: {} }),
+  removeTokenIcon: c.removebutton({
     props: { badgeSeverity: "dark" }
   }),
   loadingplaceholder: {
@@ -3194,12 +3197,12 @@ const h = {
     ]
   },
   headerCheckbox: {
-    ...a,
+    ...d,
     root: {
-      class: ["!mx-auto", ...a.root.class]
+      class: ["!mx-auto", ...d.root.class]
     }
   },
-  itemCheckbox: a,
+  itemCheckbox: d,
   closeButton: {
     class: ["hidden"]
   },
@@ -3347,7 +3350,7 @@ const h = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, W = {
+}, re = {
   root: ({ props: e, state: t }) => ({
     class: [
       // Display and Position
@@ -3539,7 +3542,7 @@ const h = {
   loadingplaceholder: {
     class: "text-general-200 font-light"
   }
-}, X = {
+}, ie = {
   root: {
     class: [
       "block",
@@ -3617,7 +3620,7 @@ const h = {
     leaveActiveClass: "overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]",
     leaveToClass: "max-h-0"
   }
-}, Z = {
+}, se = {
   // :class="['ts-form', { 'sticky-buttons': props.stickyButtons }]"
   root: () => ({
     class: [
@@ -3661,14 +3664,14 @@ const h = {
   "validator-message": {
     class: ["static w-max transform-none"]
   }
-}, K = [
+}, ne = [
   {
     "ring-1 p-[1px]": navigator.userAgent.includes("Firefox"),
     "ring-[0.5px] p-[0.5px]": !navigator.userAgent.includes("Firefox")
   },
   "ring-inset",
   "ring-general-200"
-], Q = {
+], ae = {
   css: `
     *[data-pd-ripple="true"]{
         overflow: hidden;
@@ -3745,7 +3748,7 @@ const h = {
         }
     }
 `
-}, U = {
+}, oe = {
   root: ({ props: e }) => ({
     class: [
       "relative inline-block",
@@ -3883,7 +3886,7 @@ const h = {
     leaveActiveClass: "transition-all duration-150 ease-in",
     leaveToClass: "opacity-0 scale-75"
   }
-}, ee = {
+}, le = {
   root: ({ props: e }) => ({
     class: [
       "rounded-md p-3",
@@ -3913,7 +3916,7 @@ const h = {
       "font-medium"
     ]
   }
-}, v = {
+}, z = {
   root: ({ props: e, context: t, parent: r }) => {
     var i, n;
     return {
@@ -3937,15 +3940,15 @@ const h = {
       ]
     };
   }
-}, f = navigator.userAgent.includes("Firefox"), te = {
+}, v = navigator.userAgent.includes("Firefox"), ce = {
   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]": f,
-        "ring-[0.5px]": !f
+        "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 },
@@ -3954,7 +3957,7 @@ const h = {
   }),
   input: ({ context: e, parent: t, props: r }) => ({
     class: [
-      ...v.root({
+      ...z.root({
         props: r,
         context: e,
         parent: t
@@ -3970,7 +3973,7 @@ const h = {
   erroroverlaypanel: {
     class: ["px-3 py-1 text-[12px] text-general-800"]
   }
-}, g = navigator.userAgent.includes("Firefox"), re = {
+}, h = navigator.userAgent.includes("Firefox"), de = {
   root: ({ props: e }) => ({
     class: [
       {
@@ -3982,8 +3985,8 @@ const h = {
         "[&:has(:focus)]:!ring-primary-500 [&:has(:focus)_.inputgroupaddon]:!ring-primary-500": e.ring !== "none"
       },
       {
-        "ring-[1px] [&_.inputgroupaddon]:ring-[1px]": g && e.ring !== "none",
-        "ring-[0.5px] [&_.inputgroupaddon]:ring-[0.5px]": !g && e.ring !== "none"
+        "ring-[1px] [&_.inputgroupaddon]:ring-[1px]": h && e.ring !== "none",
+        "ring-[0.5px] [&_.inputgroupaddon]:ring-[0.5px]": !h && e.ring !== "none"
       },
       "[&_.inputgroupaddon[data-addon-variant=plain]]:!ring-[0px]",
       "[&:has(input)]:cursor-text",
@@ -3995,7 +3998,7 @@ const h = {
     ],
     "data-wv-section": "inputgroup"
   })
-}, ie = {
+}, ue = {
   root: ({ props: e }) => ({
     class: [
       "inputgroupaddon",
@@ -4025,7 +4028,7 @@ const h = {
     "data-addon-variant": e.addonVariant
     // Used in inputgroup to set styling
   })
-}, se = {
+}, fe = {
   root: ({ context: e }) => ({
     class: [
       // Font
@@ -4048,13 +4051,13 @@ const h = {
       }
     ]
   })
-}, m = "text-xs font-medium tracking-[0.02em] leading-[18px]", b = "h-[26px]", ne = {
+}, y = "text-xs font-medium tracking-[0.02em] leading-[18px]", w = "h-[26px]", ge = {
   root: ({ props: e, parent: t }) => ({
     class: [
       // Layout
       "flex items-center self-stretch shrink-0 grow",
       //Size
-      b,
+      w,
       // Spacing
       "py-1 px-3",
       // Border
@@ -4067,7 +4070,7 @@ const h = {
       class: [
         "border-0 h-full w-full outline-none",
         "bg-inherit",
-        m,
+        y,
         "placeholder:text-general-200 placeholder:font-light",
         t.disabled ? "text-general-200" : "text-general-800"
       ]
@@ -4075,8 +4078,8 @@ const h = {
   },
   inputresizer: {
     class: [
-      m,
-      b,
+      y,
+      w,
       "user-select-none py-1 px-3 block min-w-4 text-transparent"
     ]
   },
@@ -4115,66 +4118,367 @@ const h = {
       }
     ]
   })
-}, oe = {
+};
+function m(e, t) {
+  return { [e]: t }[e];
+}
+m("WANGS-TAB-MENU", {
+  root: {
+    class: "overflow-x-visible"
+  },
+  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": e.type === "segmented" }
+    ]
+  }),
+  menuitem: {
+    class: "mr-0"
+  },
+  action: ({ props: e, context: t }) => {
+    var r, i;
+    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-6": e.type === "segmented",
+          "ml-1": e.type === "pill" && t.index !== 0,
+          "gap-1": t.item.icon
+        },
+        // Shape
+        {
+          "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 && 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": (r = t.item) == null ? void 0 : r.disabled,
+          "opacity-60": (i = t.item) == null ? void 0 : i.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" }]
+  })
+});
+m("WANGS-INPUT-OTP", {
   root: {
     class: [
       // Alignment
       "flex items-center",
-      "gap-[6px]"
+      "gap-[6px]",
+      "w-max"
     ]
   },
-  input: {
-    root: ({ props: e, context: t, parent: r }) => {
-      var i;
-      return {
-        class: [
-          // Font
-          "leading-none font-medium",
-          // Flex & Alignment
-          { "flex-1 w-[1%]": r.instance.$name == "InputGroup" },
-          "text-center",
-          // Spacing
-          "m-0",
-          {
-            "p-3": e.size == null
-          },
-          // Size
-          "w-[42px] h-[42px] text-base",
-          // Shape
-          { "rounded-md": r.instance.$name !== "InputGroup" },
-          {
-            "first:rounded-l-md rounded-none last:rounded-r-md": r.instance.$name == "InputGroup"
-          },
-          {
-            "border-0 border-y border-l last:border-r": r.instance.$name == "InputGroup"
-          },
-          {
-            "first:ml-0 ml-[-1px]": r.instance.$name == "InputGroup" && !e.showButtons
-          },
-          // Colors
-          "text-general-800",
-          "placeholder:text-surface-400",
-          "bg-white",
-          "border",
-          { "border-general-200": !e.invalid },
-          // Invalid State
-          { "border-danger-500": e.invalid },
-          // States
-          {
-            // 'hover:border-primary-500': !context.disabled && !props.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: ((i = r.instance) == null ? void 0 : i.$name) == "FloatLabel" && t.filled },
-          // Misc
-          "appearance-none",
-          "transition-colors duration-200"
-        ]
-      };
-    }
+  input: ({ props: e, context: t, parent: r }) => ({
+    class: [
+      // Font
+      "text-[14px] leading-none font-medium",
+      // Flex & Alignment
+      { "flex-1 w-[1%]": r.tagName == "WANGS-INPUT-GROUP" },
+      "text-center",
+      // Spacing
+      "m-0",
+      // Size
+      "w-[42px] h-[42px]",
+      // Shape
+      { "rounded-md": r.tagName !== "WANGS-INPUT-GROUP" },
+      {
+        "first:rounded-l-md rounded-none last:rounded-r-md": r.tagName == "WANGS-INPUT-GROUP"
+      },
+      {
+        "border-0 border-y border-l last:border-r": r.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: r.tagName == "WANGS-FLOAT-LABEL" && t.filled },
+      // Misc
+      "appearance-none",
+      "transition-colors duration-200"
+    ]
+  })
+});
+const a = class a {
+  constructor() {
+    /**
+     * Stores base URLs associated with different app identifiers.
+     */
+    b(this, "_baseUrl", "");
+    if (globalThis[a.SINGLETON_KEY])
+      return globalThis[a.SINGLETON_KEY];
+    globalThis[a.SINGLETON_KEY] = this;
   }
-}, c = ({ isFirefoxBased: e, invalidInput: t }) => [
+  /**
+   * 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 r = this.getNavigationBaseUrl();
+    if (!r)
+      return t;
+    const i = t.startsWith("/") ? t.slice(1) : t;
+    return `${r}${i}`;
+  }
+  /**
+   * 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, r) {
+    return r || (r = this.getNavigationBaseUrl()), r !== "/" && t.startsWith(r) ? "/" + t.slice(r.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, r = {}, i = "") {
+    var l;
+    const n = {
+      ...r,
+      ...history.state ?? {},
+      current: t,
+      back: (l = history.state) == null ? void 0 : l.current,
+      forward: void 0,
+      replaced: !1,
+      position: history.length + 1
+    };
+    window.history.pushState(n, i, 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, r = {}, i = "") {
+    const n = {
+      ...r,
+      ...history.state ?? {},
+      forward: void 0,
+      current: t,
+      replaced: !0
+    };
+    window.history.replaceState(n, i, 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, r, i) {
+    window.dispatchEvent(new CustomEvent("wangs-ui-core:before-navigation-event", {
+      detail: { route: t, mode: r, state: i }
+    }));
+  }
+  /**
+   * 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, r, i) {
+    window.dispatchEvent(new CustomEvent("wangs-ui-core:navigation-event", {
+      detail: { route: t, mode: r, state: i }
+    }));
+  }
+  /**
+   * 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, r = "push", i = {}, n = "") {
+    if (!t)
+      return;
+    const l = typeof t == "string" ? t : t.toString(), o = this.normalizePath(l);
+    if (o === location.pathname)
+      return console.warn("[WangsUIRouter] Navigation aborted: target route is the same as the current route.");
+    this.dispatchBeforeNavigationEvent(o, r, i), r === "push" ? this.push(o, i, n) : this.replace(o, i, n), this.dispatchNavigationEvent(o, r, i);
+  }
+};
+b(a, "SINGLETON_KEY", "__WANGS_UI_ROUTER_INSTANCE__");
+let p = a;
+new p();
+const me = m("WANGS-INPUT-OTP", {
+  root: {
+    class: [
+      // Alignment
+      "flex items-center",
+      "gap-[6px]",
+      "w-max"
+    ]
+  },
+  input: ({ props: e, context: t, parent: r }) => ({
+    class: [
+      // Font
+      "text-[14px] leading-none font-medium",
+      // Flex & Alignment
+      { "flex-1 w-[1%]": r.tagName == "WANGS-INPUT-GROUP" },
+      "text-center",
+      // Spacing
+      "m-0",
+      // Size
+      "w-[42px] h-[42px]",
+      // Shape
+      { "rounded-md": r.tagName !== "WANGS-INPUT-GROUP" },
+      {
+        "first:rounded-l-md rounded-none last:rounded-r-md": r.tagName == "WANGS-INPUT-GROUP"
+      },
+      {
+        "border-0 border-y border-l last:border-r": r.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/30 hover:ring-primary-500 dark:hover:ring-primary-400": !t.disabled && !e.invalid,
+        "focus:bg-primary-50/30 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: r.tagName == "WANGS-FLOAT-LABEL" && t.filled },
+      // Misc
+      "appearance-none",
+      "transition-colors duration-200"
+    ]
+  })
+}), f = ({ isFirefoxBased: e, invalidInput: t }) => [
   { "ring-[1px]": e, "ring-[0.5px]": !e },
   { "!ring-danger-500": t },
   "ring-inset",
@@ -4184,23 +4488,23 @@ const h = {
   "[&:has(:focus)]:ring-1",
   "bg-white",
   "z-[0] [&:has(:focus)]:z-[12]"
-], ae = {
+], be = {
   dialcode: {
     root: (e) => ({
-      class: [...c(e), "rounded-l rounded-r-none"]
+      class: [...f(e), "rounded-l rounded-r-none"]
     }),
     dropdownicon: ({ state: e }) => s.dropdownicon({ state: e })
   },
   input: (e) => ({
     class: [
-      ...c(e),
+      ...f(e),
       "rounded-r rounded-l-none -ml-[1px]",
       "focus:bg-none",
       "focus:ring-primary-500",
       "focus:ring-1"
     ]
   })
-}, le = {
+}, pe = {
   root: ({ props: e }) => ({
     class: [
       // Misc
@@ -4239,7 +4543,7 @@ const h = {
       "fill-surface-600"
     ]
   }
-}, ce = {
+}, xe = {
   root: {
     class: [
       // Sizing and Shape
@@ -4371,7 +4675,7 @@ const h = {
       "bg-transparent"
     ]
   }
-}, de = {
+}, ve = {
   root: ({ props: e }) => ({
     class: [
       "relative",
@@ -4552,7 +4856,7 @@ const h = {
   end: {
     class: "ml-auto self-center"
   }
-}, ue = {
+}, he = {
   root: {
     class: [
       // Position
@@ -4652,7 +4956,7 @@ const h = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, fe = {
+}, ye = {
   root: {
     class: [
       "relative",
@@ -4806,7 +5110,7 @@ const h = {
   end: {
     class: "ml-auto self-center"
   }
-}, ge = {
+}, we = {
   root: ({ props: e }) => ({
     class: [
       // Spacing and Shape
@@ -4882,7 +5186,7 @@ const h = {
     leaveActiveClass: "overflow-hidden transition-all duration-300 ease-in",
     leaveToClass: "max-h-0 opacity-0 !m-0"
   }
-}, me = {
+}, ke = {
   root: {
     class: [
       // Flexbox
@@ -5109,7 +5413,7 @@ const h = {
       "cursor-pointer overflow-hidden"
     ]
   })
-}, be = {
+}, Ce = {
   table: {
     class: [
       // Spacing & Position
@@ -5226,7 +5530,7 @@ const h = {
       "w-4 h-4"
     ]
   }
-}, pe = {
+}, ze = {
   root: {
     class: [
       "h-max",
@@ -5257,7 +5561,7 @@ const h = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, xe = {
+}, je = {
   root: {
     class: [
       // Flex & Alignment
@@ -5701,7 +6005,7 @@ const h = {
   current: {
     class: ["text-xs font-normal leading-6 px-3"]
   }
-}, ve = {
+}, Ae = {
   root: {
     class: "shadow-md rounded-lg"
   },
@@ -5780,7 +6084,7 @@ const h = {
     leaveActiveClass: "overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]",
     leaveToClass: "max-h-0"
   }
-}, he = {
+}, Te = {
   panel: {
     class: "mb-1"
   },
@@ -5897,7 +6201,7 @@ const h = {
     leaveActiveClass: "overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]",
     leaveToClass: "max-h-0"
   }
-}, ye = {
+}, _e = {
   root: ({ props: e }) => ({
     class: [
       "w-full",
@@ -5971,7 +6275,8 @@ const h = {
     class: [
       "absolute top-[54%] right-3 -mt-2",
       "text-general-200",
-      "focus-visible:text-general-500 hover:text-general-500"
+      "focus-visible:text-general-500 hover:text-general-500",
+      "[&>.icon]:!w-4 [&>.icon]:!h-4"
     ]
   },
   hideicon: {
@@ -5986,7 +6291,7 @@ const h = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, we = {
+}, Ne = {
   root: {
     class: [
       // Flexbox
@@ -6557,7 +6862,7 @@ const h = {
     leaveActiveClass: "!transition-none",
     leaveToClass: "!transition-none"
   }
-}, ke = {
+}, Ie = {
   root: ({ props: e }) => ({
     class: [
       {
@@ -6641,7 +6946,7 @@ const h = {
       }
     ]
   })
-}, p = navigator.userAgent.includes("Firefox"), l = {
+}, k = navigator.userAgent.includes("Firefox"), u = {
   root: ({ props: e }) => ({
     class: [
       // Alignments
@@ -6681,7 +6986,7 @@ const h = {
       },
       // Colors
       "ring-1",
-      { "ring-1": p, "ring-[0.5px]": !p },
+      { "ring-1": k, "ring-[0.5px]": !k },
       {
         "before:bg-white": e.modelValue == e.trueValue,
         "before:bg-general-100": e.modelValue !== e.trueValue,
@@ -6755,8 +7060,8 @@ const h = {
   tooltipicon: {
     class: "text-primary-500 w-[10px] h-[10px]"
   }
-}, Ce = {
-  root: ({ props: e }) => ({
+}, Fe = {
+  root: ({ props: e, state: t }) => ({
     class: [
       "relative",
       // Flexbox & Alignment
@@ -6769,10 +7074,10 @@ const h = {
       "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-500": !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-500": !e.disabled && t.checked,
         "ring-general-200": e.disabled
       },
       {
@@ -6784,7 +7089,7 @@ const h = {
     "data-wv-name": "buttonradio",
     "data-wv-section": "root"
   }),
-  box: ({ props: e }) => ({
+  box: ({ props: e, state: t }) => ({
     class: [
       // Size
       "w-2 h-2",
@@ -6799,8 +7104,8 @@ const h = {
       "transition duration-200 ease-in-out",
       // Colors
       {
-        "bg-primary-500": 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-500": t.checked && e.value !== void 0 && !e.disabled,
+        "bg-general-200": t.checked && e.value !== void 0 && e.disabled
       },
       // States
       {
@@ -6834,10 +7139,10 @@ const h = {
   icon: {
     class: "hidden"
   },
-  label: l.label,
-  labeltext: l.labeltext,
-  tooltipicon: l.tooltipicon
-}, ze = {
+  label: u.label,
+  labeltext: u.labeltext,
+  tooltipicon: u.tooltipicon
+}, Se = {
   root: ({ props: e }) => ({
     class: [
       "relative",
@@ -6907,12 +7212,12 @@ const h = {
       "transition duration-200 ease-in"
     ]
   })
-}, je = {
+}, Pe = {
   root: {
     class: ["block absolute bg-surface-0/50 rounded-full pointer-events-none"],
     style: "transform: scale(0)"
   }
-}, Ae = {
+}, Ve = {
   wrapper: {
     class: [
       // Size & Position
@@ -6971,7 +7276,7 @@ const h = {
       "relative"
     ]
   }
-}, _e = {
+}, Ue = {
   root: ({ props: e }) => ({
     class: [
       // Flex & Alignment
@@ -7007,7 +7312,7 @@ const h = {
     leaveActiveClass: "transition-opacity duration-150",
     leaveToClass: "opacity-0"
   }
-}, Fe = {
+}, Ee = {
   root: ({ props: e }) => ({
     class: [
       "shadow-sm flex flex-col min-w-[43px] w-max"
@@ -7054,7 +7359,7 @@ const h = {
   label: {
     class: "font-normal"
   }
-}, Ie = {
+}, Be = {
   root: ({ props: e }) => ({
     class: [
       // Flexbox
@@ -7179,7 +7484,7 @@ const h = {
     leaveActiveClass: "transition-opacity duration-400 ease-in",
     leaveToClass: "opacity-0 mask-active"
   }
-}, Te = {
+}, Ge = {
   root: ({ props: e }) => ({
     class: [
       "overflow-hidden",
@@ -7195,7 +7500,7 @@ const h = {
       "bg-general-50"
     ]
   })
-}, Ve = {
+}, $e = {
   root: ({ props: e }) => ({
     class: [
       "relative",
@@ -7303,7 +7608,7 @@ const h = {
       "touch-action-none"
     ]
   })
-}, Se = {
+}, Oe = {
   root: ({ props: e }) => ({
     class: [
       // Flexbox and Position
@@ -7811,7 +8116,7 @@ const h = {
       class: ["hidden"]
     }
   }
-}, Pe = {
+}, Le = {
   root: {
     class: "relative"
   },
@@ -7918,12 +8223,12 @@ const h = {
       "max-w-full"
     ]
   })
-}, $e = {
+}, Re = m("WANGS-TAB-MENU", {
   root: {
     class: "overflow-x-auto",
     style: "scrollbar-width: none"
   },
-  menu: {
+  menu: ({ props: e }) => ({
     class: [
       // Flexbox
       "flex flex-1",
@@ -7931,13 +8236,16 @@ const h = {
       "list-none",
       "p-0 m-0",
       // Colors
-      "text-general-100"
+      "text-general-100",
+      {
+        "w-max ring-1 ring-inset ring-general-100 rounded !m-[2px]": e.type === "segmented"
+      }
     ]
-  },
+  }),
   menuitem: {
     class: "mr-0"
   },
-  action: ({ context: e, state: t }) => {
+  action: ({ context: e, props: t }) => {
     var r, i;
     return {
       class: [
@@ -7949,28 +8257,32 @@ const h = {
         "flex items-center",
         // 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-xl py-1 px-3": t.type === "pill",
+          rounded: t.type === "segmented",
+          "p-2 pb-1.5 pt-0.5 !h-6": t.type === "tab",
+          "py-[5px] px-3 !h-[26px]": t.type === "segmented",
+          "ml-1": t.type === "pill" && e.index !== 0
         },
         // Shape
         {
-          "border-b-2": e.type !== "pill"
+          "border-b-2": t.type === "tab"
         },
         // Colors and Conditions
         {
-          "border-primary-500": t.active,
-          "border-grayscale-400": !t.active,
-          "text-grayscale-600": !t.active,
-          "text-primary-500": t.active,
-          "bg-primary-50 text-primary-500": e.type === "pill" && t.active,
-          "bg-grayscale-200 text-grayscale-800": e.type === "pill" && !t.active,
-          "bg-transparent ": e.type !== "pill" && !t.active
+          "border-primary-500": e.active,
+          "border-grayscale-400": !e.active,
+          "text-grayscale-600": !e.active,
+          "text-primary-500": e.active,
+          "bg-primary-50 text-primary-500": t.type === "pill" && e.active,
+          "bg-grayscale-200 text-grayscale-800": t.type === "pill" && !e.active,
+          "bg-primary-500 text-white shadow-[-2px_2px_2px_rgba(0,0,0,0.25)]": t.type === "segmented" && e.active,
+          "!text-general-800": t.type === "segmented" && !e.active,
+          "bg-transparent ": t.type !== "pill" && !e.active
         },
         // States
         "focus-visible:outline-none focus-visible:outline-offset-0",
         {
-          "focus-visible:border-primary-200 focus-visible:text-primary-400": !t.active
+          "focus-visible:border-primary-200 focus-visible:text-primary-400": !e.active
         },
         // Disabled States
         {
@@ -7991,10 +8303,15 @@ const h = {
   icon: {
     class: "mr-2"
   },
-  inkbar: {
-    class: "grow border-b-2 border-primary-100"
-  }
-}, Me = {
+  inkbar: ({ props: e }) => ({
+    class: [
+      "grow border-b-2 border-primary-100",
+      {
+        hidden: e.type === "pill" || e.useTrailingLine === !1 || e.type === "segmented"
+      }
+    ]
+  })
+}), Me = {
   navContainer: ({ props: e }) => ({
     class: [
       // Position
@@ -8130,7 +8447,7 @@ const h = {
       ]
     }
   }
-}, Be = {
+}, We = {
   root: ({ props: e }) => ({
     class: [
       //Font
@@ -8161,7 +8478,7 @@ const h = {
   icon: {
     class: "mr-1 text-sm"
   }
-}, Re = {
+}, De = {
   root: {
     class: [
       // Spacing
@@ -8213,7 +8530,7 @@ const h = {
       "outline-none"
     ]
   }
-}, Le = {
+}, Ye = {
   root: ({ context: e, props: t }) => ({
     class: [
       // Font
@@ -8231,7 +8548,7 @@ const h = {
       // Shape
       "rounded",
       "appearance-none",
-      ...K,
+      ...ne,
       {
         "!ring-danger-500": e.invalidInput
       },
@@ -8249,7 +8566,7 @@ const h = {
     "data-wv-name": "textarea",
     "data-wv-section": "root"
   })
-}, De = {
+}, He = {
   root: {
     class: [
       // Shape
@@ -8351,16 +8668,16 @@ const h = {
   separator: {
     class: "border-t border-surface-200 my-1"
   }
-}, d = (e) => {
+}, g = (e) => {
   if (!e) return !0;
   const t = Object.keys(e);
   return t.length ? t.every((r) => {
     const i = e[r];
     return typeof i == "object" ? Array.isArray(i) ? !i.length || i.every(
-      (n) => typeof n == "object" ? d(n) : n == null
-    ) : d(i) : i == null;
+      (n) => typeof n == "object" ? g(n) : n == null
+    ) : g(i) : i == null;
   }) : !0;
-}, Ee = {
+}, Ke = {
   root: ({ props: e }) => ({
     class: ["flex flex-col grow", "text-xs font-normal text-grayscale-900"]
   }),
@@ -8381,28 +8698,47 @@ const h = {
   }),
   marker: {
     class: [
-      "w-max",
+      "w-[22px] h-[22px]",
       "rounded-full",
       "bg-transparent",
-      "ring-2 ring-inset ring-primary-400 p-0.5",
+      "ring-1 ring-inset ring-general-100 p-0.5",
       "flex items-center justify-center"
     ]
   },
   markerArrow: (e) => ({
     class: [
-      "w-4 h-4 invisible transition-transform duration-200 ease-in-out text-grayscale-900",
-      { "!visible": e.detail && !d(e.detail) },
+      "!w-3 !h-3 hidden transition-transform duration-200 ease-in-out text-grayscale-900",
+      { "!flex": e.detail && !g(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 || g(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"]
+    class: ["w-[1px] grow bg-general-100"]
   }),
   content: ({ props: e, context: t }) => ({
     class: ["grid grid-rows-[max-content,auto] pb-2.5 gap-1"]
   })
-}, Oe = {
+}, qe = {
   root: ({ props: e }) => ({
     class: [
       //Size and Shape
@@ -8485,7 +8821,7 @@ const h = {
     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"
   }
-}, Ge = {
+}, Je = {
   root: {
     class: [
       "relative",
@@ -8556,7 +8892,7 @@ const h = {
   icon: {
     class: [" mr-2", "text-surface-700/80"]
   }
-}, Ne = {
+}, Xe = {
   root: {
     class: [
       // Flex & Alignment
@@ -8582,7 +8918,7 @@ const h = {
   end: {
     class: "flex items-center"
   }
-}, He = {
+}, Ze = {
   root: ({ context: e, props: t }) => ({
     class: [
       // Position
@@ -8617,7 +8953,7 @@ const h = {
       "break-words"
     ]
   }
-}, qe = {
+}, Qe = {
   root: {
     class: [
       "relative",
@@ -8648,8 +8984,7 @@ const h = {
       "p-0",
       "pl-1",
       "rounded-md",
-      "focus:outline-none focus:outline-offset-0",
-      "focus:bg-primary-50"
+      "focus:outline-none focus:outline-offset-0"
     ]
   },
   content: ({ context: e, props: t }) => ({
@@ -8667,10 +9002,11 @@ const h = {
       },
       // States
       {
-        "hover:bg-primary-50": t.selectionMode == "single" || t.selectionMode == "multiple"
+        "hover:bg-primary-50": (t.selectionMode == "single" || t.selectionMode == "multiple" || t.selectionMode == "checkbox") && !e.disabled && !e.exactDisabled
       },
       {
-        "!pointer-events-none !opacity-60 !cursor-default": e.disabled
+        "!text-general-200": e.disabled && !e.exactDisabled,
+        "!pointer-events-none !cursor-default": e.disabled || e.exactDisabled
       },
       // Transition
       "transition-shadow duration-200",
@@ -8703,7 +9039,7 @@ const h = {
       // Transition
       "transition duration-200",
       // Misc
-      "cursor-pointer select-none"
+      "cursor-pointer select-none !pointer-events-auto"
     ],
     "data-wv-section": "tree-node-toggler"
   }),
@@ -8868,7 +9204,7 @@ const h = {
       "text-xs font-medium text-general-800"
     ]
   })
-}, Ye = {
+}, et = {
   root: ({ props: e, state: t }) => ({
     class: [
       // Display and Position
@@ -9189,7 +9525,7 @@ const h = {
     leaveActiveClass: "transition-opacity duration-100 ease-linear",
     leaveToClass: "opacity-0"
   }
-}, Je = {
+}, tt = {
   root: {
     class: [
       "relative",
@@ -9289,13 +9625,13 @@ const h = {
       "duration-200"
     ]
   }
-}, We = {
+}, rt = {
   root: {
     class: ["!mt-0 text-danger-500 text-xs font-light tracking-[0.02em]"],
     "data-wv-name": "validatormessage",
     "data-wv-section": "root"
   }
-}, Xe = {
+}, it = {
   root: {
     class: "flex gap-2 items-center shrink-0",
     "data-wv-name": "buttonbulkaction",
@@ -9350,7 +9686,7 @@ const h = {
     class: "!p-0 !w-6 !h-6 [&_.icon]:!w-5 [&_.icon]:!h-5",
     "data-wv-section": "buttonclearselection"
   }
-}, Ze = {
+}, st = {
   root: {
     class: "flex flex-nowrap items-center gap-1",
     "data-wv-name": "badgegroup",
@@ -9362,7 +9698,7 @@ const h = {
   },
   showmoredialog: {
     root: {
-      class: [x.root({ state: {} }).class, "w-[400px] !px-6 !py-3"],
+      class: [C.root({ state: {} }).class, "w-[400px] !px-6 !py-3"],
       "data-wv-section": "showmoredialog"
     },
     title: {
@@ -9375,7 +9711,7 @@ const h = {
     }
     // All section in Dialog Preset can be added here
   }
-}, Ke = {
+}, nt = {
   root: {
     class: [
       "flex gap-[5px] items-center text-left h-[21px]",
@@ -9400,16 +9736,16 @@ const h = {
     content: ">",
     "data-wv-section": "separator"
   }
-}, Qe = {
+}, at = {
   currency: (e) => ({
-    class: [...c(e), "rounded-l rounded-r-none"],
+    class: [...f(e), "rounded-l rounded-r-none"],
     "data-wv-section": "currency"
   }),
   value: (e) => ({
-    class: [...c(e), "rounded-r rounded-l-none -ml-[1px]"],
+    class: [...f(e), "rounded-r rounded-l-none -ml-[1px]"],
     "data-wv-section": "value"
   })
-}, Ue = {
+}, ot = {
   root: {
     "data-wv-name": "fileupload",
     "data-wv-section": "root"
@@ -9431,7 +9767,7 @@ const h = {
   requirements: {
     class: "flex justify-start"
   }
-}, et = {
+}, lt = {
   root: {
     class: [
       "flex flex-col items-start justify-start relative gap-1 w-full shrink-0 overflow-hidden"
@@ -9439,12 +9775,15 @@ const h = {
     "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"
   }),
@@ -9457,7 +9796,7 @@ const h = {
   arterisksign: {
     class: "text-danger-500"
   }
-}, tt = {
+}, ct = {
   next: ({ context: e }) => ({
     class: [
       "text-2xl text-general-900",
@@ -9481,14 +9820,14 @@ const h = {
       }
     ]
   })
-}, rt = {
+}, dt = {
   root: {
     class: [
       "bg-general-50 rounded-lg [&>*]:w-full [&>*]min-w-0",
       "grid items-end p-3 gap-x-3 gap-y-4"
     ]
   }
-}, it = {
+}, ut = {
   root: {
     class: [
       "w-screen h-screen fixed top-0 left-0 z-[9999999]",
@@ -9500,14 +9839,14 @@ const h = {
   animation: {
     class: ["w-[700px] h-auto"]
   }
-}, st = {
+}, ft = {
   root: {
     class: "flex items-center gap-1"
   },
   displayname: ({ props: e }) => ({
     class: [
       "text-xs font-medium cursor-pointer",
-      { "text-primary-400 cursor-pointer": e.type === "icon" },
+      { "text-primary-500 cursor-pointer": e.type === "icon" },
       { "text-general-800": e.type !== "icon" }
     ]
   }),
@@ -9534,118 +9873,118 @@ const h = {
       class: "flex flex-col gap-0.5 items-center justify-center"
     }
   }
-}, nt = {
-  badge: C,
-  ripple: je,
-  tooltip: He
-}, ot = {
-  global: Q,
-  directives: nt,
+}, gt = {
+  badge: F,
+  ripple: Pe,
+  tooltip: Ze
+}, bt = {
+  global: ae,
+  directives: gt,
   // Forms
-  form: Z,
-  filtercontainer: rt,
-  autocomplete: y,
-  dropdown: W,
-  inputnumber: ne,
-  inputphonenumber: ae,
-  inputcurrency: Qe,
-  inputotp: oe,
-  inputtext: v,
-  inputbadge: te,
-  calendar: I,
-  checkbox: a,
-  buttonradio: Ce,
-  selectbutton: Fe,
-  slider: Ve,
+  form: se,
+  filtercontainer: dt,
+  autocomplete: _,
+  dropdown: re,
+  inputnumber: ge,
+  inputphonenumber: be,
+  inputcurrency: at,
+  inputotp: me,
+  inputtext: z,
+  inputbadge: ce,
+  calendar: B,
+  checkbox: d,
+  buttonradio: Fe,
+  selectbutton: Ee,
+  slider: $e,
   chips: M,
-  rating: ze,
+  rating: Se,
   multiselect: s,
-  togglebutton: Ge,
-  toggleswitch: l,
-  cascadeselect: S,
-  listbox: ce,
-  colorpicker: R,
-  inputgroup: re,
-  inputgroupaddon: ie,
-  inputmask: se,
-  knob: le,
-  treeselect: Ye,
-  tristatecheckbox: Je,
-  textarea: Le,
-  password: ye,
-  validatormessage: We,
-  fileupload: Ue,
-  fieldwrapper: et,
+  togglebutton: Je,
+  toggleswitch: u,
+  cascadeselect: O,
+  listbox: xe,
+  colorpicker: D,
+  inputgroup: de,
+  inputgroupaddon: ue,
+  inputmask: fe,
+  knob: pe,
+  treeselect: et,
+  tristatecheckbox: tt,
+  textarea: Ye,
+  password: _e,
+  validatormessage: rt,
+  fileupload: ot,
+  fieldwrapper: lt,
   // Buttons
-  button: z,
-  buttondownload: j,
-  buttonbulkaction: Xe,
-  buttonsearch: _,
-  buttonsplit: F,
-  buttonfilter: A,
-  splitbutton: Se,
+  button: S,
+  buttondownload: P,
+  buttonbulkaction: it,
+  buttonsearch: U,
+  buttonsplit: E,
+  buttonfilter: V,
+  splitbutton: Oe,
   // Data
-  paginator: xe,
-  datatable: O,
-  customcolumn: E,
-  tree: qe,
-  dataview: G,
-  dataviewlayoutoptions: N,
-  organizationchart: be,
-  orderlist: me,
-  picklist: we,
-  timeline: Ee,
-  changelog: P,
+  paginator: je,
+  datatable: q,
+  customcolumn: K,
+  tree: Qe,
+  dataview: J,
+  dataviewlayoutoptions: X,
+  organizationchart: Ce,
+  orderlist: ke,
+  picklist: Ne,
+  timeline: Ke,
+  changelog: L,
   // Panels
-  accordion: h,
-  panel: ve,
-  fieldset: X,
-  card: T,
+  accordion: T,
+  panel: Ae,
+  fieldset: ie,
+  card: G,
   tabview: Me,
-  divider: Y,
-  toolbar: Ne,
-  scrollpanel: Ae,
+  divider: ee,
+  toolbar: Xe,
+  scrollpanel: Ve,
   // Menu
-  contextmenu: D,
-  menu: ue,
-  menubar: fe,
-  steps: Pe,
-  breadcrumb: Ke,
-  tieredmenu: De,
-  panelmenu: he,
-  megamenu: de,
-  dock: J,
-  tabmenu: $e,
+  contextmenu: H,
+  menu: he,
+  menubar: ye,
+  steps: Le,
+  breadcrumb: nt,
+  tieredmenu: He,
+  panelmenu: Te,
+  megamenu: ve,
+  dock: te,
+  tabmenu: Re,
   // Overlays
-  dialog: x,
-  dialogconfirm: H,
-  dialogform: q,
-  overlaypanel: pe,
-  sidebar: Ie,
-  confirmpopup: L,
+  dialog: C,
+  dialogconfirm: Z,
+  dialogform: Q,
+  overlaypanel: ze,
+  sidebar: Be,
+  confirmpopup: Y,
   // Messages
-  message: ge,
-  inlinemessage: ee,
-  toast: Oe,
+  message: we,
+  inlinemessage: le,
+  toast: qe,
   // Media
-  carousel: V,
+  carousel: $,
   // Misc
-  badge: o,
-  badgegroup: Ze,
-  avatar: w,
-  avatargroup: k,
-  tag: Be,
-  chip: $,
-  progressbar: ke,
-  skeleton: Te,
-  scrolltop: _e,
-  terminal: Re,
-  image: U,
-  workcalendar: tt,
-  loading: it,
-  codesnippet: B,
-  username: st
+  badge: c,
+  badgegroup: st,
+  avatar: N,
+  avatargroup: I,
+  tag: We,
+  chip: R,
+  progressbar: Ie,
+  skeleton: Ge,
+  scrolltop: Ue,
+  terminal: De,
+  image: oe,
+  workcalendar: ct,
+  loading: ut,
+  codesnippet: W,
+  username: ft
 };
 export {
-  ot as default
+  bt as default
 };