up

Resolves #4484

docs/app/components/content/ComponentSlots.vue

@@ -34,7 +34,7 @@ const meta = await fetchComponentMeta(name as any)
           </ProseCode>
         </ProseTd>
         <ProseTd>
-          <HighlightInlineType v-if="slot.type" :type="slot.type" />
+          <HighlightInlineType v-if="slot.type" :type="slot.type.replace(/ui:\s*\{[^}]*\}/g, 'ui: {}')" />
 
           <MDC v-if="slot.description" :value="slot.description" class="text-toned mt-1" :cache-key="`${kebabCase(route.path)}-${slot.name}-description`" />
         </ProseTd>

docs/app/components/content/examples/input/InputPasswordToggleExample.vue

@@ -24,3 +24,10 @@ const password = ref('')
     </template>
   </UInput>
 </template>
+
+<style>
+/* Hide the password reveal button in Edge */
+::-ms-reveal {
+    display: none;
+}
+</style>

src/runtime/components/Toaster.vue

@@ -120,6 +120,8 @@ function getOffset(index: number) {
       :close="(toast.close as boolean)"
       :data-expanded="expanded"
       :data-front="!expanded && index === toasts.length - 1"
+      :data-second="!expanded && index === toasts.length - 2"
+      :data-third="!expanded && index === toasts.length - 3"
       :style="{
         '--index': (index - toasts.length) + toasts.length,
         '--before': toasts.length - 1 - index,

src/runtime/composables/useOverlay.ts

@@ -71,7 +71,7 @@ function _useOverlay() {
       isMounted: !!defaultOpen,
       destroyOnClose: !!destroyOnClose,
       originalProps: props || {},
-      props: { ...(props || {}) }
+      props: { ...props }
     })
 
     overlays.push(options)
@@ -135,7 +135,7 @@ function _useOverlay() {
   const patch = <T extends Component>(id: symbol, props: Partial<ComponentProps<T>>): void => {
     const overlay = getOverlay(id)
 
-    overlay.props = { ...props }
+    overlay.props = { ...overlay.props, ...props }
   }
 
   const getOverlay = (id: symbol): Overlay => {

src/theme/toaster.ts

@@ -1,7 +1,7 @@
 export default {
   slots: {
-    viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none',
+    viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none transition-all duration-500 ease-in-out',
-    base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out'
+    base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:max-h-[calc(var(--front-height)+0.5rem)] data-[expanded=false]:data-[front=false]:min-h-[3rem] data-[expanded=false]:data-[front=false]:overflow-hidden data-[expanded=false]:data-[front=false]:data-[second=false]:data-[third=false]:opacity-0 data-[expanded=false]:data-[second=true]:opacity-60 data-[expanded=false]:data-[third=true]:opacity-30 data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-200 transition-[transform,translate,max-height,opacity] duration-200 ease-out data-[state=closed]:animate-[toast-closed_200ms_ease-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-out] data-[swipe=move]:transition-none'
   },
   variants: {
     position: {
@@ -35,13 +35,13 @@ export default {
     position: ['top-left', 'top-center', 'top-right'],
     class: {
       viewport: 'top-4',
-      base: 'top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out]'
+      base: 'top-0 data-[state=open]:animate-[slide-in-from-top_280ms_cubic-bezier(0.4,0,0.6,1)]'
     }
   }, {
     position: ['bottom-left', 'bottom-center', 'bottom-right'],
     class: {
       viewport: 'bottom-4',
-      base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out]'
+      base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_280ms_cubic-bezier(0.4,0,0.6,1)]'
     }
   }, {
     swipeDirection: ['left', 'right'],