@expcat/tigercat-vue 1.2.23 → 1.2.31

package/dist/{chunk-OK7MTFAX.mjs → chunk-4GYBJBFJ.mjs}

@@ -45,9 +45,11 @@ var renderAction = (item, action, index) => {
       key,
       size: "sm",
       variant: "primary",
+      underline: false,
       href: action.href,
       target: action.target,
       disabled: action.disabled,
+      className: "inline-flex items-center px-2.5 py-1 rounded-lg hover:bg-blue-50/50 dark:hover:bg-blue-950/20 text-xs font-semibold transition-all duration-200",
       onClick: () => action.onClick?.(item, action)
     },
     {
@@ -138,7 +140,7 @@ var ActivityFeed = defineComponent({
       return h(
         "div",
         {
-          class: activityItemClasses
+          class: classNames(activityItemClasses, "p-4 rounded-2xl border border-gray-100/70 dark:border-gray-800/40 bg-white/40 dark:bg-gray-900/15 backdrop-blur-sm shadow-sm transition-all duration-300 hover:shadow-md hover:shadow-gray-100/30 dark:hover:shadow-none hover:bg-white dark:hover:bg-gray-900/30 hover:-translate-y-0.5 w-full")
         },
         [
           h("div", { class: activityItemLayoutClasses }, [
@@ -146,14 +148,14 @@ var ActivityFeed = defineComponent({
               size: "sm",
               src: item.user.avatar,
               text: item.user.name,
-              className: "shrink-0"
+              className: "shrink-0 ring-2 ring-white dark:ring-gray-900 shadow-sm transition-transform hover:scale-105 duration-200"
             }) : null,
             h("div", { class: activityItemBodyClasses }, [
               h("div", { class: activityItemHeaderClasses }, [
                 h("div", { class: activityItemTitleGroupClasses }, [
                   titleText ? h(
                     Text,
-                    { tag: "div", size: "sm", weight: "medium", class: "truncate" },
+                    { tag: "div", size: "sm", weight: "semibold", class: "text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer truncate" },
                     { default: () => titleText }
                   ) : null,
                   item.status ? h(
@@ -161,7 +163,7 @@ var ActivityFeed = defineComponent({
                     {
                       variant: item.status.variant ?? "default",
                       size: "sm",
-                      className: "shrink-0"
+                      className: "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase border border-current bg-opacity-10 shadow-sm"
                     },
                     { default: () => item.status?.label }
                   ) : null
@@ -172,7 +174,7 @@ var ActivityFeed = defineComponent({
                     tag: "div",
                     size: "xs",
                     color: "muted",
-                    class: "shrink-0 whitespace-nowrap"
+                    class: "shrink-0 whitespace-nowrap font-medium text-gray-400 dark:text-gray-500"
                   },
                   { default: () => timeText }
                 ) : null
@@ -183,11 +185,11 @@ var ActivityFeed = defineComponent({
                   tag: "div",
                   size: "sm",
                   color: "muted",
-                  class: activityItemDescriptionClasses
+                  class: classNames(activityItemDescriptionClasses, "text-gray-600 dark:text-gray-300 leading-relaxed pl-0.5 mt-1")
                 },
                 { default: () => descriptionText }
               ) : null,
-              actionNodes?.length ? h("div", { class: activityItemActionsClasses }, actionNodes) : null
+              actionNodes?.length ? h("div", { class: classNames(activityItemActionsClasses, "mt-2.5") }, actionNodes) : null
             ])
           ])
         ]
@@ -200,7 +202,7 @@ var ActivityFeed = defineComponent({
     const feedAriaBusy = computed(() => attrs["aria-busy"] ?? (props.loading ? "true" : void 0));
     return () => {
       if (props.loading) {
-        const loadingNode = slots.loading ? slots.loading() : h(Loading, { text: props.loadingText });
+        const loadingNode = slots.loading ? slots.loading() : h(Loading, { text: props.loadingText, class: "text-blue-500 dark:text-blue-400 font-medium" });
         return h(
           "div",
           {
@@ -215,16 +217,35 @@ var ActivityFeed = defineComponent({
           [
             h(
               Card,
-              { variant: "bordered", size: "sm", className: "tiger-activity-feed-loading" },
               {
-                default: () => h("div", { class: "flex items-center justify-center py-4" }, loadingNode)
+                variant: "bordered",
+                size: "sm",
+                className: "tiger-activity-feed-loading bg-white/40 dark:bg-gray-900/20 border-gray-100 dark:border-gray-800/80 backdrop-blur-sm rounded-2xl shadow-sm overflow-hidden"
+              },
+              {
+                default: () => h("div", { class: "flex items-center justify-center py-8" }, loadingNode)
               }
             )
           ]
         );
       }
       if (resolvedGroups.value.length === 0) {
-        const emptyNode = slots.empty ? slots.empty() : h(Text, { tag: "div", size: "sm", color: "muted" }, { default: () => props.emptyText });
+        const emptyNode = slots.empty ? slots.empty() : h("div", { class: "flex flex-col items-center justify-center py-12 px-4" }, [
+          h("svg", {
+            class: "w-12 h-12 text-gray-300 dark:text-gray-600 mb-3 animate-pulse",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }, [
+            h("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M12 7.5h1.5m-1.5 3h1.5m-7.5 3h10.5m-10.5 3h10.5m-13.5-9h16.5M3 5.25h18M3 18.75h18"
+            })
+          ]),
+          h(Text, { tag: "div", size: "sm", color: "muted", class: "font-medium" }, { default: () => props.emptyText })
+        ]);
         return h(
           "div",
           {
@@ -238,9 +259,13 @@ var ActivityFeed = defineComponent({
           [
             h(
               Card,
-              { variant: "bordered", size: "sm", className: "tiger-activity-feed-empty" },
               {
-                default: () => h("div", { class: "flex items-center justify-center py-6" }, emptyNode)
+                variant: "bordered",
+                size: "sm",
+                className: "tiger-activity-feed-empty bg-white/40 dark:bg-gray-900/20 border-gray-100 dark:border-gray-800/80 backdrop-blur-sm rounded-2xl shadow-sm overflow-hidden"
+              },
+              {
+                default: () => emptyNode
               }
             )
           ]
@@ -261,14 +286,46 @@ var ActivityFeed = defineComponent({
           const groupTitle = group.title;
           const timelineItems = toActivityTimelineItems(group.items);
           return h("div", { key: group.key ?? groupIndex, class: "space-y-3" }, [
-            props.showGroupTitle && groupTitle ? headerNode ?? h(
-              Text,
-              { tag: "div", size: "sm", weight: "medium", color: "muted" },
-              { default: () => groupTitle }
-            ) : null,
+            props.showGroupTitle && groupTitle ? headerNode ?? h("div", { class: "flex items-center gap-2 mb-2" }, [
+              h("span", { class: "w-1.5 h-3.5 bg-blue-500 rounded-full dark:bg-blue-400 shadow-sm shadow-blue-500/20" }),
+              h(
+                Text,
+                { tag: "span", size: "sm", weight: "bold", class: "text-gray-900 dark:text-gray-100 uppercase tracking-wider" },
+                { default: () => groupTitle }
+              )
+            ]) : null,
             h(
               Timeline,
-              { items: timelineItems },
+              {
+                items: timelineItems,
+                style: {
+                  "--tiger-border": "rgba(156, 163, 175, 0.18)"
+                },
+                renderDot: (timelineItem) => {
+                  const activity = timelineItem.activity;
+                  const statusVariant = activity?.status?.variant ?? "default";
+                  const baseDotClass = "w-3 h-3 rounded-full border-2 border-white dark:border-gray-950 shadow-sm";
+                  let colorClass = "bg-gray-300 dark:bg-gray-700";
+                  let pulseClass = "";
+                  if (statusVariant === "success") {
+                    colorClass = "bg-emerald-500";
+                    pulseClass = "bg-emerald-500/30";
+                  } else if (statusVariant === "warning") {
+                    colorClass = "bg-amber-500";
+                    pulseClass = "bg-amber-500/30";
+                  } else if (statusVariant === "error" || statusVariant === "danger") {
+                    colorClass = "bg-rose-500";
+                    pulseClass = "bg-rose-500/30";
+                  } else if (statusVariant === "primary" || statusVariant === "info") {
+                    colorClass = "bg-blue-500";
+                    pulseClass = "bg-blue-500/30";
+                  }
+                  return h("div", { class: "relative flex items-center justify-center w-4 h-4" }, [
+                    pulseClass ? h("span", { class: `absolute inline-flex h-full w-full rounded-full animate-ping opacity-75 ${pulseClass}` }) : null,
+                    h("span", { class: `${baseDotClass} ${colorClass} relative z-10` })
+                  ]);
+                }
+              },
               {
                 item: ({ item, index }) => {
                   const activity = item.activity;

package/dist/{chunk-YCBU3C4T.mjs → chunk-4J5EK3WY.mjs}

@@ -285,7 +285,7 @@ var NotificationCenter = defineComponent({
       return h(
         "div",
         {
-          class: "inline-flex self-start rounded-[var(--tiger-radius-sm,0.375rem)] border border-[var(--tiger-border,#e5e7eb)] overflow-hidden"
+          class: "inline-flex items-center gap-0.5 p-0.5 rounded-lg bg-gray-100/80 dark:bg-gray-800/60 self-start"
         },
         options.map(
           (option) => h(
@@ -293,9 +293,8 @@ var NotificationCenter = defineComponent({
             {
               key: option.key,
               class: classNames(
-                "px-3 py-1 text-xs font-medium transition-colors",
-                "border-r border-[var(--tiger-border,#e5e7eb)] last:border-r-0",
-                currentReadFilter.value === option.key ? "bg-[var(--tiger-primary,#2563eb)] text-white" : "bg-[var(--tiger-surface,#ffffff)] text-[var(--tiger-text-muted,#6b7280)] hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
+                "px-3.5 py-1 text-xs font-semibold rounded-md transition-all duration-200",
+                currentReadFilter.value === option.key ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm scale-102" : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
               ),
               onClick: () => handleReadFilterChange(option.key)
             },
@@ -311,26 +310,32 @@ var NotificationCenter = defineComponent({
         "div",
         {
           class: classNames(
-            "flex items-start gap-3 w-full py-0.5 transition-colors",
-            !isRead && "border-l-2 border-l-[var(--tiger-primary,#2563eb)] -ml-[2px] pl-[calc(0.75rem-2px)]"
+            "group relative flex items-start gap-3.5 w-full p-3.5 rounded-xl transition-all duration-300 hover:bg-gray-50/60 dark:hover:bg-gray-800/30",
+            !isRead ? "bg-blue-50/20 dark:bg-blue-950/5 hover:bg-blue-50/40 dark:hover:bg-blue-950/10 border-l-[3px] border-l-blue-500/80 -ml-[3px] pl-[calc(0.875rem-3px)]" : "border-l-[3px] border-l-transparent -ml-[3px] pl-[calc(0.875rem-3px)]"
           )
         },
         [
           h("div", { class: "flex-1 min-w-0" }, [
             h("div", { class: "flex items-baseline justify-between gap-2" }, [
-              h(
-                Text,
-                {
-                  tag: "span",
-                  size: "sm",
-                  weight: isRead ? "normal" : "semibold"
-                },
-                { default: () => item.title }
-              ),
+              h("div", { class: "flex items-center gap-1.5" }, [
+                h(
+                  Text,
+                  {
+                    tag: "span",
+                    size: "sm",
+                    weight: isRead ? "normal" : "semibold",
+                    class: isRead ? "text-gray-600 dark:text-gray-400" : "text-gray-900 dark:text-gray-100"
+                  },
+                  { default: () => item.title }
+                ),
+                !isRead ? h("span", {
+                  class: "w-1.5 h-1.5 rounded-full bg-blue-500 dark:bg-blue-400 shrink-0 shadow-sm shadow-blue-500/40 animate-pulse"
+                }) : null
+              ]),
               timeText ? h(
                 "span",
                 {
-                  class: "text-xs text-[var(--tiger-text-muted,#6b7280)] whitespace-nowrap flex-shrink-0"
+                  class: "text-[11px] text-gray-400 dark:text-gray-500 font-medium whitespace-nowrap flex-shrink-0 self-center"
                 },
                 timeText
               ) : null
@@ -338,7 +343,10 @@ var NotificationCenter = defineComponent({
             item.description ? h(
               "div",
               {
-                class: "mt-0.5 text-xs text-[var(--tiger-text-muted,#6b7280)] line-clamp-2 leading-relaxed"
+                class: classNames(
+                  "mt-1 text-xs leading-relaxed line-clamp-2",
+                  isRead ? "text-gray-500 dark:text-gray-400" : "text-gray-600 dark:text-gray-300"
+                )
               },
               item.description
             ) : null
@@ -348,6 +356,7 @@ var NotificationCenter = defineComponent({
             {
               size: "sm",
               variant: "ghost",
+              class: "opacity-0 group-hover:opacity-100 focus:opacity-100 rounded-full px-2.5 py-1 text-[11px] font-semibold transition-all duration-200 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 border-0 flex-shrink-0 self-center",
               onClick: (event) => {
                 event.stopPropagation();
                 handleItemReadChange(item, !isRead);
@@ -358,20 +367,65 @@ var NotificationCenter = defineComponent({
         ]
       );
     };
-    const renderList = (items) => h(
-      List,
-      {
-        dataSource: items,
-        split: true,
-        bordered: "divided",
-        hoverable: true,
-        emptyText: props.emptyText,
-        onItemClick: handleItemClick
-      },
-      {
-        renderItem: ({ item, index }) => renderListItem(item, index)
+    const renderList = (items) => {
+      if (items.length === 0) {
+        return h(
+          "div",
+          { class: "flex flex-col items-center justify-center py-14 px-4 text-center" },
+          [
+            h(
+              "div",
+              {
+                class: "p-3.5 bg-gray-50 dark:bg-gray-900 rounded-full mb-3 shadow-inner"
+              },
+              [
+                h(
+                  "svg",
+                  {
+                    class: "w-8 h-8 text-gray-400 dark:text-gray-600 animate-pulse",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5"
+                  },
+                  [
+                    h("path", {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                    })
+                  ]
+                )
+              ]
+            ),
+            h(
+              Text,
+              {
+                tag: "div",
+                size: "sm",
+                color: "muted",
+                class: "font-semibold text-gray-400 dark:text-gray-500"
+              },
+              { default: () => props.emptyText }
+            )
+          ]
+        );
       }
-    );
+      return h(
+        List,
+        {
+          dataSource: items,
+          split: true,
+          bordered: "divided",
+          hoverable: true,
+          emptyText: props.emptyText,
+          onItemClick: handleItemClick
+        },
+        {
+          renderItem: ({ item, index }) => renderListItem(item, index)
+        }
+      );
+    };
     const renderTabs = () => h(
       Tabs,
       {
@@ -404,11 +458,15 @@ var NotificationCenter = defineComponent({
       const header = h("div", { class: "flex flex-col gap-3" }, [
         h("div", { class: "flex items-center justify-between" }, [
           h("div", { class: "flex items-center gap-2.5" }, [
-            h(Text, { tag: "div", size: "base", weight: "bold" }, { default: () => props.title }),
+            h(
+              Text,
+              { tag: "div", size: "base", weight: "bold", class: "text-gray-900 dark:text-gray-100" },
+              { default: () => props.title }
+            ),
             totalUnread.value > 0 ? h(
               "span",
               {
-                class: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-semibold rounded-full bg-[var(--tiger-primary,#2563eb)] text-white"
+                class: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[11px] font-bold rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-sm shadow-blue-500/20 animate-pulse"
               },
               String(totalUnread.value)
             ) : null
@@ -419,6 +477,10 @@ var NotificationCenter = defineComponent({
               size: "sm",
               variant: "ghost",
               disabled: !hasUnread.value,
+              class: classNames(
+                "text-xs font-semibold transition-colors duration-200",
+                hasUnread.value ? "text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300" : "text-gray-400 dark:text-gray-600"
+              ),
               onClick: handleMarkAllRead
             },
             { default: () => props.markAllReadText }
@@ -426,8 +488,8 @@ var NotificationCenter = defineComponent({
         ]),
         renderReadFilterButtons()
       ]);
-      const content = props.loading ? h("div", { class: "flex items-center justify-center py-12" }, [
-        h(Loading, { text: props.loadingText })
+      const content = props.loading ? h("div", { class: "flex items-center justify-center py-16" }, [
+        h(Loading, { text: props.loadingText, class: "text-blue-500 dark:text-blue-400 font-medium" })
       ]) : resolvedGroups.value.length > 0 ? h("div", { class: "-mx-4 -mb-4" }, [renderTabs()]) : h("div", { class: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto" }, [
         renderList(filteredFlatItems.value)
       ]);
@@ -445,7 +507,10 @@ var NotificationCenter = defineComponent({
         [
           h(
             Card,
-            { variant: "bordered", className: "w-full" },
+            {
+              variant: "bordered",
+              className: "w-full rounded-2xl border border-gray-100/80 dark:border-gray-800/80 bg-white/95 dark:bg-gray-950/90 backdrop-blur-md shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.2)] transition-all duration-300 overflow-hidden"
+            },
             {
               header: () => header,
               default: () => content

package/dist/{chunk-2C5TOAYI.js → chunk-663C2UX7.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkBGMQIUPPjs = require('./chunk-BGMQIUPP.js');
+var _chunkEU4IGIPCjs = require('./chunk-EU4IGIPC.js');
 
 // src/components/Kanban.ts
 var _vue = require('vue');
@@ -56,7 +56,7 @@ var Kanban = _vue.defineComponent.call(void 0, {
       emit("card-add", colId);
     };
     return () => _vue.h.call(void 0, 
-      _chunkBGMQIUPPjs.TaskBoard,
+      _chunkEU4IGIPCjs.TaskBoard,
       {
         ...attrs,
         columns: props.columns,

package/dist/{chunk-P453RVKY.js → chunk-6G5IMGTC.js}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
 
-var _chunkVPNIZPIFjs = require('./chunk-VPNIZPIF.js');
+var _chunkDS7RQFEGjs = require('./chunk-DS7RQFEG.js');
 
 
 var _chunk25EYT2CBjs = require('./chunk-25EYT2CB.js');
@@ -22,6 +22,60 @@ var _vue = require('vue');
 
 
 var _tigercatcore = require('@expcat/tigercat-core');
+var renderArrowLeftIcon = () => _vue.h.call(void 0, 
+  "svg",
+  {
+    class: "w-3.5 h-3.5 transition-transform duration-300 group-hover:-translate-x-0.5",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true"
+  },
+  [
+    _vue.h.call(void 0, "path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+    })
+  ]
+);
+var renderArrowRightIcon = () => _vue.h.call(void 0, 
+  "svg",
+  {
+    class: "w-3.5 h-3.5 transition-transform duration-300 group-hover:translate-x-0.5",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true"
+  },
+  [
+    _vue.h.call(void 0, "path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
+    })
+  ]
+);
+var renderCheckIcon = () => _vue.h.call(void 0, 
+  "svg",
+  {
+    class: "w-3.5 h-3.5 transition-transform duration-300 group-hover:scale-110",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2.5",
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true"
+  },
+  [
+    _vue.h.call(void 0, "path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M4.5 12.75l6 6 9-13.5"
+    })
+  ]
+);
 var FormWizard = _vue.defineComponent.call(void 0, {
   name: "TigerFormWizard",
   inheritAttrs: false,
@@ -82,6 +136,10 @@ var FormWizard = _vue.defineComponent.call(void 0, {
       type: Object,
       default: void 0
     },
+    bordered: {
+      type: Boolean,
+      default: true
+    },
     autoSave: {
       type: Function,
       default: void 0
@@ -122,7 +180,8 @@ var FormWizard = _vue.defineComponent.call(void 0, {
     const currentStep = _vue.computed.call(void 0, () => props.steps[currentIndex.value]);
     const wrapperClasses = _vue.computed.call(void 0, 
       () => _tigercatcore.classNames.call(void 0, 
-        "tiger-form-wizard w-full rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-sm overflow-hidden",
+        "tiger-form-wizard w-full overflow-hidden transition-all duration-300",
+        props.bordered ? "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-sm" : "bg-transparent",
         props.className,
         _tigercatcore.coerceClassValue.call(void 0, attrs.class)
       )
@@ -188,7 +247,7 @@ var FormWizard = _vue.defineComponent.call(void 0, {
     };
     return () => {
       const stepsNodes = props.steps.map(
-        (step, index) => _vue.h.call(void 0, _chunkVPNIZPIFjs.StepsItem, {
+        (step, index) => _vue.h.call(void 0, _chunkDS7RQFEGjs.StepsItem, {
           key: _nullishCoalesce(step.key, () => ( index)),
           title: step.title,
           description: step.description,
@@ -199,6 +258,14 @@ var FormWizard = _vue.defineComponent.call(void 0, {
       );
       const isFirst = currentIndex.value <= 0;
       const isLast = currentIndex.value >= totalCount.value - 1;
+      const stepsHeaderClass = _tigercatcore.classNames.call(void 0, 
+        "px-6 py-5 bg-[var(--tiger-surface-muted,#f9fafb)]/95 backdrop-blur-sm transition-all duration-300",
+        props.bordered ? "border-b border-[var(--tiger-border,#e5e7eb)]" : ""
+      );
+      const actionsContainerClass = _tigercatcore.classNames.call(void 0, 
+        "flex items-center justify-between gap-3 px-8 py-4 bg-[var(--tiger-surface-muted,#f9fafb)]/95 backdrop-blur-sm transition-all duration-300",
+        props.bordered ? "border-t border-[var(--tiger-border,#e5e7eb)]" : ""
+      );
       return _vue.h.call(void 0, 
         "div",
         {
@@ -208,9 +275,9 @@ var FormWizard = _vue.defineComponent.call(void 0, {
           "data-tiger-form-wizard": ""
         },
         [
-          props.showSteps && props.steps.length > 0 ? _vue.h.call(void 0, "div", { class: "px-6 py-5 bg-[var(--tiger-surface-muted,#f9fafb)]" }, [
+          props.showSteps && props.steps.length > 0 ? _vue.h.call(void 0, "div", { class: stepsHeaderClass }, [
             _vue.h.call(void 0, 
-              _chunkVPNIZPIFjs.Steps,
+              _chunkDS7RQFEGjs.Steps,
               {
                 current: currentIndex.value,
                 direction: props.direction,
@@ -224,31 +291,35 @@ var FormWizard = _vue.defineComponent.call(void 0, {
           ]) : null,
           _vue.h.call(void 0, 
             "div",
-            { class: "px-6 py-4 flex flex-col items-center" },
+            { class: "px-8 py-6 flex flex-col items-center w-full min-h-[120px] transition-all duration-300" },
             { default: () => renderContent() }
           ),
           props.showActions ? _vue.h.call(void 0, 
             "div",
-            {
-              class: "flex items-center justify-center gap-3 px-6 py-2 border-t border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface-muted,#f9fafb)]"
-            },
+            { class: actionsContainerClass },
             [
-              _vue.h.call(void 0, 
+              !isFirst ? _vue.h.call(void 0, 
                 _chunk4VLNT2EDjs.Button,
                 {
                   type: "button",
                   variant: "secondary",
-                  disabled: isFirst,
-                  onClick: handlePrev
+                  class: "group",
+                  onClick: handlePrev,
+                  size: props.size === "small" ? "sm" : "md",
+                  icon: renderArrowLeftIcon()
                 },
                 { default: () => _tigercatcore.resolveLocaleText.call(void 0, labels.value.prevText, props.prevText) }
-              ),
+              ) : _vue.h.call(void 0, "div"),
               _vue.h.call(void 0, 
                 _chunk4VLNT2EDjs.Button,
                 {
                   type: "button",
                   variant: "primary",
-                  onClick: handleNext
+                  class: "group",
+                  onClick: handleNext,
+                  size: props.size === "small" ? "sm" : "md",
+                  icon: isLast ? renderCheckIcon() : renderArrowRightIcon(),
+                  iconPosition: isLast ? "left" : "right"
                 },
                 {
                   default: () => isLast ? _tigercatcore.resolveLocaleText.call(void 0, labels.value.finishText, props.finishText) : _tigercatcore.resolveLocaleText.call(void 0, labels.value.nextText, props.nextText)