@rockshin/tao-ui 0.0.2 → 0.0.3

package/dist/components/breadcrumb/breadcrumb.css

@@ -314,6 +314,9 @@
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --tao-motion-unit: .1s;
+    --tao-z-index-drawer: 1000;
+    --tao-z-index-modal: 1000;
+    --tao-z-index-popup: 1100;
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: var(--tao-color-primary);
   }

package/dist/components/button/button.css

@@ -314,6 +314,9 @@
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --tao-motion-unit: .1s;
+    --tao-z-index-drawer: 1000;
+    --tao-z-index-modal: 1000;
+    --tao-z-index-popup: 1100;
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: var(--tao-color-primary);
   }

package/dist/components/checkbox/checkbox.css

@@ -314,6 +314,9 @@
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --tao-motion-unit: .1s;
+    --tao-z-index-drawer: 1000;
+    --tao-z-index-modal: 1000;
+    --tao-z-index-popup: 1100;
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: var(--tao-color-primary);
   }

package/dist/components/collapsible/collapsible.css

@@ -314,6 +314,9 @@
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --tao-motion-unit: .1s;
+    --tao-z-index-drawer: 1000;
+    --tao-z-index-modal: 1000;
+    --tao-z-index-popup: 1100;
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: var(--tao-color-primary);
   }

package/dist/components/context-menu/context-menu.css

@@ -314,6 +314,9 @@
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --tao-motion-unit: .1s;
+    --tao-z-index-drawer: 1000;
+    --tao-z-index-modal: 1000;
+    --tao-z-index-popup: 1100;
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: var(--tao-color-primary);
   }
@@ -801,7 +804,7 @@
   box-shadow: var(--tao-box-shadow-secondary);
   font-family: var(--tao-font-family);
   color: var(--tao-color-text);
-  z-index: 1000;
+  z-index: var(--tao-z-index-popup);
   animation-duration: var(--tao-motion-duration-fast);
   animation-timing-function: var(--tao-motion-ease-out-quint);
 }

package/dist/components/context-menu/context-menu.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { useTaoConfig } from "../../provider/tao-provider.js";
+import { TaoPortalScope, useTaoConfig } from "../../provider/tao-provider.js";
 import { cx } from "../../utils/semantic.js";
 import { useMenuController } from "../menu/menu-render.js";
 import "./context-menu.css";
@@ -68,13 +68,15 @@ function ContextMenu(t0) {
     let t7;
     if ($[12] !== content || $[13] !== size || $[14] !== t4 || $[15] !== t6) {
         t7 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_context_menu_293d36e3.Portal, {
-            children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_context_menu_293d36e3.Content, {
-                "data-tao-menu-content": "",
-                "data-tao-context-menu": "",
-                "data-tao-size": size,
-                className: t4,
-                style: t6,
-                children: content
+            children: /*#__PURE__*/ jsx(TaoPortalScope, {
+                children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_context_menu_293d36e3.Content, {
+                    "data-tao-menu-content": "",
+                    "data-tao-context-menu": "",
+                    "data-tao-size": size,
+                    className: t4,
+                    style: t6,
+                    children: content
+                })
             })
         });
         $[12] = content;

package/dist/components/date-picker/calendar/month-grid.d.ts

@@ -5,5 +5,5 @@ interface MonthGridProps {
     onSelect: (date: Dayjs) => void;
     disabledDate?: (date: Dayjs) => boolean;
 }
-export declare function MonthGrid({ viewDate, value, onSelect, disabledDate }: MonthGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function MonthGrid({ viewDate, value, onSelect, disabledDate, }: MonthGridProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/date-picker/calendar/time-panel.d.ts

@@ -8,5 +8,5 @@ interface TimePanelProps {
     /** Increment to force scroll-to-selected even when the value hasn't changed */
     scrollKey?: number;
 }
-export declare function TimePanel({ hour, minute, second, onChange, config, scrollKey }: TimePanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimePanel({ hour, minute, second, onChange, config, scrollKey, }: TimePanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/date-picker/calendar/year-grid.d.ts

@@ -5,5 +5,5 @@ interface YearGridProps {
     onSelect: (date: Dayjs) => void;
     disabledDate?: (date: Dayjs) => boolean;
 }
-export declare function YearGrid({ viewDate, value, onSelect, disabledDate }: YearGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function YearGrid({ viewDate, value, onSelect, disabledDate, }: YearGridProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/date-picker/date-picker.css

@@ -356,6 +356,9 @@
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --tao-motion-unit: .1s;
+    --tao-z-index-drawer: 1000;
+    --tao-z-index-modal: 1000;
+    --tao-z-index-popup: 1100;
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: var(--tao-color-primary);
   }
@@ -878,6 +881,25 @@
   box-shadow: 0 0 0 2px var(--tao-color-error-outline);
 }
 
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning] {
+  border-color: var(--tao-warning);
+}
+
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+  border-color: var(--tao-color-warning);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  [data-tao-control][data-tao-variant="outlined"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+    border-color: color-mix(in oklch, var(--tao-color-warning) 80%, white);
+  }
+}
+
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning]:focus-within, [data-tao-control][data-tao-variant="outlined"][data-tao-warning][data-state="open"] {
+  border-color: var(--tao-warning);
+  box-shadow: 0 0 0 2px var(--tao-color-warning-outline);
+}
+
 [data-tao-control][data-tao-variant="outlined"][data-disabled], [data-tao-control][data-tao-variant="outlined"]:has(input:disabled) {
   background: var(--tao-color-bg-disabled);
   border-color: var(--tao-color-border);
@@ -922,6 +944,26 @@
   box-shadow: 0 0 0 2px var(--tao-color-error-outline);
 }
 
+[data-tao-control][data-tao-variant="filled"][data-tao-warning] {
+  background: var(--tao-warning-bg);
+}
+
+[data-tao-control][data-tao-variant="filled"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+  background: var(--tao-color-warning);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  [data-tao-control][data-tao-variant="filled"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+    background: color-mix(in oklch, var(--tao-color-warning) 10%, var(--tao-color-bg-base));
+  }
+}
+
+[data-tao-control][data-tao-variant="filled"][data-tao-warning]:focus-within, [data-tao-control][data-tao-variant="filled"][data-tao-warning][data-state="open"] {
+  background: var(--tao-color-bg-container);
+  border-color: var(--tao-warning);
+  box-shadow: 0 0 0 2px var(--tao-color-warning-outline);
+}
+
 [data-tao-control][data-tao-variant="filled"][data-disabled], [data-tao-control][data-tao-variant="filled"]:has(input:disabled) {
   background: var(--tao-color-bg-disabled);
   border-color: var(--tao-color-border);
@@ -1038,7 +1080,7 @@ button[data-tao-picker-trigger][data-tao-size="large"] {
   border: var(--tao-line-width) solid var(--tao-color-border);
   border-radius: var(--tao-radius-lg);
   box-shadow: var(--tao-box-shadow-secondary);
-  z-index: 1000;
+  z-index: var(--tao-z-index-popup);
   width: auto;
   animation: tao-picker-in var(--tao-motion-duration-fast) cubic-bezier(.16, 1, .3, 1);
   overflow: hidden;

package/dist/components/date-picker/date-picker.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
-import { useTaoConfig } from "../../provider/tao-provider.js";
+import { TaoPortalScope, useTaoConfig } from "../../provider/tao-provider.js";
 import { Drawer } from "../drawer/drawer.js";
 import { useIsMobile } from "../select/use-is-mobile.js";
 import { CalendarGrid } from "./calendar/calendar-grid.js";
@@ -568,12 +568,14 @@ function DatePicker(t0) {
     let t42;
     if ($[145] !== panelContent) {
         t42 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Portal, {
-            children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Content, {
-                "data-tao-picker-dropdown": "",
-                sideOffset: 4,
-                align: "start",
-                onOpenAutoFocus: _temp3,
-                children: panelContent
+            children: /*#__PURE__*/ jsx(TaoPortalScope, {
+                children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Content, {
+                    "data-tao-picker-dropdown": "",
+                    sideOffset: 4,
+                    align: "start",
+                    onOpenAutoFocus: _temp3,
+                    children: panelContent
+                })
             })
         });
         $[145] = panelContent;

package/dist/components/date-picker/range-picker.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import dayjs from "dayjs";
 import { useCallback, useState } from "react";
-import { useTaoConfig } from "../../provider/tao-provider.js";
+import { TaoPortalScope, useTaoConfig } from "../../provider/tao-provider.js";
 import { Drawer } from "../drawer/drawer.js";
 import { useIsMobile } from "../select/use-is-mobile.js";
 import { CalendarGrid } from "./calendar/calendar-grid.js";
@@ -270,12 +270,14 @@ function RangePicker({ value, onChange, picker = 'date', showTime, format: forma
                 children: trigger
             }),
             /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Portal, {
-                children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Content, {
-                    "data-tao-picker-dropdown": "",
-                    sideOffset: 4,
-                    align: "start",
-                    onOpenAutoFocus: (e_1)=>e_1.preventDefault(),
-                    children: panelContent
+                children: /*#__PURE__*/ jsx(TaoPortalScope, {
+                    children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Content, {
+                        "data-tao-picker-dropdown": "",
+                        sideOffset: 4,
+                        align: "start",
+                        onOpenAutoFocus: (e_1)=>e_1.preventDefault(),
+                        children: panelContent
+                    })
                 })
             })
         ]

package/dist/components/drawer/drawer.css

@@ -314,6 +314,9 @@
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --tao-motion-unit: .1s;
+    --tao-z-index-drawer: 1000;
+    --tao-z-index-modal: 1000;
+    --tao-z-index-popup: 1100;
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: var(--tao-color-primary);
   }
@@ -792,7 +795,7 @@
 }
 
 [data-tao-drawer-overlay] {
-  z-index: 999;
+  z-index: var(--tao-z-index-drawer);
   animation: tao-fade-in var(--tao-motion-duration-mid) ease-out;
   background: oklch(0% 0 0 / .1);
   position: fixed;
@@ -820,7 +823,7 @@
 }
 
 [data-tao-drawer] {
-  z-index: 1000;
+  z-index: calc(var(--tao-z-index-drawer) + 1);
   background: var(--tao-color-bg-elevated);
   box-shadow: var(--tao-box-shadow-secondary);
   font-family: var(--tao-font-family);

package/dist/components/drawer/drawer.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";
+import { TaoPortalScope } from "../../provider/tao-provider.js";
 import { cx } from "../../utils/semantic.js";
 import "./drawer.css";
 import * as __rspack_external__radix_ui_react_dialog_6b867f3d from "@radix-ui/react-dialog";
@@ -10,7 +11,7 @@ const SIZE_PRESET = {
 };
 const MIN_DRAG_SIZE = 200;
 function Drawer(t0) {
-    const $ = c(88);
+    const $ = c(90);
     const { open, onClose, title, extra, footer, placement: t1, size, width, height, closable: t2, closeIcon, maskClosable: t3, mask: t4, keyboard: t5, resizable, afterOpenChange, afterClose, destroyOnHidden: t6, children, classNames, styles: stylesProp } = t0;
     const placement = void 0 === t1 ? "right" : t1;
     const closable = void 0 === t2 ? true : t2;
@@ -326,32 +327,40 @@ function Drawer(t0) {
         $[79] = t27;
     } else t27 = $[79];
     let t28;
-    if ($[80] !== forceMount || $[81] !== t14 || $[82] !== t27) {
-        t28 = /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_dialog_6b867f3d.Portal, {
-            forceMount: forceMount,
+    if ($[80] !== t14 || $[81] !== t27) {
+        t28 = /*#__PURE__*/ jsxs(TaoPortalScope, {
             children: [
                 t14,
                 t27
             ]
         });
-        $[80] = forceMount;
-        $[81] = t14;
-        $[82] = t27;
-        $[83] = t28;
-    } else t28 = $[83];
+        $[80] = t14;
+        $[81] = t27;
+        $[82] = t28;
+    } else t28 = $[82];
     let t29;
-    if ($[84] !== open || $[85] !== t13 || $[86] !== t28) {
-        t29 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Root, {
+    if ($[83] !== forceMount || $[84] !== t28) {
+        t29 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Portal, {
+            forceMount: forceMount,
+            children: t28
+        });
+        $[83] = forceMount;
+        $[84] = t28;
+        $[85] = t29;
+    } else t29 = $[85];
+    let t30;
+    if ($[86] !== open || $[87] !== t13 || $[88] !== t29) {
+        t30 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Root, {
             open: open,
             onOpenChange: t13,
-            children: t28
+            children: t29
         });
-        $[84] = open;
-        $[85] = t13;
-        $[86] = t28;
-        $[87] = t29;
-    } else t29 = $[87];
-    return t29;
+        $[86] = open;
+        $[87] = t13;
+        $[88] = t29;
+        $[89] = t30;
+    } else t30 = $[89];
+    return t30;
 }
 function CloseIcon() {
     const $ = c(1);

package/dist/components/dropdown/dropdown.css

@@ -314,6 +314,9 @@
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --tao-motion-unit: .1s;
+    --tao-z-index-drawer: 1000;
+    --tao-z-index-modal: 1000;
+    --tao-z-index-popup: 1100;
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: var(--tao-color-primary);
   }

package/dist/components/dropdown/dropdown.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { isValidElement, useRef, useState } from "react";
-import { useTaoConfig } from "../../provider/tao-provider.js";
+import { TaoPortalScope, useTaoConfig } from "../../provider/tao-provider.js";
 import { cx } from "../../utils/semantic.js";
 import { Button } from "../button/button.js";
 import { ContextMenu } from "../context-menu/context-menu.js";
@@ -239,20 +239,22 @@ function Dropdown(props) {
     let t19;
     if ($[47] !== align || $[48] !== content || $[49] !== hoverProps || $[50] !== side || $[51] !== size || $[52] !== t15 || $[53] !== t17 || $[54] !== t18) {
         t19 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dropdown_menu_dbc6754d.Portal, {
-            children: /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_dropdown_menu_dbc6754d.Content, {
-                "data-tao-menu-content": "",
-                "data-tao-dropdown": "",
-                "data-tao-size": size,
-                className: t15,
-                style: t17,
-                side: side,
-                align: align,
-                sideOffset: 4,
-                ...hoverProps,
-                children: [
-                    t18,
-                    content
-                ]
+            children: /*#__PURE__*/ jsx(TaoPortalScope, {
+                children: /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_dropdown_menu_dbc6754d.Content, {
+                    "data-tao-menu-content": "",
+                    "data-tao-dropdown": "",
+                    "data-tao-size": size,
+                    className: t15,
+                    style: t17,
+                    side: side,
+                    align: align,
+                    sideOffset: 4,
+                    ...hoverProps,
+                    children: [
+                        t18,
+                        content
+                    ]
+                })
             })
         });
         $[47] = align;

package/dist/components/form-field/form.css

@@ -314,6 +314,9 @@
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --tao-motion-unit: .1s;
+    --tao-z-index-drawer: 1000;
+    --tao-z-index-modal: 1000;
+    --tao-z-index-popup: 1100;
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: var(--tao-color-primary);
   }

package/dist/components/input/input.css

@@ -356,6 +356,9 @@
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --tao-motion-unit: .1s;
+    --tao-z-index-drawer: 1000;
+    --tao-z-index-modal: 1000;
+    --tao-z-index-popup: 1100;
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: var(--tao-color-primary);
   }
@@ -878,6 +881,25 @@
   box-shadow: 0 0 0 2px var(--tao-color-error-outline);
 }
 
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning] {
+  border-color: var(--tao-warning);
+}
+
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+  border-color: var(--tao-color-warning);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  [data-tao-control][data-tao-variant="outlined"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+    border-color: color-mix(in oklch, var(--tao-color-warning) 80%, white);
+  }
+}
+
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning]:focus-within, [data-tao-control][data-tao-variant="outlined"][data-tao-warning][data-state="open"] {
+  border-color: var(--tao-warning);
+  box-shadow: 0 0 0 2px var(--tao-color-warning-outline);
+}
+
 [data-tao-control][data-tao-variant="outlined"][data-disabled], [data-tao-control][data-tao-variant="outlined"]:has(input:disabled) {
   background: var(--tao-color-bg-disabled);
   border-color: var(--tao-color-border);
@@ -922,6 +944,26 @@
   box-shadow: 0 0 0 2px var(--tao-color-error-outline);
 }
 
+[data-tao-control][data-tao-variant="filled"][data-tao-warning] {
+  background: var(--tao-warning-bg);
+}
+
+[data-tao-control][data-tao-variant="filled"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+  background: var(--tao-color-warning);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  [data-tao-control][data-tao-variant="filled"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+    background: color-mix(in oklch, var(--tao-color-warning) 10%, var(--tao-color-bg-base));
+  }
+}
+
+[data-tao-control][data-tao-variant="filled"][data-tao-warning]:focus-within, [data-tao-control][data-tao-variant="filled"][data-tao-warning][data-state="open"] {
+  background: var(--tao-color-bg-container);
+  border-color: var(--tao-warning);
+  box-shadow: 0 0 0 2px var(--tao-color-warning-outline);
+}
+
 [data-tao-control][data-tao-variant="filled"][data-disabled], [data-tao-control][data-tao-variant="filled"]:has(input:disabled) {
   background: var(--tao-color-bg-disabled);
   border-color: var(--tao-color-border);

package/dist/components/menu/menu-render.js

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { useState } from "react";
+import { TaoPortalScope } from "../../provider/tao-provider.js";
 import { cx } from "../../utils/semantic.js";
 import "./menu.css";
 function ChevronRightIcon() {
@@ -177,14 +178,16 @@ function renderMenuItems(items, ctx) {
                     ]
                 }),
                 /*#__PURE__*/ jsx(P.Portal, {
-                    children: /*#__PURE__*/ jsx(P.SubContent, {
-                        "data-tao-menu-content": "",
-                        "data-tao-menu-sub-content": "",
-                        className: cx(ctx.classNames?.subContent),
-                        style: ctx.styles?.subContent,
-                        sideOffset: 2,
-                        alignOffset: -4,
-                        children: renderMenuItems(item.children, ctx)
+                    children: /*#__PURE__*/ jsx(TaoPortalScope, {
+                        children: /*#__PURE__*/ jsx(P.SubContent, {
+                            "data-tao-menu-content": "",
+                            "data-tao-menu-sub-content": "",
+                            className: cx(ctx.classNames?.subContent),
+                            style: ctx.styles?.subContent,
+                            sideOffset: 2,
+                            alignOffset: -4,
+                            children: renderMenuItems(item.children, ctx)
+                        })
                     })
                 })
             ]

package/dist/components/menu/menu.css

@@ -314,6 +314,9 @@
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --tao-motion-unit: .1s;
+    --tao-z-index-drawer: 1000;
+    --tao-z-index-modal: 1000;
+    --tao-z-index-popup: 1100;
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: var(--tao-color-primary);
   }
@@ -801,7 +804,7 @@
   box-shadow: var(--tao-box-shadow-secondary);
   font-family: var(--tao-font-family);
   color: var(--tao-color-text);
-  z-index: 1000;
+  z-index: var(--tao-z-index-popup);
   animation-duration: var(--tao-motion-duration-fast);
   animation-timing-function: var(--tao-motion-ease-out-quint);
 }

package/dist/components/modal/modal.css

@@ -314,6 +314,9 @@
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --tao-motion-unit: .1s;
+    --tao-z-index-drawer: 1000;
+    --tao-z-index-modal: 1000;
+    --tao-z-index-popup: 1100;
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: var(--tao-color-primary);
   }
@@ -792,7 +795,7 @@
 }
 
 [data-tao-modal-overlay] {
-  z-index: 1000;
+  z-index: var(--tao-z-index-modal);
   animation: tao-modal-fade-in var(--tao-motion-duration-mid) ease-out;
   background: oklch(0% 0 0 / .1);
   position: fixed;
@@ -816,7 +819,7 @@
 }
 
 [data-tao-modal-wrap] {
-  z-index: 1001;
+  z-index: calc(var(--tao-z-index-modal) + 1);
   padding: 100px var(--tao-padding-lg) var(--tao-padding-lg);
   justify-content: center;
   align-items: flex-start;

package/dist/components/modal/modal.js

@@ -1,12 +1,13 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef } from "react";
+import { TaoPortalScope } from "../../provider/tao-provider.js";
 import { cx } from "../../utils/semantic.js";
 import { Button } from "../button/button.js";
 import "./modal.css";
 import * as __rspack_external__radix_ui_react_dialog_6b867f3d from "@radix-ui/react-dialog";
 function Modal(t0) {
-    const $ = c(85);
+    const $ = c(87);
     const { open, onClose, title, footer, onOk, okText: t1, cancelText: t2, confirmLoading, okButtonProps, cancelButtonProps, width: t3, centered: t4, closable: t5, maskClosable: t6, keyboard: t7, afterClose, destroyOnHidden: t8, children, classNames, styles: stylesProp } = t0;
     const okText = void 0 === t1 ? "OK" : t1;
     const cancelText = void 0 === t2 ? "Cancel" : t2;
@@ -302,32 +303,40 @@ function Modal(t0) {
         $[76] = t38;
     } else t38 = $[76];
     let t39;
-    if ($[77] !== forceMount || $[78] !== t23 || $[79] !== t38) {
-        t39 = /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_dialog_6b867f3d.Portal, {
-            forceMount: forceMount,
+    if ($[77] !== t23 || $[78] !== t38) {
+        t39 = /*#__PURE__*/ jsxs(TaoPortalScope, {
             children: [
                 t23,
                 t38
             ]
         });
-        $[77] = forceMount;
-        $[78] = t23;
-        $[79] = t38;
-        $[80] = t39;
-    } else t39 = $[80];
+        $[77] = t23;
+        $[78] = t38;
+        $[79] = t39;
+    } else t39 = $[79];
     let t40;
-    if ($[81] !== open || $[82] !== t19 || $[83] !== t39) {
-        t40 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Root, {
+    if ($[80] !== forceMount || $[81] !== t39) {
+        t40 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Portal, {
+            forceMount: forceMount,
+            children: t39
+        });
+        $[80] = forceMount;
+        $[81] = t39;
+        $[82] = t40;
+    } else t40 = $[82];
+    let t41;
+    if ($[83] !== open || $[84] !== t19 || $[85] !== t40) {
+        t41 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Root, {
             open: open,
             onOpenChange: t19,
-            children: t39
+            children: t40
         });
-        $[81] = open;
-        $[82] = t19;
-        $[83] = t39;
-        $[84] = t40;
-    } else t40 = $[84];
-    return t40;
+        $[83] = open;
+        $[84] = t19;
+        $[85] = t40;
+        $[86] = t41;
+    } else t41 = $[86];
+    return t41;
 }
 function CloseIcon() {
     const $ = c(1);