@nuxt/ui 2.14.1 → 2.15.0

package/dist/runtime/components/forms/SelectMenu.vue.d.ts

@@ -2,7 +2,7 @@ import type { PropType } from 'vue';
 import type { SelectSize, SelectVariant, PopperOptions } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
-        type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
+        type: (ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
         default: string;
     };
     query: {
@@ -181,7 +181,7 @@ declare const _default: import("vue").DefineComponent<{
     onChange: (event: any) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open" | "update:query")[], "change" | "close" | "update:modelValue" | "open" | "update:query", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
+        type: (ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
         default: string;
     };
     query: {
@@ -349,9 +349,9 @@ declare const _default: import("vue").DefineComponent<{
     }[];
     popper: PopperOptions;
     name: string;
+    modelValue: string | number | boolean | unknown[] | Record<string, any>;
     leading: boolean;
     variant: SelectVariant;
-    modelValue: string | number | unknown[] | Record<string, any>;
     by: string;
     loading: boolean;
     disabled: boolean;

package/dist/runtime/components/forms/Textarea.vue

@@ -126,7 +126,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ["update:modelValue", "blur"],
+  emits: ["update:modelValue", "blur", "change"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("textarea", toRef(props, "ui"), config, toRef(props, "class"));
     const { emitFormBlur, emitFormInput, inputId, color, size, name } = useFormGroup(props, config);
@@ -173,6 +173,7 @@ export default defineComponent({
     };
     const onChange = (event) => {
       const value = event.target.value;
+      emit("change", value);
       if (modelModifiers.value.lazy) {
         updateInput(value);
       }

package/dist/runtime/components/forms/Textarea.vue.d.ts

@@ -100,7 +100,7 @@ declare const _default: import("vue").DefineComponent<{
     onInput: (event: Event) => void;
     onChange: (event: Event) => void;
     onBlur: (event: FocusEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "update:modelValue")[], "blur" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "update:modelValue")[], "blur" | "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (NumberConstructor | StringConstructor)[];
         default: string;
@@ -190,6 +190,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
     resize: boolean;
@@ -199,8 +200,8 @@ declare const _default: import("vue").DefineComponent<{
     color: any;
     class: any;
     name: string;
-    variant: TextareaVariant;
     modelValue: string | number;
+    variant: TextareaVariant;
     rows: number;
     disabled: boolean;
     placeholder: string;

package/dist/runtime/components/forms/Toggle.vue

@@ -3,15 +3,26 @@
     :id="inputId"
     v-model="active"
     :name="name"
-    :disabled="disabled"
+    :disabled="disabled || loading"
     :class="switchClass"
     v-bind="attrs"
   >
     <span :class="containerClass">
-      <span v-if="onIcon" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
+      <span v-if="loading" :class="[ui.icon.active, ui.icon.base]" aria-hidden="true">
+        <UIcon :name="loadingIcon" :class="loadingIconClass" />
+      </span>
+      <span
+        v-if="!loading && onIcon"
+        :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]"
+        aria-hidden="true"
+      >
         <UIcon :name="onIcon" :class="onIconClass" />
       </span>
-      <span v-if="offIcon" :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]" aria-hidden="true">
+      <span
+        v-if="!loading && offIcon"
+        :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]"
+        aria-hidden="true"
+      >
         <UIcon :name="offIcon" :class="offIconClass" />
       </span>
     </span>
@@ -53,6 +64,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    loading: {
+      type: Boolean,
+      default: false
+    },
     onIcon: {
       type: String,
       default: () => config.default.onIcon
@@ -61,6 +76,10 @@ export default defineComponent({
       type: String,
       default: () => config.default.offIcon
     },
+    loadingIcon: {
+      type: String,
+      default: () => config.default.loadingIcon
+    },
     color: {
       type: String,
       default: () => config.default.color,
@@ -94,6 +113,7 @@ export default defineComponent({
       },
       set(value) {
         emit("update:modelValue", value);
+        emit("change", value);
         emitFormChange();
       }
     });
@@ -125,6 +145,12 @@ export default defineComponent({
         color.value && ui.value.icon.off.replaceAll("{color}", color.value)
       );
     });
+    const loadingIconClass = computed(() => {
+      return twJoin(
+        ui.value.icon.size[props.size],
+        color.value && ui.value.icon.loading.replaceAll("{color}", color.value)
+      );
+    });
     provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
@@ -137,7 +163,8 @@ export default defineComponent({
       switchClass,
       containerClass,
       onIconClass,
-      offIconClass
+      offIconClass,
+      loadingIconClass
     };
   }
 });

package/dist/runtime/components/forms/Toggle.vue.d.ts

@@ -17,6 +17,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     onIcon: {
         type: StringConstructor;
         default: () => any;
@@ -25,6 +29,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: () => any;
     };
+    loadingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
     color: {
         type: PropType<any>;
         default: () => any;
@@ -55,6 +63,7 @@ declare const _default: import("vue").DefineComponent<{
     containerClass: import("vue").ComputedRef<string>;
     onIconClass: import("vue").ComputedRef<string>;
     offIconClass: import("vue").ComputedRef<string>;
+    loadingIconClass: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
@@ -72,6 +81,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     onIcon: {
         type: StringConstructor;
         default: () => any;
@@ -80,6 +93,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: () => any;
     };
+    loadingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
     color: {
         type: PropType<any>;
         default: () => any;
@@ -109,7 +126,9 @@ declare const _default: import("vue").DefineComponent<{
     class: any;
     name: string;
     modelValue: boolean;
+    loading: boolean;
     disabled: boolean;
+    loadingIcon: string;
     onIcon: string;
     offIcon: string;
 }, {}>;

package/dist/runtime/components/navigation/CommandPaletteGroup.vue

@@ -1,10 +1,10 @@
 <template>
-  <div :class="ui.group.wrapper" role="option">
+  <div :class="ui.group.wrapper">
     <h2 v-if="label" :class="ui.group.label">
       {{ label }}
     </h2>
 
-    <div :class="ui.group.container" role="listbox" :aria-label="group[groupAttribute]">
+    <div :class="ui.group.container" :aria-label="group[groupAttribute]">
       <HComboboxOption
         v-for="(command, index) of group.commands"
         :key="`${group.key}-${index}`"

package/dist/runtime/components/overlays/Notification.vue

@@ -18,7 +18,7 @@
                 {{ title }}
               </slot>
             </p>
-            <p v-if="(description || $slots.description)" :class="ui.description">
+            <p v-if="(description || $slots.description)" :class="twMerge(ui.description, !(title && $slots.title) && 'mt-0 leading-5')">
               <slot name="description" :description="description">
                 {{ description }}
               </slot>

package/dist/runtime/components/overlays/Popover.vue

@@ -7,7 +7,8 @@
       :disabled="disabled"
       :class="ui.trigger"
       role="button"
-      @mouseover="onMouseOver"
+      @mouseenter="onMouseEnter"
+      @touchstart.passive="onTouchStart"
     >
       <slot :open="open" :close="close">
         <button :disabled="disabled">
@@ -20,7 +21,7 @@
       <div v-if="open" :class="[ui.overlay.base, ui.overlay.background]" />
     </Transition>
 
-    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
+    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle">
       <Transition appear v-bind="ui.transition">
         <div>
           <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
@@ -137,7 +138,17 @@ export default defineComponent({
         };
       }
     });
-    function onMouseOver() {
+    function onTouchStart() {
+      if (!popoverApi.value) {
+        return;
+      }
+      if (popoverApi.value.popoverState === 0) {
+        popoverApi.value.closePopover();
+      } else {
+        popoverApi.value.togglePopover();
+      }
+    }
+    function onMouseEnter() {
       if (props.mode !== "hover" || !popoverApi.value) {
         return;
       }
@@ -196,7 +207,8 @@ export default defineComponent({
       trigger,
       container,
       containerStyle,
-      onMouseOver,
+      onTouchStart,
+      onMouseEnter,
       onMouseLeave
     };
   }

package/dist/runtime/components/overlays/Popover.vue.d.ts

@@ -68,7 +68,8 @@ declare const _default: import("vue").DefineComponent<{
         paddingLeft: string;
         paddingRight: string;
     }>;
-    onMouseOver: () => void;
+    onTouchStart: () => void;
+    onMouseEnter: () => void;
     onMouseLeave: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:open"[], "update:open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     mode: {

package/dist/runtime/components/overlays/Slideover.vue.d.ts

@@ -86,7 +86,7 @@ declare const _default: import("vue").DefineComponent<{
     transition: boolean;
     preventClose: boolean;
     class: any;
-    modelValue: boolean;
     side: "right" | "left";
+    modelValue: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/overlays/Slideovers.client.vue

@@ -0,0 +1,17 @@
+<template>
+  <component
+    :is="slideoverState.component"
+    v-if="slideoverState"
+    v-bind="slideoverState.props"
+    v-model="isOpen"
+  />
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue'
+import { useSlideover, slidOverInjectionKey } from '../../composables/useSlideover'
+
+const slideoverState = inject(slidOverInjectionKey)
+
+const { isOpen } = useSlideover()
+</script>

package/dist/runtime/components/overlays/Tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="trigger" :class="ui.wrapper" v-bind="attrs" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
+  <div ref="trigger" :class="ui.wrapper" v-bind="attrs" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
     <slot :open="open">
       Hover
     </slot>
@@ -84,7 +84,7 @@ export default defineComponent({
     const open = ref(false);
     let openTimeout = null;
     let closeTimeout = null;
-    function onMouseOver() {
+    function onMouseEnter() {
       if (closeTimeout) {
         clearTimeout(closeTimeout);
         closeTimeout = null;
@@ -119,7 +119,7 @@ export default defineComponent({
       trigger,
       container,
       open,
-      onMouseOver,
+      onMouseEnter,
       onMouseLeave
     };
   }

package/dist/runtime/components/overlays/Tooltip.vue.d.ts

@@ -42,7 +42,7 @@ declare const _default: import("vue").DefineComponent<{
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     open: import("vue").Ref<boolean>;
-    onMouseOver: () => void;
+    onMouseEnter: () => void;
     onMouseLeave: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     text: {

package/dist/runtime/composables/useButtonGroup.mjs

@@ -19,6 +19,14 @@ export function useProvideButtonGroup(buttonGroupProps) {
 }
 export function useInjectButtonGroup({ ui, props }) {
   const instance = getCurrentInstance();
+  provide("ButtonGroupContextConsumer", true);
+  const isParentPartOfGroup = inject("ButtonGroupContextConsumer", false);
+  if (isParentPartOfGroup) {
+    return {
+      size: computed(() => props.size),
+      rounded: computed(() => ui.value.rounded)
+    };
+  }
   let parent = instance.parent;
   let groupContext;
   while (parent && !groupContext) {

package/dist/runtime/composables/useModal.d.ts

@@ -4,7 +4,7 @@ import type { Modal, ModalState } from '../types/modal';
 export declare const modalInjectionKey: InjectionKey<ShallowRef<ModalState>>;
 declare function _useModal(): {
     isOpen: import("vue").Ref<boolean>;
-    open: <T extends Component>(component: T, props?: (Modal & ComponentProps<T>) | undefined) => void;
+    open: <T extends Component>(component: T, props?: Modal & ComponentProps<T>) => void;
     close: () => void;
     patch: <T_1 extends Component = {}>(props: Partial<Modal & ComponentProps<T_1>>) => void;
 };

package/dist/runtime/composables/useShortcuts.d.ts

@@ -1,12 +1,12 @@
 export declare const _useShortcuts: () => {
     macOS: import("vue").ComputedRef<false | "" | RegExpMatchArray | null | undefined>;
     metaSymbol: import("vue").Ref<string>;
-    activeElement: import("@vueuse/shared").ComputedRefWithControl<HTMLElement | null | undefined>;
+    activeElement: import("vue").Ref<HTMLElement | null | undefined>;
     usingInput: import("vue").ComputedRef<string | boolean>;
 };
 export declare const useShortcuts: () => {
     macOS: import("vue").ComputedRef<false | "" | RegExpMatchArray | null | undefined>;
     metaSymbol: import("vue").Ref<string>;
-    activeElement: import("@vueuse/shared").ComputedRefWithControl<HTMLElement | null | undefined>;
+    activeElement: import("vue").Ref<HTMLElement | null | undefined>;
     usingInput: import("vue").ComputedRef<string | boolean>;
 };

package/dist/runtime/composables/useShortcuts.mjs

@@ -1,7 +1,7 @@
 import { createSharedComposable, useActiveElement } from "@vueuse/core";
 import { ref, computed, onMounted } from "vue";
 export const _useShortcuts = () => {
-  const macOS = computed(() => process.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/));
+  const macOS = computed(() => import.meta.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/));
   const metaSymbol = ref(" ");
   const activeElement = useActiveElement();
   const usingInput = computed(() => {

package/dist/runtime/composables/useSlideover.d.ts

@@ -0,0 +1,12 @@
+import type { ShallowRef, Component, InjectionKey } from 'vue';
+import type { ComponentProps } from '../types/component';
+import type { Slideover, SlideoverState } from '../types/slideover';
+export declare const slidOverInjectionKey: InjectionKey<ShallowRef<SlideoverState>>;
+declare function _useSlideover(): {
+    open: <T extends Component>(component: T, props?: Slideover & ComponentProps<T>) => void;
+    close: () => void;
+    patch: <T_1 extends Component = {}>(props: Partial<Slideover & ComponentProps<T_1>>) => void;
+    isOpen: import("vue").Ref<boolean>;
+};
+export declare const useSlideover: typeof _useSlideover;
+export {};

package/dist/runtime/composables/useSlideover.mjs

@@ -0,0 +1,40 @@
+import { ref, inject } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+export const slidOverInjectionKey = Symbol("nuxt-ui.slideover");
+function _useSlideover() {
+  const slideoverState = inject(slidOverInjectionKey);
+  const isOpen = ref(false);
+  function open(component, props) {
+    if (!slideoverState) {
+      throw new Error("useSlideover() is called without provider");
+    }
+    slideoverState.value = {
+      component,
+      props: props ?? {}
+    };
+    isOpen.value = true;
+  }
+  function close() {
+    if (!slideoverState)
+      return;
+    isOpen.value = false;
+  }
+  function patch(props) {
+    if (!slideoverState)
+      return;
+    slideoverState.value = {
+      ...slideoverState.value,
+      props: {
+        ...slideoverState.value.props,
+        ...props
+      }
+    };
+  }
+  return {
+    open,
+    close,
+    patch,
+    isOpen
+  };
+}
+export const useSlideover = createSharedComposable(_useSlideover);

package/dist/runtime/composables/useUI.d.ts

@@ -1,8 +1,8 @@
 import type { Ref } from 'vue';
 import type { Strategy } from '../types';
 export declare const useUI: <T>(key: any, $ui?: Ref<(Partial<T> & {
-    strategy?: Strategy | undefined;
-}) | undefined> | undefined, $config?: T | Ref<T> | undefined, $wrapperClass?: Ref<string>, withAppConfig?: boolean) => {
+    strategy?: Strategy;
+}) | undefined>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig?: boolean) => {
     ui: import("vue").ComputedRef<T>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;

package/dist/runtime/plugins/colors.mjs

@@ -33,7 +33,7 @@ ${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}
       id: "nuxt-ui-colors"
     }]
   };
-  if (process.client && nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {
+  if (import.meta.client && nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {
     const style = document.createElement("style");
     style.innerHTML = root.value;
     style.setAttribute("data-nuxt-ui-colors", "");

package/dist/runtime/plugins/slideovers.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugins/slideovers.mjs

@@ -0,0 +1,10 @@
+import { defineNuxtPlugin } from "#imports";
+import { shallowRef } from "vue";
+import { slidOverInjectionKey } from "../composables/useSlideover.mjs";
+export default defineNuxtPlugin((nuxtApp) => {
+  const slideoverState = shallowRef({
+    component: "div",
+    props: {}
+  });
+  nuxtApp.vueApp.provide(slidOverInjectionKey, slideoverState);
+});

package/dist/runtime/types/index.d.ts

@@ -17,6 +17,7 @@ export * from './kbd'
 export * from './link'
 export * from './meter'
 export * from './modal'
+export * from './slideover'
 export * from './notification'
 export * from './popper'
 export * from './progress'

package/dist/runtime/types/slideover.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from 'vue'
+
+interface Slideover {
+    ui?: any;
+    side?: 'right' | 'left';
+    transition?: boolean;
+    appear?: boolean;
+    overlay?: boolean;
+    preventClose?: boolean;
+    modelValue?: boolean;
+}
+
+interface SlideoverState {
+    component: Component | string;
+    props: Slideover;
+}
+

package/dist/runtime/ui.config/forms/inputMenu.mjs

@@ -1,7 +1,7 @@
 import { arrow } from "../popper.mjs";
 export default {
   container: "z-20 group",
-  trigger: "inline-flex w-full",
+  trigger: "flex items-center w-full",
   width: "w-full",
   height: "max-h-60",
   base: "relative focus:outline-none overflow-y-auto scroll-py-1",

package/dist/runtime/ui.config/forms/radioGroup.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
     wrapper: string;
+    fieldset: string;
     legend: string;
     default: {
         color: string;

package/dist/runtime/ui.config/forms/radioGroup.mjs

@@ -1,5 +1,6 @@
 export default {
   wrapper: "relative flex items-start",
+  fieldset: "",
   legend: "text-sm font-medium text-gray-700 dark:text-gray-200 mb-1",
   default: {
     color: "primary"

package/dist/runtime/ui.config/forms/toggle.d.ts

@@ -50,10 +50,12 @@ declare const _default: {
         };
         on: string;
         off: string;
+        loading: string;
     };
     default: {
         onIcon: null;
         offIcon: null;
+        loadingIcon: string;
         color: string;
         size: string;
     };

package/dist/runtime/ui.config/forms/toggle.mjs

@@ -49,11 +49,13 @@ export default {
       "2xl": "h-6 w-6"
     },
     on: "text-{color}-500 dark:text-{color}-400",
-    off: "text-gray-400 dark:text-gray-500"
+    off: "text-gray-400 dark:text-gray-500",
+    loading: "animate-spin text-{color}-500 dark:text-{color}-400"
   },
   default: {
     onIcon: null,
     offIcon: null,
+    loadingIcon: "i-heroicons-arrow-path-20-solid",
     color: "primary",
     size: "md"
   }

package/dist/runtime/ui.config/navigation/horizontalNavigation.mjs

@@ -9,7 +9,7 @@ export default {
   inactive: "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white",
   label: "truncate relative",
   icon: {
-    base: "flex-shrink-0 w-5 h-5",
+    base: "flex-shrink-0 w-5 h-5 relative",
     active: "text-gray-700 dark:text-gray-200",
     inactive: "text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"
   },

package/dist/runtime/ui.config/navigation/verticalNavigation.mjs

@@ -11,7 +11,7 @@ export default {
   inactive: "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50",
   label: "truncate relative",
   icon: {
-    base: "flex-shrink-0 w-5 h-5",
+    base: "flex-shrink-0 w-5 h-5 relative",
     active: "text-gray-700 dark:text-gray-200",
     inactive: "text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"
   },

package/dist/runtime/ui.config/overlays/modal.mjs

@@ -4,7 +4,7 @@ export default {
   container: "flex min-h-full items-end sm:items-center justify-center text-center",
   padding: "p-4 sm:p-0",
   margin: "sm:my-8",
-  base: "relative text-left rtl:text-right overflow-hidden flex flex-col",
+  base: "relative text-left rtl:text-right flex flex-col",
   overlay: {
     base: "fixed inset-0 transition-opacity",
     background: "bg-gray-200/75 dark:bg-gray-800/75",

package/dist/runtime/ui.config/overlays/tooltip.mjs

@@ -27,5 +27,8 @@ export default {
     openDelay: 0,
     closeDelay: 0
   },
-  arrow
+  arrow: {
+    ...arrow,
+    base: "[@media(pointer:coarse)]:hidden invisible before:visible before:block before:rotate-45 before:z-[-1] before:w-2 before:h-2"
+  }
 };