bubble-toolbar 1.1.0 → 1.2.1

package/README.md

@@ -249,6 +249,7 @@ Toolbar tokens, set on `:root` or any ancestor:
 
 | Token | Default |
 | :--- | :--- |
+| `--bubble-blur` | `16px` (ignored when `blurAmount` is set) |
 | `--bubble-glass-bg` / `--bubble-glass-bg-solid` | `rgba(255, 255, 255, 0.65)` / `rgba(255, 255, 255, 0.92)` |
 | `--bubble-glass-border` / `--bubble-glass-fg` | `rgba(255, 255, 255, 0.4)` / `#09090b` |
 | `--bubble-glass-shadow` | Default floating shadow |
@@ -315,7 +316,7 @@ Use the `shape` prop on a group to override its automatic shape.
 | `theme` | `'glass' \| 'light' \| 'dark' \| 'auto'` | `'glass'` | Visual theme. |
 | `size` | `'sm' \| 'md' \| 'lg' \| number` | `'md'` | Group height and circle diameter: 40px, 48px, 56px, or a custom pixel value. |
 | `blurred` | `boolean` | `true` | Enables background blur. |
-| `blurAmount` | `number \| string` | `16` | Blur radius in pixels or a CSS length. |
+| `blurAmount` | `number \| string` | `--bubble-blur` | Blur radius in pixels or a CSS length. Overrides the `--bubble-blur` token; negative numbers become `0`. |
 | `groupGap` | `number \| string` | `8` | Space between groups, in pixels or a CSS length. |
 | `itemGap` | `number \| string` | `8` | Space between children within a pill. |
 | `bordered` | `boolean` | `true` | Shows subtle borders. |

package/dist/index.d.mts

@@ -59,8 +59,8 @@ interface BubbleToolbarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
      */
     blurred?: boolean;
     /**
-     * Amount of backdrop blur in pixels or CSS string.
-     * @default 16
+     * Amount of backdrop blur in pixels or CSS string. Negative numbers are clamped to 0.
+     * When omitted, the `--bubble-blur` CSS token is used (16px by default).
      */
     blurAmount?: number | string;
     /**
@@ -402,7 +402,8 @@ interface BubbleToolbarContextValue extends BubbleActivityProps {
     size: BubbleToolbarSize;
     theme: BubbleToolbarTheme;
     blurred: boolean;
-    blurAmount: number | string;
+    /** Undefined falls back to the --bubble-blur token. */
+    blurAmount?: number | string;
     itemGap: number | string;
     bordered: boolean;
     shadow: boolean | string;
@@ -430,6 +431,6 @@ declare function getValidChildren(children: ReactNode): ReactNode[];
 
 declare function resolveSize(size: BubbleToolbarSize): number;
 declare function formatPx(val: number | string): string;
-declare function getGlassStyles(theme: BubbleToolbarTheme, blurred: boolean, blurAmount: number | string, bordered: boolean, shadow: boolean | string): CSSProperties;
+declare function getGlassStyles(theme: BubbleToolbarTheme, blurred: boolean, blurAmount: number | string | undefined, bordered: boolean, shadow: boolean | string): CSSProperties;
 
 export { type BubbleActivityProps, type BubbleActivityValue, BubbleArea, type BubbleAreaProps, type BubbleBreadcrumbItem, BubbleBreadcrumbSearch, type BubbleBreadcrumbSearchLabels, type BubbleBreadcrumbSearchProps, type BubbleBreadcrumbSearchTokens, BubbleGroup, type BubbleGroupProps, BubbleIconButton, type BubbleIconButtonProps, type BubbleLiveActivityController, type BubbleLiveActivityOptions, type BubbleLiveContent, type BubbleLiveLabels, type BubbleLiveRunOptions, type BubbleLiveState, type BubbleLiveTokens, BubbleSearch, type BubbleSearchItem, type BubbleSearchLabels, type BubbleSearchProps, type BubbleSearchTokens, type BubbleShape, BubbleToolbar, type BubbleToolbarComponent, BubbleToolbarContext, type BubbleToolbarPosition, type BubbleToolbarProps, type BubbleToolbarSize, type BubbleToolbarTheme, formatPx, getGlassStyles, getValidChildren, resolveSize, useBubbleActivity, useBubbleLiveActivity, useBubbleToolbar, useBubbleToolbarLiveActivity };

package/dist/index.d.ts

@@ -59,8 +59,8 @@ interface BubbleToolbarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
      */
     blurred?: boolean;
     /**
-     * Amount of backdrop blur in pixels or CSS string.
-     * @default 16
+     * Amount of backdrop blur in pixels or CSS string. Negative numbers are clamped to 0.
+     * When omitted, the `--bubble-blur` CSS token is used (16px by default).
      */
     blurAmount?: number | string;
     /**
@@ -402,7 +402,8 @@ interface BubbleToolbarContextValue extends BubbleActivityProps {
     size: BubbleToolbarSize;
     theme: BubbleToolbarTheme;
     blurred: boolean;
-    blurAmount: number | string;
+    /** Undefined falls back to the --bubble-blur token. */
+    blurAmount?: number | string;
     itemGap: number | string;
     bordered: boolean;
     shadow: boolean | string;
@@ -430,6 +431,6 @@ declare function getValidChildren(children: ReactNode): ReactNode[];
 
 declare function resolveSize(size: BubbleToolbarSize): number;
 declare function formatPx(val: number | string): string;
-declare function getGlassStyles(theme: BubbleToolbarTheme, blurred: boolean, blurAmount: number | string, bordered: boolean, shadow: boolean | string): CSSProperties;
+declare function getGlassStyles(theme: BubbleToolbarTheme, blurred: boolean, blurAmount: number | string | undefined, bordered: boolean, shadow: boolean | string): CSSProperties;
 
 export { type BubbleActivityProps, type BubbleActivityValue, BubbleArea, type BubbleAreaProps, type BubbleBreadcrumbItem, BubbleBreadcrumbSearch, type BubbleBreadcrumbSearchLabels, type BubbleBreadcrumbSearchProps, type BubbleBreadcrumbSearchTokens, BubbleGroup, type BubbleGroupProps, BubbleIconButton, type BubbleIconButtonProps, type BubbleLiveActivityController, type BubbleLiveActivityOptions, type BubbleLiveContent, type BubbleLiveLabels, type BubbleLiveRunOptions, type BubbleLiveState, type BubbleLiveTokens, BubbleSearch, type BubbleSearchItem, type BubbleSearchLabels, type BubbleSearchProps, type BubbleSearchTokens, type BubbleShape, BubbleToolbar, type BubbleToolbarComponent, BubbleToolbarContext, type BubbleToolbarPosition, type BubbleToolbarProps, type BubbleToolbarSize, type BubbleToolbarTheme, formatPx, getGlassStyles, getValidChildren, resolveSize, useBubbleActivity, useBubbleLiveActivity, useBubbleToolbar, useBubbleToolbarLiveActivity };

package/dist/index.js

@@ -82,7 +82,6 @@ var defaultContextValue = {
   size: "md",
   theme: "glass",
   blurred: true,
-  blurAmount: 16,
   itemGap: 8,
   bordered: true,
   shadow: true
@@ -128,7 +127,7 @@ function formatPx(val) {
   return typeof val === "number" ? `${val}px` : val;
 }
 function getGlassStyles(theme, blurred, blurAmount, bordered, shadow) {
-  const blurVal = formatPx(blurAmount);
+  const blurVal = blurAmount === void 0 ? "var(--bubble-blur, 16px)" : formatPx(typeof blurAmount === "number" ? Math.max(0, blurAmount) : blurAmount);
   let background;
   let borderColor;
   let color;
@@ -144,7 +143,7 @@ function getGlassStyles(theme, blurred, blurAmount, bordered, shadow) {
       color = "var(--bubble-light-fg, #18181b)";
       break;
     case "auto":
-      background = "var(--bubble-bg, var(--bubble-light-bg, rgba(255, 255, 255, 0.75)))";
+      background = blurred ? "var(--bubble-bg, var(--bubble-light-bg, rgba(255, 255, 255, 0.75)))" : "var(--bubble-bg-solid, var(--bubble-light-bg-solid, rgba(255, 255, 255, 0.95)))";
       borderColor = "var(--bubble-border, var(--bubble-light-border, rgba(0, 0, 0, 0.08)))";
       color = "var(--bubble-fg, var(--bubble-light-fg, #18181b))";
       break;
@@ -162,7 +161,10 @@ function getGlassStyles(theme, blurred, blurAmount, bordered, shadow) {
     border: bordered ? `1px solid ${borderColor}` : "none",
     boxShadow,
     color,
-    transition: "all 0.25s cubic-bezier(0.16, 1, 0.3, 1)"
+    // backdrop-filter is left out: animating a blur is expensive.
+    transitionProperty: "background-color, border-color, box-shadow, color",
+    transitionDuration: "0.25s",
+    transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)"
   };
 }
 
@@ -747,7 +749,9 @@ var LiveSlot = ({ controller, toolbarRef, children }) => {
     if (active && (visual === "idle" || visual === "leave")) {
       if (visual === "idle") {
         const toolbar = toolbarRef.current;
-        fromWidth.current = toolbar ? Math.max(0, toolbar.getBoundingClientRect().width - 8) : 0;
+        const toolbarStyle = toolbar ? getComputedStyle(toolbar) : null;
+        const horizontalPadding = toolbarStyle ? (parseFloat(toolbarStyle.paddingLeft) || 0) + (parseFloat(toolbarStyle.paddingRight) || 0) : 0;
+        fromWidth.current = toolbar ? Math.max(0, toolbar.getBoundingClientRect().width - horizontalPadding) : 0;
         const focused = document.activeElement;
         savedFocus.current = focused instanceof HTMLElement && groupsRef.current?.contains(focused) ? focused : null;
       }
@@ -1486,7 +1490,7 @@ var BubbleToolbar = (0, import_react13.forwardRef)(
     theme = "glass",
     size = "md",
     blurred = true,
-    blurAmount = 16,
+    blurAmount,
     groupGap = 8,
     itemGap = 8,
     bordered = true,
@@ -1547,7 +1551,7 @@ var BubbleToolbar = (0, import_react13.forwardRef)(
         case "bottom":
           return {
             position: "fixed",
-            bottom: "24px",
+            bottom: "-4px",
             left: "50%",
             transform: "translateX(-50%)",
             zIndex: 1e3
@@ -1555,7 +1559,7 @@ var BubbleToolbar = (0, import_react13.forwardRef)(
         case "top":
           return {
             position: "fixed",
-            top: "24px",
+            top: "-4px",
             left: "50%",
             transform: "translateX(-50%)",
             zIndex: 1e3
@@ -1576,7 +1580,8 @@ var BubbleToolbar = (0, import_react13.forwardRef)(
       maxWidth: "calc(100vw - 32px)",
       overflowX: "auto",
       overflowY: "hidden",
-      padding: "4px",
+      // Scroll containers clip shadows; leave room for their falloff and the hover lift.
+      padding: "32px",
       boxSizing: "border-box",
       scrollbarWidth: "none",
       // Firefox