@typlog/ui 0.11.4 → 0.11.6

package/dist/components.css

@@ -1,5 +1,5 @@
 
-.ui-root[data-is-root-theme] {
+[data-v-app] > .ui-root {
   position: relative;
   z-index: 0;
 }

package/dist/components.d.ts

@@ -428,7 +428,7 @@ indicator: "plus-minus" | "chevron";
 export declare interface AccordionTriggerProps extends PrimitiveProps {
     /**
      * The indicator icon for the accordion trigger.
-     * @defaultValue "chevron"
+     * @default "chevron"
      */
     indicator?: 'plus-minus' | 'chevron';
 }
@@ -492,17 +492,17 @@ export declare interface AvatarProps {
     fallback?: string;
     /**
      * Overrides the radius inherited from the theme.
-     * @defaultValue "small"
+     * @default "small"
      */
     radius?: RadiusType;
     /**
      * The visual variant to apply.
-     * @defaultValue "solid"
+     * @default "solid"
      */
     variant?: 'solid' | 'soft' | 'ring';
     /**
      * Control the size of the avatar.
-     * @defaultValue "2"
+     * @default "2"
      */
     size?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
     /** Overrides the accent color inherited from the Theme. */
@@ -522,26 +522,26 @@ highContrast: boolean;
 export declare interface BadgeProps {
     /**
      * The visual variant to apply.
-     * @defaultValue "solid"
+     * @default "solid"
      */
     variant?: 'solid' | 'soft' | 'surface' | 'outline';
     /** Overrides the accent color inherited from the theme. */
     color?: ColorType;
     /**
      * Overrides the radius inherited from the theme.
-     * @defaultValue "small"
+     * @default "small"
      */
     radius?: RadiusType;
     /**
      * Control the size of the badge.
-     * @defaultValue "1"
+     * @default "1"
      */
     size?: '1' | '2' | '3';
     /** Uses a higher contrast color for the component. */
     highContrast?: boolean;
     /**
      * The element or component this component should render as.
-     * @defaultValue "span"
+     * @default "span"
      */
     as?: AsTag;
     asChild?: boolean;
@@ -561,7 +561,7 @@ highContrast: boolean;
 declare interface ButtonProps {
     /**
      * The visual variant to apply.
-     * @defaultValue "solid"
+     * @default "solid"
      */
     variant?: 'classic' | 'solid' | 'soft' | 'surface' | 'outline' | 'ghost';
     /** Overrides the accent color inherited from the Theme. */
@@ -570,7 +570,7 @@ declare interface ButtonProps {
     radius?: RadiusType;
     /**
      * Control the size of the button.
-     * @defaultValue "2"
+     * @default "2"
      */
     size?: '1' | '2' | '3' | '4';
     /** Uses a higher contrast color for the component. */
@@ -579,7 +579,7 @@ declare interface ButtonProps {
     disabled?: boolean;
     /**
      * The element or component this component should render as.
-     * @defaultValue "button"
+     * @default "button"
      */
     as?: AsTag | Component;
     asChild?: boolean;
@@ -882,14 +882,14 @@ size: "1" | "2" | "3";
 export declare interface EditableProps extends EditableRootProps {
     /**
      * Overrides the radius inherited from the theme.
-     * @defaultValue "small"
+     * @default "small"
      */
     radius?: RadiusType;
     /** Overrides the accent color inherited from the theme. */
     color?: ColorType;
     /**
      * Control the size of the padding and radius.
-     * @defaultValue "1"
+     * @default "1"
      */
     size?: '1' | '2' | '3';
 }
@@ -1186,7 +1186,7 @@ export declare interface SocialButtonProps extends PrimitiveProps {
     radius?: RadiusType;
     /**
      * Control the size of the social button.
-     * @defaultValue "2"
+     * @default "2"
      */
     size?: '1' | '2' | '3' | '4';
     disabled?: boolean;
@@ -1308,6 +1308,7 @@ accentColor: ColorType;
 radius: RadiusType;
 grayColor: GrayColorType;
 scaling: ScalingType;
+hasBackground: boolean;
 as: AsTag | Component;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
     default?(_: {}): any;
@@ -1318,6 +1319,7 @@ export declare interface ThemeProviderProps extends PrimitiveProps {
     radius?: RadiusType;
     grayColor?: GrayColorType;
     scaling?: ScalingType;
+    hasBackground?: boolean;
 }
 
 export declare const Toggle: __VLS_WithTemplateSlots_16<DefineComponent<ToggleProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {

package/dist/components.js

@@ -4,35 +4,37 @@ import { AlertDialogAction, AlertDialogCancel, AlertDialogDescription, AlertDial
 import { Icon } from "@iconify/vue";
 import { Icon as Icon2 } from "@iconify/vue";
 const [injectThemeContext, provideThemeContext] = createContext("ThemeProvider");
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "ThemeProvider",
   props: {
     accentColor: { default: "indigo" },
     radius: { default: "medium" },
     grayColor: { default: "auto" },
     scaling: { default: "100%" },
+    hasBackground: { type: Boolean, default: true },
     asChild: { type: Boolean },
     as: { default: "div" }
   },
   setup(__props) {
     const props = __props;
-    const { accentColor, radius, grayColor, scaling } = toRefs(props);
+    const { accentColor, radius, grayColor, scaling, hasBackground } = toRefs(props);
     provideThemeContext({
       accentColor,
       radius,
       grayColor,
-      scaling
+      scaling,
+      hasBackground
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TooltipProvider), null, {
         default: withCtx(() => [
           createVNode(unref(Primitive), {
             class: "ui-root",
-            "data-is-root-theme": "",
-            "data-accent-color": props.accentColor,
-            "data-gray-color": props.grayColor,
-            "data-radius": props.radius,
-            "data-scaling": props.scaling,
+            "data-accent-color": unref(accentColor),
+            "data-gray-color": unref(grayColor),
+            "data-radius": unref(radius),
+            "data-scaling": unref(scaling),
+            "data-has-background": unref(hasBackground),
             as: props.as,
             "as-child": props.asChild
           }, {
@@ -40,7 +42,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "default")
             ]),
             _: 3
-          }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling", "as", "as-child"])
+          }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling", "data-has-background", "as", "as-child"])
         ]),
         _: 3
       });
@@ -104,7 +106,7 @@ function kebabize(str) {
 function _kebabReplace(str, ofs) {
   return (ofs ? "-" : "") + str.toLowerCase();
 }
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "Avatar",
   props: {
     alt: {},
@@ -156,7 +158,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   __name: "Badge",
   props: {
     variant: { default: "soft" },
@@ -188,7 +190,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "Inset",
   props: {
     side: { default: "all" },
@@ -212,7 +214,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "Card",
   props: {
     variant: { default: "surface" },
@@ -241,7 +243,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "CardHead",
   props: {
     color: {},
@@ -264,7 +266,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "Button",
   props: {
     variant: { default: "solid" },
@@ -288,17 +290,18 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
         as: props.as,
         "data-accent-color": props.color,
         "data-radius": props.radius,
-        "data-disabled": props.disabled ? true : void 0
+        "data-disabled": props.disabled ? true : void 0,
+        disabled: props.disabled && props.as === "button" ? true : void 0
       }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 8, ["class", "as-child", "as", "data-accent-color", "data-radius", "data-disabled"]);
+      }, 8, ["class", "as-child", "as", "data-accent-color", "data-radius", "data-disabled", "disabled"]);
     };
   }
 });
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "IconButton",
   props: {
     variant: {},
@@ -314,7 +317,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     const props = __props;
     const forwarded = useForwardProps(props);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$R, mergeProps({ class: "ui-IconButton" }, unref(forwarded)), {
+      return openBlock(), createBlock(_sfc_main$S, mergeProps({ class: "ui-IconButton" }, unref(forwarded)), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
@@ -332,7 +335,7 @@ const BRAND_ICONS = {
   slack: "logos:slack-icon",
   figma: "logos:figma"
 };
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "SocialButton",
   props: {
     brand: {},
@@ -370,7 +373,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "ScrollArea",
   props: {
     size: { default: "1" },
@@ -434,6 +437,32 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
+  __name: "ThemeWrapper",
+  props: {
+    accentColor: {},
+    radius: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const theme = injectThemeContext();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), {
+        class: "ui-root",
+        "data-accent-color": props.accentColor || unref(theme).accentColor.value,
+        "data-gray-color": unref(theme).grayColor.value,
+        "data-radius": props.radius || unref(theme).radius.value,
+        "data-scaling": unref(theme).scaling.value,
+        "as-child": ""
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling"]);
+    };
+  }
+});
 const _hoisted_1$j = { class: "ui-DialogWrapper" };
 const _hoisted_2$7 = { class: "ui-DialogContainer" };
 const _sfc_main$N = /* @__PURE__ */ defineComponent({
@@ -457,7 +486,6 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   },
   emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
   setup(__props, { emit: __emit }) {
-    const theme = injectThemeContext();
     const props = __props;
     const emits = __emit;
     const forwarded = useForwardPropsEmits(props, emits, [
@@ -477,41 +505,40 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
         to: props.to
       }, {
         default: withCtx(() => [
-          createVNode(unref(AlertDialogOverlay), {
-            class: "ui-root ui-DialogOverlay",
-            "data-accent-color": unref(theme).accentColor.value,
-            "data-gray-color": unref(theme).grayColor.value,
-            "data-radius": unref(theme).radius.value,
-            "data-scaling": unref(theme).scaling.value
-          }, {
+          createVNode(_sfc_main$O, null, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$j, [
-                createElementVNode("div", _hoisted_2$7, [
-                  createVNode(unref(AlertDialogContent), mergeProps({
-                    class: ["ui-DialogContent", `r-size-${props.size}`]
-                  }, {
-                    ..._ctx.$attrs,
-                    ...unref(forwarded)
-                  }, {
-                    style: {
-                      width: props.width,
-                      height: props.height,
-                      minWidth: props.minWidth,
-                      maxWidth: props.maxWidth,
-                      minHeight: props.minHeight,
-                      maxHeight: props.maxHeight
-                    }
-                  }), {
-                    default: withCtx(() => [
-                      renderSlot(_ctx.$slots, "default")
-                    ]),
-                    _: 3
-                  }, 16, ["class", "style"])
-                ])
-              ])
+              createVNode(unref(AlertDialogOverlay), { class: "ui-DialogOverlay" }, {
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_1$j, [
+                    createElementVNode("div", _hoisted_2$7, [
+                      createVNode(unref(AlertDialogContent), mergeProps({
+                        class: ["ui-DialogContent", `r-size-${props.size}`]
+                      }, {
+                        ..._ctx.$attrs,
+                        ...unref(forwarded)
+                      }, {
+                        style: {
+                          width: props.width,
+                          height: props.height,
+                          minWidth: props.minWidth,
+                          maxWidth: props.maxWidth,
+                          minHeight: props.minHeight,
+                          maxHeight: props.maxHeight
+                        }
+                      }), {
+                        default: withCtx(() => [
+                          renderSlot(_ctx.$slots, "default")
+                        ]),
+                        _: 3
+                      }, 16, ["class", "style"])
+                    ])
+                  ])
+                ]),
+                _: 3
+              })
             ]),
             _: 3
-          }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling"])
+          })
         ]),
         _: 3
       }, 8, ["to"]);
@@ -543,7 +570,6 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
   setup(__props, { emit: __emit }) {
     const props = __props;
-    const theme = injectThemeContext();
     const emits = __emit;
     const forwarded = useForwardPropsEmits(props, emits, [
       "to",
@@ -563,55 +589,54 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
         to: props.to
       }, {
         default: withCtx(() => [
-          createVNode(unref(DialogOverlay), {
-            class: "ui-root ui-DialogOverlay",
-            "data-accent-color": unref(theme).accentColor.value,
-            "data-gray-color": unref(theme).grayColor.value,
-            "data-radius": unref(theme).radius.value,
-            "data-scaling": unref(theme).scaling.value
-          }, {
+          createVNode(_sfc_main$O, null, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$i, [
-                createElementVNode("div", _hoisted_2$6, [
-                  createVNode(unref(DialogContent), mergeProps({
-                    class: ["ui-DialogContent", `r-size-${props.size}`]
-                  }, {
-                    ..._ctx.$attrs,
-                    ...unref(forwarded)
-                  }, {
-                    style: {
-                      width: props.width,
-                      height: props.height,
-                      minWidth: props.minWidth,
-                      maxWidth: props.maxWidth,
-                      minHeight: props.minHeight,
-                      maxHeight: props.maxHeight
-                    }
-                  }), {
-                    default: withCtx(() => [
-                      props.closeIcon ? (openBlock(), createBlock(_sfc_main$Q, {
-                        key: 0,
-                        class: "ui-DialogContentClose",
-                        as: unref(DialogClose),
-                        type: "button",
-                        variant: "ghost",
-                        color: "gray",
-                        "aria-label": "Close"
+              createVNode(unref(DialogOverlay), { class: "ui-DialogOverlay" }, {
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_1$i, [
+                    createElementVNode("div", _hoisted_2$6, [
+                      createVNode(unref(DialogContent), mergeProps({
+                        class: ["ui-DialogContent", `r-size-${props.size}`]
                       }, {
+                        ..._ctx.$attrs,
+                        ...unref(forwarded)
+                      }, {
+                        style: {
+                          width: props.width,
+                          height: props.height,
+                          minWidth: props.minWidth,
+                          maxWidth: props.maxWidth,
+                          minHeight: props.minHeight,
+                          maxHeight: props.maxHeight
+                        }
+                      }), {
                         default: withCtx(() => [
-                          createVNode(unref(Icon), { icon: "lucide:x" })
+                          props.closeIcon ? (openBlock(), createBlock(_sfc_main$R, {
+                            key: 0,
+                            class: "ui-DialogContentClose",
+                            as: unref(DialogClose),
+                            type: "button",
+                            variant: "ghost",
+                            color: "gray",
+                            "aria-label": "Close"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(unref(Icon), { icon: "lucide:x" })
+                            ]),
+                            _: 1
+                          }, 8, ["as"])) : createCommentVNode("", true),
+                          renderSlot(_ctx.$slots, "default")
                         ]),
-                        _: 1
-                      }, 8, ["as"])) : createCommentVNode("", true),
-                      renderSlot(_ctx.$slots, "default")
-                    ]),
-                    _: 3
-                  }, 16, ["class", "style"])
-                ])
-              ])
+                        _: 3
+                      }, 16, ["class", "style"])
+                    ])
+                  ])
+                ]),
+                _: 3
+              })
             ]),
             _: 3
-          }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling"])
+          })
         ]),
         _: 3
       }, 8, ["to"]);
@@ -653,7 +678,6 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
   },
   emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
   setup(__props, { emit: __emit }) {
-    const theme = injectThemeContext();
     const props = __props;
     const emits = __emit;
     const forwarded = useForwardPropsEmits(props, emits, [
@@ -671,29 +695,32 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         to: props.to
       }, {
         default: withCtx(() => [
-          createVNode(unref(DropdownMenuContent), mergeProps({
-            ..._ctx.$attrs,
-            ...unref(forwarded)
+          createVNode(_sfc_main$O, {
+            "accent-color": props.color
           }, {
-            ref: unref(forwardRef),
-            class: ["ui-root ui-PopperContent ui-MenuContent", `r-size-${props.size}`],
-            "data-accent-color": props.color || unref(theme).accentColor.value,
-            "data-gray-color": unref(theme).grayColor.value,
-            "data-radius": unref(theme).radius.value,
-            "data-scaling": unref(theme).scaling.value
-          }), {
             default: withCtx(() => [
-              createVNode(_sfc_main$O, { type: "auto" }, {
+              createVNode(unref(DropdownMenuContent), mergeProps({
+                ..._ctx.$attrs,
+                ...unref(forwarded)
+              }, {
+                ref: unref(forwardRef),
+                class: ["ui-PopperContent ui-MenuContent", `r-size-${props.size}`]
+              }), {
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_1$h, [
-                    renderSlot(_ctx.$slots, "default")
-                  ])
+                  createVNode(_sfc_main$P, { type: "auto" }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", _hoisted_1$h, [
+                        renderSlot(_ctx.$slots, "default")
+                      ])
+                    ]),
+                    _: 3
+                  })
                 ]),
                 _: 3
-              })
+              }, 16, ["class"])
             ]),
             _: 3
-          }, 16, ["class", "data-accent-color", "data-gray-color", "data-radius", "data-scaling"])
+          }, 8, ["accent-color"])
         ]),
         _: 3
       }, 8, ["to"]);
@@ -769,7 +796,6 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   },
   emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
   setup(__props, { emit: __emit }) {
-    const theme = injectThemeContext();
     const props = __props;
     const emits = __emit;
     const forwarded = useForwardPropsEmits(props, emits, ["to", "size"]);
@@ -778,18 +804,19 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         to: props.to
       }, {
         default: withCtx(() => [
-          createVNode(unref(PopoverContent), mergeProps({ ..._ctx.$attrs, ...unref(forwarded) }, {
-            class: ["ui-root ui-PopoverContent", `r-size-${props.size}`],
-            "data-accent-color": unref(theme).accentColor.value,
-            "data-gray-color": unref(theme).grayColor.value,
-            "data-radius": unref(theme).radius.value,
-            "data-scaling": unref(theme).scaling.value
-          }), {
+          createVNode(_sfc_main$O, null, {
             default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default")
+              createVNode(unref(PopoverContent), mergeProps({ ..._ctx.$attrs, ...unref(forwarded) }, {
+                class: ["ui-PopoverContent", `r-size-${props.size}`]
+              }), {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "default")
+                ]),
+                _: 3
+              }, 16, ["class"])
             ]),
             _: 3
-          }, 16, ["class", "data-accent-color", "data-gray-color", "data-radius", "data-scaling"])
+          })
         ]),
         _: 3
       }, 8, ["to"]);
@@ -1445,7 +1472,6 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     as: {}
   },
   setup(__props) {
-    const theme = injectThemeContext();
     const props = __props;
     const forwarded = useForwardProps(props);
     const { forwardRef } = useForwardExpose();
@@ -1465,56 +1491,59 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         to: props.to
       }, {
         default: withCtx(() => [
-          createVNode(unref(SelectContent), mergeProps({ ref: unref(forwardRef) }, {
-            ..._ctx.$attrs,
-            ...unref(forwarded),
-            to: void 0,
-            variant: void 0
+          createVNode(_sfc_main$O, {
+            "accent-color": unref(context).color.value
           }, {
-            class: ["ui-root ui-SelectContent", contentClass.value],
-            "data-accent-color": unref(context).color.value || unref(theme).accentColor.value,
-            "data-gray-color": unref(theme).grayColor.value,
-            "data-radius": unref(theme).radius.value,
-            "data-scaling": unref(theme).scaling.value
-          }), {
             default: withCtx(() => [
-              createVNode(unref(ScrollAreaRoot), {
-                type: "auto",
-                class: "ui-ScrollArea"
+              createVNode(unref(SelectContent), mergeProps({ ref: unref(forwardRef) }, {
+                ..._ctx.$attrs,
+                ...unref(forwarded),
+                to: void 0,
+                variant: void 0
               }, {
+                class: ["ui-SelectContent", contentClass.value]
+              }), {
                 default: withCtx(() => [
-                  createVNode(unref(SelectViewport), {
-                    class: "ui-SelectViewport",
-                    "as-child": ""
+                  createVNode(unref(ScrollAreaRoot), {
+                    type: "auto",
+                    class: "ui-ScrollArea"
                   }, {
                     default: withCtx(() => [
-                      createVNode(unref(ScrollAreaViewport), { class: "ui-ScrollAreaViewport" }, {
-                        default: withCtx(() => [
-                          renderSlot(_ctx.$slots, "default")
-                        ]),
-                        _: 3
-                      }),
-                      _cache[0] || (_cache[0] = createElementVNode("div", { class: "ui-ScrollAreaViewportFocusRing" }, null, -1)),
-                      createVNode(unref(ScrollAreaScrollbar), {
-                        class: "ui-ScrollAreaScrollbar",
-                        "data-size": 1,
-                        orientation: "vertical"
+                      createVNode(unref(SelectViewport), {
+                        class: "ui-SelectViewport",
+                        "as-child": ""
                       }, {
                         default: withCtx(() => [
-                          createVNode(unref(ScrollAreaThumb), { class: "ui-ScrollAreaThumb" })
+                          createVNode(unref(ScrollAreaViewport), { class: "ui-ScrollAreaViewport" }, {
+                            default: withCtx(() => [
+                              renderSlot(_ctx.$slots, "default")
+                            ]),
+                            _: 3
+                          }),
+                          _cache[0] || (_cache[0] = createElementVNode("div", { class: "ui-ScrollAreaViewportFocusRing" }, null, -1)),
+                          createVNode(unref(ScrollAreaScrollbar), {
+                            class: "ui-ScrollAreaScrollbar",
+                            "data-size": 1,
+                            orientation: "vertical"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(unref(ScrollAreaThumb), { class: "ui-ScrollAreaThumb" })
+                            ]),
+                            _: 1
+                          })
                         ]),
-                        _: 1
+                        _: 3,
+                        __: [0]
                       })
                     ]),
-                    _: 3,
-                    __: [0]
+                    _: 3
                   })
                 ]),
                 _: 3
-              })
+              }, 16, ["class"])
             ]),
             _: 3
-          }, 16, ["class", "data-accent-color", "data-gray-color", "data-radius", "data-scaling"])
+          }, 8, ["accent-color"])
         ]),
         _: 3
       }, 8, ["to"]);
@@ -1849,7 +1878,6 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside"],
   setup(__props, { emit: __emit }) {
     const { forwardRef } = useForwardExpose();
-    const theme = injectThemeContext();
     const props = __props;
     const emits = __emit;
     const forwarded = useForwardPropsEmits$1(props, emits);
@@ -1866,57 +1894,60 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         to: props.to
       }, {
         default: withCtx(() => [
-          createVNode(unref(ComboboxContent), mergeProps({ ref: unref(forwardRef) }, {
-            ..._ctx.$attrs,
-            ...unref(forwarded),
-            position: "popper",
-            to: void 0,
-            variant: void 0
+          createVNode(_sfc_main$O, {
+            "accent-color": unref(context).color.value
           }, {
-            class: ["ui-root ui-ComboboxContent", contentClass.value],
-            "data-accent-color": unref(context).color.value || unref(theme).accentColor.value,
-            "data-gray-color": unref(theme).grayColor.value,
-            "data-radius": unref(theme).radius.value,
-            "data-scaling": unref(theme).scaling.value
-          }), {
             default: withCtx(() => [
-              createVNode(unref(ScrollAreaRoot), {
-                type: "auto",
-                class: "ui-ScrollArea"
+              createVNode(unref(ComboboxContent), mergeProps({ ref: unref(forwardRef) }, {
+                ..._ctx.$attrs,
+                ...unref(forwarded),
+                position: "popper",
+                to: void 0,
+                variant: void 0
               }, {
+                class: ["ui-ComboboxContent", contentClass.value]
+              }), {
                 default: withCtx(() => [
-                  createVNode(unref(ComboboxViewport), {
-                    class: "ui-ComboboxViewport",
-                    "as-child": ""
+                  createVNode(unref(ScrollAreaRoot), {
+                    type: "auto",
+                    class: "ui-ScrollArea"
                   }, {
                     default: withCtx(() => [
-                      createVNode(unref(ScrollAreaViewport), { class: "ui-ScrollAreaViewport" }, {
+                      createVNode(unref(ComboboxViewport), {
+                        class: "ui-ComboboxViewport",
+                        "as-child": ""
+                      }, {
                         default: withCtx(() => [
-                          renderSlot(_ctx.$slots, "default")
+                          createVNode(unref(ScrollAreaViewport), { class: "ui-ScrollAreaViewport" }, {
+                            default: withCtx(() => [
+                              renderSlot(_ctx.$slots, "default")
+                            ]),
+                            _: 3
+                          })
                         ]),
                         _: 3
+                      }),
+                      _cache[0] || (_cache[0] = createElementVNode("div", { class: "ui-ScrollAreaViewportFocusRing" }, null, -1)),
+                      createVNode(unref(ScrollAreaScrollbar), {
+                        class: "ui-ScrollAreaScrollbar",
+                        "data-size": 1,
+                        orientation: "vertical"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(ScrollAreaThumb), { class: "ui-ScrollAreaThumb" })
+                        ]),
+                        _: 1
                       })
                     ]),
-                    _: 3
-                  }),
-                  _cache[0] || (_cache[0] = createElementVNode("div", { class: "ui-ScrollAreaViewportFocusRing" }, null, -1)),
-                  createVNode(unref(ScrollAreaScrollbar), {
-                    class: "ui-ScrollAreaScrollbar",
-                    "data-size": 1,
-                    orientation: "vertical"
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(ScrollAreaThumb), { class: "ui-ScrollAreaThumb" })
-                    ]),
-                    _: 1
+                    _: 3,
+                    __: [0]
                   })
                 ]),
-                _: 3,
-                __: [0]
-              })
+                _: 3
+              }, 16, ["class"])
             ]),
             _: 3
-          }, 16, ["class", "data-accent-color", "data-gray-color", "data-radius", "data-scaling"])
+          }, 8, ["accent-color"])
         ]),
         _: 3
       }, 8, ["to"]);
@@ -2113,7 +2144,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         "data-high-contrast": unref(rootContext).highContrast?.value
       }, { ...unref(forwarded), asChild: false }), {
         default: withCtx(() => [
-          createVNode(_sfc_main$T, {
+          createVNode(_sfc_main$U, {
             "as-child": unref(forwarded).asChild
           }, {
             default: withCtx(() => [
@@ -2512,7 +2543,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ui-Pagination", resetClass.value])
       }, [
-        pagination.value.prev ? (openBlock(), createBlock(_sfc_main$Q, mergeProps({ key: 0 }, buttonProps.value, {
+        pagination.value.prev ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 0 }, buttonProps.value, {
           "aria-label": "Previous",
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => selectPage(pagination.value.prev), ["prevent"]))
         }), {
@@ -2525,7 +2556,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16)) : createCommentVNode("", true),
-        createVNode(_sfc_main$R, mergeProps(buttonProps.value, {
+        createVNode(_sfc_main$S, mergeProps(buttonProps.value, {
           disabled: page.value === 1,
           "aria-current": "page",
           onClick: _cache[1] || (_cache[1] = withModifiers(($event) => selectPage(1), ["prevent"]))
@@ -2537,7 +2568,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16, ["disabled"]),
-        pagination.value.hasLeftEdge ? (openBlock(), createBlock(_sfc_main$Q, mergeProps({ key: 1 }, buttonProps.value, {
+        pagination.value.hasLeftEdge ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 1 }, buttonProps.value, {
           onClick: withModifiers(selectLeft, ["prevent"])
         }), {
           default: withCtx(() => [
@@ -2550,7 +2581,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           _: 3
         }, 16)) : createCommentVNode("", true),
         (openBlock(true), createElementBlock(Fragment, null, renderList(pagination.value.pageList, (p) => {
-          return openBlock(), createBlock(_sfc_main$R, mergeProps({ key: p }, { ref_for: true }, buttonProps.value, {
+          return openBlock(), createBlock(_sfc_main$S, mergeProps({ key: p }, { ref_for: true }, buttonProps.value, {
             disabled: p === page.value,
             "aria-current": "page",
             onClick: withModifiers(($event) => selectPage(p), ["prevent"])
@@ -2563,7 +2594,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             _: 2
           }, 1040, ["disabled", "onClick"]);
         }), 128)),
-        pagination.value.hasRightEdge ? (openBlock(), createBlock(_sfc_main$Q, mergeProps({ key: 2 }, buttonProps.value, {
+        pagination.value.hasRightEdge ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 2 }, buttonProps.value, {
           onClick: withModifiers(selectRight, ["prevent"])
         }), {
           default: withCtx(() => [
@@ -2575,7 +2606,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16)) : createCommentVNode("", true),
-        pagination.value.totalPages > 1 ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 3 }, buttonProps.value, {
+        pagination.value.totalPages > 1 ? (openBlock(), createBlock(_sfc_main$S, mergeProps({ key: 3 }, buttonProps.value, {
           disabled: pagination.value.totalPages === page.value,
           "aria-current": "page",
           onClick: _cache[2] || (_cache[2] = withModifiers(($event) => selectPage(pagination.value.totalPages), ["prevent"]))
@@ -2589,7 +2620,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 16, ["disabled"])) : createCommentVNode("", true),
-        pagination.value.next ? (openBlock(), createBlock(_sfc_main$Q, mergeProps({ key: 4 }, buttonProps.value, {
+        pagination.value.next ? (openBlock(), createBlock(_sfc_main$R, mergeProps({ key: 4 }, buttonProps.value, {
           "aria-label": "Next",
           onClick: _cache[3] || (_cache[3] = withModifiers(($event) => selectPage(pagination.value.next), ["prevent"]))
         }), {
@@ -2623,7 +2654,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         "data-size": props.size,
         "data-variant": props.variant
       }, [
-        createVNode(_sfc_main$O, null, {
+        createVNode(_sfc_main$P, null, {
           default: withCtx(() => [
             createElementVNode("table", {
               class: "ui-TableContent",
@@ -2687,7 +2718,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const theme = injectThemeContext();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TooltipRoot), null, {
         default: withCtx(() => [
@@ -2704,35 +2734,36 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             to: props.to
           }, {
             default: withCtx(() => [
-              createVNode(unref(TooltipContent), {
-                class: "ui-root ui-Tooltip",
-                "data-accent-color": unref(theme).accentColor.value,
-                "data-gray-color": unref(theme).grayColor.value,
-                "data-radius": unref(theme).radius.value,
-                "data-scaling": unref(theme).scaling.value,
-                align: props.align,
-                "align-offset": props.alignOffset,
-                "aria-label": props.ariaLabel,
-                "arrow-padding": props.arrowPadding,
-                "avoid-collisions": props.avoidCollisions,
-                "collision-boundary": props.collisionBoundary,
-                "collision-padding": props.collisionPadding,
-                "hide-when-detached": props.hideWhenDetached,
-                side: props.side,
-                "side-offset": props.sideOffset,
-                sticky: props.sticky
-              }, {
+              createVNode(_sfc_main$O, null, {
                 default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "content", {}, () => [
-                    createElementVNode("p", {
-                      class: "ui-TooltipText",
-                      textContent: toDisplayString(props.content)
-                    }, null, 8, _hoisted_1$2)
-                  ]),
-                  createVNode(unref(TooltipArrow), { class: "ui-TooltipArrow" })
+                  createVNode(unref(TooltipContent), {
+                    class: "ui-Tooltip",
+                    align: props.align,
+                    "align-offset": props.alignOffset,
+                    "aria-label": props.ariaLabel,
+                    "arrow-padding": props.arrowPadding,
+                    "avoid-collisions": props.avoidCollisions,
+                    "collision-boundary": props.collisionBoundary,
+                    "collision-padding": props.collisionPadding,
+                    "hide-when-detached": props.hideWhenDetached,
+                    side: props.side,
+                    "side-offset": props.sideOffset,
+                    sticky: props.sticky
+                  }, {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "content", {}, () => [
+                        createElementVNode("p", {
+                          class: "ui-TooltipText",
+                          textContent: toDisplayString(props.content)
+                        }, null, 8, _hoisted_1$2)
+                      ]),
+                      createVNode(unref(TooltipArrow), { class: "ui-TooltipArrow" })
+                    ]),
+                    _: 3
+                  }, 8, ["align", "align-offset", "aria-label", "arrow-padding", "avoid-collisions", "collision-boundary", "collision-padding", "hide-when-detached", "side", "side-offset", "sticky"])
                 ]),
                 _: 3
-              }, 8, ["data-accent-color", "data-gray-color", "data-radius", "data-scaling", "align", "align-offset", "aria-label", "arrow-padding", "avoid-collisions", "collision-boundary", "collision-padding", "hide-when-detached", "side", "side-offset", "sticky"])
+              })
             ]),
             _: 3
           }, 8, ["to"])
@@ -2873,11 +2904,11 @@ export {
   AlertDialogRoot,
   AlertDialogTitle,
   AlertDialogTrigger,
-  _sfc_main$W as Avatar,
-  _sfc_main$V as Badge,
-  _sfc_main$R as Button,
-  _sfc_main$T as Card,
-  _sfc_main$S as CardHead,
+  _sfc_main$X as Avatar,
+  _sfc_main$W as Badge,
+  _sfc_main$S as Button,
+  _sfc_main$U as Card,
+  _sfc_main$T as CardHead,
   _sfc_main$H as Checkbox,
   _sfc_main$E as CheckboxGroupControl,
   _sfc_main$F as CheckboxGroupItem,
@@ -2906,9 +2937,9 @@ export {
   DropdownMenuTrigger,
   _sfc_main$f as Editable,
   Icon2 as Icon,
-  _sfc_main$Q as IconButton,
+  _sfc_main$R as IconButton,
   _sfc_main as IconCircle,
-  _sfc_main$U as Inset,
+  _sfc_main$V as Inset,
   _sfc_main$7 as Pagination,
   _sfc_main$b as PlusMinusIcon,
   PopoverClose,
@@ -2924,7 +2955,7 @@ export {
   RadioGroupItem2 as RadioTabsItem,
   _sfc_main$i as RadioTabsList,
   _sfc_main$1 as SavingIndicator,
-  _sfc_main$O as ScrollArea,
+  _sfc_main$P as ScrollArea,
   _sfc_main$w as SelectContent,
   SelectGroup,
   _sfc_main$u as SelectItem,
@@ -2933,7 +2964,7 @@ export {
   SelectSeparator,
   _sfc_main$v as SelectTrigger,
   _sfc_main$5 as Separator,
-  _sfc_main$P as SocialButton,
+  _sfc_main$Q as SocialButton,
   _sfc_main$2 as Spinner,
   _sfc_main$I as Switch,
   _sfc_main$6 as Table,
@@ -2943,7 +2974,7 @@ export {
   _sfc_main$g as TabsTrigger,
   _sfc_main$z as TextArea,
   _sfc_main$A as TextField,
-  _sfc_main$X as ThemeProvider,
+  _sfc_main$Y as ThemeProvider,
   _sfc_main$D as Toggle,
   _sfc_main$B as ToggleGroupItem,
   _sfc_main$C as ToggleGroupRoot,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typlog/ui",
-  "version": "0.11.4",
+  "version": "0.11.6",
   "license": "MIT",
   "type": "module",
   "description": "Themed components for Reka UI.",