@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/{chunk-YZM7I5AM.mjs → chunk-P2ASDGNV.mjs}

@@ -1,4 +1,4 @@
-import { useChartInteraction } from './chunk-264DR3I2.mjs';
+import { useChartInteraction } from './chunk-DU2NXX75.mjs';
 import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
 import { ChartGrid } from './chunk-MI6TL3CQ.mjs';
 import { ChartLegend } from './chunk-F5HOHSFH.mjs';
@@ -6,7 +6,7 @@ import { ChartSeries } from './chunk-2ZUEXCVJ.mjs';
 import { ChartTooltip } from './chunk-FXGIIFGN.mjs';
 import { ChartAxis } from './chunk-ZWVA7HT3.mjs';
 import { defineComponent, computed, h } from 'vue';
-import { getChartInnerRect, createBandScale, getNumberExtent, createLinearScale, DEFAULT_CHART_COLORS, classNames } from '@expcat/tigercat-core';
+import { getBarGradientPrefix, getChartInnerRect, createBandScale, getNumberExtent, createLinearScale, resolveChartPalette, clampBarWidth, ensureBarMinHeight, buildChartLegendItems, resolveChartTooltipContent, defaultXYTooltipFormatter, getBarValueLabelY, barValueLabelInsideClasses, barValueLabelClasses, classNames, barAnimatedTransition } from '@expcat/tigercat-core';
 
 var BarChart = defineComponent({
   name: "TigerBarChart",
@@ -149,6 +149,35 @@ var BarChart = defineComponent({
     tooltipFormatter: {
       type: Function
     },
+    // Value label props
+    showValueLabels: {
+      type: Boolean,
+      default: false
+    },
+    valueLabelPosition: {
+      type: String,
+      default: "top"
+    },
+    valueLabelFormatter: {
+      type: Function
+    },
+    // Bar constraint props
+    barMinHeight: {
+      type: Number,
+      default: 0
+    },
+    barMaxWidth: {
+      type: Number
+    },
+    // Visual enhancement props
+    gradient: {
+      type: Boolean,
+      default: false
+    },
+    animated: {
+      type: Boolean,
+      default: false
+    },
     // Other
     colors: {
       type: Array
@@ -165,6 +194,7 @@ var BarChart = defineComponent({
   },
   emits: ["update:hoveredIndex", "update:selectedIndex", "bar-click", "bar-hover"],
   setup(props, { emit }) {
+    const gradientPrefix = getBarGradientPrefix();
     const {
       tooltipPosition,
       resolvedHoveredIndex,
@@ -181,9 +211,9 @@ var BarChart = defineComponent({
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
-      hoveredIndexProp: props.hoveredIndex,
+      hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
-      selectedIndexProp: props.selectedIndex,
+      selectedIndexProp: () => props.selectedIndex,
       activeOpacity: computed(() => props.activeOpacity),
       inactiveOpacity: computed(() => props.inactiveOpacity),
       legendPosition: computed(() => props.legendPosition),
@@ -207,22 +237,27 @@ var BarChart = defineComponent({
       const extent = getNumberExtent(yValues.value, { includeZero: true });
       return createLinearScale(extent, [innerRect.value.height, 0]);
     });
-    const showXAxis = computed(() => props.showAxis && props.showXAxis);
-    const showYAxis = computed(() => props.showAxis && props.showYAxis);
-    const palette = computed(
-      () => props.colors && props.colors.length > 0 ? props.colors : props.barColor ? [props.barColor] : [...DEFAULT_CHART_COLORS]
-    );
+    const shouldShowXAxis = computed(() => props.showAxis && props.showXAxis);
+    const shouldShowYAxis = computed(() => props.showAxis && props.showYAxis);
+    const palette = computed(() => resolveChartPalette(props.colors, props.barColor));
     const bars = computed(() => {
       const scale = resolvedXScale.value;
-      const bandWidth = scale.bandwidth ?? (scale.step ? scale.step * 0.7 : innerRect.value.width / Math.max(1, props.data.length) * 0.8);
+      const rawBandWidth = scale.bandwidth ?? (scale.step ? scale.step * 0.7 : innerRect.value.width / Math.max(1, props.data.length) * 0.8);
+      const bandWidth = clampBarWidth(rawBandWidth, props.barMaxWidth);
+      const bandOffset = rawBandWidth > bandWidth ? (rawBandWidth - bandWidth) / 2 : 0;
       const baseline = resolvedYScale.value.map(0);
       return props.data.map((item, index) => {
         const xKey = scale.type === "linear" ? Number(item.x) : String(item.x);
         const xPos = scale.map(xKey);
-        const barX = scale.bandwidth ? xPos : xPos - bandWidth / 2;
+        const barX = (scale.bandwidth ? xPos : xPos - rawBandWidth / 2) + bandOffset;
         const barYValue = resolvedYScale.value.map(item.y);
-        const barHeight = Math.abs(baseline - barYValue);
-        const barY = Math.min(baseline, barYValue);
+        let barHeight = Math.abs(baseline - barYValue);
+        let barY = Math.min(baseline, barYValue);
+        if (props.barMinHeight > 0 && barHeight > 0) {
+          const clamped = ensureBarMinHeight(barY, barHeight, baseline, props.barMinHeight);
+          barY = clamped.y;
+          barHeight = clamped.height;
+        }
         const color = item.color ?? palette.value[index % palette.value.length];
         const opacity = getElementOpacity(index);
         return {
@@ -232,30 +267,76 @@ var BarChart = defineComponent({
           height: barHeight,
           color,
           opacity,
-          datum: item
+          datum: item,
+          index
         };
       });
     });
     const legendItems = computed(
-      () => props.data.map((item, index) => ({
-        index,
-        label: item.label ?? String(item.x),
-        color: item.color ?? palette.value[index % palette.value.length],
-        active: activeIndex.value === null || activeIndex.value === index
-      }))
-    );
-    const formatTooltip = computed(
-      () => props.tooltipFormatter ?? ((datum) => {
-        const label = datum.label ?? String(datum.x);
-        return `${label}: ${datum.y}`;
+      () => buildChartLegendItems({
+        data: props.data,
+        palette: palette.value,
+        activeIndex: activeIndex.value,
+        getLabel: (d) => d.label ?? String(d.x),
+        getColor: (d, i) => d.color ?? palette.value[i % palette.value.length]
       })
     );
-    const tooltipContent = computed(() => {
-      if (resolvedHoveredIndex.value === null) return "";
-      const datum = props.data[resolvedHoveredIndex.value];
-      return datum ? formatTooltip.value(datum, resolvedHoveredIndex.value) : "";
-    });
+    const tooltipContent = computed(
+      () => resolveChartTooltipContent(
+        resolvedHoveredIndex.value,
+        props.data,
+        props.tooltipFormatter,
+        defaultXYTooltipFormatter
+      )
+    );
     return () => {
+      const gradientDefs = props.gradient ? h(
+        "defs",
+        null,
+        bars.value.map(
+          (bar, index) => h(
+            "linearGradient",
+            {
+              id: `${gradientPrefix}-${index}`,
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: "1"
+            },
+            [
+              h("stop", {
+                offset: "0%",
+                "stop-color": bar.color,
+                "stop-opacity": "0.65"
+              }),
+              h("stop", {
+                offset: "100%",
+                "stop-color": bar.color,
+                "stop-opacity": "1"
+              })
+            ]
+          )
+        )
+      ) : null;
+      const valueLabels = props.showValueLabels && bars.value.length > 0 ? bars.value.map((bar, index) => {
+        const labelText = props.valueLabelFormatter ? props.valueLabelFormatter(bar.datum, index) : String(bar.datum.y);
+        const labelY = getBarValueLabelY(bar.y, bar.height, props.valueLabelPosition, 8);
+        const isInside = props.valueLabelPosition === "inside";
+        return h(
+          "text",
+          {
+            key: `label-${index}`,
+            x: bar.x + bar.width / 2,
+            y: labelY,
+            "text-anchor": "middle",
+            "dominant-baseline": isInside ? "central" : "auto",
+            class: isInside ? barValueLabelInsideClasses : barValueLabelClasses,
+            opacity: bar.opacity,
+            "data-value-label": ""
+          },
+          labelText
+        );
+      }) : [];
       const chart = h(
         ChartCanvas,
         {
@@ -268,6 +349,7 @@ var BarChart = defineComponent({
         },
         {
           default: () => [
+            gradientDefs,
             props.showGrid ? h(ChartGrid, {
               xScale: resolvedXScale.value,
               yScale: resolvedYScale.value,
@@ -279,7 +361,7 @@ var BarChart = defineComponent({
               lineStyle: props.gridLineStyle,
               strokeWidth: props.gridStrokeWidth
             }) : null,
-            showXAxis.value ? h(ChartAxis, {
+            shouldShowXAxis.value ? h(ChartAxis, {
               scale: resolvedXScale.value,
               orientation: "bottom",
               y: innerRect.value.height,
@@ -288,7 +370,7 @@ var BarChart = defineComponent({
               tickFormat: props.xTickFormat,
               label: props.xAxisLabel
             }) : null,
-            showYAxis.value ? h(ChartAxis, {
+            shouldShowYAxis.value ? h(ChartAxis, {
               scale: resolvedYScale.value,
               orientation: "left",
               ticks: props.yTicks,
@@ -312,11 +394,13 @@ var BarChart = defineComponent({
                     height: bar.height,
                     rx: props.barRadius,
                     ry: props.barRadius,
-                    fill: bar.color,
+                    fill: props.gradient ? `url(#${gradientPrefix}-${index})` : bar.color,
                     opacity: bar.opacity,
                     class: classNames(
-                      (props.hoverable || props.selectable) && "cursor-pointer transition-opacity duration-150"
+                      "transition-[opacity,filter] duration-200",
+                      (props.hoverable || props.selectable) && "cursor-pointer hover:brightness-110"
                     ),
+                    style: props.animated ? barAnimatedTransition : void 0,
                     tabindex: props.selectable ? 0 : void 0,
                     role: props.selectable ? "button" : "img",
                     "aria-label": bar.datum.label ?? String(bar.datum.x),
@@ -329,7 +413,8 @@ var BarChart = defineComponent({
                   })
                 )
               }
-            )
+            ),
+            ...valueLabels
           ].filter(Boolean)
         }
       );

package/dist/{chunk-25P4HFCO.mjs → chunk-P47EXOAW.mjs}

@@ -1,5 +1,5 @@
-import { Button } from './chunk-YMIO4A2U.mjs';
-import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, h, Teleport } from 'vue';
+import { Button } from './chunk-D6MR5YRE.mjs';
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, nextTick, h, Teleport } from 'vue';
 import { getModalContentClasses, getModalContainerClasses, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap, classNames, coerceClassValue, mergeStyleValues, modalHeaderClasses, modalTitleClasses, resolveLocaleText, modalCloseButtonClasses, modalBodyClasses, modalFooterClasses, modalWrapperClasses, modalMaskClasses, getFocusableElements, getFocusTrapNavigation } from '@expcat/tigercat-core';
 
 var modalIdCounter = 0;
@@ -145,27 +145,16 @@ var Modal = defineComponent({
   emits: ["update:visible", "close", "cancel", "ok"],
   setup(props, { slots, emit, attrs }) {
     const instanceId = ref(createModalId());
-    const hasBeenOpened = ref(false);
+    const hasBeenOpened = ref(props.visible);
     const dialogRef = ref(null);
     const closeButtonRef = ref(null);
     const previousActiveElement = ref(null);
     const titleId = computed(() => `${instanceId.value}-title`);
     const shouldRender = computed(() => {
-      if (props.visible) {
-        hasBeenOpened.value = true;
-        return true;
-      }
+      if (props.visible) return true;
       if (props.destroyOnClose) return false;
       return hasBeenOpened.value;
     });
-    watch(
-      () => props.visible,
-      (newVal) => {
-        if (!newVal) {
-          emit("close");
-        }
-      }
-    );
     const handleClose = () => {
       emit("update:visible", false);
       emit("cancel");
@@ -203,14 +192,16 @@ var Modal = defineComponent({
       () => props.visible,
       async (nextVisible) => {
         if (nextVisible) {
+          hasBeenOpened.value = true;
           const active = document.activeElement;
           previousActiveElement.value = active instanceof HTMLElement ? active : null;
           await nextTick();
           const el = closeButtonRef.value ?? dialogRef.value;
           el?.focus?.();
-          return;
+        } else {
+          emit("close");
+          previousActiveElement.value?.focus?.();
         }
-        previousActiveElement.value?.focus?.();
       }
     );
     const contentClasses = computed(() => {

package/dist/{chunk-ZLMJ3SZQ.js → chunk-PCGHIFIJ.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkIK3ZLVPR_js = require('./chunk-IK3ZLVPR.js');
+var chunkVTLTKTCK_js = require('./chunk-VTLTKTCK.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -65,11 +65,11 @@ var BreadcrumbItem = vue.defineComponent({
     click: (event) => event instanceof MouseEvent
   },
   setup(props, { slots, emit, attrs }) {
-    const breadcrumbContext = vue.inject(chunkIK3ZLVPR_js.BreadcrumbContextKey, {
+    const breadcrumbContext = vue.inject(chunkVTLTKTCK_js.BreadcrumbContextKey, {
       separator: "/"
     });
     const itemClasses = vue.computed(() => {
-      return tigercatCore.getBreadcrumbItemClasses(props.current, props.className);
+      return tigercatCore.getBreadcrumbItemClasses(props.className);
     });
     const linkClasses = vue.computed(() => {
       return tigercatCore.getBreadcrumbLinkClasses(props.current);
@@ -103,7 +103,6 @@ var BreadcrumbItem = vue.defineComponent({
           href: props.href,
           target: props.target,
           rel: computedRel.value,
-          "aria-current": props.current ? "page" : void 0,
           onClick: handleClick
         },
         contentElements

package/dist/{chunk-HOJP5HTJ.js → chunk-PICYE2CM.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkWEFTEDUS_js = require('./chunk-WEFTEDUS.js');
+var chunkO2SABM5H_js = require('./chunk-O2SABM5H.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -46,7 +46,7 @@ var MenuItem = vue.defineComponent({
   },
   inheritAttrs: false,
   setup(props, { slots, attrs }) {
-    const menuContext = vue.inject(chunkWEFTEDUS_js.MenuContextKey);
+    const menuContext = vue.inject(chunkO2SABM5H_js.MenuContextKey);
     if (!menuContext) {
       console.warn("MenuItem must be used within Menu component");
     }
@@ -60,18 +60,18 @@ var MenuItem = vue.defineComponent({
           "flex items-center px-4 py-2 cursor-pointer transition-colors duration-200"
         );
       }
-      const effectiveCollapsed = props.collapsed ?? (menuContext ? menuContext.collapsed : false);
+      const effectiveCollapsed = props.collapsed ?? menuContext.collapsed.value;
       return tigercatCore.classNames(
-        tigercatCore.getMenuItemClasses(isSelected.value, props.disabled, menuContext.theme, effectiveCollapsed),
+        tigercatCore.getMenuItemClasses(isSelected.value, props.disabled, menuContext.theme.value, effectiveCollapsed),
         props.className,
         tigercatCore.coerceClassValue(attrs.class)
       );
     });
     const indentStyle = vue.computed(() => {
-      if (!menuContext || menuContext.mode !== "inline" || props.level === 0) {
+      if (!menuContext || menuContext.mode.value !== "inline" || props.level === 0) {
         return {};
       }
-      return tigercatCore.getMenuItemIndent(props.level, menuContext.inlineIndent);
+      return tigercatCore.getMenuItemIndent(props.level, menuContext.inlineIndent.value);
     });
     const itemStyle = vue.computed(() => tigercatCore.mergeStyleValues(attrs.style, props.style, indentStyle.value));
     const passthroughAttrs = vue.computed(() => {
@@ -83,65 +83,32 @@ var MenuItem = vue.defineComponent({
         menuContext.handleSelect(props.itemKey);
       }
     };
-    const getMenuButtonsWithin = (menuEl) => {
-      return Array.from(
-        menuEl.querySelectorAll('button[data-tiger-menuitem="true"]')
-      ).filter((el) => !el.disabled);
-    };
-    const roveFocus = (current, next) => {
-      const menuEl = current.closest('ul[role="menu"]');
-      if (!menuEl) {
-        next.focus();
-        return;
-      }
-      const items = getMenuButtonsWithin(menuEl);
-      items.forEach((el) => {
-        el.tabIndex = el === next ? 0 : -1;
-      });
-      next.focus();
-    };
-    const moveFocus = (current, delta) => {
-      const menuEl = current.closest('ul[role="menu"]');
-      if (!menuEl) return;
-      const items = getMenuButtonsWithin(menuEl);
-      const currentIndex = items.indexOf(current);
-      if (currentIndex < 0) return;
-      const nextIndex = (currentIndex + delta + items.length) % items.length;
-      roveFocus(current, items[nextIndex]);
-    };
-    const focusEdge = (current, edge) => {
-      const menuEl = current.closest('ul[role="menu"]');
-      if (!menuEl) return;
-      const items = getMenuButtonsWithin(menuEl);
-      if (items.length === 0) return;
-      roveFocus(current, edge === "start" ? items[0] : items[items.length - 1]);
-    };
     const handleKeyDown = (event) => {
       if (!menuContext) return;
       const current = event.currentTarget;
       const rootMenu = current.closest('ul[role="menu"]');
       const isRoot = rootMenu?.dataset.tigerMenuRoot === "true";
-      const isHorizontalRoot = isRoot && menuContext.mode === "horizontal";
+      const isHorizontalRoot = isRoot && menuContext.mode.value === "horizontal";
       const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
       const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
       if (event.key === nextKey) {
         event.preventDefault();
-        moveFocus(current, 1);
+        tigercatCore.moveFocusInMenu(current, 1);
         return;
       }
       if (event.key === prevKey) {
         event.preventDefault();
-        moveFocus(current, -1);
+        tigercatCore.moveFocusInMenu(current, -1);
         return;
       }
       if (event.key === "Home") {
         event.preventDefault();
-        focusEdge(current, "start");
+        tigercatCore.focusMenuEdge(current, "start");
         return;
       }
       if (event.key === "End") {
         event.preventDefault();
-        focusEdge(current, "end");
+        tigercatCore.focusMenuEdge(current, "end");
         return;
       }
       if (event.key === "Enter" || event.key === " ") {
@@ -151,7 +118,7 @@ var MenuItem = vue.defineComponent({
     };
     return () => {
       const children = [];
-      const effectiveCollapsed = props.collapsed ?? (menuContext ? menuContext.collapsed : false);
+      const effectiveCollapsed = props.collapsed ?? (menuContext ? menuContext.collapsed.value : false);
       if (props.icon) {
         if (typeof props.icon === "string") {
           children.push(

package/dist/chunk-PNKVD2UK.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+exports.__esm = __esm;
+exports.__export = __export;
+exports.__toCommonJS = __toCommonJS;

package/dist/{chunk-F6TZCXCL.js → chunk-PQMZ3YN3.js}

@@ -8,79 +8,42 @@ var Badge = vue.defineComponent({
   name: "TigerBadge",
   inheritAttrs: false,
   props: {
-    /**
-     * Badge variant style
-     * @default 'danger'
-     */
     variant: {
       type: String,
       default: "danger"
     },
-    /**
-     * Badge size
-     * @default 'md'
-     */
     size: {
       type: String,
       default: "md"
     },
-    /**
-     * Badge display type
-     * @default 'number'
-     */
     type: {
       type: String,
       default: "number"
     },
-    /**
-     * Badge content (number or text)
-     */
     content: {
       type: [Number, String],
       default: void 0
     },
-    /**
-     * Maximum count to display (only for type='number')
-     * @default 99
-     */
     max: {
       type: Number,
       default: 99
     },
-    /**
-     * Whether to show zero count
-     * @default false
-     */
     showZero: {
       type: Boolean,
       default: false
     },
-    /**
-     * Badge position when used as wrapper
-     * @default 'top-right'
-     */
     position: {
       type: String,
       default: "top-right"
     },
-    /**
-     * Whether badge is standalone or wrapping content
-     * @default true
-     */
     standalone: {
       type: Boolean,
       default: true
     },
-    /**
-     * Additional CSS classes
-     */
     className: {
       type: String,
       default: void 0
     },
-    /**
-     * Custom styles
-     */
     style: {
       type: Object,
       default: void 0
@@ -92,33 +55,31 @@ var Badge = vue.defineComponent({
     const displayContent = vue.computed(
       () => tigercatCore.formatBadgeContent(props.content, props.max, props.showZero)
     );
-    const badgeClasses = vue.computed(() => {
-      const sizeClass = isDot.value ? tigercatCore.dotSizeClasses[props.size] : tigercatCore.badgeSizeClasses[props.size];
-      return tigercatCore.classNames(
+    const badgeClasses = vue.computed(
+      () => tigercatCore.classNames(
         tigercatCore.badgeBaseClasses,
         tigercatCore.getBadgeVariantClasses(props.variant),
-        sizeClass,
+        isDot.value ? tigercatCore.dotSizeClasses[props.size] : tigercatCore.badgeSizeClasses[props.size],
         tigercatCore.badgeTypeClasses[props.type],
         !props.standalone && tigercatCore.badgePositionClasses[props.position]
-      );
-    });
+      )
+    );
     return () => {
       if (isHidden.value) {
-        if (props.standalone) {
-          return null;
-        }
-        return slots.default ? slots.default() : null;
+        return props.standalone ? null : slots.default?.() ?? null;
       }
       const attrsRecord = attrs;
-      const attrsClass = attrsRecord.class;
-      const attrsStyle = attrsRecord.style;
       const ariaLabel = attrsRecord["aria-label"] ?? (isDot.value ? "notification" : props.type === "number" ? `${displayContent.value} notifications` : `${displayContent.value ?? ""}`);
       const badgeElement = vue.h(
         "span",
         {
           ...attrs,
-          class: tigercatCore.classNames(badgeClasses.value, props.className, tigercatCore.coerceClassValue(attrsClass)),
-          style: tigercatCore.mergeStyleValues(attrsStyle, props.style),
+          class: tigercatCore.classNames(
+            badgeClasses.value,
+            props.className,
+            tigercatCore.coerceClassValue(attrsRecord.class)
+          ),
+          style: tigercatCore.mergeStyleValues(attrsRecord.style, props.style),
           role: "status",
           "aria-label": ariaLabel
         },
@@ -127,18 +88,7 @@ var Badge = vue.defineComponent({
       if (props.standalone) {
         return badgeElement;
       }
-      const children = [];
-      if (slots.default) {
-        children.push(...slots.default());
-      }
-      children.push(badgeElement);
-      return vue.h(
-        "span",
-        {
-          class: tigercatCore.badgeWrapperClasses
-        },
-        children
-      );
+      return vue.h("span", { class: tigercatCore.badgeWrapperClasses }, [...slots.default?.() ?? [], badgeElement]);
     };
   }
 });

package/dist/{chunk-VWPHAKBA.mjs → chunk-PVPLDEC5.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, h } from 'vue';
-import { classNames, layoutRootClasses, coerceClassValue, mergeStyleValues } from '@expcat/tigercat-core';
+import { classNames, layoutRootClasses, coerceClassValue } from '@expcat/tigercat-core';
 
 // src/components/Layout.ts
 var Layout = defineComponent({
@@ -22,21 +22,14 @@ var Layout = defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const attrsRecord = attrs;
     const layoutClasses = computed(
-      () => classNames(layoutRootClasses, props.className, coerceClassValue(attrsRecord.class))
+      () => classNames(
+        layoutRootClasses,
+        props.className,
+        coerceClassValue(attrs.class)
+      )
     );
-    return () => {
-      return h(
-        "div",
-        {
-          ...attrs,
-          class: layoutClasses.value,
-          style: mergeStyleValues(attrsRecord.style, props.style)
-        },
-        slots.default?.()
-      );
-    };
+    return () => h("div", { ...attrs, class: layoutClasses.value, style: props.style }, slots.default?.());
   }
 });
 var Layout_default = Layout;