@xingxingmofashu/ui 0.1.10 → 0.2.1

package/README.md

@@ -39,6 +39,16 @@ Toast, Toggle, Toggle Group, and Tooltip.
 - [llms-full.txt](https://xingxingmofashu.github.io/ui/llms-full.txt) — every
   guide and component page in one file
 
+## Agent skill
+
+The portable skill in
+[`skills/xingxingmofashu-ui`](https://github.com/xingxingmofashu/ui/tree/main/skills/xingxingmofashu-ui)
+teaches coding agents how to install, compose, theme, and troubleshoot the
+components. It lives in the repository and is not included in the npm package.
+See the
+[skill README](https://github.com/xingxingmofashu/ui/blob/main/skills/xingxingmofashu-ui/README.md)
+for OpenCode, Claude Code, and compatible agent setup.
+
 ## Installation
 
 ```bash [pnpm]
@@ -86,9 +96,11 @@ container:
 
 `thin` is the default and the clearest, `soft` adds diffusion for secondary
 text, `regular` balances transparency with text separation, and `thick` is the
-most readable over busy imagery. Presets only override shared CSS variables.
-Without the plugin stylesheet, the main stylesheet still uses the `thin`
-material.
+most readable over busy imagery. Presets only override shared CSS variables and
+adjust both the in-page and overlay veils. Text-bearing overlays use
+`.ui-glass-overlay` and `--ui-glass-overlay-surface`; override that token too
+when you change `--ui-surface`. Without the plugin stylesheet, the main
+stylesheet still uses the `thin` material.
 
 The optional React plugin manages the attribute and persistence:
 
@@ -140,7 +152,7 @@ import { Button } from "@xingxingmofashu/ui/components/button";
 import buttonTheme from "@xingxingmofashu/ui/theme/button";
 ```
 
-Toast hooks live under `@xingxingmofashu/ui/composables`.
+Toast hooks live under `@xingxingmofashu/ui/composables/use-toast`.
 
 ## Development
 
@@ -149,15 +161,16 @@ pnpm install
 pnpm build           # build dist with unbuild
 pnpm lint            # lint with oxlint
 pnpm test            # run the Vitest suite
-pnpm test:visual     # run the Playwright visual regression suite
-pnpm test:visual:update  # refresh the Surface Lab screenshots
+pnpm test:e2e        # run the Playwright browser suite
 pnpm typecheck       # typecheck the package
 pnpm docs:dev        # docs site on http://localhost:3001
-pnpm playground:dev  # component playground on http://localhost:3002
+pnpm playground:dev  # React REPL on http://localhost:3002
 ```
 
-The documentation site lives in `docs/` and the playground lives in
-`playground/`; both import the package from the workspace.
+The documentation site lives in `docs/` and the React REPL lives in
+`playground/`; both import the package from the workspace. The REPL compiles
+TSX in the browser with Monaco's TypeScript worker and runs the result against
+a small import whitelist.
 
 ## Contribution
 

package/dist/components/accordion.d.ts

@@ -5,7 +5,7 @@ import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/accordion";
 type Accordion = ComponentConfig<typeof theme>;
 /** One panel managed by the accordion. */
-type AccordionItemProps<Value extends string = string> = Omit<UIAccordion.Item.Props, "children" | "className" | "content" | "style" | "title" | "value"> & {
+type AccordionItemProps<Value extends string = string> = Omit<UIAccordion.Item.Props, "children" | "className" | "content" | "title" | "value"> & {
     /** Value that identifies the item in the accordion value. */
     value: Value;
     /** Visible heading inside the trigger. */
@@ -19,7 +19,7 @@ type AccordionItemProps<Value extends string = string> = Omit<UIAccordion.Item.P
     /** Tailwind classes for this item's internal slots, keyed by `data-slot`. */
     ui?: Partial<Pick<Accordion["slots"], "item" | "header" | "trigger" | "title" | "indicator" | "indicatorIcon" | "panel" | "panelContent">>;
 };
-type AccordionProps<Value extends string = string> = Omit<UIAccordion.Root.Props<Value>, "className" | "style" | "children"> & VariantProps<typeof theme> & {
+type AccordionProps<Value extends string = string> = Omit<UIAccordion.Root.Props<Value>, "className" | "children"> & VariantProps<typeof theme> & {
     /** Panels rendered by the accordion. */
     items: readonly AccordionItemProps<Value>[];
     /** Tailwind classes merged into the root. */

package/dist/components/alert-dialog.d.ts

@@ -20,9 +20,11 @@ type AlertDialogProps = Omit<UIAlertDialog.Root.Props, "children"> & {
     onConfirm?: React.MouseEventHandler<HTMLButtonElement>;
     /** Tailwind classes merged into the popup. */
     className?: string;
+    /** Inline styles merged into the popup. */
+    style?: React.CSSProperties;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: AlertDialog["slots"];
 };
-declare function AlertDialog({ title, description, children, cancelLabel, confirmLabel, onCancel, onConfirm, className, ui, ...props }: AlertDialogProps): React.JSX.Element;
+declare function AlertDialog({ title, description, children, cancelLabel, confirmLabel, onCancel, onConfirm, className, style, ui, ...props }: AlertDialogProps): React.JSX.Element;
 export { AlertDialog };
 export type { AlertDialogProps };

package/dist/components/alert-dialog.mjs

@@ -13,6 +13,7 @@ function AlertDialog({
   onCancel,
   onConfirm,
   className,
+  style,
   ui,
   ...props
 }) {
@@ -33,7 +34,8 @@ function AlertDialog({
       UIAlertDialog.Popup,
       {
         "data-slot": "popup",
-        className: cn(styles.popup(), ui?.popup, className)
+        className: cn(styles.popup(), ui?.popup, className),
+        style
       },
       /* @__PURE__ */ React.createElement(
         "span",

package/dist/components/button.d.ts

@@ -4,7 +4,7 @@ import { type VariantProps } from "tailwind-variants";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/button";
 type Button = ComponentConfig<typeof theme>;
-interface ButtonProps extends Omit<UIButtonProps, "ref" | "style" | "className">, VariantProps<typeof theme> {
+interface ButtonProps extends Omit<UIButtonProps, "ref" | "className">, VariantProps<typeof theme> {
     /** Ref to the rendered root element. */
     ref?: React.Ref<HTMLElement>;
     /** Tailwind classes merged into the outer click area. */

package/dist/components/card.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/card";
 type Card = ComponentConfig<typeof theme>;
-type CardProps = Omit<React.ComponentProps<"div">, "style" | "title"> & {
+type CardProps = Omit<React.ComponentProps<"div">, "title"> & {
     /** Classes merged into the root element. */
     className?: string;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */

package/dist/components/checkbox-group.d.ts

@@ -6,7 +6,7 @@ import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/checkbox-group";
 type CheckboxGroup = ComponentConfig<typeof theme>;
 /** One entry in the group. */
-type CheckboxGroupItemProps<Value extends string = string> = Omit<UICheckbox.Root.Props, "checked" | "defaultChecked" | "children" | "className" | "onCheckedChange" | "parent" | "style" | "value"> & {
+type CheckboxGroupItemProps<Value extends string = string> = Omit<UICheckbox.Root.Props, "checked" | "defaultChecked" | "children" | "className" | "onCheckedChange" | "parent" | "value"> & {
     /** Value that identifies the option in the group value. */
     value: Value;
     /** Visible label rendered next to the control. */
@@ -18,7 +18,7 @@ type CheckboxGroupItemProps<Value extends string = string> = Omit<UICheckbox.Roo
     /** Tailwind classes for control slots, keyed by `data-slot`. */
     ui?: Partial<Pick<CheckboxGroup["slots"], "item" | "box" | "fill" | "glass" | "overlay" | "indicator" | "indicatorIcon" | "wrapper" | "itemLabel" | "itemDescription">>;
 };
-type CheckboxGroupProps<Value extends string = string> = Omit<UICheckboxGroup.Props, "allValues" | "children" | "className" | "defaultValue" | "onValueChange" | "style" | "value"> & VariantProps<typeof theme> & Pick<UICheckbox.Root.Props, "name" | "form" | "readOnly"> & {
+type CheckboxGroupProps<Value extends string = string> = Omit<UICheckboxGroup.Props, "allValues" | "children" | "className" | "defaultValue" | "onValueChange" | "value"> & VariantProps<typeof theme> & Pick<UICheckbox.Root.Props, "name" | "form" | "readOnly"> & {
     /** Entries rendered by the group. */
     items: readonly CheckboxGroupItemProps<Value>[];
     /** Visible label for the group. */

package/dist/components/checkbox.d.ts

@@ -4,7 +4,7 @@ import { type VariantProps } from "tailwind-variants";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/checkbox";
 type Checkbox = ComponentConfig<typeof theme>;
-interface CheckboxProps extends Omit<UICheckbox.Root.Props, "className" | "children" | "style" | "ref">, VariantProps<typeof theme> {
+interface CheckboxProps extends Omit<UICheckbox.Root.Props, "className" | "children" | "ref">, VariantProps<typeof theme> {
     /** Ref to the rendered root element. */
     ref?: React.Ref<HTMLElement>;
     /** Tailwind classes merged into the Base UI checkbox root. */

package/dist/components/dialog.d.ts

@@ -14,9 +14,11 @@ type DialogProps = Omit<UIDialog.Root.Props, "children"> & {
     footer?: React.ReactNode;
     /** Tailwind classes merged into the popup. */
     className?: string;
+    /** Inline styles merged into the popup. */
+    style?: React.CSSProperties;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: Dialog["slots"];
 };
-declare function Dialog({ title, description, children, footer, className, ui, ...props }: DialogProps): React.JSX.Element;
+declare function Dialog({ title, description, children, footer, className, style, ui, ...props }: DialogProps): React.JSX.Element;
 export { Dialog };
 export type { DialogProps };

package/dist/components/dialog.mjs

@@ -9,6 +9,7 @@ function Dialog({
   children,
   footer,
   className,
+  style,
   ui,
   ...props
 }) {
@@ -29,7 +30,8 @@ function Dialog({
       UIDialog.Popup,
       {
         "data-slot": "popup",
-        className: cn(styles.popup(), ui?.popup, className)
+        className: cn(styles.popup(), ui?.popup, className),
+        style
       },
       /* @__PURE__ */ React.createElement(
         "span",

package/dist/components/drawer.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/drawer";
 type Drawer = ComponentConfig<typeof theme>;
-interface DrawerProps extends Omit<UIDrawer.Root.Props, "children" | "className" | "style" | "swipeDirection"> {
+interface DrawerProps extends Omit<UIDrawer.Root.Props, "children" | "className" | "swipeDirection"> {
     /** Drawer heading. */
     title: React.ReactNode;
     /** Supporting copy under the title. */
@@ -16,9 +16,11 @@ interface DrawerProps extends Omit<UIDrawer.Root.Props, "children" | "className"
     direction?: NonNullable<UIDrawer.Root.Props["swipeDirection"]>;
     /** Tailwind classes merged into the popup. */
     className?: string;
+    /** Inline styles merged into the popup. */
+    style?: React.CSSProperties;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: Drawer["slots"];
 }
-declare function Drawer({ title, description, children, footer, direction, className, ui, ...props }: DrawerProps): React.JSX.Element;
+declare function Drawer({ title, description, children, footer, direction, className, style, ui, ...props }: DrawerProps): React.JSX.Element;
 export { Drawer };
 export type { DrawerProps };

package/dist/components/drawer.mjs

@@ -10,6 +10,7 @@ function Drawer({
   footer,
   direction = "down",
   className,
+  style,
   ui,
   ...props
 }) {
@@ -30,7 +31,8 @@ function Drawer({
       UIDrawer.Popup,
       {
         "data-slot": "popup",
-        className: cn(styles.popup(), ui?.popup, className)
+        className: cn(styles.popup(), ui?.popup, className),
+        style
       },
       /* @__PURE__ */ React.createElement(
         "span",

package/dist/components/field.d.ts

@@ -4,7 +4,7 @@ import { type VariantProps } from "tailwind-variants";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/field";
 type Field = ComponentConfig<typeof theme>;
-interface FieldProps extends Omit<UIField.Root.Props, "children" | "className" | "style">, VariantProps<typeof theme> {
+interface FieldProps extends Omit<UIField.Root.Props, "children" | "className">, VariantProps<typeof theme> {
     /** Single Base UI control labelled and validated by the field. */
     children: React.ReactElement;
     /** Visible label associated with the control. */

package/dist/components/fieldset.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/fieldset";
 type Fieldset = ComponentConfig<typeof theme>;
-interface FieldsetProps extends Omit<UIFieldset.Root.Props, "children" | "className" | "style"> {
+interface FieldsetProps extends Omit<UIFieldset.Root.Props, "children" | "className"> {
     /** Visible legend naming the group. */
     legend?: React.ReactNode;
     /** Fields and controls grouped by the fieldset. */

package/dist/components/form.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/form";
 type Form = ComponentConfig<typeof theme>;
-type FormProps<FormValues extends Record<string, any> = Record<string, any>> = Omit<UIForm.Props<FormValues>, "className" | "style"> & {
+type FormProps<FormValues extends Record<string, any> = Record<string, any>> = Omit<UIForm.Props<FormValues>, "className"> & {
     /** Tailwind classes merged into the form element. */
     className?: string;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */

package/dist/components/input.d.ts

@@ -7,6 +7,8 @@ type Input = ComponentConfig<typeof theme>;
 interface InputProps extends Omit<UIInput.Props, "className" | "children" | "size" | "style">, VariantProps<typeof theme> {
     /** Tailwind classes merged into the root element. */
     className?: string;
+    /** Inline styles merged into the outer root. Use `ui.input` for the native input. */
+    style?: React.CSSProperties;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: Input["slots"];
     /** Icon rendered before the input. */
@@ -14,6 +16,6 @@ interface InputProps extends Omit<UIInput.Props, "className" | "children" | "siz
     /** Icon rendered after the input. */
     trailingIcon?: React.ReactNode;
 }
-declare function Input({ className, ui, leadingIcon, trailingIcon, size, disabled, ...props }: InputProps): React.JSX.Element;
+declare function Input({ className, ui, leadingIcon, trailingIcon, size, disabled, style, ...props }: InputProps): React.JSX.Element;
 export { Input };
 export type { InputProps };

package/dist/components/input.mjs

@@ -11,6 +11,7 @@ function Input({
   trailingIcon,
   size,
   disabled,
+  style,
   ...props
 }) {
   const styles = theme({ size });
@@ -20,7 +21,8 @@ function Input({
     {
       "data-slot": "root",
       "data-disabled": fieldsetDisabled || void 0,
-      className: cn(styles.root(), ui?.root, className)
+      className: cn(styles.root(), ui?.root, className),
+      style
     },
     /* @__PURE__ */ React.createElement(
       "span",

package/dist/components/menu.d.ts

@@ -4,7 +4,7 @@ import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/menu";
 type Menu = ComponentConfig<typeof theme>;
 /** One action item in the menu. */
-type MenuItemProps<Value extends string = string> = Omit<UIMenu.Item.Props, "children" | "className" | "style" | "label" | "onClick"> & {
+type MenuItemProps<Value extends string = string> = Omit<UIMenu.Item.Props, "children" | "className" | "label" | "onClick"> & {
     type?: "item";
     /** Value that identifies the item in the menu. */
     value: Value;
@@ -24,7 +24,7 @@ type MenuItemProps<Value extends string = string> = Omit<UIMenu.Item.Props, "chi
     ui?: Partial<Pick<Menu["slots"], "item" | "itemIcon" | "itemLabel" | "shortcut">>;
 };
 /** A labelled group of menu items. */
-type MenuGroupProps<Value extends string = string> = Omit<UIMenu.Group.Props, "children" | "className" | "style"> & {
+type MenuGroupProps<Value extends string = string> = Omit<UIMenu.Group.Props, "children" | "className"> & {
     type: "group";
     /** Group heading. */
     label: React.ReactNode;
@@ -36,23 +36,25 @@ type MenuGroupProps<Value extends string = string> = Omit<UIMenu.Group.Props, "c
     ui?: Partial<Pick<Menu["slots"], "group" | "groupLabel" | "item" | "itemIcon" | "itemLabel" | "shortcut">>;
 };
 /** A separator between menu items. */
-type MenuSeparatorProps = Omit<UIMenu.Separator.Props, "children" | "className" | "orientation" | "style"> & {
+type MenuSeparatorProps = Omit<UIMenu.Separator.Props, "children" | "className" | "orientation"> & {
     type: "separator";
     /** Tailwind classes merged into the separator. */
     className?: string;
     /** Tailwind classes for the separator slot. */
     ui?: Partial<Pick<Menu["slots"], "separator">>;
 };
-type MenuProps<Value extends string = string> = Omit<UIMenu.Root.Props, "children" | "className" | "style"> & Pick<UIMenu.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "collisionPadding"> & {
+type MenuProps<Value extends string = string> = Omit<UIMenu.Root.Props, "children" | "className"> & Pick<UIMenu.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "collisionPadding"> & {
     /** Element that opens the menu. It must forward props and refs. */
     trigger: React.ReactElement;
     /** Items, groups, and separators rendered by the menu. */
     items: readonly (MenuItemProps<Value> | MenuGroupProps<Value> | MenuSeparatorProps)[];
     /** Tailwind classes merged into the popup. */
     className?: string;
+    /** Inline styles merged into the popup. */
+    style?: React.CSSProperties;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: Menu["slots"];
 };
-declare function Menu<Value extends string = string>({ trigger, items, side, align, sideOffset, alignOffset, collisionPadding, className, ui, ...props }: MenuProps<Value>): React.JSX.Element;
+declare function Menu<Value extends string = string>({ trigger, items, side, align, sideOffset, alignOffset, collisionPadding, className, style, ui, ...props }: MenuProps<Value>): React.JSX.Element;
 export { Menu };
 export type { MenuGroupProps, MenuItemProps, MenuProps, MenuSeparatorProps, };

package/dist/components/menu.mjs

@@ -12,6 +12,7 @@ function Menu({
   alignOffset,
   collisionPadding,
   className,
+  style,
   ui,
   ...props
 }) {
@@ -31,7 +32,8 @@ function Menu({
       UIMenu.Popup,
       {
         "data-slot": "popup",
-        className: cn(styles.popup(), ui?.popup, className)
+        className: cn(styles.popup(), ui?.popup, className),
+        style
       },
       /* @__PURE__ */ React.createElement(
         "span",

package/dist/components/popover.d.ts

@@ -18,9 +18,11 @@ type PopoverProps = Omit<UIPopover.Root.Props, "children"> & Pick<UIPopover.Posi
     arrow?: boolean;
     /** Tailwind classes merged into the popup. */
     className?: string;
+    /** Inline styles merged into the popup. */
+    style?: React.CSSProperties;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: Popover["slots"];
 };
-declare function Popover({ trigger, title, description, children, footer, arrow, side, align, sideOffset, alignOffset, collisionPadding, className, ui, ...props }: PopoverProps): React.JSX.Element;
+declare function Popover({ trigger, title, description, children, footer, arrow, side, align, sideOffset, alignOffset, collisionPadding, className, style, ui, ...props }: PopoverProps): React.JSX.Element;
 export { Popover };
 export type { PopoverProps };

package/dist/components/popover.mjs

@@ -16,6 +16,7 @@ function Popover({
   alignOffset,
   collisionPadding,
   className,
+  style,
   ui,
   ...props
 }) {
@@ -35,7 +36,8 @@ function Popover({
       UIPopover.Popup,
       {
         "data-slot": "popup",
-        className: cn(styles.popup(), ui?.popup, className)
+        className: cn(styles.popup(), ui?.popup, className),
+        style
       },
       /* @__PURE__ */ React.createElement(
         "span",

package/dist/components/progress.d.ts

@@ -4,7 +4,7 @@ import { type VariantProps } from "tailwind-variants";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/progress";
 type Progress = ComponentConfig<typeof theme>;
-type ProgressProps = Omit<UIProgress.Root.Props, "children" | "className" | "style" | "value"> & VariantProps<typeof theme> & {
+type ProgressProps = Omit<UIProgress.Root.Props, "children" | "className" | "value"> & VariantProps<typeof theme> & {
     /** Current value. Use `null` for an indeterminate progress bar. */
     value?: number | null;
     /** Visible label for the progress bar. */

package/dist/components/radio-group.d.ts

@@ -6,7 +6,7 @@ import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/radio-group";
 type RadioGroup = ComponentConfig<typeof theme>;
 /** One option managed by the radio group. */
-type RadioGroupItemProps<Value extends string = string> = Omit<UIRadio.Root.Props<Value>, "className" | "children" | "style" | "value"> & {
+type RadioGroupItemProps<Value extends string = string> = Omit<UIRadio.Root.Props<Value>, "className" | "children" | "value"> & {
     /** Value that identifies the option in the group value. */
     value: Value;
     /** Visible label rendered next to the control. */
@@ -18,7 +18,7 @@ type RadioGroupItemProps<Value extends string = string> = Omit<UIRadio.Root.Prop
     /** Tailwind classes for this item's internal slots, keyed by `data-slot`. */
     ui?: Partial<Pick<RadioGroup["slots"], "item" | "box" | "glass" | "overlay" | "indicator" | "dot" | "wrapper" | "itemLabel" | "itemDescription">>;
 };
-type RadioGroupProps<Value extends string = string> = Omit<UIRadioGroup.Props<Value>, "className" | "style" | "children"> & VariantProps<typeof theme> & {
+type RadioGroupProps<Value extends string = string> = Omit<UIRadioGroup.Props<Value>, "className" | "children"> & VariantProps<typeof theme> & {
     /** Options rendered by the radio group. */
     items: readonly RadioGroupItemProps<Value>[];
     /** Visible label for the group. */

package/dist/components/scroll-area.d.ts

@@ -5,7 +5,7 @@ import theme from "../theme/scroll-area";
 /** Scrollbar axes rendered by the scroll area. */
 type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
 type ScrollArea = ComponentConfig<typeof theme>;
-type ScrollAreaProps = Omit<UIScrollArea.Root.Props, "children" | "className" | "style"> & {
+type ScrollAreaProps = Omit<UIScrollArea.Root.Props, "children" | "className"> & {
     /** Scrollable content. */
     children?: React.ReactNode;
     /** Scrollbar axes to render. Defaults to `"vertical"`. */

package/dist/components/select.d.ts

@@ -15,7 +15,7 @@ type SelectItemProps<Value extends string = string> = {
     /** Whether the option is disabled. */
     disabled?: boolean;
 };
-type SelectProps<Value extends string = string> = Omit<UISelect.Root.Props<Value>, "children" | "className" | "style" | "items" | "multiple" | "value" | "defaultValue" | "onValueChange"> & VariantProps<typeof theme> & Pick<UISelect.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "collisionPadding" | "alignItemWithTrigger"> & {
+type SelectProps<Value extends string = string> = Omit<UISelect.Root.Props<Value>, "children" | "className" | "items" | "multiple" | "value" | "defaultValue" | "onValueChange"> & VariantProps<typeof theme> & Pick<UISelect.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "collisionPadding" | "alignItemWithTrigger"> & {
     /** Options rendered by the select. */
     items: readonly SelectItemProps<Value>[];
     /** Visible label associated with the trigger. */
@@ -38,9 +38,11 @@ type SelectProps<Value extends string = string> = Omit<UISelect.Root.Props<Value
     "aria-describedby"?: string;
     /** Tailwind classes merged into the root element. */
     className?: string;
+    /** Inline styles merged into the root element. */
+    style?: React.CSSProperties;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: Select["slots"];
 };
-declare function Select<Value extends string = string>({ className, ui, size, items, label, description, placeholder, value, defaultValue, onValueChange, side, align, sideOffset, alignOffset, collisionPadding, alignItemWithTrigger, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: SelectProps<Value>): React.JSX.Element;
+declare function Select<Value extends string = string>({ className, ui, size, items, label, description, placeholder, value, defaultValue, onValueChange, side, align, sideOffset, alignOffset, collisionPadding, alignItemWithTrigger, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, style, ...props }: SelectProps<Value>): React.JSX.Element;
 export { Select };
 export type { SelectItemProps, SelectProps };

package/dist/components/select.mjs

@@ -28,6 +28,7 @@ function Select({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
+  style,
   ...props
 }) {
   const styles = theme({ size });
@@ -57,7 +58,8 @@ function Select({
       {
         "data-slot": "root",
         "data-disabled": fieldsetDisabled || void 0,
-        className: cn(styles.root(), ui?.root, className)
+        className: cn(styles.root(), ui?.root, className),
+        style
       },
       label ? /* @__PURE__ */ React.createElement(
         UISelect.Label,

package/dist/components/slider.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/slider";
 type Slider = ComponentConfig<typeof theme>;
-type SliderProps<Value extends number | readonly number[] = number> = Omit<UISlider.Root.Props<Value>, "children" | "style" | "className"> & Pick<UISlider.Thumb.Props, "getAriaLabel" | "getAriaValueText"> & {
+type SliderProps<Value extends number | readonly number[] = number> = Omit<UISlider.Root.Props<Value>, "children" | "className"> & Pick<UISlider.Thumb.Props, "getAriaLabel" | "getAriaValueText"> & {
     /** Tailwind classes merged into the root. */
     className?: string;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */

package/dist/components/switch.d.ts

@@ -4,7 +4,7 @@ import { type VariantProps } from "tailwind-variants";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/switch";
 type Switch = ComponentConfig<typeof theme>;
-interface SwitchProps extends Omit<UISwitch.Root.Props, "className" | "children" | "style" | "ref">, VariantProps<typeof theme> {
+interface SwitchProps extends Omit<UISwitch.Root.Props, "className" | "children" | "ref">, VariantProps<typeof theme> {
     /** Ref to the rendered root element. */
     ref?: React.Ref<HTMLElement>;
     /** Tailwind classes merged into the Base UI switch root. */

package/dist/components/tabs.d.ts

@@ -5,7 +5,7 @@ import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/tabs";
 type Tabs = ComponentConfig<typeof theme>;
 /** One tab and its related panel. */
-type TabsItemProps<Value extends string = string> = Omit<UITabs.Tab.Props, "children" | "className" | "content" | "style" | "value"> & {
+type TabsItemProps<Value extends string = string> = Omit<UITabs.Tab.Props, "children" | "className" | "content" | "value"> & {
     /** Value that identifies the tab and its panel. */
     value: Value;
     /** Visible label inside the tab. */
@@ -21,7 +21,7 @@ type TabsItemProps<Value extends string = string> = Omit<UITabs.Tab.Props, "chil
     /** Tailwind classes for this item's internal slots, keyed by `data-slot`. */
     ui?: Partial<Pick<Tabs["slots"], "tab" | "icon" | "label" | "panel" | "panelContent">>;
 };
-type TabsProps<Value extends string = string> = Omit<UITabs.Root.Props, "children" | "className" | "style" | "value" | "defaultValue" | "onValueChange"> & Pick<UITabs.List.Props, "activateOnFocus" | "loopFocus"> & VariantProps<typeof theme> & {
+type TabsProps<Value extends string = string> = Omit<UITabs.Root.Props, "children" | "className" | "value" | "defaultValue" | "onValueChange"> & Pick<UITabs.List.Props, "activateOnFocus" | "loopFocus"> & VariantProps<typeof theme> & {
     /** Tabs and panels rendered by the component. */
     items: readonly TabsItemProps<Value>[];
     /** Controlled active value. Use `null` to render no active tab. */

package/dist/components/toggle-group.d.ts

@@ -6,7 +6,7 @@ import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/toggle-group";
 type ToggleGroup = ComponentConfig<typeof theme>;
 /** One option managed by the toggle group. */
-type ToggleGroupItemProps<Value extends string = string> = Omit<UIToggle.Props<Value>, "className" | "children" | "style" | "value" | "pressed" | "defaultPressed"> & {
+type ToggleGroupItemProps<Value extends string = string> = Omit<UIToggle.Props<Value>, "className" | "children" | "value" | "pressed" | "defaultPressed"> & {
     /** Value that identifies the option in the group value. */
     value: Value;
     /** Visible content inside the item. */
@@ -18,7 +18,7 @@ type ToggleGroupItemProps<Value extends string = string> = Omit<UIToggle.Props<V
     /** Tailwind classes for this item's internal slots, keyed by `data-slot`. */
     ui?: Partial<Pick<ToggleGroup["slots"], "item" | "content" | "icon" | "label">>;
 };
-type ToggleGroupProps<Value extends string = string> = Omit<UIToggleGroup.Props<Value>, "className" | "style" | "children"> & VariantProps<typeof theme> & {
+type ToggleGroupProps<Value extends string = string> = Omit<UIToggleGroup.Props<Value>, "className" | "children"> & VariantProps<typeof theme> & {
     /** Options rendered by the toggle group. */
     items: readonly ToggleGroupItemProps<Value>[];
     /** Tailwind classes merged into the group root. */

package/dist/components/toggle.d.ts

@@ -4,7 +4,7 @@ import { type VariantProps } from "tailwind-variants";
 import { type ComponentConfig } from "../internal/tv";
 import theme from "../theme/toggle";
 type Toggle = ComponentConfig<typeof theme>;
-type ToggleProps<Value extends string = string> = Omit<UIToggle.Props<Value>, "className" | "children" | "style" | "ref"> & Omit<VariantProps<typeof theme>, "iconOnly"> & {
+type ToggleProps<Value extends string = string> = Omit<UIToggle.Props<Value>, "className" | "children" | "ref"> & Omit<VariantProps<typeof theme>, "iconOnly"> & {
     /** Ref to the rendered root element. */
     ref?: React.Ref<HTMLButtonElement>;
     /** Tailwind classes merged into the toggle root. */

package/dist/components/tooltip.d.ts

@@ -12,9 +12,11 @@ type TooltipProps = Omit<UITooltip.Root.Props, "children"> & Pick<UITooltip.Trig
     arrow?: boolean;
     /** Tailwind classes merged into the tooltip popup. */
     className?: string;
+    /** Inline styles merged into the tooltip popup. */
+    style?: React.CSSProperties;
     /** Tailwind classes for internal slots, keyed by `data-slot`. */
     ui?: Tooltip["slots"];
 };
-declare function Tooltip({ trigger, children, arrow, delay, closeDelay, side, align, sideOffset, alignOffset, collisionPadding, className, ui, ...props }: TooltipProps): React.JSX.Element;
+declare function Tooltip({ trigger, children, arrow, delay, closeDelay, side, align, sideOffset, alignOffset, collisionPadding, className, style, ui, ...props }: TooltipProps): React.JSX.Element;
 export { Tooltip };
 export type { TooltipProps };

package/dist/components/tooltip.mjs

@@ -15,6 +15,7 @@ function Tooltip({
   alignOffset,
   collisionPadding,
   className,
+  style,
   ui,
   ...props
 }) {
@@ -41,7 +42,8 @@ function Tooltip({
       UITooltip.Popup,
       {
         "data-slot": "popup",
-        className: cn(styles.popup(), ui?.popup, className)
+        className: cn(styles.popup(), ui?.popup, className),
+        style
       },
       /* @__PURE__ */ React.createElement(
         "span",

package/dist/index.css

@@ -1 +1 @@
-@import "./keyframes.css";@source "./**/*.mjs";@source "./**/*.{ts,tsx}";@custom-variant ui-light (&:where(.light, .light *, [data-theme="light"], [data-theme="light"] *));@custom-variant ui-dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));@layer theme{:host,:root{color-scheme:light;--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-border:rgba(31,31,31,.16);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.98);--ui-glass-contrast:1.05;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.9),inset 0 -2px 1px -1px hsla(0,0%,100%,.9),inset 0 6px 1px -6px hsla(0,0%,100%,.55),inset 0 -6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 0 1px hsla(0,0%,100%,.45),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}.dark,[data-theme=dark]{color-scheme:dark;--ui-ink:#f5f5f5;--ui-ink-active:#fff;--ui-surface:#141414;--ui-glass-surface:hsla(0,0%,8%,.62);--ui-glass-border:hsla(0,0%,100%,.2);--ui-glass-focus:hsla(0,0%,100%,.7);--ui-glass-inner-border:hsla(0,0%,100%,.4);--ui-glass-rim:hsla(0,0%,100%,.25);--ui-glass-highlight:hsla(0,0%,100%,.45);--ui-glass-tone:brightness(0.95);--ui-glass-contrast:1;--ui-drop-shadow-label:drop-shadow(0 25px 3px rgba(0,0,0,.45));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.35),inset 0 -2px 1px -1px hsla(0,0%,100%,.35),inset 0 6px 1px -6px hsla(0,0%,100%,.2),inset 0 -6px 1px -6px hsla(0,0%,100%,.2),inset 0 0 0 1px hsla(0,0%,100%,.14),inset 0 0 2px rgba(0,0,0,.9),0 4px 8px rgba(0,0,0,.35)}.light,[data-theme=light]{color-scheme:light;--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-border:rgba(31,31,31,.16);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.98);--ui-glass-contrast:1.05;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.9),inset 0 -2px 1px -1px hsla(0,0%,100%,.9),inset 0 6px 1px -6px hsla(0,0%,100%,.55),inset 0 -6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 0 1px hsla(0,0%,100%,.45),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}:host,:root{--ui-glass-blur:4px;--ui-glass-saturate:150%;--ui-glass-chip-blur:8px;--ui-glass-inner-inset:8px;--ui-glass-inner-offset:1px;--ui-glass-inner-blur:8px;--ui-glass-highlight-blur:7px;--ui-glass-rim-inset:9px;--ui-glass-rim-blur:1px}}@theme inline{--color-ui-ink:var(--ui-ink);--color-ui-ink-active:var(--ui-ink-active);--color-ui-surface:var(--ui-surface);--color-ui-glass-surface:var(--ui-glass-surface);--color-ui-glass-border:var(--ui-glass-border);--color-ui-glass-focus:var(--ui-glass-focus);--color-ui-glass-inner-border:var(--ui-glass-inner-border);--color-ui-glass-rim:var(--ui-glass-rim);--color-ui-glass-highlight:var(--ui-glass-highlight)}@layer components{.ui-glass{backdrop-filter:blur(var(--ui-glass-blur,4px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px double var(--ui-glass-border);box-shadow:var(--ui-shadow-glass);filter:var(--ui-glass-tone,brightness(.98)) contrast(var(--ui-glass-contrast,1.05));position:relative}.ui-glass-inner:before{border:1px solid var(--ui-glass-inner-border);bottom:calc(var(--ui-glass-inner-inset, 8px) - var(--ui-glass-inner-offset, 1px));filter:blur(var(--ui-glass-inner-blur,8px));left:var(--ui-glass-inner-inset,8px);right:var(--ui-glass-inner-inset,8px);top:calc(var(--ui-glass-inner-inset, 8px) + var(--ui-glass-inner-offset, 1px));z-index:1}.ui-glass-highlight:after,.ui-glass-inner:before{border-radius:inherit;content:"";pointer-events:none;position:absolute}.ui-glass-highlight:after{background:linear-gradient(45deg,var(--ui-glass-highlight) 0,transparent var(--ui-glass-glare-stop),transparent calc(100% - var(--ui-glass-glare-stop)),var(--ui-glass-highlight) 100%);filter:blur(var(--ui-glass-highlight-blur,7px));inset:0;z-index:3}.ui-glass-rim{border:1px solid var(--ui-glass-rim);border-radius:inherit;filter:blur(var(--ui-glass-rim-blur,1px));height:calc(100% - var(--ui-glass-rim-inset, 9px));left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% - var(--ui-glass-rim-inset, 9px));z-index:2}.ui-glass-chip{backdrop-filter:blur(var(--ui-glass-chip-blur,8px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px solid var(--ui-glass-border);box-shadow:inset 0 1px 0 var(--ui-glass-highlight)}}
+@import "./keyframes.css";@source "./**/*.mjs";@source "./**/*.{ts,tsx}";@custom-variant ui-light (&:where(.light, .light *, [data-theme="light"], [data-theme="light"] *));@custom-variant ui-dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));@layer theme{:host,:root{color-scheme:light;--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-overlay-surface:hsla(0,0%,100%,.64);--ui-glass-border:rgba(31,31,31,.16);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.98);--ui-glass-contrast:1.05;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.9),inset 0 -2px 1px -1px hsla(0,0%,100%,.9),inset 0 6px 1px -6px hsla(0,0%,100%,.55),inset 0 -6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 0 1px hsla(0,0%,100%,.45),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}.dark,[data-theme=dark]{color-scheme:dark;--ui-ink:#f5f5f5;--ui-ink-active:#fff;--ui-surface:#141414;--ui-glass-surface:hsla(0,0%,8%,.62);--ui-glass-overlay-surface:hsla(0,0%,8%,.76);--ui-glass-border:hsla(0,0%,100%,.2);--ui-glass-focus:hsla(0,0%,100%,.7);--ui-glass-inner-border:hsla(0,0%,100%,.4);--ui-glass-rim:hsla(0,0%,100%,.25);--ui-glass-highlight:hsla(0,0%,100%,.45);--ui-glass-tone:brightness(0.95);--ui-glass-contrast:1;--ui-drop-shadow-label:drop-shadow(0 25px 3px rgba(0,0,0,.45));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.35),inset 0 -2px 1px -1px hsla(0,0%,100%,.35),inset 0 6px 1px -6px hsla(0,0%,100%,.2),inset 0 -6px 1px -6px hsla(0,0%,100%,.2),inset 0 0 0 1px hsla(0,0%,100%,.14),inset 0 0 2px rgba(0,0,0,.9),0 4px 8px rgba(0,0,0,.35)}.light,[data-theme=light]{color-scheme:light;--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-overlay-surface:hsla(0,0%,100%,.64);--ui-glass-border:rgba(31,31,31,.16);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.98);--ui-glass-contrast:1.05;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.9),inset 0 -2px 1px -1px hsla(0,0%,100%,.9),inset 0 6px 1px -6px hsla(0,0%,100%,.55),inset 0 -6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 0 1px hsla(0,0%,100%,.45),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}:host,:root{--ui-glass-blur:4px;--ui-glass-saturate:150%;--ui-glass-chip-blur:8px;--ui-glass-inner-inset:8px;--ui-glass-inner-offset:1px;--ui-glass-inner-blur:8px;--ui-glass-highlight-blur:7px;--ui-glass-rim-inset:9px;--ui-glass-rim-blur:1px}}@theme inline{--color-ui-ink:var(--ui-ink);--color-ui-ink-active:var(--ui-ink-active);--color-ui-surface:var(--ui-surface);--color-ui-glass-surface:var(--ui-glass-surface);--color-ui-glass-overlay-surface:var(--ui-glass-overlay-surface);--color-ui-glass-border:var(--ui-glass-border);--color-ui-glass-focus:var(--ui-glass-focus);--color-ui-glass-inner-border:var(--ui-glass-inner-border);--color-ui-glass-rim:var(--ui-glass-rim);--color-ui-glass-highlight:var(--ui-glass-highlight)}@layer components{.ui-glass{backdrop-filter:blur(var(--ui-glass-blur,4px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px double var(--ui-glass-border);box-shadow:var(--ui-shadow-glass);filter:var(--ui-glass-tone,brightness(.98)) contrast(var(--ui-glass-contrast,1.05));position:relative}.ui-glass-overlay{background-color:var(--ui-glass-overlay-surface)}.ui-glass-inner:before{border:1px solid var(--ui-glass-inner-border);bottom:calc(var(--ui-glass-inner-inset, 8px) - var(--ui-glass-inner-offset, 1px));filter:blur(var(--ui-glass-inner-blur,8px));left:var(--ui-glass-inner-inset,8px);right:var(--ui-glass-inner-inset,8px);top:calc(var(--ui-glass-inner-inset, 8px) + var(--ui-glass-inner-offset, 1px));z-index:1}.ui-glass-highlight:after,.ui-glass-inner:before{border-radius:inherit;content:"";pointer-events:none;position:absolute}.ui-glass-highlight:after{background:linear-gradient(45deg,var(--ui-glass-highlight) 0,transparent var(--ui-glass-glare-stop),transparent calc(100% - var(--ui-glass-glare-stop)),var(--ui-glass-highlight) 100%);filter:blur(var(--ui-glass-highlight-blur,7px));inset:0;z-index:3}.ui-glass-rim{border:1px solid var(--ui-glass-rim);border-radius:inherit;filter:blur(var(--ui-glass-rim-blur,1px));height:calc(100% - var(--ui-glass-rim-inset, 9px));left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% - var(--ui-glass-rim-inset, 9px));z-index:2}.ui-glass-chip{backdrop-filter:blur(var(--ui-glass-chip-blur,8px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px solid var(--ui-glass-border);box-shadow:inset 0 1px 0 var(--ui-glass-highlight)}}

package/dist/plugins/glass-preset/index.css

@@ -1 +1 @@
-@layer theme{[data-glass=thin],[data-glass=thin]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.2),hsla(0,0%,8%,.62));--ui-glass-border:light-dark(rgba(31,31,31,.16),hsla(0,0%,100%,.2));--ui-glass-blur:4px;--ui-glass-saturate:150%}[data-glass=soft],[data-glass=soft]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.283),hsla(0,0%,8%,.653));--ui-glass-border:light-dark(rgba(31,31,31,.187),hsla(0,0%,100%,.227));--ui-glass-blur:8px;--ui-glass-saturate:146.7%}[data-glass=regular],[data-glass=regular]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.367),hsla(0,0%,8%,.687));--ui-glass-border:light-dark(rgba(31,31,31,.213),hsla(0,0%,100%,.253));--ui-glass-blur:12px;--ui-glass-saturate:143.3%}[data-glass=thick],[data-glass=thick]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.45),hsla(0,0%,8%,.72));--ui-glass-border:light-dark(rgba(31,31,31,.24),hsla(0,0%,100%,.28));--ui-glass-blur:16px;--ui-glass-saturate:140%}}
+@layer theme{[data-glass=thin],[data-glass=thin]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.2),hsla(0,0%,8%,.62));--ui-glass-overlay-surface:light-dark(hsla(0,0%,100%,.64),hsla(0,0%,8%,.76));--ui-glass-border:light-dark(rgba(31,31,31,.16),hsla(0,0%,100%,.2));--ui-glass-blur:4px;--ui-glass-saturate:150%}[data-glass=soft],[data-glass=soft]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.283),hsla(0,0%,8%,.653));--ui-glass-overlay-surface:light-dark(hsla(0,0%,100%,.69),hsla(0,0%,8%,.79));--ui-glass-border:light-dark(rgba(31,31,31,.187),hsla(0,0%,100%,.227));--ui-glass-blur:8px;--ui-glass-saturate:146.7%}[data-glass=regular],[data-glass=regular]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.367),hsla(0,0%,8%,.687));--ui-glass-overlay-surface:light-dark(hsla(0,0%,100%,.74),hsla(0,0%,8%,.82));--ui-glass-border:light-dark(rgba(31,31,31,.213),hsla(0,0%,100%,.253));--ui-glass-blur:12px;--ui-glass-saturate:143.3%}[data-glass=thick],[data-glass=thick]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.45),hsla(0,0%,8%,.72));--ui-glass-overlay-surface:light-dark(hsla(0,0%,100%,.8),hsla(0,0%,8%,.86));--ui-glass-border:light-dark(rgba(31,31,31,.24),hsla(0,0%,100%,.28));--ui-glass-blur:16px;--ui-glass-saturate:140%}}

package/dist/theme/alert-dialog.mjs

@@ -9,7 +9,7 @@ export default tv({
     ],
     viewport: "fixed inset-0 z-50 flex overflow-y-auto overscroll-contain p-4",
     popup: [
-      "relative isolate m-auto w-full max-w-md bg-ui-surface",
+      "relative isolate m-auto w-full max-w-md",
       "rounded-[1.75rem] text-ui-ink outline-none",
       "transition-[opacity,scale,translate] duration-200 ease-out",
       "data-[starting-style]:translate-y-2 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -17,7 +17,7 @@ export default tv({
       "motion-reduce:transition-none"
     ],
     glass: [
-      "ui-glass ui-glass-inner ui-glass-highlight",
+      "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
       "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
     ],
     overlay: "ui-glass-rim",
@@ -26,8 +26,8 @@ export default tv({
       "min-w-0 text-lg font-semibold tracking-tight text-ui-ink",
       "[filter:var(--ui-drop-shadow-label)]"
     ],
-    description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-60",
-    body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-75",
+    description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-85",
+    body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-90",
     footer: "mt-6 flex flex-wrap items-center justify-end gap-2"
   }
 });

package/dist/theme/dialog.mjs

@@ -9,7 +9,7 @@ export default tv({
     ],
     viewport: "fixed inset-0 z-50 flex overflow-y-auto overscroll-contain p-4",
     popup: [
-      "relative isolate m-auto w-full max-w-md bg-ui-surface",
+      "relative isolate m-auto w-full max-w-md",
       "rounded-[1.75rem] text-ui-ink outline-none",
       "transition-[opacity,scale,translate] duration-200 ease-out",
       "data-[starting-style]:translate-y-2 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -17,7 +17,7 @@ export default tv({
       "motion-reduce:transition-none"
     ],
     glass: [
-      "ui-glass ui-glass-inner ui-glass-highlight",
+      "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
       "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
     ],
     overlay: "ui-glass-rim",
@@ -26,8 +26,8 @@ export default tv({
       "min-w-0 text-lg font-semibold tracking-tight text-ui-ink",
       "[filter:var(--ui-drop-shadow-label)]"
     ],
-    description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-60",
-    body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-75",
+    description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-85",
+    body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-90",
     footer: "mt-6 flex flex-wrap items-center justify-end gap-2"
   }
 });

package/dist/theme/drawer.mjs

@@ -12,14 +12,14 @@ export default tv({
     ],
     viewport: "fixed inset-0 z-50 flex overflow-hidden",
     popup: [
-      "relative isolate flex min-h-0 flex-col overflow-hidden bg-ui-surface",
+      "relative isolate flex min-h-0 flex-col overflow-hidden",
       "text-ui-ink outline-none touch-auto overscroll-contain will-change-transform",
       "transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)]",
       "data-[swiping]:select-none",
       "motion-reduce:transition-none"
     ],
     glass: [
-      "ui-glass ui-glass-inner ui-glass-highlight",
+      "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
       "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
     ],
     overlay: "ui-glass-rim",
@@ -31,8 +31,8 @@ export default tv({
       "min-w-0 text-lg font-semibold tracking-tight text-ui-ink",
       "[filter:var(--ui-drop-shadow-label)]"
     ],
-    description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-60",
-    body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-75",
+    description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-85",
+    body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-90",
     footer: "mt-6 flex flex-wrap items-center justify-end gap-2"
   },
   variants: {

package/dist/theme/menu.mjs

@@ -3,7 +3,7 @@ export default tv({
   slots: {
     positioner: "z-50 outline-none",
     popup: [
-      "relative isolate min-w-48 max-w-80 rounded-2xl bg-ui-surface p-1.5",
+      "relative isolate min-w-48 max-w-80 rounded-2xl p-1.5",
       "text-ui-ink outline-none",
       "transition-[opacity,scale] duration-150 ease-out",
       "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -15,7 +15,7 @@ export default tv({
       "motion-reduce:transition-none"
     ],
     glass: [
-      "ui-glass ui-glass-inner ui-glass-highlight",
+      "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
       "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
     ],
     overlay: "ui-glass-rim",
@@ -36,12 +36,12 @@ export default tv({
     itemLabel: "min-w-0 flex-1 truncate",
     shortcut: [
       "ml-auto shrink-0 font-mono text-[0.65rem] uppercase tracking-[0.12em]",
-      "text-ui-ink/45"
+      "text-ui-ink/85"
     ],
     group: "flex min-w-0 flex-col gap-0.5",
     groupLabel: [
       "px-2.5 pb-1 pt-2 text-[0.65rem] font-medium uppercase tracking-[0.14em]",
-      "text-ui-ink/45"
+      "text-ui-ink/85"
     ],
     separator: "mx-1 my-1 h-px bg-ui-glass-border"
   }

package/dist/theme/popover.mjs

@@ -3,7 +3,7 @@ export default tv({
   slots: {
     positioner: "z-50 outline-none",
     popup: [
-      "relative isolate w-80 max-w-[calc(100vw-2rem)] bg-ui-surface",
+      "relative isolate w-80 max-w-[calc(100vw-2rem)]",
       "rounded-[1.5rem] text-ui-ink outline-none",
       "transition-[opacity,scale,translate] duration-150 ease-out",
       "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -17,26 +17,30 @@ export default tv({
       "motion-reduce:transition-none"
     ],
     glass: [
-      "ui-glass ui-glass-inner ui-glass-highlight",
+      "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
       "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
     ],
     overlay: "ui-glass-rim",
     arrow: [
       "pointer-events-none absolute z-[1] size-3 rotate-45",
-      "border-ui-glass-border bg-ui-surface",
+      "border-ui-glass-border bg-ui-glass-overlay-surface",
       "drop-shadow-[0_1px_2px_rgb(0_0_0/0.12)]",
       "data-[side=bottom]:-top-[6px] data-[side=bottom]:border-t data-[side=bottom]:border-l",
       "data-[side=top]:-bottom-[6px] data-[side=top]:border-r data-[side=top]:border-b",
       "data-[side=left]:-right-[6px] data-[side=left]:border-t data-[side=left]:border-r",
-      "data-[side=right]:-left-[6px] data-[side=right]:border-b data-[side=right]:border-l"
+      "data-[side=right]:-left-[6px] data-[side=right]:border-b data-[side=right]:border-l",
+      "data-[side=bottom]:[clip-path:polygon(0_0,100%_0,0_100%)]",
+      "data-[side=top]:[clip-path:polygon(100%_0,100%_100%,0_100%)]",
+      "data-[side=left]:[clip-path:polygon(0_0,100%_0,100%_100%)]",
+      "data-[side=right]:[clip-path:polygon(0_0,0_100%,100%_100%)]"
     ],
     content: "relative z-10 flex min-w-0 flex-col p-4",
     title: [
       "min-w-0 text-sm font-semibold tracking-tight text-ui-ink",
       "[filter:var(--ui-drop-shadow-label)]"
     ],
-    description: "mt-1 min-w-0 text-xs leading-relaxed text-ui-ink opacity-60",
-    body: "mt-3 min-w-0 text-sm leading-relaxed text-ui-ink opacity-75",
+    description: "mt-1 min-w-0 text-xs leading-relaxed text-ui-ink opacity-85",
+    body: "mt-3 min-w-0 text-sm leading-relaxed text-ui-ink opacity-90",
     footer: "mt-4 flex flex-wrap items-center justify-end gap-2"
   }
 });

package/dist/theme/select.mjs

@@ -39,7 +39,7 @@ export default tv({
     positioner: "z-50 outline-none",
     popup: [
       "relative isolate min-w-[var(--anchor-width)] max-w-[min(24rem,var(--available-width))]",
-      "rounded-2xl bg-ui-surface p-1.5 text-ui-ink outline-none",
+      "rounded-2xl p-1.5 text-ui-ink outline-none",
       "transition-[opacity,scale] duration-150 ease-out",
       "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
       "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
@@ -50,7 +50,7 @@ export default tv({
       "motion-reduce:transition-none"
     ],
     popupGlass: [
-      "ui-glass ui-glass-inner ui-glass-highlight",
+      "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
       "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
     ],
     popupOverlay: "ui-glass-rim",

package/dist/theme/toast.mjs

@@ -8,7 +8,7 @@ export default tv({
       "[--shrink:calc(1_-_var(--scale))]",
       "[--height:var(--toast-frontmost-height,var(--toast-height))]",
       "absolute inset-x-0 isolate h-[var(--height)] w-full rounded-[1.25rem]",
-      "bg-ui-surface text-ui-ink select-none",
+      "text-ui-ink select-none",
       "z-[calc(1000-var(--toast-index))]",
       "[transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
       "data-[expanded]:h-[var(--toast-height)]",
@@ -20,7 +20,7 @@ export default tv({
       "motion-reduce:transition-none"
     ],
     glass: [
-      "ui-glass ui-glass-inner ui-glass-highlight",
+      "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
       "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
     ],
     overlay: "ui-glass-rim",
@@ -39,7 +39,7 @@ export default tv({
       "min-w-0 text-sm font-semibold tracking-tight text-ui-ink",
       "[filter:var(--ui-drop-shadow-label)]"
     ],
-    description: "min-w-0 text-sm leading-relaxed text-ui-ink opacity-60",
+    description: "min-w-0 text-sm leading-relaxed text-ui-ink opacity-85",
     actions: "flex shrink-0 items-center gap-1",
     action: [
       "ui-glass-chip inline-flex h-7 shrink-0 items-center rounded-full px-2.5",

package/dist/theme/tooltip.mjs

@@ -3,7 +3,7 @@ export default tv({
   slots: {
     positioner: "z-50 outline-none",
     popup: [
-      "relative isolate max-w-64 rounded-xl bg-ui-surface px-2.5 py-1.5",
+      "relative isolate max-w-64 rounded-xl px-2.5 py-1.5",
       "text-xs font-medium leading-tight text-ui-ink outline-none",
       "transition-[opacity,scale] duration-100 ease-out",
       "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -15,24 +15,32 @@ export default tv({
       "motion-reduce:transition-none"
     ],
     glass: [
-      "ui-glass ui-glass-inner ui-glass-highlight",
+      "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
       "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
     ],
     overlay: "ui-glass-rim",
     arrow: [
       "pointer-events-none absolute z-[1] size-2 rotate-45",
-      "border-ui-glass-border bg-ui-surface",
+      "border-ui-glass-border bg-ui-glass-overlay-surface",
       "drop-shadow-[0_1px_1px_rgb(0_0_0/0.12)]",
       "data-[side=bottom]:-top-[4px] data-[side=bottom]:border-t data-[side=bottom]:border-l",
       "data-[side=top]:-bottom-[4px] data-[side=top]:border-r data-[side=top]:border-b",
       "data-[side=left]:-right-[4px] data-[side=left]:border-t data-[side=left]:border-r",
       "data-[side=right]:-left-[4px] data-[side=right]:border-b data-[side=right]:border-l",
+      "data-[side=bottom]:[clip-path:polygon(0_0,100%_0,0_100%)]",
+      "data-[side=top]:[clip-path:polygon(100%_0,100%_100%,0_100%)]",
+      "data-[side=left]:[clip-path:polygon(0_0,100%_0,100%_100%)]",
+      "data-[side=right]:[clip-path:polygon(0_0,0_100%,100%_100%)]",
       "data-[side=inline-start]:-end-[4px]",
       "ltr:data-[side=inline-start]:border-t ltr:data-[side=inline-start]:border-e",
       "rtl:data-[side=inline-start]:border-b rtl:data-[side=inline-start]:border-e",
       "data-[side=inline-end]:-start-[4px]",
       "ltr:data-[side=inline-end]:border-b ltr:data-[side=inline-end]:border-s",
-      "rtl:data-[side=inline-end]:border-t rtl:data-[side=inline-end]:border-s"
+      "rtl:data-[side=inline-end]:border-t rtl:data-[side=inline-end]:border-s",
+      "ltr:data-[side=inline-start]:[clip-path:polygon(0_0,100%_0,100%_100%)]",
+      "rtl:data-[side=inline-start]:[clip-path:polygon(0_0,0_100%,100%_100%)]",
+      "ltr:data-[side=inline-end]:[clip-path:polygon(0_0,0_100%,100%_100%)]",
+      "rtl:data-[side=inline-end]:[clip-path:polygon(0_0,100%_0,100%_100%)]"
     ],
     content: "relative z-10"
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xingxingmofashu/ui",
-  "version": "0.1.10",
+  "version": "0.2.1",
   "description": "React components with a CSS-only Liquid Glass visual style for React 19 and Tailwind CSS 4.",
   "license": "MIT",
   "author": "xingxingmofashu",
@@ -109,8 +109,7 @@
     "lint": "oxlint",
     "lint:fix": "oxlint --fix",
     "test": "vitest run",
-    "test:visual": "playwright test",
-    "test:visual:update": "playwright test --update-snapshots",
+    "test:e2e": "playwright test",
     "typecheck": "tsc --noEmit",
     "docs:dev": "pnpm --filter @xingxingmofashu/docs dev",
     "docs:build": "pnpm --filter @xingxingmofashu/docs build",