@rockshin/tao-ui 0.0.2 → 0.0.3

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,26 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type TaoSize } from '../../provider/tao-provider';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import './spinner.css';
+export type SpinnerSemanticPart = 'root' | 'indicator' | 'tip' | 'overlay';
+export interface SpinnerProps {
+    /** Whether the spinner is visible. Defaults to true. */
+    spinning?: boolean;
+    /** Size of the indicator. Inherits from TaoProvider. */
+    size?: TaoSize;
+    /** Description text rendered under the indicator. */
+    tip?: ReactNode;
+    /** Delay (ms) before showing the spinner — prevents flicker on fast loads. */
+    delay?: number;
+    /** Custom indicator node, replaces the default spinner. */
+    indicator?: ReactNode;
+    /** Wrap content: the spinner overlays `children` while spinning. */
+    children?: ReactNode;
+    /** Render a full-screen backdrop with a centered spinner. */
+    fullscreen?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SemanticClassNames<SpinnerSemanticPart>;
+    styles?: SemanticStyles<SpinnerSemanticPart>;
+}
+export declare function Spinner({ spinning, size, tip, delay, indicator, children, fullscreen, className, style, classNames, styles, }: SpinnerProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/spinner/spinner.js

@@ -0,0 +1,229 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+import { useTaoConfig } from "../../provider/tao-provider.js";
+import { cx } from "../../utils/semantic.js";
+import "./spinner.css";
+function Spinner(t0) {
+    const $ = c(53);
+    const { spinning: t1, size, tip, delay, indicator, children, fullscreen: t2, className, style, classNames, styles } = t0;
+    const spinning = void 0 === t1 ? true : t1;
+    const fullscreen = void 0 === t2 ? false : t2;
+    const ctx = useTaoConfig();
+    const resolvedSize = size ?? ctx.size;
+    const [active, setActive] = useState(delay ? false : spinning);
+    let t3;
+    let t4;
+    if ($[0] !== delay || $[1] !== spinning) {
+        t3 = ()=>{
+            if (delay && spinning) {
+                const t = setTimeout(()=>setActive(true), delay);
+                return ()=>clearTimeout(t);
+            }
+            setActive(spinning);
+        };
+        t4 = [
+            spinning,
+            delay
+        ];
+        $[0] = delay;
+        $[1] = spinning;
+        $[2] = t3;
+        $[3] = t4;
+    } else {
+        t3 = $[2];
+        t4 = $[3];
+    }
+    useEffect(t3, t4);
+    const t5 = classNames?.root;
+    const t6 = !children && !fullscreen && className;
+    let t7;
+    if ($[4] !== t5 || $[5] !== t6) {
+        t7 = cx(t5, t6);
+        $[4] = t5;
+        $[5] = t6;
+        $[6] = t7;
+    } else t7 = $[6];
+    let t8;
+    if ($[7] !== children || $[8] !== fullscreen || $[9] !== style || $[10] !== styles?.root) {
+        t8 = children || fullscreen ? styles?.root : {
+            ...styles?.root,
+            ...style
+        };
+        $[7] = children;
+        $[8] = fullscreen;
+        $[9] = style;
+        $[10] = styles?.root;
+        $[11] = t8;
+    } else t8 = $[11];
+    const t9 = classNames?.indicator;
+    let t10;
+    if ($[12] !== t9) {
+        t10 = cx(t9);
+        $[12] = t9;
+        $[13] = t10;
+    } else t10 = $[13];
+    const t11 = styles?.indicator;
+    let t12;
+    if ($[14] !== indicator) {
+        t12 = indicator ?? /*#__PURE__*/ jsx(DefaultIndicator, {});
+        $[14] = indicator;
+        $[15] = t12;
+    } else t12 = $[15];
+    let t13;
+    if ($[16] !== t10 || $[17] !== t11 || $[18] !== t12) {
+        t13 = /*#__PURE__*/ jsx("span", {
+            "data-tao-spinner-indicator": "",
+            className: t10,
+            style: t11,
+            children: t12
+        });
+        $[16] = t10;
+        $[17] = t11;
+        $[18] = t12;
+        $[19] = t13;
+    } else t13 = $[19];
+    let t14;
+    if ($[20] !== classNames?.tip || $[21] !== styles?.tip || $[22] !== tip) {
+        t14 = null != tip && /*#__PURE__*/ jsx("span", {
+            "data-tao-spinner-tip": "",
+            className: cx(classNames?.tip),
+            style: styles?.tip,
+            children: tip
+        });
+        $[20] = classNames?.tip;
+        $[21] = styles?.tip;
+        $[22] = tip;
+        $[23] = t14;
+    } else t14 = $[23];
+    let t15;
+    if ($[24] !== resolvedSize || $[25] !== t13 || $[26] !== t14 || $[27] !== t7 || $[28] !== t8) {
+        t15 = /*#__PURE__*/ jsxs("span", {
+            "data-tao-spinner": "",
+            "data-tao-size": resolvedSize,
+            className: t7,
+            style: t8,
+            role: "status",
+            "aria-live": "polite",
+            children: [
+                t13,
+                t14
+            ]
+        });
+        $[24] = resolvedSize;
+        $[25] = t13;
+        $[26] = t14;
+        $[27] = t7;
+        $[28] = t8;
+        $[29] = t15;
+    } else t15 = $[29];
+    const spinnerCore = t15;
+    if (fullscreen) {
+        if (!active) return null;
+        const t16 = classNames?.overlay;
+        let t17;
+        if ($[30] !== className || $[31] !== t16) {
+            t17 = cx(t16, className);
+            $[30] = className;
+            $[31] = t16;
+            $[32] = t17;
+        } else t17 = $[32];
+        const t18 = styles?.overlay;
+        let t19;
+        if ($[33] !== style || $[34] !== t18) {
+            t19 = {
+                ...t18,
+                ...style
+            };
+            $[33] = style;
+            $[34] = t18;
+            $[35] = t19;
+        } else t19 = $[35];
+        let t20;
+        if ($[36] !== spinnerCore || $[37] !== t17 || $[38] !== t19) {
+            t20 = /*#__PURE__*/ jsx("div", {
+                "data-tao-spinner-fullscreen": "",
+                className: t17,
+                style: t19,
+                children: spinnerCore
+            });
+            $[36] = spinnerCore;
+            $[37] = t17;
+            $[38] = t19;
+            $[39] = t20;
+        } else t20 = $[39];
+        return t20;
+    }
+    if (null != children) {
+        const t16 = active || void 0;
+        let t17;
+        if ($[40] !== children) {
+            t17 = /*#__PURE__*/ jsx("div", {
+                "data-tao-spinner-content": "",
+                children: children
+            });
+            $[40] = children;
+            $[41] = t17;
+        } else t17 = $[41];
+        let t18;
+        if ($[42] !== active || $[43] !== classNames?.overlay || $[44] !== spinnerCore || $[45] !== styles?.overlay) {
+            t18 = active && /*#__PURE__*/ jsx("div", {
+                "data-tao-spinner-overlay": "",
+                className: cx(classNames?.overlay),
+                style: styles?.overlay,
+                children: spinnerCore
+            });
+            $[42] = active;
+            $[43] = classNames?.overlay;
+            $[44] = spinnerCore;
+            $[45] = styles?.overlay;
+            $[46] = t18;
+        } else t18 = $[46];
+        let t19;
+        if ($[47] !== className || $[48] !== style || $[49] !== t16 || $[50] !== t17 || $[51] !== t18) {
+            t19 = /*#__PURE__*/ jsxs("div", {
+                "data-tao-spinner-container": "",
+                "data-tao-spinning": t16,
+                className: className,
+                style: style,
+                children: [
+                    t17,
+                    t18
+                ]
+            });
+            $[47] = className;
+            $[48] = style;
+            $[49] = t16;
+            $[50] = t17;
+            $[51] = t18;
+            $[52] = t19;
+        } else t19 = $[52];
+        return t19;
+    }
+    if (!active) return null;
+    return spinnerCore;
+}
+function DefaultIndicator() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            "data-tao-spinner-svg": "",
+            viewBox: "0 0 50 50",
+            fill: "none",
+            "aria-hidden": true,
+            children: /*#__PURE__*/ jsx("circle", {
+                cx: "25",
+                cy: "25",
+                r: "20",
+                stroke: "currentColor",
+                strokeWidth: "5",
+                strokeLinecap: "round",
+                strokeDasharray: "90 40"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+export { Spinner };

package/dist/components/splitter/splitter.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/switch/switch.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/table/table.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/tabs/tabs.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/tag/tag.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/textarea/textarea.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/index.d.ts

@@ -11,19 +11,20 @@ export { FormActions, type FormActionsProps, type FormActionsSemanticPart, } fro
 export { FormField, type FormFieldProps, type FormFieldSemanticPart, } from './components/form-field/form-field';
 export { FormSection, type FormSectionProps, type FormSectionSemanticPart, } from './components/form-section/form-section';
 export { Input, type InputProps, type InputSemanticPart, } from './components/input/input';
-export { type AutoSizeOptions, Textarea, type TextareaProps, type TextareaSemanticPart, } from './components/textarea/textarea';
 export { type ConfirmType, Modal, type ModalFooterRender, type ModalFuncProps, type ModalFuncReturn, type ModalHookApi, type ModalProps, type ModalSemanticPart, } from './components/modal';
 export { Pagination, type PaginationProps, type PaginationSemanticPart, } from './components/pagination/pagination';
 export { Radio, RadioGroup, type RadioGroupProps, type RadioOptionType, type RadioProps, type RadioSemanticPart, } from './components/radio/radio';
 export { ScrollArea, type ScrollAreaProps, type ScrollAreaSemanticPart, type ScrollAreaType, } from './components/scroll-area/scroll-area';
-export { Select, type SelectOption, type SelectProps, } from './components/select/select';
+export { ChevronsUpDownIcon, Select, type SelectOption, type SelectPlacement, type SelectProps, type SelectSemanticPart, } from './components/select/select';
+export { Spinner, type SpinnerProps, type SpinnerSemanticPart, } from './components/spinner/spinner';
 export { Splitter, type SplitterPanelProps, type SplitterProps, type SplitterSemanticPart, } from './components/splitter/splitter';
 export { Switch, type SwitchProps, type SwitchSemanticPart, } from './components/switch/switch';
 export { type SorterResult, type SortOrder, Table, type TableColumn, type TableFilterItem, type TablePagination, type TableProps, type TableRowSelection, type TableSemanticPart, } from './components/table/table';
 export { type TabItem, Tabs, type TabsProps, type TabsSemanticPart, } from './components/tabs/tabs';
 export { CheckableTag, type CheckableTagProps, Tag, type TagColor, type TagProps, type TagSemanticPart, type TagVariant, } from './components/tag/tag';
+export { type AutoSizeOptions, Textarea, type TextareaProps, type TextareaSemanticPart, } from './components/textarea/textarea';
 export { FormLayout, type FormLayoutProps, } from './layouts/form-layout/form-layout';
 export { Stack, type StackProps } from './layouts/stack/stack';
 export { type FormatOptions, NumberInput, type NumberInputProps, type PadDecimalsOnBlur, type UseNumberInputOptions, type UseNumberInputReturn, useNumberInput, } from './number-input';
-export { TaoProvider, type TaoProviderProps, type TaoSeedToken, type TaoSize, type TaoThemeConfig, type TaoVariant, useTaoConfig, } from './provider/tao-provider';
+export { TaoPortalScope, TaoProvider, type TaoProviderProps, type TaoSeedToken, type TaoSize, type TaoThemeConfig, type TaoVariant, useTaoConfig, } from './provider/tao-provider';
 export { cx, type SemanticClassNames, type SemanticStyles, } from './utils/semantic';

package/dist/index.js

@@ -11,19 +11,20 @@ export { FormActions } from "./components/form-actions/form-actions.js";
 export { FormField } from "./components/form-field/form-field.js";
 export { FormSection } from "./components/form-section/form-section.js";
 export { Input } from "./components/input/input.js";
-export { Textarea } from "./components/textarea/textarea.js";
 export { Modal } from "./components/modal/index.js";
 export { Pagination } from "./components/pagination/pagination.js";
 export { Radio, RadioGroup } from "./components/radio/radio.js";
 export { ScrollArea } from "./components/scroll-area/scroll-area.js";
-export { Select } from "./components/select/select.js";
+export { ChevronsUpDownIcon, Select } from "./components/select/select.js";
+export { Spinner } from "./components/spinner/spinner.js";
 export { Splitter } from "./components/splitter/splitter.js";
 export { Switch } from "./components/switch/switch.js";
 export { Table } from "./components/table/table.js";
 export { Tabs } from "./components/tabs/tabs.js";
 export { CheckableTag, Tag } from "./components/tag/tag.js";
+export { Textarea } from "./components/textarea/textarea.js";
 export { FormLayout } from "./layouts/form-layout/form-layout.js";
 export { Stack } from "./layouts/stack/stack.js";
 export { NumberInput, useNumberInput } from "./number-input/index.js";
-export { TaoProvider, useTaoConfig } from "./provider/tao-provider.js";
+export { TaoPortalScope, TaoProvider, useTaoConfig } from "./provider/tao-provider.js";
 export { cx } from "./utils/semantic.js";

package/dist/layouts/stack/layout.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/provider/tao-provider.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 export interface TaoSeedToken {
     colorPrimary?: string;
     colorSuccess?: string;
@@ -29,8 +29,24 @@ interface TaoConfigContextValue {
     size: TaoSize;
     disabled: boolean;
     variant: TaoVariant;
+    /**
+     * Merged CSS custom-property overrides from this provider and all ancestors.
+     * Carried through context so portaled layers (Modal/Drawer/Select dropdown…)
+     * — which render outside the provider's DOM subtree — can re-apply the theme.
+     */
+    tokenStyle: CSSProperties;
 }
 export declare function useTaoConfig(): TaoConfigContextValue;
+/**
+ * Re-establishes the theme token scope inside a portal. Floating components
+ * portal their popup to document.body, escaping the `[data-tao-provider]`
+ * element that carries custom token overrides; wrapping the portal content in
+ * this component re-applies those overrides so colors/sizes stay consistent.
+ */
+export declare function TaoPortalScope({ children, style, }: {
+    children: ReactNode;
+    style?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
 export interface TaoProviderProps {
     children: ReactNode;
     theme?: TaoThemeConfig;

package/dist/provider/tao-provider.js

@@ -1,13 +1,42 @@
 import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
 import { createContext, useContext, useMemo } from "react";
 const TaoConfigContext = /*#__PURE__*/ createContext({
     size: 'medium',
     disabled: false,
-    variant: 'outlined'
+    variant: 'outlined',
+    tokenStyle: {}
 });
 function useTaoConfig() {
     return useContext(TaoConfigContext);
 }
+function TaoPortalScope(t0) {
+    const $ = c(6);
+    const { children, style } = t0;
+    const { tokenStyle } = useTaoConfig();
+    let t1;
+    if ($[0] !== style || $[1] !== tokenStyle) {
+        t1 = {
+            ...tokenStyle,
+            ...style
+        };
+        $[0] = style;
+        $[1] = tokenStyle;
+        $[2] = t1;
+    } else t1 = $[2];
+    let t2;
+    if ($[3] !== children || $[4] !== t1) {
+        t2 = /*#__PURE__*/ jsx("div", {
+            "data-tao-provider": "",
+            style: t1,
+            children: children
+        });
+        $[3] = children;
+        $[4] = t1;
+        $[5] = t2;
+    } else t2 = $[5];
+    return t2;
+}
 const TOKEN_TO_VAR = {
     colorPrimary: '--tao-color-primary',
     colorSuccess: '--tao-color-success',
@@ -28,18 +57,7 @@ const TOKEN_TO_VAR_PX = {
 function TaoProvider({ theme, size, disabled, variant, children }) {
     const parentConfig = useContext(TaoConfigContext);
     const inherit = theme?.inherit ?? true;
-    const config = useMemo(()=>({
-            size: size ?? (inherit ? parentConfig.size : 'medium'),
-            disabled: disabled ?? (inherit ? parentConfig.disabled : false),
-            variant: variant ?? (inherit ? parentConfig.variant : 'outlined')
-        }), [
-        size,
-        disabled,
-        variant,
-        parentConfig,
-        inherit
-    ]);
-    const style = useMemo(()=>{
+    const ownVars = useMemo(()=>{
         if (!theme?.token) return;
         const vars = {};
         const t = theme.token;
@@ -55,13 +73,33 @@ function TaoProvider({ theme, size, disabled, variant, children }) {
     }, [
         theme?.token
     ]);
+    const tokenStyle = useMemo(()=>({
+            ...parentConfig.tokenStyle,
+            ...ownVars
+        }), [
+        parentConfig.tokenStyle,
+        ownVars
+    ]);
+    const config = useMemo(()=>({
+            size: size ?? (inherit ? parentConfig.size : 'medium'),
+            disabled: disabled ?? (inherit ? parentConfig.disabled : false),
+            variant: variant ?? (inherit ? parentConfig.variant : 'outlined'),
+            tokenStyle
+        }), [
+        size,
+        disabled,
+        variant,
+        parentConfig,
+        inherit,
+        tokenStyle
+    ]);
     return /*#__PURE__*/ jsx(TaoConfigContext.Provider, {
         value: config,
         children: /*#__PURE__*/ jsx("div", {
-            style: style,
+            style: ownVars,
             "data-tao-provider": "",
             children: children
         })
     });
 }
-export { TaoProvider, useTaoConfig };
+export { TaoPortalScope, TaoProvider, useTaoConfig };

package/dist/theme/control.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);
   }
@@ -836,6 +839,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);
@@ -880,6 +902,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/theme/theme.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);
   }