@weni/unnnic-system 3.11.3-alpha.3 → 3.12.1-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.11.3-alpha.3",
+  "version": "3.12.1-alpha.0",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/Alert/__tests__/__snapshots__/Alert.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`UnnnicAlert.vue > matches the snapshot 1`] = `
 "<transition-stub data-v-c3231c18="" name="toast-slide" appear="true" persisted="false" css="true" data-testid="toast-transition">
-  <aside data-v-c3231c18="" class="unnnic-toast unnnic-toast--success" role="status" aria-live="polite" data-testid="toast">
+  <aside data-v-c3231c18="" class="unnnic-toast unnnic-toast--success" role="status" aria-live="polite" data-testid="toast" style="z-index: 1405;">
     <section data-v-c3231c18="" class="unnnic-toast__content" data-testid="toast-content">
       <header data-v-c3231c18="" class="unnnic-toast__header" data-testid="toast-header"><span data-v-26446d8e="" data-v-c3231c18="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--green-500 unnnic-icon-size--ant unnnic-icon__size--ant" data-testid="toast-type-icon" translate="no">check_circle</span>
         <h3 data-v-c3231c18="" class="unnnic-toast__title" data-testid="toast-title">Test Alert</h3><span data-v-26446d8e="" data-v-c3231c18="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable unnnic-toast__close" data-testid="toast-close-icon" translate="no">close</span>

package/src/components/Toast/Toast.vue

@@ -11,6 +11,7 @@
       :role="validType === 'error' ? 'alert' : 'status'"
       :aria-live="validType === 'error' ? 'assertive' : 'polite'"
       data-testid="toast"
+      :style="{ zIndex: toastZIndex }"
     >
       <section
         class="unnnic-toast__content"
@@ -74,6 +75,7 @@ import { ref, computed, onMounted, onUnmounted } from 'vue';
 
 import UnnnicIcon from '@/components/Icon.vue';
 import UnnnicButton from '@/components/Button/Button.vue';
+import { useLayerZIndex } from '@/lib/layer-manager';
 
 import type { ToastProps, ToastEmits } from './types';
 import type { SchemeColor } from '@/types/scheme-colors';
@@ -113,6 +115,8 @@ const typeConfig = computed(() => {
   return configMap[validType.value];
 });
 
+const toastZIndex = useLayerZIndex('toast');
+
 const handleClose = () => {
   isVisible.value = false;
   emit('close');
@@ -156,7 +160,6 @@ onUnmounted(() => {
   position: fixed;
   bottom: $unnnic-space-4;
   right: $unnnic-space-4;
-  z-index: 9999;
 
   display: flex;
   align-items: flex-end;

package/src/components/ToolTip/ToolTip.vue

@@ -1,50 +1,45 @@
 <template>
-  <TooltipProvider>
-    <Tooltip
-      :disabled="!(enabled || forceOpen)"
-      :open="forceOpen || undefined"
-      data-testid="tooltip-wrapper"
-    >
-      <TooltipTrigger data-testid="tooltip-trigger">
-        <slot />
-      </TooltipTrigger>
+  <Tooltip
+    :disabled="!(enabled || forceOpen)"
+    :open="forceOpen || undefined"
+    data-testid="tooltip-wrapper"
+  >
+    <TooltipTrigger data-testid="tooltip-trigger">
+      <slot />
+    </TooltipTrigger>
 
-      <TooltipContent
-        :class="['unnnic-tooltip-label', `unnnic-tooltip-label-${side}`]"
-        :style="{ maxWidth: maxWidth }"
-        :side="side"
-        data-testid="tooltip-content"
+    <TooltipContent
+      :class="['unnnic-tooltip-label', `unnnic-tooltip-label-${side}`]"
+      :style="{ maxWidth: maxWidth }"
+      :side="side"
+      data-testid="tooltip-content"
+    >
+      <template v-if="enableHtml">
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <section
+          v-html="text"
+          data-testid="tooltip-html-content"
+        ></section>
+      </template>
+      <template
+        v-for="(line, index) in text.split('\n')"
+        v-else
+        :key="index"
       >
-        <template v-if="enableHtml">
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <section
-            v-html="text"
-            data-testid="tooltip-html-content"
-          ></section>
-        </template>
-        <template
-          v-for="(line, index) in text.split('\n')"
-          v-else
-          :key="index"
-        >
-          {{ line }}
-          <br />
-        </template>
-      </TooltipContent>
-    </Tooltip>
-  </TooltipProvider>
+        {{ line }}
+        <br />
+      </template>
+    </TooltipContent>
+  </Tooltip>
 </template>
 
 <script>
-import { Tooltip, TooltipProvider } from '../ui/tooltip';
-import TooltipContent from '../ui/tooltip/TooltipContent.vue';
-import TooltipTrigger from '../ui/tooltip/TooltipTrigger.vue';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 
 export default {
   name: 'UnnnicTooltip',
   components: {
     Tooltip,
-    TooltipProvider,
     TooltipTrigger,
     TooltipContent,
   },

package/src/components/ToolTip/__tests__/ToolTip.spec.js

@@ -236,12 +236,6 @@ describe('ToolTip', () => {
   });
 
   describe('Component Structure', () => {
-    it('should have TooltipProvider component', () => {
-      expect(wrapper.findComponent({ name: 'TooltipProvider' }).exists()).toBe(
-        true,
-      );
-    });
-
     it('should have Tooltip component', () => {
       expect(wrapper.findComponent({ name: 'Tooltip' }).exists()).toBe(true);
     });

package/src/components/index.ts

@@ -93,6 +93,12 @@ import DataTable from './DataTable/index.vue';
 import Chip from './Chip/Chip.vue';
 import Toast from './Toast/Toast.vue';
 import { toast } from './Toast/ToastManager';
+import Popover from './ui/popover/Popover.vue';
+import PopoverContent from './ui/popover/PopoverContent.vue';
+import PopoverTrigger from './ui/popover/PopoverTrigger.vue';
+import PopoverFooter from './ui/popover/PopoverFooter.vue';
+import TemplatePreview from './TemplatePreview/TemplatePreview.vue';
+import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.vue';
 import Tabs from './ui/tabs/Tabs.vue';
 import TabsList from './ui/tabs/TabsList.vue';
 import TabsTrigger from './ui/tabs/TabsTrigger.vue';
@@ -103,12 +109,6 @@ import {
   SegmentedControlTrigger,
   SegmentedControlContent,
 } from './ui/segmented-control';
-import Popover from './ui/popover/Popover.vue';
-import PopoverContent from './ui/popover/PopoverContent.vue';
-import PopoverTrigger from './ui/popover/PopoverTrigger.vue';
-import PopoverFooter from './ui/popover/PopoverFooter.vue';
-import TemplatePreview from './TemplatePreview/TemplatePreview.vue';
-import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.vue';
 import PageHeader from './PageHeader/PageHeader.vue';
 import Dialog from './ui/dialog/Dialog.vue';
 import DialogContent from './ui/dialog/DialogContent.vue';
@@ -236,11 +236,11 @@ export const components: ComponentsMap = {
   unnnicTabsList: TabsList,
   unnnicTabsTrigger: TabsTrigger,
   unnnicTabsContent: TabsContent,
-  unnnicPageHeader: PageHeader,
   unnnicSegmentedControl: SegmentedControl,
   unnnicSegmentedControlList: SegmentedControlList,
   unnnicSegmentedControlTrigger: SegmentedControlTrigger,
   unnnicSegmentedControlContent: SegmentedControlContent,
+  unnnicPageHeader: PageHeader,
   unnnicDialog: Dialog,
   unnnicDialogContent: DialogContent,
   unnnicDialogFooter: DialogFooter,
@@ -353,6 +353,12 @@ export const unnnicSelectTime = SelectTime as VueComponent;
 export const unnnicChip = Chip;
 export const unnnicToast = Toast;
 export const unnnicToastManager = toast;
+export const unnnicPopover = Popover;
+export const unnnicPopoverContent = PopoverContent;
+export const unnnicPopoverTrigger = PopoverTrigger;
+export const unnnicPopoverFooter = PopoverFooter;
+export const unnnicTemplatePreview = TemplatePreview as VueComponent;
+export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
 export const unnnicTabs = Tabs;
 export const unnnicTabsList = TabsList;
 export const unnnicTabsTrigger = TabsTrigger;
@@ -361,12 +367,6 @@ export const unnnicSegmentedControl = SegmentedControl;
 export const unnnicSegmentedControlList = SegmentedControlList;
 export const unnnicSegmentedControlTrigger = SegmentedControlTrigger;
 export const unnnicSegmentedControlContent = SegmentedControlContent;
-export const unnnicPopover = Popover;
-export const unnnicPopoverContent = PopoverContent;
-export const unnnicPopoverTrigger = PopoverTrigger;
-export const unnnicPopoverFooter = PopoverFooter;
-export const unnnicTemplatePreview = TemplatePreview as VueComponent;
-export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
 export const unnnicPageHeader = PageHeader;
 export const unnnicDialog = Dialog;
 export const unnnicDialogContent = DialogContent;
@@ -479,6 +479,12 @@ export const UnnnicSelectTime = SelectTime as VueComponent;
 export const UnnnicChip = Chip;
 export const UnnnicToast = Toast;
 export const UnnnicToastManager = toast;
+export const UnnnicPopover = Popover;
+export const UnnnicPopoverContent = PopoverContent;
+export const UnnnicPopoverTrigger = PopoverTrigger;
+export const UnnnicPopoverFooter = PopoverFooter;
+export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
+export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
 export const UnnnicTabs = Tabs;
 export const UnnnicTabsList = TabsList;
 export const UnnnicTabsTrigger = TabsTrigger;
@@ -487,12 +493,6 @@ export const UnnnicSegmentedControl = SegmentedControl;
 export const UnnnicSegmentedControlList = SegmentedControlList;
 export const UnnnicSegmentedControlTrigger = SegmentedControlTrigger;
 export const UnnnicSegmentedControlContent = SegmentedControlContent;
-export const UnnnicPopover = Popover;
-export const UnnnicPopoverContent = PopoverContent;
-export const UnnnicPopoverTrigger = PopoverTrigger;
-export const UnnnicPopoverFooter = PopoverFooter;
-export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
-export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
 export const UnnnicPageHeader = PageHeader;
 export const UnnnicDialog = Dialog;
 export const UnnnicDialogContent = DialogContent;

package/src/components/ui/dialog/DialogContent.vue

@@ -10,6 +10,7 @@ import {
   useForwardPropsEmits,
 } from 'reka-ui';
 import { cn } from '@/lib/utils';
+import { useLayerZIndex } from '@/lib/layer-manager';
 
 defineOptions({
   name: 'UnnnicDialogContent',
@@ -35,6 +36,9 @@ const delegatedProps = reactiveOmit(props, 'class', 'parentClass');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
+const overlayZIndex = useLayerZIndex('modal', { offset: -2 });
+const modalZIndex = useLayerZIndex('modal');
+
 const contentClasses = computed(() =>
   cn(
     'unnnic-dialog-content',
@@ -58,12 +62,14 @@ const ConditionalWrapper: Component = (_, { slots }) => {
   <DialogPortal>
     <DialogOverlay
       class="unnnic-dialog-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      :style="{ zIndex: overlayZIndex }"
     />
 
     <ConditionalWrapper>
       <DialogContent
         v-bind="forwarded"
         :class="contentClasses"
+        :style="{ zIndex: modalZIndex }"
       >
         <slot />
       </DialogContent>

package/src/components/ui/drawer/DrawerContent.vue

@@ -5,6 +5,7 @@ import { reactiveOmit } from '@vueuse/core';
 import { useForwardPropsEmits } from 'reka-ui';
 import { DrawerContent, DrawerPortal } from 'vaul-vue';
 import { cn } from '@/lib/utils';
+import { useLayerZIndex } from '@/lib/layer-manager';
 import DrawerOverlay from './DrawerOverlay.vue';
 
 defineOptions({
@@ -20,6 +21,7 @@ const props = withDefaults(
     }
   >(),
   {
+    class: undefined,
     size: 'medium',
     showOverlay: true,
   },
@@ -28,11 +30,16 @@ const emits = defineEmits<DialogContentEmits>();
 
 const delegatedProps = reactiveOmit(props, 'class');
 const forwardedProps = useForwardPropsEmits(delegatedProps, emits);
+
+const layerZIndex = useLayerZIndex('drawer');
 </script>
 
 <template>
   <DrawerPortal>
-    <DrawerOverlay v-if="showOverlay" />
+    <DrawerOverlay
+      v-if="showOverlay"
+      :style="{ zIndex: layerZIndex - 2 }"
+    />
     <DrawerContent
       v-bind="forwardedProps"
       :class="
@@ -42,7 +49,10 @@ const forwardedProps = useForwardPropsEmits(delegatedProps, emits);
           props.class,
         )
       "
-      :style="{ '--initial-transform': 'calc(100% + 8px)' }"
+      :style="{
+        '--initial-transform': 'calc(100% + 8px)',
+        zIndex: layerZIndex,
+      }"
     >
       <slot />
     </DrawerContent>

package/src/components/ui/popover/PopoverContent.vue

@@ -9,6 +9,7 @@
           'bg-popover text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         )
       "
+      :style="{ zIndex: popoverZIndex }"
     >
       <section :class="`unnnic-popover__content ${props.class || ''}`">
         <component
@@ -34,6 +35,7 @@ import { computed, useSlots } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
 import { cn } from '@/lib/utils';
+import { useLayerZIndex } from '@/lib/layer-manager';
 
 defineOptions({
   inheritAttrs: false,
@@ -61,6 +63,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 const slots = useSlots();
 
+const popoverZIndex = useLayerZIndex('popover');
+
 const getComponentName = (vnode: VNode): string | undefined => {
   const componentType = vnode.type as { name?: string; __name?: string };
   return componentType?.name || componentType?.__name;

package/src/components/ui/popover/PopoverTrigger.vue

@@ -14,10 +14,14 @@ const props = defineProps<PopoverTriggerProps>();
   </PopoverTrigger>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .unnnic-popover-trigger {
   border: none;
   background: transparent;
   padding: 0;
+
+  & > * {
+    width: 100%;
+  }
 }
 </style>

package/src/components/ui/tooltip/Tooltip.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui';
 import { TooltipRoot, useForwardPropsEmits } from 'reka-ui';
+import { TooltipProvider } from 'reka-ui';
 
 const props = defineProps<TooltipRootProps>();
 const emits = defineEmits<TooltipRootEmits>();
@@ -9,7 +10,12 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <TooltipRoot v-bind="forwarded">
-    <slot />
-  </TooltipRoot>
+  <TooltipProvider
+    :delayDuration="100"
+    disableClosingTrigger
+  >
+    <TooltipRoot v-bind="forwarded">
+      <slot />
+    </TooltipRoot>
+  </TooltipProvider>
 </template>

package/src/components/ui/tooltip/TooltipContent.vue

@@ -9,6 +9,7 @@ import {
   useForwardPropsEmits,
 } from 'reka-ui';
 import { cn } from '@/lib/utils';
+import { useLayerZIndex } from '@/lib/layer-manager';
 
 defineOptions({
   inheritAttrs: false,
@@ -26,6 +27,7 @@ const emits = defineEmits<TooltipContentEmits>();
 const delegatedProps = reactiveOmit(props, 'class');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const tooltipZIndex = useLayerZIndex('tooltip');
 </script>
 
 <template>
@@ -39,6 +41,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
           props.class,
         )
       "
+      :style="{ zIndex: tooltipZIndex }"
     >
       <slot />
 
@@ -51,8 +54,6 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 @use '@/assets/scss/unnnic' as *;
 
 .tooltip__content {
-  z-index: 10001;
-
   background-color: $unnnic-color-gray-900;
   color: $unnnic-color-white;
   border-radius: $unnnic-radius-1;

package/src/components/ui/tooltip/TooltipTrigger.vue

@@ -18,5 +18,9 @@ const props = defineProps<TooltipTriggerProps>();
 <style lang="scss" scoped>
 .unnnic-tooltip-trigger {
   display: inline-block;
+
+  & > * {
+    width: 100%;
+  }
 }
 </style>

package/src/components/ui/tooltip/index.ts

@@ -1,4 +1,3 @@
 export { default as Tooltip } from './Tooltip.vue';
 export { default as TooltipContent } from './TooltipContent.vue';
-export { default as TooltipProvider } from './TooltipProvider.vue';
 export { default as TooltipTrigger } from './TooltipTrigger.vue';

package/src/lib/layer-manager.ts

@@ -0,0 +1,84 @@
+import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue';
+
+export const layerScale = {
+  hide: -1,
+  base: 0,
+  drawer: 1000,
+  modal: 1100,
+  popover: 1200,
+  tooltip: 1300,
+  toast: 1400,
+} as const;
+
+export type LayerToken = keyof typeof layerScale;
+
+const DEFAULT_STEP = 5;
+
+const counters: Record<LayerToken, number> = {
+  hide: 0,
+  base: 0,
+  drawer: 0,
+  modal: 0,
+  popover: 0,
+  tooltip: 0,
+  toast: 0,
+};
+
+interface Allocation {
+  id: symbol;
+  type: LayerToken;
+  value: number;
+}
+
+const allocations = new Map<symbol, Allocation>();
+
+function acquire(type: LayerToken): Allocation {
+  const id = Symbol('layer');
+  counters[type] = (counters[type] ?? 0) + 1;
+  const value = layerScale[type] + counters[type] * DEFAULT_STEP;
+  const allocation: Allocation = { id, type, value };
+  allocations.set(id, allocation);
+  return allocation;
+}
+
+function release(id: symbol) {
+  const allocation = allocations.get(id);
+  if (!allocation) {
+    return;
+  }
+
+  allocations.delete(id);
+  const current = Math.max((counters[allocation.type] ?? 1) - 1, 0);
+  counters[allocation.type] = current;
+}
+
+export interface LayerZIndexOptions {
+  offset?: number;
+}
+
+export function useLayerZIndex(
+  type: LayerToken = 'base',
+  options?: LayerZIndexOptions,
+): Ref<number> {
+  const initialValue = layerScale[type] + (options?.offset ?? 0);
+  const zIndex = ref(initialValue);
+
+  let allocationId: symbol | null = null;
+
+  const allocate = () => {
+    const allocation = acquire(type);
+    allocationId = allocation.id;
+    zIndex.value = allocation.value + (options?.offset ?? 0);
+  };
+
+  onMounted(allocate);
+
+  onBeforeUnmount(() => {
+    if (allocationId) {
+      release(allocationId);
+      allocationId = null;
+    }
+  });
+
+  return zIndex;
+}

package/src/stories/DrawerNext.stories.js

@@ -189,6 +189,7 @@ export const Sizes = {
     components: {
       Drawer,
       DrawerContent,
+      DrawerClose,
       DrawerTrigger,
       DrawerHeader,
       DrawerTitle,

package/src/stories/LayerManager.docs.mdx

@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Utilities/Layer Manager/Overview" />
+
+# Layer Manager Overview
+
+The layer manager exists to keep every teleported component (dialogs, drawers, popovers, tooltips, toasts, etc.) in a predictable stacking order without sprinkling arbitrary `z-index: 9999` rules across the codebase. Defining semantic bands (drawer, modal, popover, tooltip, toast) and allocating values automatically whenever a component mounts. [Reference](https://v1.chakra-ui.com/docs/components/recipes/z-index)
+
+## Why avoid manual z-index values?
+
+- **Unbounded numbers** – once one component uses `z-index: 9999`, the next overlay needs more. This escalates quickly and still breaks when stacking contexts change.
+- **Stacking contexts** – `position`, `transform`, `opacity`, `filter`, and even flex or grid children can create new contexts that ignore global z-index rules. Portaled content plus a manager side-steps this entirely.
+- **Shared ownership** – dialogs, drawers, dropdowns, and popovers often live in different packages. A single allocator means each feature does not need to know what values others are using.
+
+## How it works here
+
+1. **Tokens, not numbers** – components request a token such as `modal`, `popover`, or `tooltip`. The manager maps those tokens to a base band (e.g., modals start at 1200, popovers at 1400).
+2. **Auto-increment** – every time a component mounts, it receives the next value in its band so nested dialogs or infinite toasts still stack correctly.
+3. **Scoped offsets** – overlays that belong to the same surface (e.g., `DialogOverlay` vs `DialogContent`) simply call `useLayerZIndex` with a small negative offset so the overlay sits just beneath the content that opened it.
+
+```
+const modalZ = useLayerZIndex('modal');
+const overlayZ = useLayerZIndex('modal', { offset: -2 });
+```
+
+## Benefits
+
+- **Deterministic ordering** – open a drawer, then a popover, then a dialog, then a tooltip and the visual order will always follow the semantic bands.
+- **Safer refactors** – tokens can be remapped (e.g., raise the entire `tooltip` band) without touching every component.
+
+## When to override
+
+In rare cases you might still need a custom `z-index`. Prefer to:
+
+1. Add a new token in the layer manager if the surface fits the existing pattern (e.g., `tour`).
+2. Only apply inline overrides for truly one-off cases, and document why the global manager does not work there.
+
+
+Use the `Layer Manager` stories in Storybook to verify real interactions (dialog + tooltip/popover, drawer + dialog, nested dialogs, dialog + toast) whenever you add a new teleported component.
+