@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/{chunk-UNQO7EVG.mjs → chunk-KHA3HBEO.mjs}

@@ -1,40 +1,36 @@
 import {
-  useFloatingPopup
-} from "./chunk-PMQSXEMT.mjs";
+  usePopup
+} from "./chunk-OZZKYZD6.mjs";
+import {
+  assignOverlayTriggerRef,
+  renderOverlayTrigger
+} from "./chunk-CMYPAPF2.mjs";
 import {
   renderVueOverlayTeleport
-} from "./chunk-Q7Y22OFX.mjs";
+} from "./chunk-VFRB5L7W.mjs";
 
 // src/components/Tooltip.ts
-import { defineComponent, computed, h } from "vue";
+import { defineComponent, computed, h, useId } from "vue";
 import {
   classNames,
   coerceClassValue,
-  createFloatingIdFactory,
+  getOverlayTriggerAria,
   getTooltipContainerClasses,
   getTooltipTriggerClasses,
   getTooltipContentClasses
 } from "@expcat/tigercat-core";
-var createTooltipId = createFloatingIdFactory("tooltip");
 var Tooltip = defineComponent({
   name: "TigerTooltip",
   inheritAttrs: false,
   props: {
-    /** Whether the tooltip is open (controlled mode) */
     open: { type: Boolean, default: void 0 },
-    /** Default open state (uncontrolled mode) @default false */
     defaultOpen: { type: Boolean, default: false },
-    /** Tooltip content text */
     content: { type: String, default: void 0 },
-    /** Trigger type @default 'hover' */
     trigger: { type: String, default: "hover" },
-    /** Placement @default 'top' */
     placement: { type: String, default: "top" },
-    /** Disabled state @default false */
     disabled: { type: Boolean, default: false },
-    /** Offset in pixels @default 8 */
     offset: { type: Number, default: 8 },
-    /** Additional CSS classes */
+    asChild: { type: Boolean, default: false },
     className: { type: String, default: void 0 },
     style: { type: [String, Object, Array], default: void 0 }
   },
@@ -51,8 +47,8 @@ var Tooltip = defineComponent({
       positioned,
       overlayTarget,
       triggerHandlers
-    } = useFloatingPopup({ props, emit });
-    const tooltipId = createTooltipId();
+    } = usePopup({ props, emit });
+    const tooltipId = `tiger-tooltip-${useId()}`;
     const containerClasses = computed(
       () => classNames(getTooltipContainerClasses(), props.className, coerceClassValue(attrsRecord.class))
     );
@@ -64,9 +60,15 @@ var Tooltip = defineComponent({
       const {
         class: _class,
         style: _style,
+        title: _title,
         ...restAttrs
       } = attrsRecord;
-      const hasTooltipContent = Boolean(props.content || slots.content);
+      const triggerAria = getOverlayTriggerAria({
+        kind: "tooltip",
+        open: currentVisible.value,
+        describedBy: tooltipId,
+        disabled: props.disabled
+      });
       return h(
         "div",
         {
@@ -76,18 +78,15 @@ var Tooltip = defineComponent({
           style: props.style
         },
         [
-          // Trigger element
-          h(
-            "div",
-            {
-              ref: triggerRef,
-              class: triggerClasses.value,
-              "aria-describedby": hasTooltipContent ? tooltipId : void 0,
-              ...triggerHandlers.value
-            },
-            defaultSlot
-          ),
-          // Tooltip content (positioned with Floating UI)
+          renderOverlayTrigger({
+            asChild: props.asChild,
+            child: defaultSlot.length === 1 ? defaultSlot[0] : defaultSlot,
+            setTriggerRef: (el) => assignOverlayTriggerRef(triggerRef, el),
+            className: props.asChild ? void 0 : triggerClasses.value,
+            disabled: props.disabled,
+            aria: triggerAria,
+            handlers: triggerHandlers.value
+          }),
           currentVisible.value ? renderVueOverlayTeleport(
             h(
               "div",
@@ -101,11 +100,7 @@ var Tooltip = defineComponent({
               [
                 h(
                   "div",
-                  {
-                    id: tooltipId,
-                    role: "tooltip",
-                    class: contentClasses.value
-                  },
+                  { id: tooltipId, role: "tooltip", class: contentClasses.value },
                   slots.content ? slots.content() : props.content
                 )
               ]

package/dist/{chunk-626VUZ2Q.mjs → chunk-KIGQEL2O.mjs}

@@ -1,46 +1,43 @@
 import {
-  useFloatingPopup
-} from "./chunk-PMQSXEMT.mjs";
+  usePopup
+} from "./chunk-OZZKYZD6.mjs";
 import {
-  renderVueOverlayTeleport
-} from "./chunk-Q7Y22OFX.mjs";
+  assignOverlayTriggerRef,
+  renderOverlayTrigger
+} from "./chunk-CMYPAPF2.mjs";
+import {
+  renderVueOverlayTeleport,
+  useVueFocusTrap
+} from "./chunk-VFRB5L7W.mjs";
 
 // src/components/Popover.ts
-import { defineComponent, computed, h } from "vue";
+import { defineComponent, computed, h, nextTick, useId, watch } from "vue";
 import {
   classNames,
   coerceClassValue,
-  createFloatingIdFactory,
+  getFocusableElements,
+  getOverlayTriggerAria,
   getPopoverContainerClasses,
-  getPopoverTriggerClasses,
   getPopoverContentClasses,
+  getPopoverContentStyle,
+  getPopoverTriggerClasses,
   POPOVER_TITLE_CLASSES,
   POPOVER_TEXT_CLASSES
 } from "@expcat/tigercat-core";
-var createPopoverId = createFloatingIdFactory("popover");
 var Popover = defineComponent({
   name: "TigerPopover",
   inheritAttrs: false,
   props: {
-    /** Whether the popover is open (controlled mode) */
     open: { type: Boolean, default: void 0 },
-    /** Default open state (uncontrolled mode) */
     defaultOpen: { type: Boolean, default: false },
-    /** Popover title text */
     title: { type: String, default: void 0 },
-    /** Popover content text */
     content: { type: String, default: void 0 },
-    /** Trigger type @default 'click' */
     trigger: { type: String, default: "click" },
-    /** Placement @default 'top' */
     placement: { type: String, default: "top" },
-    /** Disabled state */
     disabled: { type: Boolean, default: false },
-    /** Width (pixel number or Tailwind class) */
-    width: { type: [String, Number], default: void 0 },
-    /** Offset distance in pixels @default 8 */
+    width: { type: [Number, String], default: void 0 },
     offset: { type: Number, default: 8 },
-    /** Additional CSS classes */
+    asChild: { type: Boolean, default: false },
     className: { type: String, default: void 0 },
     style: { type: [String, Object, Array], default: void 0 }
   },
@@ -57,15 +54,29 @@ var Popover = defineComponent({
       positioned,
       overlayTarget,
       triggerHandlers
-    } = useFloatingPopup({ props, emit });
-    const popoverId = createPopoverId();
+    } = usePopup({ props, emit });
+    const trapEnabled = computed(() => currentVisible.value && props.trigger === "click");
+    useVueFocusTrap({ enabled: trapEnabled, containerRef: floatingRef });
+    watch(currentVisible, (visible) => {
+      if (!visible || props.trigger !== "click") return;
+      nextTick(() => {
+        const root = floatingRef.value;
+        if (!root) return;
+        const dialog = root.querySelector('[role="dialog"]') ?? root;
+        const first = getFocusableElements(dialog)[0] ?? dialog;
+        first.focus();
+      });
+    });
+    const popoverId = `tiger-popover-${useId()}`;
     const titleId = `${popoverId}-title`;
     const contentId = `${popoverId}-content`;
     const containerClasses = computed(
       () => classNames(getPopoverContainerClasses(), props.className, coerceClassValue(attrsRecord.class))
     );
     const triggerClasses = computed(() => getPopoverTriggerClasses(props.disabled));
-    const contentClasses = computed(() => getPopoverContentClasses(props.width));
+    const hasCustomWidth = computed(() => Boolean(getPopoverContentStyle(props.width)));
+    const contentClasses = computed(() => getPopoverContentClasses(hasCustomWidth.value));
+    const contentStyle = computed(() => getPopoverContentStyle(props.width));
     return () => {
       const triggerSlotContent = slots.trigger ? slots.trigger({ open: currentVisible.value }) : slots.default?.();
       if (!triggerSlotContent || triggerSlotContent.length === 0) return null;
@@ -76,6 +87,12 @@ var Popover = defineComponent({
       } = attrsRecord;
       const hasTitle = Boolean(props.title || slots.title);
       const hasContent = Boolean(props.content || slots.content);
+      const triggerAria = getOverlayTriggerAria({
+        kind: "dialog",
+        open: currentVisible.value,
+        controlsId: popoverId,
+        disabled: props.disabled
+      });
       return h(
         "div",
         {
@@ -85,24 +102,15 @@ var Popover = defineComponent({
           style: props.style
         },
         [
-          // Trigger
-          h(
-            "div",
-            {
-              ref: triggerRef,
-              class: triggerClasses.value,
-              "aria-haspopup": "dialog",
-              "aria-disabled": props.disabled ? "true" : void 0,
-              // `data-state` is the stable styling hook. `aria-expanded` is
-              // intentionally omitted: the trigger is a generic wrapper without
-              // an interactive role, where `aria-expanded` is invalid (the
-              // user's own interactive element carries the real semantics).
-              "data-state": currentVisible.value ? "open" : "closed",
-              ...triggerHandlers.value
-            },
-            triggerSlotContent
-          ),
-          // Floating content
+          renderOverlayTrigger({
+            asChild: props.asChild,
+            child: triggerSlotContent.length === 1 ? triggerSlotContent[0] : triggerSlotContent,
+            setTriggerRef: (el) => assignOverlayTriggerRef(triggerRef, el),
+            className: props.asChild ? void 0 : triggerClasses.value,
+            disabled: props.disabled,
+            aria: triggerAria,
+            handlers: triggerHandlers.value
+          }),
           currentVisible.value ? renderVueOverlayTeleport(
             h(
               "div",
@@ -120,9 +128,12 @@ var Popover = defineComponent({
                     id: popoverId,
                     role: "dialog",
                     "aria-modal": "false",
+                    tabindex: -1,
+                    "aria-label": hasTitle ? void 0 : props.title || props.content,
                     "aria-labelledby": hasTitle ? titleId : void 0,
                     "aria-describedby": hasContent ? contentId : void 0,
-                    class: contentClasses.value
+                    class: contentClasses.value,
+                    style: contentStyle.value
                   },
                   [
                     hasTitle && h(