@sixthshift/design-system 0.6.0 → 0.7.0

package/src/components/ToggleGroup/ToggleGroupSingle.tsx

@@ -19,6 +19,7 @@ const ToggleGroupSingle = React.forwardRef<HTMLDivElement, ToggleGroupSingleProp
       orientation = "horizontal",
       variant = "solid",
       intent = "neutral",
+      brand,
       size = "md",
       iconOnly = false,
       disabled,
@@ -76,6 +77,7 @@ const ToggleGroupSingle = React.forwardRef<HTMLDivElement, ToggleGroupSingleProp
       <ToggleGroupContainer
         ref={mergedRef}
         role="radiogroup"
+        data-brand={brand}
         onKeyDown={handleKeyDown}
         appearance={appearance}
         orientation={orientation}

package/src/components/ToggleGroup/toggleGroup.types.ts

@@ -33,6 +33,12 @@ export type ToggleGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, "o
   variant?: Exclude<ButtonVariantName, "link">;
   /** Color intent */
   intent?: ButtonIntentName;
+  /**
+   * Name of a brand the theme defines. Rendered once, as `data-brand` on the
+   * group element, so every item inherits it. Omitted, the group follows the
+   * nearest `data-brand` ancestor.
+   */
+  brand?: string | undefined;
   /** Button size (xl excluded — too large for grouped toggles) */
   size?: Exclude<ToggleProp<"size">, "xl">;
   /** Square every item at the current size, for icon-only options */

package/src/components/Tooltip/Tooltip.tsx

@@ -2,6 +2,7 @@
 
 import { autoUpdate, flip, offset, type Placement, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
 import { useControllableState } from "@sixthshift/design-system/hooks";
+import { closestBrand } from "../../internal/brandScope";
 import { TooltipBody } from "./components/TooltipBody";
 import { TooltipContext } from "./components/TooltipContext";
 import { TooltipTrigger } from "./components/TooltipTrigger";
@@ -55,6 +56,8 @@ const TooltipRoot = ({ open: controlledOpen, onOpenChange, placement = "top", de
       setFloating: refs.setFloating,
     },
     floatingStyles,
+    // Read at render: `domReference` is state, so this updates once the trigger mounts.
+    inheritedBrand: closestBrand(context.elements.domReference),
     getReferenceProps,
     getFloatingProps,
   };

package/src/components/Tooltip/components/TooltipBody.tsx

@@ -5,10 +5,17 @@ import { cn } from "@sixthshift/design-system/utils";
 import * as React from "react";
 import { useTooltipContext } from "./TooltipContext";
 
-export type TooltipBodyProps = React.HTMLAttributes<HTMLDivElement>;
+export type TooltipBodyProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * Name of a brand the theme defines, rendered as `data-brand`. Omitted, the
+   * body copies the brand scope of its trigger, which the portal would
+   * otherwise leave behind.
+   */
+  brand?: string | undefined;
+};
 
-export const TooltipBody = React.forwardRef<HTMLDivElement, TooltipBodyProps>(({ className, children, ...props }, forwardedRef) => {
-  const { open, refs, floatingStyles, getFloatingProps } = useTooltipContext();
+export const TooltipBody = React.forwardRef<HTMLDivElement, TooltipBodyProps>(({ className, brand, children, ...props }, forwardedRef) => {
+  const { open, refs, floatingStyles, inheritedBrand, getFloatingProps } = useTooltipContext();
 
   if (!open) return null;
 
@@ -21,6 +28,7 @@ export const TooltipBody = React.forwardRef<HTMLDivElement, TooltipBodyProps>(({
           else if (forwardedRef) forwardedRef.current = node;
         }}
         style={floatingStyles}
+        data-brand={brand ?? inheritedBrand}
         className={cn("z-popover rounded-lg border border-border-normal bg-bg-normal px-2.5 py-1.5 text-fg-normal text-xs shadow-lg", className)}
         {...getFloatingProps(props)}
       >

package/src/components/Tooltip/components/TooltipContext.tsx

@@ -9,6 +9,8 @@ export type TooltipContextValue = {
     setFloating: (node: HTMLElement | null) => void;
   };
   floatingStyles: React.CSSProperties;
+  /** The trigger's brand scope, re-stamped on the portalled body. */
+  inheritedBrand: string | undefined;
   getReferenceProps: (props?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
   getFloatingProps: (props?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
 };

package/src/internal/brandScope.ts

@@ -0,0 +1,39 @@
+"use client";
+
+import { useState } from "react";
+
+/**
+ * The brand an element sits in: the `data-brand` of it or its nearest
+ * ancestor, or `undefined` outside any scope.
+ *
+ * Overlays need this because a portal moves their content out from under the
+ * element that set `data-brand`, so CSS inheritance no longer carries it. The
+ * overlay reads the brand off its trigger and re-stamps it on its own element.
+ * The value is copied verbatim, unknown names included: the theme only gives
+ * listed names meaning, so an unknown one resolves exactly as it would have in
+ * place.
+ */
+export function closestBrand(element: Element | null | undefined): string | undefined {
+  return element?.closest?.("[data-brand]")?.getAttribute("data-brand") ?? undefined;
+}
+
+const focusedBrand = () => (typeof document === "undefined" ? undefined : closestBrand(document.activeElement));
+
+/**
+ * The brand of whatever held focus when the calling overlay opened.
+ *
+ * For Modal and Sheet, which have no reference element: the thing that opened
+ * them is almost always the focused control, and it still holds focus during
+ * the render that opens them, before the focus manager moves it. Captured on
+ * each closed → open transition and kept through the close, so neither focus
+ * moving into the dialog nor the exit animation changes it. When nothing useful
+ * was focused (Safari does not focus a clicked button) this is `undefined`, and
+ * the overlay inherits from wherever its portal landed.
+ */
+export function useOpenerBrand(open: boolean): string | undefined {
+  const [captured, setCaptured] = useState(() => ({ open, brand: open ? focusedBrand() : undefined }));
+  // Adjusting state during render, React's pattern for deriving from a prop
+  // change: an effect would run after the focus manager has already moved focus.
+  if (captured.open !== open) setCaptured({ open, brand: open ? focusedBrand() : captured.brand });
+  return captured.brand;
+}