@nexxtmove/ui 0.1.70 → 0.1.72

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.70",
+  "version": "0.1.72",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/FloatingPanel/FloatingPanel.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import { useFloating, autoUpdate, flip, shift, offset, size } from '@floating-ui/vue'
 import type { Placement } from '@floating-ui/vue'
 
@@ -25,6 +25,9 @@ const emit = defineEmits<{
 const isOpen = ref(false)
 // Keeps the positioning container alive while the leave transition plays.
 const isLeaving = ref(false)
+// Tracks whether floating-ui has computed the position *for the current open cycle*.
+// Reset on every open() so the Transition always sees false→true and plays the enter animation.
+const isReady = ref(false)
 const triggerRef = ref<HTMLElement | null>(null)
 const floatingRef = ref<HTMLElement | null>(null)
 
@@ -58,9 +61,16 @@ const {
   transform: false,
 })
 
-const open = () => {
+const open = async () => {
+  isReady.value = false
   isOpen.value = true
   emit('open')
+  // Wait for Vue to render the v-if with isReady=false before setting it true.
+  // This guarantees the Transition always sees false→true and plays the enter animation,
+  // even when isPositioned is already true from a previous open cycle.
+  await nextTick()
+  if (isPositioned.value) isReady.value = true
+  // If not yet positioned, the watcher below will set isReady once it resolves.
 }
 
 const close = () => {
@@ -120,6 +130,10 @@ const transitionClasses = computed(() => {
   }
 })
 
+watch(isPositioned, (val) => {
+  if (val && isOpen.value) isReady.value = true
+})
+
 defineExpose({ isOpen, open, close, toggle, triggerRef, floatingRef })
 
 onMounted(() => {
@@ -152,7 +166,7 @@ onUnmounted(() => {
       originates from the trigger — never from the page origin.
     -->
     <Transition v-bind="transitionClasses" @after-leave="isLeaving = false">
-      <div v-if="isOpen && isPositioned">
+      <div v-if="isOpen && isReady">
         <slot name="content" :is-open="isOpen" :close="close" :toggle="toggle" />
       </div>
     </Transition>

package/tailwind/nexxtmove.tailwind.components.css

@@ -97,6 +97,24 @@
     }
   }
 
+  .button-warning {
+    @apply bg-button-bg-warning-default text-button-text-warning-default;
+    &:hover {
+      @media (hover: hover) {
+        @apply bg-button-bg-warning-hover;
+      }
+    }
+    &:focus-visible {
+      @apply bg-button-bg-warning-focussed outline-button-border-warning-focussed outline outline-solid;
+    }
+    &:active {
+      @apply bg-button-bg-warning-selected;
+    }
+    &:disabled {
+      @apply bg-button-bg-warning-disabled text-button-text-warning-disabled;
+    }
+  }
+
   .progress-bar {
     @apply border-progress-bar-border border border-solid;
   }

package/tailwind/nexxtmove.tailwind.theme.css

@@ -133,6 +133,11 @@
   --color-button-bg-danger-focussed: var(--color-brick-500);
   --color-button-bg-danger-selected: var(--color-brick-700);
   --color-button-bg-danger-disabled: var(--color-brick-100);
+  --color-button-bg-warning-default: var(--color-orange-500);
+  --color-button-bg-warning-hover: var(--color-orange-600);
+  --color-button-bg-warning-focussed: var(--color-orange-500);
+  --color-button-bg-warning-selected: var(--color-orange-700);
+  --color-button-bg-warning-disabled: var(--color-orange-100);
   --color-button-text-primary-default: var(--color-white);
   --color-button-text-primary-disabled: var(--color-gray-600);
   --color-button-text-secondary-default: var(--color-gray-950);
@@ -146,6 +151,8 @@
   --color-button-text-success-disabled: var(--color-gray-100);
   --color-button-text-danger-default: var(--color-white);
   --color-button-text-danger-disabled: var(--color-gray-100);
+  --color-button-text-warning-default: var(--color-white);
+  --color-button-text-warning-disabled: var(--color-gray-600);
   --color-button-border-primary-focussed: var(--color-cornflower-blue-100);
   --color-button-border-secondary-focussed: var(--color-cornflower-blue-100);
   --color-button-border-secondary-hover: var(--color-cornflower-blue-700);
@@ -155,6 +162,7 @@
   --color-button-border-link-focussed: var(--color-cornflower-blue-100);
   --color-button-border-success-focussed: var(--color-green-100);
   --color-button-border-danger-focussed: var(--color-brick-100);
+  --color-button-border-warning-focussed: var(--color-orange-100);
   --color-progress-bar-bg-progress: var(--color-cornflower-blue-500);
   --color-progress-bar-bg-bar: var(--color-gray-50);
   --color-progress-bar-border: var(--color-gray-200);