@weni/unnnic-system 3.12.3-alpha-teleports.2 → 3.12.3-alpha-teleports.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.12.3-alpha-teleports.2",
+  "version": "3.12.3-alpha-teleports.3",
   "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" style="z-index: 1405;">
+  <aside data-v-c3231c18="" class="unnnic-toast unnnic-toast--success" role="status" aria-live="polite" data-testid="toast" style="z-index: 1005;">
     <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

@@ -111,7 +111,7 @@ const typeConfig = computed(() => {
   };
 });
 
-const toastZIndex = useLayerZIndex('toast');
+const toastZIndex = useLayerZIndex();
 
 const handleClose = () => {
   isVisible.value = false;

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

@@ -36,8 +36,8 @@ const delegatedProps = reactiveOmit(props, 'class', 'parentClass');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const overlayZIndex = useLayerZIndex('modal', { offset: -2 });
-const modalZIndex = useLayerZIndex('modal');
+const overlayZIndex = useLayerZIndex({ offset: -2 });
+const modalZIndex = useLayerZIndex();
 
 const contentClasses = computed(() =>
   cn(

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

@@ -31,7 +31,7 @@ const emits = defineEmits<DialogContentEmits>();
 const delegatedProps = reactiveOmit(props, 'class');
 const forwardedProps = useForwardPropsEmits(delegatedProps, emits);
 
-const layerZIndex = useLayerZIndex('drawer');
+const layerZIndex = useLayerZIndex();
 </script>
 
 <template>

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

@@ -63,7 +63,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 const slots = useSlots();
 
-const popoverZIndex = useLayerZIndex('popover');
+const popoverZIndex = useLayerZIndex();
 
 const getComponentName = (vnode: VNode): string | undefined => {
   const componentType = vnode.type as { name?: string; __name?: string };

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

@@ -19,6 +19,7 @@ const props = withDefaults(
   defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(),
   {
     sideOffset: 0,
+    class: undefined,
   },
 );
 
@@ -27,7 +28,7 @@ const emits = defineEmits<TooltipContentEmits>();
 const delegatedProps = reactiveOmit(props, 'class');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
-const tooltipZIndex = useLayerZIndex('tooltip');
+const tooltipZIndex = useLayerZIndex();
 </script>
 
 <template>

package/src/lib/layer-manager.ts

@@ -1,62 +1,37 @@
 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 BASE_LAYER_Z_INDEX = 1000;
 const DEFAULT_STEP = 5;
 
-const activeValues: Record<LayerToken, number[]> = {
-  hide: [],
-  base: [],
-  drawer: [],
-  modal: [],
-  popover: [],
-  tooltip: [],
-  toast: [],
-};
+const layerStack: number[] = [];
+const layerHandles = new Map<symbol, number>();
 
-interface Allocation {
+interface LayerHandle {
   id: symbol;
-  type: LayerToken;
   value: number;
 }
 
-const allocations = new Map<symbol, Allocation>();
-
-function acquire(type: LayerToken): Allocation {
+function pushLayer(): LayerHandle {
   const id = Symbol('layer');
-  const list = activeValues[type];
-  const lastValue = list.length ? list[list.length - 1] : layerScale[type];
+  const lastValue = layerStack.length
+    ? layerStack[layerStack.length - 1]
+    : BASE_LAYER_Z_INDEX;
   const value = lastValue + DEFAULT_STEP;
-  const allocation: Allocation = { id, type, value };
-
-  list.push(value);
-  allocations.set(id, allocation);
-
-  return allocation;
+  layerStack.push(value);
+  layerHandles.set(id, value);
+  return { id, value };
 }
 
-function release(id: symbol) {
-  const allocation = allocations.get(id);
-  if (!allocation) {
+function popLayer(id: symbol) {
+  const value = layerHandles.get(id);
+  if (value === undefined) {
     return;
   }
 
-  allocations.delete(id);
-  const list = activeValues[allocation.type];
-  const index = list.indexOf(allocation.value);
-
+  layerHandles.delete(id);
+  const index = layerStack.indexOf(value);
   if (index !== -1) {
-    list.splice(index, 1);
+    layerStack.splice(index, 1);
   }
 }
 
@@ -64,26 +39,23 @@ 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);
+export function useLayerZIndex(options?: LayerZIndexOptions): Ref<number> {
+  const offset = options?.offset ?? 0;
+  const zIndex = ref(BASE_LAYER_Z_INDEX + offset);
 
   let allocationId: symbol | null = null;
 
   const allocate = () => {
-    const allocation = acquire(type);
-    allocationId = allocation.id;
-    zIndex.value = allocation.value + (options?.offset ?? 0);
+    const handle = pushLayer();
+    allocationId = handle.id;
+    zIndex.value = handle.value + offset;
   };
 
   onMounted(allocate);
 
   onBeforeUnmount(() => {
     if (allocationId) {
-      release(allocationId);
+      popLayer(allocationId);
       allocationId = null;
     }
   });

package/src/stories/LayerManager.docs.mdx

@@ -4,7 +4,7 @@ import { Meta } from '@storybook/blocks';
 
 # 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)
+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. Instead of assigning fixed bands per component type, we keep a single global stack that increments as layers mount. [Reference](https://v1.chakra-ui.com/docs/components/recipes/z-index)
 
 ## Why avoid manual z-index values?
 
@@ -14,25 +14,25 @@ The layer manager exists to keep every teleported component (dialogs, drawers, p
 
 ## 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.
+1. **Single base (1000)** – all teleported layers share the same starting point, which keeps the implementation simple and predictable.
+2. **Auto-increment** – every time a component mounts, it receives the next value in the global stack so the newest element always sits on top, regardless of type.
+3. **Scoped offsets** – overlays that belong to the same surface (e.g., `DialogOverlay` vs. `DialogContent`) call `useLayerZIndex({ offset: -2 })` so the overlay sits just beneath the content that spawned it.
 
 ```
-const modalZ = useLayerZIndex('modal');
-const overlayZ = useLayerZIndex('modal', { offset: -2 });
+const modalZ = useLayerZIndex();
+const overlayZ = useLayerZIndex({ 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.
+- **Deterministic ordering** – the last overlay opened is always on top, no matter if it is a drawer, modal, popover, or toast.
+- **Safer refactors** – no need to chase down hard-coded z-index constants across the codebase; everything flows through the same stack.
 
 ## 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`).
+1. Add a dedicated offset (e.g., `useLayerZIndex({ offset: X })`) if the overlay needs to sit just above/below a sibling.
 2. Only apply inline overrides for truly one-off cases, and document why the global manager does not work there.
 
 

package/src/stories/LayerManager.stories.js

@@ -48,7 +48,7 @@ export default {
 };
 
 export const DialogWithTooltipAndPopover = {
-  name: 'Dialog + Tooltip + Popover',
+  name: 'Dialog > Tooltip + Popover',
   render: () => ({
     components: {
       Dialog,
@@ -110,7 +110,7 @@ export const DialogWithTooltipAndPopover = {
 };
 
 export const DrawerWithTooltipAndPopover = {
-  name: 'Drawer + Tooltip + Popover',
+  name: 'Drawer > Tooltip + Popover',
   render: () => ({
     components: {
       Drawer,
@@ -174,7 +174,7 @@ export const DrawerWithTooltipAndPopover = {
 };
 
 export const DrawerNextToDialog = {
-  name: 'Drawer + Dialog',
+  name: 'Drawer > Dialog',
   render: () => ({
     components: {
       Drawer,
@@ -188,8 +188,6 @@ export const DrawerNextToDialog = {
       DialogContent,
       DialogHeader,
       DialogTitle,
-      DialogFooter,
-      DialogClose,
       UnnnicButton,
     },
     setup() {
@@ -224,11 +222,6 @@ export const DrawerNextToDialog = {
             <div style="padding: 24px; color: #67738B;">
               This dialog must appear above the drawer and its overlay.
             </div>
-            <DialogFooter>
-              <DialogClose>
-                <UnnnicButton text="Close dialog" type="tertiary" />
-              </DialogClose>
-            </DialogFooter>
           </DialogContent>
         </Dialog>
       </div>
@@ -236,6 +229,56 @@ export const DrawerNextToDialog = {
   }),
 };
 
+export const DrawerOpenedFromDialog = {
+  name: 'Dialog > Drawer',
+  render: () => ({
+    components: {
+      UnnnicButton,
+      Dialog,
+      DialogContent,
+      DialogHeader,
+      DialogTitle,
+      Drawer,
+      DrawerContent,
+      DrawerHeader,
+      DrawerTitle,
+      DrawerDescription,
+    },
+    setup() {
+      const dialogOpen = ref(false);
+      const drawerOpen = ref(false);
+      return { dialogOpen, drawerOpen };
+    },
+    template: `
+      <div>
+        <div style="display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;">
+          <UnnnicButton text="Open dialog" type="primary" @click="dialogOpen = true" />
+        </div>
+        <Dialog v-model:open="dialogOpen">
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Dialog</DialogTitle>
+            </DialogHeader>
+            <div style="padding: 24px; color: #67738B;">
+              <UnnnicButton text="Open drawer" type="primary" @click="drawerOpen = true" /> 
+            </div>
+          </DialogContent>
+        </Dialog>
+        <Drawer v-model:open="drawerOpen">
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>Drawer</DrawerTitle>
+            </DrawerHeader>
+            <div style="padding: 24px; color: #67738B;">
+              Drawer should appear above the dialog.
+            </div>
+          </DrawerContent>
+        </Drawer>
+      </div>
+    `,
+  }),
+};
+
 export const NestedDialogs = {
   name: 'Dialog nested',
   render: () => ({
@@ -303,7 +346,7 @@ export const NestedDialogs = {
 };
 
 export const DialogWithToast = {
-  name: 'Dialog + Toast',
+  name: 'Dialog > Toast',
   render: () => ({
     components: {
       Dialog,