daisy-ui-kit 5.0.0-pre.9 → 5.0.1

package/app/components/Dropdown.vue

@@ -1,54 +1,69 @@
 <script setup lang="ts">
-import { autoUpdate, useFloating } from '@floating-ui/vue'
-import { onClickOutside, syncRefs, useElementHover } from '@vueuse/core'
-import { onMounted, provide, reactive, ref } from 'vue'
-import { randomString } from '../utils/random-string'
-
-const props = withDefaults(defineProps<{
-  // allows passing a custom id to the dropdown. Required for SSR hydration.
-  randomId?: string
-  autoFocus?: boolean
-
-  placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'
-  strategy?: 'fixed' | 'absolute'
-
-  hover?: boolean
-  delayEnter?: number
-  delayLeave?: number
-  closeOnClickOutside?: boolean
-}>(), {
-  autoFocus: false,
-  placement: 'bottom-start',
-  hover: false,
-  delayEnter: 0,
-  delayLeave: 300,
-  closeOnClickOutside: true,
-})
+import { useId } from 'vue'
+import { useElementHover } from '@vueuse/core'
+import { onMounted, provide, ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    autoFocus?: boolean
+
+    placement?:
+      | 'top'
+      | 'top-start'
+      | 'top-end'
+      | 'right'
+      | 'right-start'
+      | 'right-end'
+      | 'bottom'
+      | 'bottom-start'
+      | 'bottom-end'
+      | 'left'
+      | 'left-start'
+      | 'left-end'
+
+    hover?: boolean
+    delayEnter?: number
+    delayLeave?: number
+    closeOnClickOutside?: boolean
+  }>(),
+  {
+    autoFocus: false,
+    placement: 'bottom-start',
+    hover: false,
+    delayEnter: 0,
+    delayLeave: 300,
+    closeOnClickOutside: true,
+  },
+)
+
 // Dropdown Visibility
-const isOpen = defineModel('open')
+const isOpen = defineModel('open', { default: false })
 provide('isDropdownOpen', isOpen)
 
 const autoFocus = ref(props.autoFocus)
 provide('dropdownAutoFocus', autoFocus)
 
-const randomValue = props.randomId || randomString(12)
-const wrapperId = `dropdown-wrapper-${randomValue}`
-const id = `dropdown-${randomValue}`
+// Use Nuxt's useId() for unique IDs
+const uniqueId = useId()
+const wrapperId = `dropdown-wrapper-${uniqueId}`
+const id = `dropdown-${uniqueId}`
 provide('dropdownId', id)
 
-// set up the floating ui instance
+// Provide placement for CSS anchor positioning
+provide('dropdownPlacement', ref(props.placement))
+
+// Provide closeOnClickOutside for popover mode selection
+provide('dropdownCloseOnClickOutside', ref(props.closeOnClickOutside))
+
+// Provide hover mode for button behavior
+provide('dropdownHover', ref(props.hover))
+
+// References
 const buttonEl = ref(null)
 const contentEl = ref(null)
-const floatingConfig = reactive({
-  placement: ref(props.placement),
-  strategy: ref(props.strategy),
-  whileElementsMounted: autoUpdate,
-})
-const { floatingStyles } = useFloating(buttonEl, contentEl, floatingConfig)
 
 provide('buttonEl', buttonEl)
 provide('contentEl', contentEl)
-provide('floatingStyles', floatingStyles)
 
 // Visibility Utils
 function toggle() {
@@ -67,29 +82,25 @@ provide('closeDropdown', close)
 const dropdownWrapper = ref(null)
 
 onMounted(() => {
-  // Close when clicking outside the element
-  // use a slight delay to avoid conflict with the focus trap in the DropdownContent.
-  onClickOutside(contentEl, () => {
-    if (props.closeOnClickOutside) {
-      setTimeout(() => {
-        isOpen.value = false
-      }, 50)
-    }
-  })
-
-  // Sync with top-level isHovered ref. For SSR compatibility.
+  // Note: closeOnClickOutside is handled automatically by popover="auto"
+  // The popover API provides "light dismiss" behavior by default
+
+  // Sync with hover state for SSR compatibility
   if (props.hover) {
     const hover = useElementHover(dropdownWrapper, {
       delayLeave: props.delayLeave,
       delayEnter: props.delayEnter,
     })
-    syncRefs(hover, isOpen)
+
+    watch(hover, newValue => {
+      isOpen.value = newValue
+    })
   }
 })
 </script>
 
 <template>
-  <div :id="wrapperId" ref="dropdownWrapper" class="relative inline-block floating-dropdown">
+  <div :id="wrapperId" ref="dropdownWrapper" class="relative inline-block">
     <slot v-bind="{ toggle, open, close }" />
   </div>
 </template>

package/app/components/DropdownButton.vue

@@ -3,14 +3,21 @@ import { inject } from 'vue'
 
 const id = inject('dropdownId')
 const isOpen = inject('isDropdownOpen')
-const toggleDropdown = inject('toggleDropdown')
 const buttonEl = inject('buttonEl')
-
-const toggle = toggleDropdown
+const isHover = inject('dropdownHover')
 </script>
 
 <template>
-  <Button :id="id" ref="buttonEl" :aria-expanded="isOpen" aria-haspopup="menu" class="dropdown-button" @click="toggle">
+  <Button
+    :id="id"
+    ref="buttonEl"
+    :aria-expanded="isOpen"
+    aria-haspopup="menu"
+    :popovertarget="`${id}-content`"
+    :popovertargetaction="isHover ? 'show' : undefined"
+    :style="{ 'anchor-name': `--${id}` }"
+    class="dropdown-button"
+  >
     <slot />
   </Button>
 </template>

package/app/components/DropdownContent.vue

@@ -1,19 +1,27 @@
 <script setup>
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
-import { inject, nextTick, ref, watchEffect } from 'vue'
+import { computed, inject, nextTick, watch, watchEffect } from 'vue'
+import { getPositionArea, getPositionFallbacks } from '../utils/position-area'
 
 const autoFocus = inject('dropdownAutoFocus')
 const id = inject('dropdownId')
 const isOpen = inject('isDropdownOpen')
-const isOpenDelayed = ref(isOpen.value)
 const contentEl = inject('contentEl')
-const floatingStyles = inject('floatingStyles')
+const placement = inject('dropdownPlacement')
+const closeOnClickOutside = inject('dropdownCloseOnClickOutside')
 
 // Dropdown Utils
 const toggle = inject('toggleDropdown')
 const open = inject('openDropdown')
 const close = inject('closeDropdown')
 
+// Compute CSS position-area value based on placement
+const positionArea = computed(() => getPositionArea(placement.value))
+const positionFallbacks = computed(() => getPositionFallbacks(placement.value))
+
+// Determine popover mode: "auto" for light dismiss, "manual" to disable it
+const popoverMode = computed(() => (closeOnClickOutside.value ? 'auto' : 'manual'))
+
 let activate
 let deactivate
 
@@ -29,29 +37,91 @@ if (autoFocus.value) {
     }
   })
 }
-// const { activate, deactivate, hasFocus } = useFocusTrap(contentEl, { immediate: true })
-
-// synchronize isOpenDelayed with isOpen
-watchEffect(async () => {
-  if (isOpen.value) {
-    isOpenDelayed.value = true
-    if (autoFocus.value) {
-      await nextTick()
-      activate()
+
+// Sync popover state with isOpen model (for programmatic control)
+watch(
+  isOpen,
+  async newValue => {
+    if (contentEl.value) {
+      try {
+        // Check current popover state
+        const isPopoverOpen = contentEl.value.matches(':popover-open')
+
+        // Only programmatically control if state differs
+        if (newValue && !isPopoverOpen) {
+          contentEl.value.showPopover()
+          if (autoFocus.value) {
+            await nextTick()
+            activate?.()
+          }
+        } else if (!newValue && isPopoverOpen) {
+          contentEl.value.hidePopover()
+          if (autoFocus.value) {
+            deactivate?.()
+            await nextTick()
+          }
+        }
+      } catch (e) {
+        // Silently handle if popover API is not supported
+        console.warn('Popover API not supported:', e)
+      }
     }
-  }
-  else {
-    if (autoFocus.value) {
-      deactivate()
-      await nextTick()
+  },
+  { flush: 'post' },
+)
+
+// Listen to popover toggle events to sync back to isOpen model
+function handleToggle(event) {
+  const newState = event.newState === 'open'
+
+  if (isOpen.value !== newState) {
+    isOpen.value = newState
+
+    if (newState && autoFocus.value) {
+      nextTick().then(() => activate?.())
+    } else if (!newState && autoFocus.value) {
+      deactivate?.()
     }
-    isOpenDelayed.value = false
   }
-})
+}
 </script>
 
 <template>
-  <div v-if="isOpen" ref="contentEl" :style="floatingStyles" :aria-labelledby="id" role="menu">
+  <div
+    :id="`${id}-content`"
+    ref="contentEl"
+    :anchor="id"
+    :aria-labelledby="id"
+    role="menu"
+    :popover="popoverMode"
+    class="dropdown-content dropdown-popover"
+    :style="{
+      'position-anchor': `--${id}`,
+      'position-area': positionArea,
+      'position-try-fallbacks': positionFallbacks,
+    }"
+    @toggle="handleToggle"
+  >
     <slot v-bind="{ toggle, open, close }" />
   </div>
 </template>
+
+<style>
+@layer components {
+  /* Reset default popover styles - in components layer so utilities can override */
+  .dropdown-popover[popover] {
+    border: none;
+    color: inherit;
+    overflow: visible;
+    /* Use auto for inset to allow anchor positioning to work */
+    inset: auto;
+    margin: 0;
+    background-color: transparent;
+  }
+
+  /* Position anchoring support */
+  .dropdown-popover[popover]:popover-open {
+    position: fixed;
+  }
+}
+</style>

package/app/components/DropdownTarget.vue

@@ -3,12 +3,19 @@ import { inject } from 'vue'
 
 const id = inject('dropdownId')
 const isOpen = inject('isDropdownOpen')
-const toggle = inject('toggleDropdown')
 const buttonEl = inject('buttonEl')
 </script>
 
 <template>
-  <div :id="id" ref="buttonEl" :aria-expanded="isOpen" aria-haspopup="menu" class="dropdown-target" @click="toggle">
+  <button
+    :id="id"
+    ref="buttonEl"
+    :aria-expanded="isOpen"
+    aria-haspopup="menu"
+    :popovertarget="`${id}-content`"
+    :style="{ 'anchor-name': `--${id}` }"
+    class="dropdown-target"
+  >
     <slot />
-  </div>
+  </button>
 </template>

package/app/components/Fab.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  flower?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="fab"
+    :class="{
+      'fab-flower': flower,
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/FabClose.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+function handleMouseDown(event: MouseEvent) {
+  event.preventDefault()
+  const fab = (event.currentTarget as HTMLElement)?.closest('.fab')
+  if (fab instanceof HTMLElement) {
+    fab.blur()
+  }
+  if (document.activeElement instanceof HTMLElement) {
+    document.activeElement.blur()
+  }
+}
+</script>
+
+<template>
+  <div class="fab-close" @mousedown="handleMouseDown">
+    <slot />
+  </div>
+</template>

package/app/components/FabMainAction.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="fab-main-action">
+    <slot />
+  </div>
+</template>

package/app/components/FabTrigger.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    btn?: boolean
+    join?: boolean
+    close?: boolean
+
+    color?: string
+    neutral?: boolean
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    info?: boolean
+    success?: boolean
+    warning?: boolean
+    error?: boolean
+
+    ghost?: boolean
+    link?: boolean
+    glass?: boolean
+    outline?: boolean
+    dash?: boolean
+    soft?: boolean
+
+    shape?: 'circle' | 'square' | 'wide' | 'block'
+    circle?: boolean
+    square?: boolean
+    wide?: boolean
+    block?: boolean
+
+    noAnimation?: boolean
+    active?: boolean
+
+    size?: 'lg' | 'md' | 'sm' | 'xs' | 'xl'
+    xl?: boolean
+    lg?: boolean
+    md?: boolean
+    sm?: boolean
+    xs?: boolean
+  }>(),
+  {
+    btn: true,
+  },
+)
+
+function handleMouseDown(event: MouseEvent) {
+  if (!props.close) return
+  const fab = (event.currentTarget as HTMLElement)?.closest('.fab')
+  // Only close if FAB is already open (has focus within)
+  if (fab instanceof HTMLElement && fab.matches(':focus-within')) {
+    event.preventDefault()
+    fab.blur()
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur()
+    }
+  }
+}
+</script>
+
+<template>
+  <div
+    tabindex="0"
+    role="button"
+    v-bind="$attrs"
+    :class="{
+      btn,
+      'join-item': join,
+
+      'btn-neutral': neutral || color === 'neutral',
+      'btn-primary': primary || color === 'primary',
+      'btn-secondary': secondary || color === 'secondary',
+      'btn-accent': accent || color === 'accent',
+      'btn-info': info || color === 'info',
+      'btn-success': success || color === 'success',
+      'btn-warning': warning || color === 'warning',
+      'btn-error': error || color === 'error',
+
+      'text-primary': (primary || color === 'primary') && link,
+      'text-secondary': (secondary || color === 'secondary') && link,
+      'text-neutral': (neutral || color === 'neutral') && link,
+      'text-accent': (accent || color === 'accent') && link,
+      'text-info': (info || color === 'info') && link,
+      'text-success': (success || color === 'success') && link,
+      'text-warning': (warning || color === 'warning') && link,
+      'text-error': (error || color === 'error') && link,
+
+      glass,
+
+      'btn-circle': circle || shape === 'circle',
+      'btn-square': square || shape === 'square',
+      'btn-wide': wide || shape === 'wide',
+      'btn-block': block || shape === 'block',
+
+      'btn-xl': xl || size === 'xl',
+      'btn-lg': lg || size === 'lg',
+      'btn-md': md || size === 'md',
+      'btn-sm': sm || size === 'sm',
+      'btn-xs': xs || size === 'xs',
+
+      'btn-outline': outline,
+      'btn-dash': dash,
+      'btn-ghost': ghost,
+      'btn-soft': soft,
+      'btn-link': link,
+
+      'no-animation': noAnimation,
+      'btn-active': active,
+    }"
+    @mousedown="handleMouseDown"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/Fieldset.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
 const { is = 'fieldset', legend } = defineProps<{
   is?: string
   legend?: string
@@ -6,10 +10,7 @@ const { is = 'fieldset', legend } = defineProps<{
 </script>
 
 <template>
-  <component
-    :is="is"
-    class="fieldset bg-base-200 border-base-300 rounded-box border p-4"
-  >
+  <component :is="is" v-bind="$attrs" class="fieldset bg-base-200 border-base-300 rounded-box border p-4">
     <legend v-if="legend" class="fieldset-legend">
       {{ legend }}
     </legend>

package/app/components/FileInput.vue

@@ -49,5 +49,5 @@ defineEmits(['files'])
       'file-input-ghost': ghost,
     }"
     @input="$emit('files', ($event.target as any).value)"
-  >
+  />
 </template>

package/app/components/Filter.vue

@@ -1,6 +1,46 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    is?: string
+    name: string
+    items: FilterItemInput[]
+    modelValue?: any
+    resetLabel?: string
+    position?: 'start' | 'end'
+    start?: boolean
+    end?: boolean
+
+    color?: string
+    neutral?: boolean
+    primary?: boolean
+    secondary?: boolean
+    accent?: boolean
+    info?: boolean
+    success?: boolean
+    warning?: boolean
+    error?: boolean
+
+    size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+    xl?: boolean
+    lg?: boolean
+    md?: boolean
+    sm?: boolean
+    xs?: boolean
+  }>(),
+  {
+    resetLabel: 'All',
+    is: 'div',
+  },
+)
+
+const emit = defineEmits(['update:modelValue'])
+
 interface FilterItem {
   label: string
   value: any
@@ -8,39 +48,6 @@ interface FilterItem {
 
 type FilterItemInput = string | FilterItem
 
-const props = withDefaults(defineProps<{
-  is?: string
-  name: string
-  items: FilterItemInput[]
-  modelValue?: any
-  resetLabel?: string
-  position?: 'start' | 'end'
-  start?: boolean
-  end?: boolean
-
-  color?: string
-  neutral?: boolean
-  primary?: boolean
-  secondary?: boolean
-  accent?: boolean
-  info?: boolean
-  success?: boolean
-  warning?: boolean
-  error?: boolean
-
-  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  xl?: boolean
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}>(), {
-  resetLabel: 'All',
-  is: 'div',
-})
-
-const emit = defineEmits(['update:modelValue'])
-
 const currentValue = computed({
   get: () => props.modelValue,
   set(val) {
@@ -49,7 +56,7 @@ const currentValue = computed({
 })
 
 const normalizedItems = computed(() => {
-  return props.items.map((item) => {
+  return props.items.map(item => {
     if (typeof item === 'string') {
       return { label: item, value: item }
     }
@@ -59,7 +66,7 @@ const normalizedItems = computed(() => {
 </script>
 
 <template>
-  <component :is="props.is" class="filter">
+  <component :is="props.is" v-bind="$attrs" class="filter">
     <!-- Reset button at start -->
     <input
       v-if="resetLabel && (start || position === 'start')"
@@ -76,7 +83,7 @@ const normalizedItems = computed(() => {
       :name="name"
       :aria-label="resetLabel"
       :value="null"
-    >
+    />
 
     <!-- Filter items -->
     <template v-for="(item, index) in normalizedItems" :key="index">
@@ -102,7 +109,7 @@ const normalizedItems = computed(() => {
         :name="name"
         :aria-label="item.label"
         :value="item.value"
-      >
+      />
     </template>
 
     <!-- Reset button at end -->
@@ -114,7 +121,7 @@ const normalizedItems = computed(() => {
       :name="name"
       :aria-label="resetLabel"
       :value="null"
-    >
+    />
 
     <!-- Optional slot for custom items -->
     <slot />

package/app/components/Flex.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
 const { is = 'div', ...props } = defineProps<{
   is?: string | object
   join?: boolean
@@ -44,7 +48,10 @@ const { is = 'div', ...props } = defineProps<{
 
 <template>
   <component
-    :is="is" class="flex" :class="{
+    :is="is"
+    v-bind="$attrs"
+    class="flex"
+    :class="{
       'join-item': props.join,
 
       'flex-1': props.flex1,