@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/tabs/Tabs.js

@@ -5,8 +5,14 @@ import TabsServer from "./Tabs.server.js";
 const Tabs = createIsland({
   name: "Tabs",
   Server: TabsServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./Tabs.lazy.js"), "loadLazy"),
-  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./Tabs.lazy.js"), "loadLazy")
+  ),
+  isInteractive: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => true, "isInteractive")
+  )
 });
 export {
   Tabs

package/dist/components/tabs/Tabs.module.css

@@ -127,15 +127,18 @@
 .prokodo-Tabs {
   width: 100%;
 }
+.pk-theme-dark .prokodo-Tabs {
+  --pk-tabs-border: var(--pk-palette-grey-500);
+}
 .prokodo-Tabs--vertical {
   display: grid;
-  grid-gap: 1rem;
-  gap: 1rem;
+  grid-gap: var(--pk-tabs-gap);
+  gap: var(--pk-tabs-gap);
   grid-template-columns: minmax(px-to-rem(180px), px-to-rem(260px)) 1fr;
 }
 .prokodo-Tabs__list {
   align-items: stretch;
-  border-bottom: 1px solid var(--color-grey-200);
+  border-bottom: 1px solid var(--pk-tabs-border);
   display: flex;
   gap: 0;
   overflow-x: auto;
@@ -143,35 +146,26 @@
   position: relative;
   scrollbar-width: none;
 }
-html[data-theme=dark] .prokodo-Tabs__list {
-  border-bottom-color: var(--color-grey-700);
-}
 .prokodo-Tabs__list--vertical {
   border-bottom: none;
-  border-right: 1px solid var(--color-grey-200);
+  border-right: 1px solid var(--pk-tabs-border);
   flex-direction: column;
   overflow-x: visible;
 }
-html[data-theme=dark] .prokodo-Tabs__list--vertical {
-  border-right-color: var(--color-grey-700);
-}
-.prokodo-Tabs__list--disabled {
-  opacity: 0.7;
-}
 .prokodo-Tabs__tab {
   align-items: center;
   background: transparent;
   border: none;
-  border-top-left-radius: 1.5rem;
-  border-top-right-radius: 1.5rem;
+  border-top-left-radius: var(--pk-tabs-radius);
+  border-top-right-radius: var(--pk-tabs-radius);
   box-shadow: none;
-  color: var(--color-grey-700);
+  color: var(--pk-tabs-tab-color);
   cursor: pointer;
   display: inline-flex;
-  gap: 0.5rem;
+  gap: var(--pk-tabs-pad-sm);
   justify-content: center;
   min-height: px-to-rem(44px);
-  padding: 0.75rem 1rem;
+  padding: var(--pk-tabs-pad-md) var(--pk-tabs-pad-lg);
   position: relative;
   transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease;
   font-weight: 400;
@@ -199,11 +193,13 @@ html[data-theme=dark] .prokodo-Tabs__list--vertical {
   border-top-right-radius: 0;
 }
 .prokodo-Tabs__tab:hover {
-  background: var(--color-primary-50);
+  background: var(--pk-tabs-tab-hover-bg);
+  border-radius: var(--pk-tabs-radius) var(--pk-tabs-radius) 0 0;
 }
 .prokodo-Tabs__tab:focus-visible {
   outline: 0;
-  background: var(--color-primary-50);
+  background: var(--pk-tabs-tab-hover-bg);
+  border-radius: var(--pk-tabs-radius) var(--pk-tabs-radius) 0 0;
 }
 .prokodo-Tabs__tab::after {
   background: transparent;
@@ -221,14 +217,14 @@ html[data-theme=dark] .prokodo-Tabs__list--vertical {
   flex: 1 1;
 }
 .prokodo-Tabs__tab--selected {
-  color: var(--color-primary-900);
+  color: var(--pk-tabs-tab-selected-color);
 }
 .prokodo-Tabs__tab--selected::after {
-  background: var(--gradient-border-4);
+  background: var(--pk-tabs-indicator-gradient);
   transform: scaleX(1);
 }
 .prokodo-Tabs__tab--disabled {
-  color: var(--color-grey-500);
+  color: var(--pk-tabs-tab-disabled-color);
   cursor: not-allowed;
   opacity: 0.58;
 }
@@ -242,6 +238,12 @@ html[data-theme=dark] .prokodo-Tabs__list--vertical {
   justify-content: flex-start;
   text-align: left;
 }
+.prokodo-Tabs__list--vertical .prokodo-Tabs__tab:hover {
+  border-radius: var(--pk-tabs-radius) 0 0 var(--pk-tabs-radius);
+}
+.prokodo-Tabs__list--vertical .prokodo-Tabs__tab:focus-visible {
+  border-radius: var(--pk-tabs-radius) 0 0 var(--pk-tabs-radius);
+}
 .prokodo-Tabs__list--vertical .prokodo-Tabs__tab::after {
   bottom: 0;
   height: auto;
@@ -263,13 +265,13 @@ html[data-theme=dark] .prokodo-Tabs__list--vertical {
 }
 .prokodo-Tabs__badge {
   align-items: center;
-  background: var(--color-grey-200);
+  background: var(--pk-tabs-badge-bg);
   border-radius: px-to-rem(999px);
-  color: var(--color-grey-700);
+  color: var(--pk-tabs-badge-fg);
   display: inline-flex;
   justify-content: center;
   min-width: px-to-rem(20px);
-  padding: 0 0.25rem;
+  padding: 0 var(--pk-tabs-pad-xs);
   font-size: px-to-rem(12px);
   font-weight: 400;
   font-size: 1.125rem;
@@ -319,7 +321,7 @@ html[data-theme=dark] .prokodo-Tabs__list--vertical {
   background: transparent;
   border-radius: 0;
   box-shadow: none;
-  padding: 1rem;
+  padding: var(--pk-tabs-pad-lg);
 }
 .prokodo-Tabs__panel[hidden] {
   display: none !important;
@@ -327,4 +329,28 @@ html[data-theme=dark] .prokodo-Tabs__list--vertical {
 .prokodo-Tabs__panel:focus-visible {
   outline: 0;
   background: var(--gradient-border-4);
+}
+.prokodo-Tabs--color-primary {
+  --pk-tabs-indicator-gradient: var(--gradient-border-4);
+  --pk-tabs-tab-hover-bg: color-mix(in srgb, var(--pk-color-brand) 10%, transparent);
+}
+.prokodo-Tabs--color-secondary {
+  --pk-tabs-indicator-gradient: var(--gradient-border-2);
+  --pk-tabs-tab-hover-bg: color-mix(in srgb, var(--pk-color-accent) 10%, transparent);
+}
+.prokodo-Tabs--color-success {
+  --pk-tabs-indicator-gradient: var(--gradient-border-success);
+  --pk-tabs-tab-hover-bg: color-mix(in srgb, var(--pk-color-success) 10%, transparent);
+}
+.prokodo-Tabs--color-error {
+  --pk-tabs-indicator-gradient: var(--gradient-border-error);
+  --pk-tabs-tab-hover-bg: color-mix(in srgb, var(--pk-color-error) 10%, transparent);
+}
+.prokodo-Tabs--color-warning {
+  --pk-tabs-indicator-gradient: var(--gradient-border-warning);
+  --pk-tabs-tab-hover-bg: color-mix(in srgb, var(--pk-color-warning) 10%, transparent);
+}
+.prokodo-Tabs--color-info {
+  --pk-tabs-indicator-gradient: var(--gradient-border-info);
+  --pk-tabs-tab-hover-bg: color-mix(in srgb, var(--pk-color-muted) 20%, transparent);
 }

package/dist/components/tabs/Tabs.module.scss.js

@@ -3,7 +3,6 @@ const styles = {
   "prokodo-Tabs--vertical": "prokodo-Tabs--vertical",
   "prokodo-Tabs__list": "prokodo-Tabs__list",
   "prokodo-Tabs__list--vertical": "prokodo-Tabs__list--vertical",
-  "prokodo-Tabs__list--disabled": "prokodo-Tabs__list--disabled",
   "prokodo-Tabs__tab": "prokodo-Tabs__tab",
   "prokodo-Tabs__tab--vertical": "prokodo-Tabs__tab--vertical",
   "prokodo-Tabs__tab--fullWidth": "prokodo-Tabs__tab--fullWidth",
@@ -12,7 +11,13 @@ const styles = {
   "prokodo-Tabs__tabLabel": "prokodo-Tabs__tabLabel",
   "prokodo-Tabs__badge": "prokodo-Tabs__badge",
   "prokodo-Tabs__badgeChip": "prokodo-Tabs__badgeChip",
-  "prokodo-Tabs__panel": "prokodo-Tabs__panel"
+  "prokodo-Tabs__panel": "prokodo-Tabs__panel",
+  "prokodo-Tabs--color-primary": "prokodo-Tabs--color-primary",
+  "prokodo-Tabs--color-secondary": "prokodo-Tabs--color-secondary",
+  "prokodo-Tabs--color-success": "prokodo-Tabs--color-success",
+  "prokodo-Tabs--color-error": "prokodo-Tabs--color-error",
+  "prokodo-Tabs--color-warning": "prokodo-Tabs--color-warning",
+  "prokodo-Tabs--color-info": "prokodo-Tabs--color-info"
 };
 export {
   styles as default

package/dist/components/tabs/Tabs.view.js

@@ -27,6 +27,7 @@ function TabsView({
   items,
   value,
   defaultValue,
+  color,
   orientation = "horizontal",
   disabled,
   fullWidth,
@@ -46,7 +47,8 @@ function TabsView({
       className: bem(
         void 0,
         {
-          vertical: orientation === "vertical"
+          vertical: orientation === "vertical",
+          [`color-${color}`]: Boolean(color)
         },
         className
       ),
@@ -98,13 +100,19 @@ function TabsView({
                     {
                       disabled: isDisabled,
                       fullWidth: fullWidth === true,
-                      selected: isSelected,
+                      selected: isSelected && disabled !== true,
                       vertical: orientation === "vertical"
                     },
                     tabClassName
                   ),
-                  onClick: /* @__PURE__ */ __name((event) => _clientState == null ? void 0 : _clientState.onTabClick(index, event), "onClick"),
-                  onKeyDown: /* @__PURE__ */ __name((event) => _clientState == null ? void 0 : _clientState.onTabKeyDown(index, event), "onKeyDown"),
+                  onClick: (
+                    /* istanbul ignore next */
+                    /* @__PURE__ */ __name((event) => _clientState == null ? void 0 : _clientState.onTabClick(index, event), "onClick")
+                  ),
+                  onKeyDown: (
+                    /* istanbul ignore next */
+                    /* @__PURE__ */ __name((event) => _clientState == null ? void 0 : _clientState.onTabKeyDown(index, event), "onKeyDown")
+                  ),
                   children: [
                     /* @__PURE__ */ jsx("span", { className: bem("tabLabel"), children: item.label }),
                     item.badge ? /* @__PURE__ */ jsx(

package/dist/components/teaser/Teaser.css

@@ -131,7 +131,7 @@
   padding: 0;
 }
 .prokodo-Teaser__card__content {
-  padding: 1rem;
+  padding: var(--pk-space-lg);
 }
 .prokodo-Teaser__image {
   -o-object-fit: cover;
@@ -143,10 +143,10 @@
   height: 230px;
 }
 .prokodo-Teaser__image__caption {
-  bottom: 0.5rem;
+  bottom: var(--pk-space-sm);
   text-align: right;
-  padding-right: 0.5rem;
-  width: calc(100% - 0.5rem);
+  padding-right: var(--pk-space-sm);
+  width: calc(100% - var(--pk-space-sm));
 }
 .prokodo-Teaser__animation {
   width: 100%;
@@ -197,5 +197,5 @@
   align-items: center;
 }
 .prokodo-Teaser__link__icon {
-  margin-right: 0.25rem;
+  margin-right: var(--pk-space-xs);
 }

package/dist/components/teaser/Teaser.js

@@ -13,7 +13,7 @@ import { Icon } from "../icon/Icon.js";
 const bem = create(styles, "Teaser");
 const Teaser = /* @__PURE__ */ __name(({
   className,
-  variant = "primary",
+  color = "primary",
   animation,
   lineClamp,
   align,
@@ -27,7 +27,7 @@ const Teaser = /* @__PURE__ */ __name(({
   return /* @__PURE__ */ jsxs(
     Card,
     {
-      variant,
+      color,
       ...props,
       className: bem(void 0, void 0, className),
       contentClassName: bem("card"),
@@ -51,7 +51,7 @@ const Teaser = /* @__PURE__ */ __name(({
               size: "md",
               type: "h3",
               ...title,
-              variant: (title == null ? void 0 : title.variant) ?? variant,
+              color: (title == null ? void 0 : title.color) ?? color,
               className: bem(
                 "headline",
                 {
@@ -76,7 +76,7 @@ const Teaser = /* @__PURE__ */ __name(({
             /* @__PURE__ */ jsx(
               Icon,
               {
-                color: variant,
+                color,
                 name: "ArrowRight01Icon",
                 size: "xs",
                 ...redirect == null ? void 0 : redirect.icon,

package/dist/components/teaser/Teaser.module.css

@@ -131,7 +131,7 @@
   padding: 0;
 }
 .prokodo-Teaser__card__content {
-  padding: 1rem;
+  padding: var(--pk-space-lg);
 }
 .prokodo-Teaser__image {
   -o-object-fit: cover;
@@ -143,10 +143,10 @@
   height: 230px;
 }
 .prokodo-Teaser__image__caption {
-  bottom: 0.5rem;
+  bottom: var(--pk-space-sm);
   text-align: right;
-  padding-right: 0.5rem;
-  width: calc(100% - 0.5rem);
+  padding-right: var(--pk-space-sm);
+  width: calc(100% - var(--pk-space-sm));
 }
 .prokodo-Teaser__animation {
   width: 100%;
@@ -197,5 +197,5 @@
   align-items: center;
 }
 .prokodo-Teaser__link__icon {
-  margin-right: 0.25rem;
+  margin-right: var(--pk-space-xs);
 }

package/dist/components/tooltip/Tooltip.client.js

@@ -154,6 +154,7 @@ function TooltipClient(props) {
     triggerProps,
     placement = "top",
     tooltipClassName,
+    color = "default",
     ...rest
   } = props;
   const isControlled = controlledOpen !== void 0;
@@ -204,7 +205,10 @@ function TooltipClient(props) {
         if (anchor === "pointer")
           lastPointer.current = { x: e.clientX, y: e.clientY };
         scheduleOpen();
-      } : triggerProps == null ? void 0 : triggerProps.onMouseEnter,
+      } : (
+        /* istanbul ignore next */
+        triggerProps == null ? void 0 : triggerProps.onMouseEnter
+      ),
       onMouseLeave: openOnHover ? (e) => {
         var _a, _b;
         (_a = triggerProps == null ? void 0 : triggerProps.onMouseLeave) == null ? void 0 : _a.call(triggerProps, e);
@@ -212,31 +216,49 @@ function TooltipClient(props) {
         if (nextTarget && ((_b = bubbleRef.current) == null ? void 0 : _b.contains(nextTarget))) return;
         if (anchor === "pointer") lastPointer.current = null;
         scheduleClose();
-      } : triggerProps == null ? void 0 : triggerProps.onMouseLeave,
+      } : (
+        /* istanbul ignore next */
+        triggerProps == null ? void 0 : triggerProps.onMouseLeave
+      ),
       onMouseMove: anchor === "pointer" ? (e) => {
         var _a;
         (_a = triggerProps == null ? void 0 : triggerProps.onMouseMove) == null ? void 0 : _a.call(triggerProps, e);
         lastPointer.current = { x: e.clientX, y: e.clientY };
-      } : triggerProps == null ? void 0 : triggerProps.onMouseMove,
+      } : (
+        /* istanbul ignore next */
+        triggerProps == null ? void 0 : triggerProps.onMouseMove
+      ),
       onFocus: openOnFocus ? (e) => {
         var _a;
         (_a = triggerProps == null ? void 0 : triggerProps.onFocus) == null ? void 0 : _a.call(triggerProps, e);
         scheduleOpen();
-      } : triggerProps == null ? void 0 : triggerProps.onFocus,
-      onBlur: openOnFocus ? (e) => {
-        var _a;
-        (_a = triggerProps == null ? void 0 : triggerProps.onBlur) == null ? void 0 : _a.call(triggerProps, e);
-        scheduleClose();
-      } : triggerProps == null ? void 0 : triggerProps.onBlur,
-      onKeyDown: /* @__PURE__ */ __name((e) => {
-        var _a, _b, _c;
-        (_a = triggerProps == null ? void 0 : triggerProps.onKeyDown) == null ? void 0 : _a.call(triggerProps, e);
-        if (e.key === "Escape") {
-          clearTimers();
-          setOpen(false);
-          (_c = (_b = e.currentTarget) == null ? void 0 : _b.blur) == null ? void 0 : _c.call(_b);
+      } : (
+        /* istanbul ignore next */
+        triggerProps == null ? void 0 : triggerProps.onFocus
+      ),
+      onBlur: openOnFocus ? (
+        /* istanbul ignore next */
+        (e) => {
+          var _a;
+          (_a = triggerProps == null ? void 0 : triggerProps.onBlur) == null ? void 0 : _a.call(triggerProps, e);
+          scheduleClose();
         }
-      }, "onKeyDown")
+      ) : (
+        /* istanbul ignore next */
+        triggerProps == null ? void 0 : triggerProps.onBlur
+      ),
+      onKeyDown: (
+        /* istanbul ignore next */
+        /* @__PURE__ */ __name((e) => {
+          var _a, _b, _c;
+          (_a = triggerProps == null ? void 0 : triggerProps.onKeyDown) == null ? void 0 : _a.call(triggerProps, e);
+          if (e.key === "Escape") {
+            clearTimers();
+            setOpen(false);
+            (_c = (_b = e.currentTarget) == null ? void 0 : _b.blur) == null ? void 0 : _c.call(_b);
+          }
+        }, "onKeyDown")
+      )
     }),
     [
       triggerProps,
@@ -250,90 +272,106 @@ function TooltipClient(props) {
     ]
   );
   const portalBubbleClassBase = useMemo(
-    () => bem("bubble", void 0, tooltipClassName),
-    [tooltipClassName]
+    () => bem(
+      "bubble",
+      { ...color !== "default" ? { [color]: true } : {} },
+      tooltipClassName
+    ),
+    [color, tooltipClassName]
   );
   const portalBubbleClassFinal = useMemo(
     () => bem(
       "bubble",
-      { open: Boolean(open && bubbleStyle), [effectivePlacement]: true },
+      {
+        open: Boolean(open && bubbleStyle),
+        [effectivePlacement]: true,
+        ...color !== "default" ? { [color]: true } : {}
+      },
       tooltipClassName
     ),
-    [open, bubbleStyle, effectivePlacement, tooltipClassName]
+    [open, bubbleStyle, effectivePlacement, color, tooltipClassName]
   );
-  const compute = useCallback(() => {
-    if (!portal || !open || disabled) return;
-    const triggerEl = triggerRef.current;
-    const bubbleEl = bubbleRef.current;
-    if (!triggerEl || !bubbleEl) return;
-    const anchorEl = triggerEl.querySelector("[data-tooltip-anchor]") ?? triggerEl;
-    const gutter = 8;
-    const arrowSize = 8;
-    const triggerRect = anchorEl.getBoundingClientRect();
-    const bubbleSize = {
-      w: bubbleEl.offsetWidth,
-      h: bubbleEl.offsetHeight
-    };
-    if (!bubbleSize.w || !bubbleSize.h) return;
-    const isMobile = window.innerWidth < mobileBreakpoint;
-    const preferred = isMobile && (placement === "left" || placement === "right") ? "top" : placement;
-    const ar = anchorEl.getBoundingClientRect();
-    const anchorX = ar.left + ar.width / 2;
-    const anchorY = ar.top + ar.height / 2;
-    const chosen = choosePlacement({
-      preferred,
-      anchorX,
-      anchorY,
-      triggerRect,
-      bubbleSize,
-      gutter,
-      offset,
-      arrowSize,
-      preventOverflow
-    });
-    const { x, y, arrowX, arrowY } = computeFixedPosition({
-      placement: chosen,
-      anchorX,
-      anchorY,
-      bubbleSize,
-      gutter,
+  const compute = useCallback(
+    /* istanbul ignore next */
+    () => {
+      if (!portal || !open || disabled) return;
+      const triggerEl = triggerRef.current;
+      const bubbleEl = bubbleRef.current;
+      if (!triggerEl || !bubbleEl) return;
+      const anchorEl = triggerEl.querySelector("[data-tooltip-anchor]") ?? triggerEl;
+      const gutter = 8;
+      const arrowSize = 8;
+      const triggerRect = anchorEl.getBoundingClientRect();
+      const bubbleSize = {
+        w: bubbleEl.offsetWidth,
+        h: bubbleEl.offsetHeight
+      };
+      if (!bubbleSize.w || !bubbleSize.h) return;
+      const isMobile = window.innerWidth < mobileBreakpoint;
+      const preferred = isMobile && (placement === "left" || placement === "right") ? "top" : placement;
+      const ar = anchorEl.getBoundingClientRect();
+      const anchorX = ar.left + ar.width / 2;
+      const anchorY = ar.top + ar.height / 2;
+      const chosen = choosePlacement({
+        preferred,
+        anchorX,
+        anchorY,
+        triggerRect,
+        bubbleSize,
+        gutter,
+        offset,
+        arrowSize,
+        preventOverflow
+      });
+      const { x, y, arrowX, arrowY } = computeFixedPosition({
+        placement: chosen,
+        anchorX,
+        anchorY,
+        bubbleSize,
+        gutter,
+        offset,
+        arrowSize
+      });
+      setEffectivePlacement(chosen);
+      setBubbleStyle({
+        ["--pk-tt-x"]: `${x}px`,
+        ["--pk-tt-y"]: `${y}px`,
+        ["--pk-tt-arrow-x"]: arrowX != null ? `${arrowX}px` : void 0,
+        ["--pk-tt-arrow-y"]: arrowY != null ? `${arrowY}px` : void 0,
+        ["--pk-tt-z"]: String(zIndex)
+      });
+    },
+    [
+      portal,
+      open,
+      disabled,
+      placement,
+      preventOverflow,
       offset,
-      arrowSize
-    });
-    setEffectivePlacement(chosen);
-    setBubbleStyle({
-      ["--pk-tt-x"]: `${x}px`,
-      ["--pk-tt-y"]: `${y}px`,
-      ["--pk-tt-arrow-x"]: arrowX != null ? `${arrowX}px` : void 0,
-      ["--pk-tt-arrow-y"]: arrowY != null ? `${arrowY}px` : void 0,
-      ["--pk-tt-z"]: String(zIndex)
-    });
-  }, [
-    portal,
-    open,
-    disabled,
-    placement,
-    preventOverflow,
-    offset,
-    zIndex,
-    mobileBreakpoint
-  ]);
-  useLayoutEffect(() => {
-    if (!portal || !open) return;
-    setBubbleStyle(void 0);
-    const raf1 = requestAnimationFrame(() => {
-      requestAnimationFrame(() => compute());
-    });
-    const onResize = /* @__PURE__ */ __name(() => compute(), "onResize");
-    const onScroll = /* @__PURE__ */ __name(() => compute(), "onScroll");
-    window.addEventListener("resize", onResize);
-    window.addEventListener("scroll", onScroll, true);
-    return () => {
-      cancelAnimationFrame(raf1);
-      window.removeEventListener("resize", onResize);
-      window.removeEventListener("scroll", onScroll, true);
-    };
-  }, [portal, open, compute]);
+      zIndex,
+      mobileBreakpoint
+    ]
+  );
+  useLayoutEffect(
+    /* istanbul ignore next */
+    () => {
+      if (!portal || !open) return;
+      setBubbleStyle(void 0);
+      const raf1 = requestAnimationFrame(() => {
+        requestAnimationFrame(() => compute());
+      });
+      const onResize = /* @__PURE__ */ __name(() => compute(), "onResize");
+      const onScroll = /* @__PURE__ */ __name(() => compute(), "onScroll");
+      window.addEventListener("resize", onResize);
+      window.addEventListener("scroll", onScroll, true);
+      return () => {
+        cancelAnimationFrame(raf1);
+        window.removeEventListener("resize", onResize);
+        window.removeEventListener("scroll", onScroll, true);
+      };
+    },
+    [portal, open, compute]
+  );
   const overlayRoot = typeof document !== "undefined" && portal ? getOverlayRoot(overlayRootId, zIndex) : null;
   const portalOpen = open && Boolean(bubbleStyle);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -345,6 +383,7 @@ function TooltipClient(props) {
         __placement: portal ? effectivePlacement : placement,
         __renderVisualBubble: !portal,
         __triggerRef: triggerRef,
+        color,
         content,
         disabled,
         placement,
@@ -357,10 +396,16 @@ function TooltipClient(props) {
         "span",
         {
           ref: bubbleRef,
-          "aria-hidden": open === void 0 ? void 0 : !open,
           role: "tooltip",
           style: bubbleStyle,
-          className: bubbleStyle ? portalBubbleClassFinal : portalBubbleClassBase,
+          "aria-hidden": (
+            /* istanbul ignore next */
+            open === void 0 ? void 0 : !open
+          ),
+          className: (
+            /* istanbul ignore next */
+            bubbleStyle ? portalBubbleClassFinal : portalBubbleClassBase
+          ),
           onMouseEnter: openOnHover ? () => {
             clearTimers();
             setOpen(true);