@expcat/tigercat-vue 1.2.47 → 1.2.52

package/dist/{chunk-KOTSKHPQ.mjs → chunk-TC6ZPQFT.mjs}

@@ -5,7 +5,7 @@ import {
   coerceClassValue,
   mergeStyleValues,
   getCardClasses,
-  cardSizeClasses,
+  resolveCardPadding,
   cardHeaderClasses,
   cardFooterClasses,
   cardCoverWrapperClasses,
@@ -34,6 +34,15 @@ var Card = defineComponent({
       type: String,
       default: "md"
     },
+    /**
+     * Padding override for the card content sections. `false` removes the
+     * built-in padding; a string supplies a custom padding utility class.
+     * Takes precedence over `size`.
+     */
+    padding: {
+      type: [Boolean, String],
+      default: void 0
+    },
     /**
      * Whether the card is hoverable (shows hover effect)
      * @default false
@@ -80,15 +89,16 @@ var Card = defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
+    const paddingClass = computed(() => resolveCardPadding(props.size, props.padding));
     const cardClasses = computed(
       () => classNames(
         getCardClasses(props.variant, props.hoverable),
         cardDirectionClasses[props.direction],
-        !props.cover && cardSizeClasses[props.size]
+        !props.cover && paddingClass.value
       )
     );
     const isHorizontal = computed(() => props.direction === "horizontal");
-    const sectionSizeClass = computed(() => props.cover ? cardSizeClasses[props.size] : void 0);
+    const sectionSizeClass = computed(() => props.cover ? paddingClass.value : void 0);
     const getSectionClasses = (baseClasses) => classNames(baseClasses, sectionSizeClass.value);
     return () => {
       const attrsRecord = attrs;

package/dist/{chunk-L6W3XL3A.js → chunk-TZDNF5SK.js}

@@ -3,10 +3,10 @@
 var _chunk6FXYRDYHjs = require('./chunk-6FXYRDYH.js');
 
 
-var _chunk4VLNT2EDjs = require('./chunk-4VLNT2ED.js');
+var _chunkHA5QZ76Mjs = require('./chunk-HA5QZ76M.js');
 
 
-var _chunk2KDSHEZTjs = require('./chunk-2KDSHEZT.js');
+var _chunkBPAZBRCRjs = require('./chunk-BPAZBRCR.js');
 
 
 var _chunkTGHB5XSTjs = require('./chunk-TGHB5XST.js');
@@ -180,7 +180,7 @@ var CommentThread = _vue.defineComponent.call(void 0, {
         const likeCount = node.likes ? ` ${node.likes}` : "";
         actions.push(
           _vue.h.call(void 0, 
-            _chunk4VLNT2EDjs.Button,
+            _chunkHA5QZ76Mjs.Button,
             {
               key: "like",
               size: "sm",
@@ -214,7 +214,7 @@ var CommentThread = _vue.defineComponent.call(void 0, {
       if (props.showReply) {
         actions.push(
           _vue.h.call(void 0, 
-            _chunk4VLNT2EDjs.Button,
+            _chunkHA5QZ76Mjs.Button,
             {
               key: "reply",
               size: "sm",
@@ -252,7 +252,7 @@ var CommentThread = _vue.defineComponent.call(void 0, {
       if (props.showMore) {
         actions.push(
           _vue.h.call(void 0, 
-            _chunk4VLNT2EDjs.Button,
+            _chunkHA5QZ76Mjs.Button,
             {
               key: "more",
               size: "sm",
@@ -289,7 +289,7 @@ var CommentThread = _vue.defineComponent.call(void 0, {
           const actionKey = _nullishCoalesce(action.key, () => ( `${node.id}-action-${index}`));
           actions.push(
             _vue.h.call(void 0, 
-              _chunk4VLNT2EDjs.Button,
+              _chunkHA5QZ76Mjs.Button,
               {
                 key: actionKey,
                 size: "sm",
@@ -340,13 +340,13 @@ var CommentThread = _vue.defineComponent.call(void 0, {
                   { default: () => _optionalChain([node, 'access', _9 => _9.user, 'optionalAccess', _10 => _10.title]) }
                 ) : null,
                 node.tag ? _vue.h.call(void 0, 
-                  _chunk2KDSHEZTjs.Tag,
+                  _chunkBPAZBRCRjs.Tag,
                   { size: "sm", variant: _nullishCoalesce(node.tag.variant, () => ( "default")), className: "rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase border border-current bg-opacity-10" },
                   { default: () => _optionalChain([node, 'access', _11 => _11.tag, 'optionalAccess', _12 => _12.label]) }
                 ) : null,
                 ...(_nullishCoalesce(node.tags, () => ( []))).map(
                   (tag, index) => _vue.h.call(void 0, 
-                    _chunk2KDSHEZTjs.Tag,
+                    _chunkBPAZBRCRjs.Tag,
                     {
                       key: `${node.id}-tag-${index}`,
                       size: "sm",
@@ -387,7 +387,7 @@ var CommentThread = _vue.defineComponent.call(void 0, {
                   }),
                   _vue.h.call(void 0, "div", { class: "flex items-center gap-2 justify-end" }, [
                     _vue.h.call(void 0, 
-                      _chunk4VLNT2EDjs.Button,
+                      _chunkHA5QZ76Mjs.Button,
                       {
                         size: "sm",
                         variant: "ghost",
@@ -400,7 +400,7 @@ var CommentThread = _vue.defineComponent.call(void 0, {
                       { default: () => props.cancelReplyText }
                     ),
                     _vue.h.call(void 0, 
-                      _chunk4VLNT2EDjs.Button,
+                      _chunkHA5QZ76Mjs.Button,
                       {
                         size: "sm",
                         variant: "primary",
@@ -413,7 +413,7 @@ var CommentThread = _vue.defineComponent.call(void 0, {
                 ]
               ) : null,
               hasChildren ? _vue.h.call(void 0, 
-                _chunk4VLNT2EDjs.Button,
+                _chunkHA5QZ76Mjs.Button,
                 {
                   size: "sm",
                   variant: "ghost",
@@ -437,7 +437,7 @@ var CommentThread = _vue.defineComponent.call(void 0, {
                     (child, index) => renderNode(child, depth + 1, index === visibleChildren.length - 1)
                   ),
                   showLoadMore ? _vue.h.call(void 0, 
-                    _chunk4VLNT2EDjs.Button,
+                    _chunkHA5QZ76Mjs.Button,
                     {
                       size: "sm",
                       variant: "ghost",

package/dist/{chunk-XGXGAK27.js → chunk-UG6O4F2A.js}

@@ -34,6 +34,15 @@ var Card = _vue.defineComponent.call(void 0, {
       type: String,
       default: "md"
     },
+    /**
+     * Padding override for the card content sections. `false` removes the
+     * built-in padding; a string supplies a custom padding utility class.
+     * Takes precedence over `size`.
+     */
+    padding: {
+      type: [Boolean, String],
+      default: void 0
+    },
     /**
      * Whether the card is hoverable (shows hover effect)
      * @default false
@@ -80,15 +89,16 @@ var Card = _vue.defineComponent.call(void 0, {
     }
   },
   setup(props, { slots, attrs }) {
+    const paddingClass = _vue.computed.call(void 0, () => _tigercatcore.resolveCardPadding.call(void 0, props.size, props.padding));
     const cardClasses = _vue.computed.call(void 0, 
       () => _tigercatcore.classNames.call(void 0, 
         _tigercatcore.getCardClasses.call(void 0, props.variant, props.hoverable),
         _tigercatcore.cardDirectionClasses[props.direction],
-        !props.cover && _tigercatcore.cardSizeClasses[props.size]
+        !props.cover && paddingClass.value
       )
     );
     const isHorizontal = _vue.computed.call(void 0, () => props.direction === "horizontal");
-    const sectionSizeClass = _vue.computed.call(void 0, () => props.cover ? _tigercatcore.cardSizeClasses[props.size] : void 0);
+    const sectionSizeClass = _vue.computed.call(void 0, () => props.cover ? paddingClass.value : void 0);
     const getSectionClasses = (baseClasses) => _tigercatcore.classNames.call(void 0, baseClasses, sectionSizeClass.value);
     return () => {
       const attrsRecord = attrs;

package/dist/{chunk-LBGTABIU.mjs → chunk-VCBBWDOV.mjs}

@@ -134,7 +134,9 @@ var Timeline = defineComponent({
         contentChildren.push(h("div", { class: timelineLabelClasses }, item.label));
       }
       if (item.content) {
-        contentChildren.push(h("div", { class: timelineDescriptionClasses }, item.content));
+        contentChildren.push(
+          h("div", { class: timelineDescriptionClasses }, item.content)
+        );
       }
       return h("li", { key, class: itemClasses }, [
         h("div", { class: tailClasses }),

package/dist/{chunk-JE7AWY34.js → chunk-W5GVB54A.js}

@@ -49,6 +49,7 @@ var _vue = require('vue');
 
 
 
+
 
 
 var _tigercatcore = require('@expcat/tigercat-core');
@@ -443,26 +444,36 @@ var MenuItem = _vue.defineComponent.call(void 0, {
     return () => {
       const children = [];
       const effectiveCollapsed = _nullishCoalesce(props.collapsed, () => ( (menuContext ? menuContext.collapsed.value : false)));
+      const iconClasses = effectiveCollapsed ? _tigercatcore.menuCollapsedIconClasses : _tigercatcore.menuItemIconClasses;
       if (props.icon) {
         if (typeof props.icon === "string") {
           children.push(
             _vue.h.call(void 0, "span", {
-              class: _tigercatcore.menuItemIconClasses,
+              class: iconClasses,
               innerHTML: props.icon
             })
           );
         } else {
-          children.push(_vue.h.call(void 0, "span", { class: _tigercatcore.menuItemIconClasses }, props.icon));
+          children.push(_vue.h.call(void 0, "span", { class: iconClasses }, props.icon));
         }
       }
       if (!effectiveCollapsed && slots.default) {
         children.push(_vue.h.call(void 0, "span", { class: "flex-1" }, slots.default()));
-      } else if (effectiveCollapsed && !props.icon && slots.default) {
-        const defaultSlot = slots.default();
-        if (defaultSlot && defaultSlot.length > 0) {
-          const text = String(defaultSlot[0].children || "");
-          children.push(_vue.h.call(void 0, "span", { class: "flex-1 text-center" }, text.charAt(0).toUpperCase()));
+      } else if (effectiveCollapsed && slots.default) {
+        if (!props.icon) {
+          const defaultSlot = slots.default();
+          if (defaultSlot && defaultSlot.length > 0) {
+            const text = String(defaultSlot[0].children || "");
+            children.push(
+              _vue.h.call(void 0, 
+                "span",
+                { class: "flex-1 text-center", "aria-hidden": "true" },
+                text.charAt(0).toUpperCase()
+              )
+            );
+          }
         }
+        children.push(_vue.h.call(void 0, "span", { class: "sr-only" }, slots.default()));
       }
       return _vue.h.call(void 0, 
         "li",
@@ -872,16 +883,17 @@ var SubMenu = _vue.defineComponent.call(void 0, {
     return () => {
       if (!menuContext) return null;
       const titleChildren = [];
+      const submenuIconClasses = effectiveCollapsed.value ? _tigercatcore.menuCollapsedIconClasses : _tigercatcore.menuItemIconClasses;
       if (props.icon) {
         if (typeof props.icon === "string") {
           titleChildren.push(
             _vue.h.call(void 0, "span", {
-              class: _tigercatcore.menuItemIconClasses,
+              class: submenuIconClasses,
               innerHTML: props.icon
             })
           );
         } else {
-          titleChildren.push(_vue.h.call(void 0, "span", { class: _tigercatcore.menuItemIconClasses }, props.icon));
+          titleChildren.push(_vue.h.call(void 0, "span", { class: submenuIconClasses }, props.icon));
         }
       }
       if (!effectiveCollapsed.value) {
@@ -889,10 +901,17 @@ var SubMenu = _vue.defineComponent.call(void 0, {
         if (menuContext.mode.value !== "horizontal" && !isPopup.value) {
           titleChildren.push(ExpandIcon(isExpanded.value));
         }
-      } else if (!props.icon) {
-        titleChildren.push(
-          _vue.h.call(void 0, "span", { class: "flex-1 text-center" }, props.title.charAt(0).toUpperCase())
-        );
+      } else {
+        if (!props.icon) {
+          titleChildren.push(
+            _vue.h.call(void 0, 
+              "span",
+              { class: "flex-1 text-center", "aria-hidden": "true" },
+              props.title.charAt(0).toUpperCase()
+            )
+          );
+        }
+        titleChildren.push(_vue.h.call(void 0, "span", { class: "sr-only" }, props.title));
       }
       const titleNode = _vue.h.call(void 0, 
         "button",

package/dist/{chunk-VWEH6TGR.mjs → chunk-W6VKVYWZ.mjs}

@@ -1,6 +1,12 @@
 import {
   ImagePreview
 } from "./chunk-KY3O3FWK.mjs";
+import {
+  useFloatingPopup
+} from "./chunk-M4EP4OVR.mjs";
+import {
+  renderVueBodyTeleport
+} from "./chunk-BDTPFPSB.mjs";
 
 // src/components/Image.ts
 import {
@@ -37,6 +43,10 @@ var Image = defineComponent({
     fit: { type: String, default: "cover" },
     fallbackSrc: { type: String, default: void 0 },
     preview: { type: Boolean, default: true },
+    previewTrigger: {
+      type: String,
+      default: "click"
+    },
     lazy: { type: Boolean, default: false },
     className: { type: String, default: void 0 },
     style: {
@@ -53,6 +63,35 @@ var Image = defineComponent({
     const previewVisible = ref(false);
     let observer = null;
     const group = inject(IMAGE_GROUP_INJECTION_KEY, null);
+    const hoverPreviewEnabled = computed(
+      () => props.preview && props.previewTrigger === "hover" && !group
+    );
+    const clickPreviewEnabled = computed(() => props.preview && props.previewTrigger !== "hover");
+    const floatingPopupProps = {
+      get trigger() {
+        return "hover";
+      },
+      get placement() {
+        return "right";
+      },
+      get offset() {
+        return 12;
+      },
+      get disabled() {
+        return !hoverPreviewEnabled.value;
+      }
+    };
+    const {
+      currentVisible: hoverVisible,
+      triggerRef: hoverTriggerRef,
+      floatingRef: hoverFloatingRef,
+      floatingStyles: hoverFloatingStyles,
+      triggerHandlers: hoverTriggerHandlers
+    } = useFloatingPopup({ props: floatingPopupProps, emit });
+    const setContainerRef = (el) => {
+      containerRef.value = el;
+      hoverTriggerRef.value = el;
+    };
     const registeredIndex = ref(-1);
     onMounted(() => {
       if (group && props.src) {
@@ -103,7 +142,7 @@ var Image = defineComponent({
       emit("error");
     };
     const handleClick = () => {
-      if (!props.preview) return;
+      if (!clickPreviewEnabled.value) return;
       if (group) {
         group.openPreview(registeredIndex.value >= 0 ? registeredIndex.value : 0);
       } else {
@@ -193,25 +232,44 @@ var Image = defineComponent({
           emit("preview-open-change", val);
         }
       }) : null;
+      const hoverPreviewEl = hoverPreviewEnabled.value && hoverVisible.value && props.src ? renderVueBodyTeleport(
+        h(
+          "div",
+          {
+            ref: hoverFloatingRef,
+            style: hoverFloatingStyles.value,
+            "aria-hidden": true,
+            class: "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] p-1 shadow-lg"
+          },
+          [
+            h("img", {
+              src: props.src,
+              alt: "",
+              class: "block max-w-[16rem] max-h-[16rem] object-contain"
+            })
+          ]
+        )
+      ) : null;
       return h(
         "div",
         {
           ...forwardedAttrs,
-          ref: containerRef,
+          ref: setContainerRef,
           class: containerClasses.value,
           style: containerStyle.value,
-          role: props.preview ? "button" : void 0,
-          tabindex: props.preview ? 0 : void 0,
-          "aria-label": props.preview ? `Preview ${props.alt || "image"}` : void 0,
+          role: clickPreviewEnabled.value ? "button" : void 0,
+          tabindex: clickPreviewEnabled.value ? 0 : void 0,
+          "aria-label": clickPreviewEnabled.value ? `Preview ${props.alt || "image"}` : void 0,
           onClick: handleClick,
           onKeydown: (e) => {
-            if (props.preview && (e.key === "Enter" || e.key === " ")) {
+            if (clickPreviewEnabled.value && (e.key === "Enter" || e.key === " ")) {
               e.preventDefault();
               handleClick();
             }
-          }
+          },
+          ...hoverPreviewEnabled.value ? hoverTriggerHandlers.value : {}
         },
-        [content, previewEl]
+        [content, previewEl, hoverPreviewEl]
       );
     };
   }

package/dist/{chunk-ROMVD7LS.mjs → chunk-XP6C3MNM.mjs}

@@ -1,6 +1,6 @@
 import {
   DropdownContextKey
-} from "./chunk-VKW2O36D.mjs";
+} from "./chunk-5HNDLUUM.mjs";
 
 // src/components/DropdownItem.ts
 import { defineComponent, inject, computed, h } from "vue";

package/dist/{chunk-PO5GVU4Q.mjs → chunk-YZBQ6IR7.mjs}

@@ -13,7 +13,8 @@ import {
   buttonDangerClasses,
   getButtonVariantClasses,
   getSpinnerSVG,
-  normalizeSvgAttrs
+  normalizeSvgAttrs,
+  warnUnsupportedColorProp
 } from "@expcat/tigercat-core";
 var createLoadingSpinner = () => {
   const spinnerSvg = getSpinnerSVG("spinner");
@@ -108,6 +109,7 @@ var Button = defineComponent({
     });
     const mergedStyle = computed(() => mergeStyleValues(attrs.style, props.style));
     return () => {
+      warnUnsupportedColorProp("Button", attrs);
       const isDisabled = props.disabled || props.loading;
       const iconIsRight = props.iconPosition === "right";
       const loadingNode = props.loading ? h(

package/dist/{chunk-6WM7E6C4.js → chunk-ZONC44YH.js}

@@ -1,6 +1,6 @@
 "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 _chunkPXSV3J2Hjs = require('./chunk-PXSV3J2H.js');
+var _chunkO4V7VULFjs = require('./chunk-O4V7VULF.js');
 
 
 var _chunkBGMAWKWVjs = require('./chunk-BGMAWKWV.js');
@@ -18,7 +18,7 @@ var _chunkBYNMOQBBjs = require('./chunk-BYNMOQBB.js');
 var _chunk2YFXJUBTjs = require('./chunk-2YFXJUBT.js');
 
 
-var _chunk4VLNT2EDjs = require('./chunk-4VLNT2ED.js');
+var _chunkHA5QZ76Mjs = require('./chunk-HA5QZ76M.js');
 
 // src/components/DataTableWithToolbar.ts
 
@@ -143,6 +143,14 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
       type: Array,
       default: void 0
     },
+    cardClassName: {
+      type: [String, Function],
+      default: void 0
+    },
+    renderCard: {
+      type: Function,
+      default: void 0
+    },
     toolbar: {
       type: Object,
       default: void 0
@@ -356,7 +364,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         },
         {
           default: () => _vue.h.call(void 0, 
-            _chunk4VLNT2EDjs.Button,
+            _chunkHA5QZ76Mjs.Button,
             {
               size: "sm",
               variant: "outline",
@@ -411,7 +419,21 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         }
       );
     };
+    const toolbarRenderContext = () => ({
+      searchValue: _nullishCoalesce(searchValue.value, () => ( "")),
+      setSearch: handleSearchChange,
+      submitSearch: handleSearchSubmit,
+      filters: resolvedFilters.value,
+      setFilter: (key, value) => setFilterValue(key, value),
+      selectedKeys: selectedKeys.value,
+      selectedCount: selectedCount.value,
+      hiddenColumnKeys: resolvedHiddenKeys.value,
+      setHiddenColumnKeys: handleHiddenColumnsChange
+    });
     const renderToolbar = () => {
+      if (slots.toolbar) {
+        return slots.toolbar(toolbarRenderContext());
+      }
       if (!hasSearch.value && !hasFilters.value && !hasFiltersExtra.value && !hasBulkActions.value && !hasColumnSettings.value)
         return null;
       const leftNodes = [];
@@ -420,7 +442,12 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         leftNodes.push(
           _vue.h.call(void 0, 
             "div",
-            { class: "flex items-center gap-2 w-full sm:w-auto sm:min-w-[220px] sm:max-w-[320px]" },
+            {
+              class: _tigercatcore.classNames.call(void 0, 
+                "flex items-center gap-2",
+                _nullishCoalesce(_optionalChain([props, 'access', _43 => _43.toolbar, 'optionalAccess', _44 => _44.searchClassName]), () => ( "w-full sm:w-auto sm:min-w-[220px] sm:max-w-[320px]"))
+              )
+            },
             [
               _vue.h.call(void 0, 
                 _chunkBYNMOQBBjs.Input,
@@ -428,7 +455,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
                   type: "search",
                   size: "sm",
                   modelValue: searchValue.value,
-                  placeholder: _nullishCoalesce(_optionalChain([props, 'access', _43 => _43.toolbar, 'optionalAccess', _44 => _44.searchPlaceholder]), () => ( tableLabels.value.searchPlaceholder)),
+                  placeholder: _nullishCoalesce(_optionalChain([props, 'access', _45 => _45.toolbar, 'optionalAccess', _46 => _46.searchPlaceholder]), () => ( tableLabels.value.searchPlaceholder)),
                   "onUpdate:modelValue": (value) => handleSearchChange(String(_nullishCoalesce(value, () => ( "")))),
                   onKeydown: (event) => {
                     if (event.key === "Enter") {
@@ -458,7 +485,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
                 }
               ),
               showButton ? _vue.h.call(void 0, 
-                _chunk4VLNT2EDjs.Button,
+                _chunkHA5QZ76Mjs.Button,
                 {
                   size: "sm",
                   variant: "primary",
@@ -467,7 +494,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
                   disabled: !canSearch.value
                 },
                 {
-                  default: () => _nullishCoalesce(_optionalChain([props, 'access', _45 => _45.toolbar, 'optionalAccess', _46 => _46.searchButtonText]), () => ( tableLabels.value.searchButtonText))
+                  default: () => _nullishCoalesce(_optionalChain([props, 'access', _47 => _47.toolbar, 'optionalAccess', _48 => _48.searchButtonText]), () => ( tableLabels.value.searchButtonText))
                 }
               ) : null
             ]
@@ -475,7 +502,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         );
       }
       if (hasFilters.value) {
-        _optionalChain([props, 'access', _47 => _47.toolbar, 'optionalAccess', _48 => _48.filters, 'optionalAccess', _49 => _49.forEach, 'call', _50 => _50((filter) => {
+        _optionalChain([props, 'access', _49 => _49.toolbar, 'optionalAccess', _50 => _50.filters, 'optionalAccess', _51 => _51.forEach, 'call', _52 => _52((filter) => {
           const currentValue = resolvedFilters.value[filter.key];
           const clearable = filter.clearable !== false;
           if (filter.render) {
@@ -489,14 +516,22 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
             leftNodes.push(
               _vue.h.call(void 0, 
                 "div",
-                { key: filter.key, class: "w-full sm:w-auto" },
+                {
+                  key: filter.key,
+                  class: _nullishCoalesce(filter.itemClass, () => ( "w-full sm:w-auto")),
+                  style: filter.itemStyle
+                },
                 filterNode == null ? [] : [filterNode]
               )
             );
             return;
           }
           leftNodes.push(
-            _vue.h.call(void 0, "div", { key: filter.key, class: "w-full sm:w-auto sm:min-w-[120px] sm:max-w-[180px]" }, [
+            _vue.h.call(void 0, "div", {
+              key: filter.key,
+              class: _nullishCoalesce(filter.itemClass, () => ( "w-full sm:w-auto sm:min-w-[120px] sm:max-w-[180px]")),
+              style: filter.itemStyle
+            }, [
               _vue.h.call(void 0, _chunkBGMAWKWVjs.Select, {
                 size: "sm",
                 options: (_nullishCoalesce(filter.options, () => ( []))).map((opt) => ({
@@ -514,11 +549,11 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
           );
         })]);
       }
-      const filtersExtra = _optionalChain([slots, 'access', _51 => _51["filters-extra"], 'optionalCall', _52 => _52({
+      const filtersExtra = _optionalChain([slots, 'access', _53 => _53["filters-extra"], 'optionalCall', _54 => _54({
         filters: resolvedFilters.value,
         setFilter: (key, value) => setFilterValue(key, value)
       })]);
-      if (_optionalChain([filtersExtra, 'optionalAccess', _53 => _53.length])) {
+      if (_optionalChain([filtersExtra, 'optionalAccess', _55 => _55.length])) {
         leftNodes.push(...filtersExtra);
       }
       const bulkChildren = [];
@@ -544,10 +579,10 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
           );
         }
         ;
-        (_nullishCoalesce(_optionalChain([props, 'access', _54 => _54.toolbar, 'optionalAccess', _55 => _55.bulkActions]), () => ( []))).forEach((action) => {
+        (_nullishCoalesce(_optionalChain([props, 'access', _56 => _56.toolbar, 'optionalAccess', _57 => _57.bulkActions]), () => ( []))).forEach((action) => {
           bulkChildren.push(
             _vue.h.call(void 0, 
-              _chunk4VLNT2EDjs.Button,
+              _chunkHA5QZ76Mjs.Button,
               {
                 key: action.key,
                 size: "sm",
@@ -565,8 +600,10 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         {
           class: _tigercatcore.classNames.call(void 0, 
             "tiger-data-table-toolbar flex flex-wrap items-center gap-3",
-            props.bordered ? "bg-[var(--tiger-surface-muted,#f9fafb)] dark:bg-gray-800/10 px-4 py-3.5 border-b border-[var(--tiger-border,#e5e7eb)]" : "bg-[var(--tiger-surface-muted,#f9fafb)]/80 dark:bg-gray-800/30 px-4 py-3.5 border border-[var(--tiger-border,#e5e7eb)] rounded-[var(--tiger-radius-md,0.5rem)] shadow-sm"
+            props.bordered ? "bg-[var(--tiger-surface-muted,#f9fafb)] dark:bg-gray-800/10 px-4 py-3.5 border-b border-[var(--tiger-border,#e5e7eb)]" : "bg-[var(--tiger-surface-muted,#f9fafb)]/80 dark:bg-gray-800/30 px-4 py-3.5 border border-[var(--tiger-border,#e5e7eb)] rounded-[var(--tiger-radius-md,0.5rem)] shadow-sm",
+            _optionalChain([props, 'access', _58 => _58.toolbar, 'optionalAccess', _59 => _59.className])
           ),
+          style: _optionalChain([props, 'access', _60 => _60.toolbar, 'optionalAccess', _61 => _61.style]),
           role: "toolbar",
           "aria-label": tableLabels.value.toolbarAriaLabel
         },
@@ -613,10 +650,17 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         responsiveMode: props.responsiveMode,
         cardBreakpoint: props.cardBreakpoint,
         cardLayout: props.cardLayout,
+        cardClassName: props.cardClassName,
+        renderCard: props.renderCard,
         class: props.bordered ? "border-none rounded-none shadow-none" : void 0,
         onSelectionChange: (keys) => emit("selection-change", keys),
         onPageChange: handleTablePageChange
       };
+      const {
+        toolbar: _toolbarSlot,
+        "filters-extra": _filtersExtraSlot,
+        ...tableSlots
+      } = slots;
       return _vue.h.call(void 0, 
         "div",
         {
@@ -624,7 +668,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
           style: wrapperStyle.value,
           "data-tiger-data-table-with-toolbar": ""
         },
-        [renderToolbar(), _vue.h.call(void 0, _chunkPXSV3J2Hjs.Table, tableProps)]
+        [renderToolbar(), _vue.h.call(void 0, _chunkO4V7VULFjs.Table, tableProps, tableSlots)]
       );
     };
   }

package/dist/components/ActivityFeed.js

@@ -1,17 +1,17 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkWIQPVVUQjs = require('../chunk-WIQPVVUQ.js');
-require('../chunk-27T3QDSF.js');
+var _chunkNYR6OQO4js = require('../chunk-NYR6OQO4.js');
+require('../chunk-RBHF7NOQ.js');
 require('../chunk-6XI4VDU4.js');
 require('../chunk-2DC3BMED.js');
 require('../chunk-EQW6IUHG.js');
-require('../chunk-2KDSHEZT.js');
+require('../chunk-BPAZBRCR.js');
 require('../chunk-TGHB5XST.js');
-require('../chunk-XGXGAK27.js');
+require('../chunk-UG6O4F2A.js');
 require('../chunk-Z6HBM73W.js');
 require('../chunk-ODQOYMUQ.js');
 
 
 
-exports.ActivityFeed = _chunkWIQPVVUQjs.ActivityFeed; exports.default = _chunkWIQPVVUQjs.ActivityFeed_default;
+exports.ActivityFeed = _chunkNYR6OQO4js.ActivityFeed; exports.default = _chunkNYR6OQO4js.ActivityFeed_default;