@polymarbot/nuxt-layer-shadcn-ui 0.1.9 → 0.1.10

package/app/assets/styles/globals.css

@@ -2,6 +2,7 @@
 @import 'tw-animate-css';
 @import './colors.css';
 @import './utilities.css';
+@import './z-index.css';
 
 /* Ensure Tailwind scans the layer's own source files */
 @source '../../..';

package/app/assets/styles/z-index.css

@@ -0,0 +1,27 @@
+/* =========================================================================
+ * Portal-rendered overlays — z-index
+ * -------------------------------------------------------------------------
+ * Reka UI portals (Dialog, Sheet, Tooltip, etc.) render OUTSIDE each
+ * component's DOM scope, so z-index must be applied via non-scoped
+ * selectors. Centralized here so the stacking order stays consistent.
+ *
+ * Stacking order (low → high):
+ *   layout header                         z-100  (project convention)
+ *   dialog / sheet (Modal / Drawer)       z-200  (cover the header)
+ *   tooltip / popover / dropdown / select z-300  (above modal when nested)
+ * ========================================================================= */
+
+[data-slot='dialog-overlay'],
+[data-slot='dialog-content'],
+[data-slot='sheet-overlay'],
+[data-slot='sheet-content'] {
+  z-index: 200;
+}
+
+[data-slot='tooltip-content'],
+[data-slot='popover-content'],
+[data-slot='dropdown-menu-content'],
+[data-slot='dropdown-menu-sub-content'],
+[data-slot='select-content'] {
+  z-index: 300;
+}

package/app/components/ui/Drawer/index.vue

@@ -175,7 +175,6 @@ const contentClass = computed(() =>
 /* Translucent blur backdrop. SheetOverlay is rendered inside DialogPortal
    (outside component scope), so use a non-scoped style. */
 [data-slot='sheet-overlay'] {
-  z-index: 200;
   background-color: rgba(252, 252, 252, 0.3);
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
@@ -184,11 +183,6 @@ const contentClass = computed(() =>
   background-color: rgba(25, 25, 25, 0.3);
 }
 
-/* Raise above layout header (z-100) so the drawer covers it. */
-[data-slot='sheet-content'] {
-  z-index: 200;
-}
-
 /* Hide SheetContent's hardcoded built-in close button (no data-slot);
    we render our own SheetClose above with loading-aware disable. */
 [data-slot='sheet-content'] > button:not([data-slot]) {

package/app/components/ui/Modal/index.vue

@@ -187,7 +187,6 @@ const contentClass = computed(() =>
 /* Translucent blur backdrop. DialogOverlay is rendered inside DialogPortal
    (outside component scope), so use a non-scoped style. */
 [data-slot='dialog-overlay'] {
-  z-index: 200;
   background-color: rgba(252, 252, 252, 0.3);
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
@@ -195,8 +194,4 @@ const contentClass = computed(() =>
 .dark [data-slot='dialog-overlay'] {
   background-color: rgba(25, 25, 25, 0.3);
 }
-/* Raise above layout header (z-100) so the dialog covers it. */
-[data-slot='dialog-content'] {
-  z-index: 200;
-}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -42,5 +42,5 @@
     "vue-i18n": "^11",
     "vue-router": "^4 || ^5"
   },
-  "gitHead": "2330486301c717cc44e2d04a2eaf57a600da77fc"
+  "gitHead": "a73daeb2b68f3c5be4456866e294e5f26501f2ac"
 }