@sixthshift/design-system 0.6.0 → 0.7.0

package/dist/internal/brandScope.js

@@ -0,0 +1,37 @@
+"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) {
+    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) {
+    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;
+}
+//# sourceMappingURL=brandScope.js.map

package/dist/internal/brandScope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brandScope.js","sourceRoot":"","sources":["../../src/internal/brandScope.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,UAAU,YAAY,CAAC,OAAmC;IAC9D,OAAO,OAAO,EAAE,OAAO,EAAE,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC,IAAI,SAAS,CAAC;AACrF,CAAC;AAED,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAAC,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAEhH;;;;;;;;;;GAUG;AACH,MAAM,UAAU,cAAc,CAAC,IAAa;IAC1C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IACrG,0EAA0E;IAC1E,+EAA+E;IAC/E,IAAI,QAAQ,CAAC,IAAI,KAAK,IAAI;QAAE,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;IACjG,OAAO,QAAQ,CAAC,KAAK,CAAC;AACxB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sixthshift/design-system",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Personal design system - tokens, theme, and component library",
   "license": "MIT",
   "publishConfig": {

package/src/components/Badge/Badge.tsx

@@ -55,23 +55,29 @@ export type BadgeIntent = Loose<BadgeIntentName>;
 export type BadgeRecipeProps = VariantProps<typeof badgeVariants> & {
   variant?: BadgeVariant | undefined;
   intent?: BadgeIntent | undefined;
+  /** Re-points this element's brand tokens to a brand the theme defines. See the Scoped brands docs. */
+  brand?: string | undefined;
   className?: string | undefined;
 };
 
 /**
- * The class string plus the two attributes the recipe selects on.
+ * The class string plus the attributes the recipe selects on. `data-brand` is
+ * omitted unless `brand` is set, same as `buttonRecipe`.
  */
-export function badgeRecipe({ variant = "solid", intent = "brand", className }: BadgeRecipeProps) {
+export function badgeRecipe({ variant = "solid", intent = "brand", brand, className }: BadgeRecipeProps) {
   return {
     className: cn(variantStructure[variant], badgeVariants({ className })),
     "data-variant": variant,
     "data-intent": intent,
+    "data-brand": brand,
   };
 }
 
 export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
   variant?: BadgeVariant | undefined;
   intent?: BadgeIntent | undefined;
+  /** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the badge follows the nearest `data-brand` ancestor. */
+  brand?: string | undefined;
 };
 
 /**
@@ -89,8 +95,8 @@ export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
  * same seam Button uses, so a consumer can re-point a cell without a
  * release.
  */
-export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(({ className, variant = "solid", intent = "brand", ...props }, ref) => {
-  return <span ref={ref} {...badgeRecipe({ variant, intent, className })} {...props} />;
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(({ className, variant = "solid", intent = "brand", brand, ...props }, ref) => {
+  return <span ref={ref} {...badgeRecipe({ variant, intent, brand, className })} {...props} />;
 });
 Badge.displayName = "Badge";
 

package/src/components/Button/Button.tsx

@@ -86,18 +86,23 @@ export type ButtonIntent = Loose<ButtonIntentName>;
 export type ButtonRecipeProps = VariantProps<typeof buttonVariants> & {
   variant?: ButtonVariant | undefined;
   intent?: ButtonIntent | undefined;
+  /** Re-points this element's brand tokens to a brand the theme defines. See the Scoped brands docs. */
+  brand?: string | undefined;
   iconOnly?: boolean | undefined;
   className?: string | undefined;
 };
 
 /**
- * The class string plus the two attributes the recipe selects on.
+ * The class string plus the attributes the recipe selects on.
+ *
+ * `data-brand` is only emitted when `brand` is set: `undefined` makes React
+ * omit the attribute, so the element takes its brand from its surroundings.
  *
  * Shared with Toggle and ToggleGroupItem, which are built on Button's look. The
  * data attributes are half the contract now, so anything reusing that look has
  * to emit them as well or it lands on the recipe's floor instead of a cell.
  */
-export function buttonRecipe({ variant = "solid", intent = "neutral", size, iconOnly = false, className }: ButtonRecipeProps) {
+export function buttonRecipe({ variant = "solid", intent = "neutral", brand, size, iconOnly = false, className }: ButtonRecipeProps) {
   return {
     className: cn(
       variantStructure[variant],
@@ -106,6 +111,7 @@ export function buttonRecipe({ variant = "solid", intent = "neutral", size, icon
     ),
     "data-variant": variant,
     "data-intent": intent,
+    "data-brand": brand,
   };
 }
 
@@ -113,6 +119,12 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof buttonVariants> & {
     variant?: ButtonVariant | undefined;
     intent?: ButtonIntent | undefined;
+    /**
+     * Name of a brand the theme defines, rendered as `data-brand`. Re-points
+     * every brand token on this element, so `intent="brand"` takes that brand's
+     * colour. Omitted, the button follows the nearest `data-brand` ancestor.
+     */
+    brand?: string | undefined;
     /** Square the button at its current size, for an icon with no label. */
     iconOnly?: boolean;
     asChild?: boolean;
@@ -147,15 +159,23 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  * `aria-label`, since there is no text to name it. It is a separate prop rather
  * than a size, so `size="sm" iconOnly` is expressible.
  *
+ * `brand` scopes the `brand` intent to one of the theme's named brands
+ * (`<Button intent="brand" brand="mint">`), for a theme with more than one
+ * brand colour. It renders `data-brand` and nothing else; the theme's CSS gives
+ * the name meaning, and an unknown name falls back to the surrounding brand.
+ *
  * `asChild` renders the child element with Button's styling instead of a
  * `<button>`, for links that should look like buttons. `loading` shows a spinner
  * and disables the control, so it does not need `disabled` as well.
  */
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant = "solid", intent = "neutral", size, iconOnly = false, asChild = false, loading = false, children, disabled, ...props }, ref) => {
+  (
+    { className, variant = "solid", intent = "neutral", brand, size, iconOnly = false, asChild = false, loading = false, children, disabled, ...props },
+    ref
+  ) => {
     const Comp = asChild ? Slot : "button";
     return (
-      <Comp {...buttonRecipe({ variant, intent, size, iconOnly, className })} ref={ref} disabled={disabled || loading} {...props}>
+      <Comp {...buttonRecipe({ variant, intent, brand, size, iconOnly, className })} ref={ref} disabled={disabled || loading} {...props}>
         {loading ? (
           <>
             <svg className="animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">

package/src/components/DatePicker/DatePicker.tsx

@@ -21,6 +21,7 @@ import {
   toISODateRange,
 } from "../../date-time";
 import { PickerField } from "../../internal";
+import { closestBrand } from "../../internal/brandScope";
 import { useEscapeLayer } from "../../internal/escapeLayers";
 import { CalendarView } from "../Calendar/CalendarView";
 import { isDateDisabled } from "../Calendar/calendar.hooks";
@@ -539,6 +540,8 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((pro
             role="dialog"
             aria-label="Choose date"
             style={floatingStyles}
+            // Portalled out of the trigger's brand scope, so carry it across.
+            data-brand={closestBrand(context.elements.domReference)}
             className="z-popover rounded-xl border border-border-normal bg-bg-normal p-4 shadow-lg"
             {...getFloatingProps()}
           >

package/src/components/DateTimePicker/DateTimePicker.tsx

@@ -16,6 +16,7 @@ import {
   toISOInstantOrUndefined,
 } from "../../date-time";
 import { PickerField } from "../../internal";
+import { closestBrand } from "../../internal/brandScope";
 import { useEscapeLayer } from "../../internal/escapeLayers";
 import { Button } from "../Button";
 import { CalendarView } from "../Calendar/CalendarView";
@@ -410,6 +411,8 @@ export const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerPro
             role="dialog"
             aria-label="Choose date and time"
             style={floatingStyles}
+            // Portalled out of the trigger's brand scope, so carry it across.
+            data-brand={closestBrand(context.elements.domReference)}
             className="z-popover rounded-xl border border-border-normal bg-bg-normal p-4 shadow-lg"
             {...getFloatingProps()}
           >

package/src/components/DateTimeRangePicker/DateTimeRangePicker.tsx

@@ -19,6 +19,7 @@ import {
   toISOInstantRange,
 } from "../../date-time";
 import { PickerField } from "../../internal";
+import { closestBrand } from "../../internal/brandScope";
 import { useEscapeLayer } from "../../internal/escapeLayers";
 import { Button } from "../Button";
 import { CalendarView } from "../Calendar/CalendarView";
@@ -630,6 +631,8 @@ export const DateTimeRangePicker = React.forwardRef<HTMLDivElement, DateTimeRang
             role="dialog"
             aria-label="Choose date and time range"
             style={floatingStyles}
+            // Portalled out of the trigger's brand scope, so carry it across.
+            data-brand={closestBrand(context.elements.domReference)}
             className="z-popover rounded-xl border border-border-normal bg-bg-normal p-4 shadow-lg"
             {...getFloatingProps()}
           >

package/src/components/HoverCard/HoverCard.tsx

@@ -3,6 +3,7 @@
 import { autoUpdate, flip, offset, type Placement, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions } from "@floating-ui/react";
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import type * as React from "react";
+import { closestBrand } from "../../internal/brandScope";
 import { HoverCardContent } from "./components/HoverCardContent";
 import { HoverCardContext } from "./components/HoverCardContext";
 import { HoverCardTrigger } from "./components/HoverCardTrigger";
@@ -67,6 +68,8 @@ const HoverCardRoot = ({
       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/HoverCard/components/HoverCardContent.tsx

@@ -5,10 +5,17 @@ import { cn } from "@sixthshift/design-system/utils";
 import * as React from "react";
 import { useHoverCardContext } from "./HoverCardContext";
 
-export type HoverCardContentProps = React.HTMLAttributes<HTMLDivElement>;
+export type HoverCardContentProps = 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 HoverCardContent = React.forwardRef<HTMLDivElement, HoverCardContentProps>(({ className, children, ...props }, forwardedRef) => {
-  const { open, refs, floatingStyles, getFloatingProps } = useHoverCardContext();
+export const HoverCardContent = React.forwardRef<HTMLDivElement, HoverCardContentProps>(({ className, brand, children, ...props }, forwardedRef) => {
+  const { open, refs, floatingStyles, inheritedBrand, getFloatingProps } = useHoverCardContext();
 
   if (!open) return null;
 
@@ -21,6 +28,7 @@ export const HoverCardContent = React.forwardRef<HTMLDivElement, HoverCardConten
           else if (forwardedRef) forwardedRef.current = node;
         }}
         style={floatingStyles}
+        data-brand={brand ?? inheritedBrand}
         className={cn("z-popover w-80 rounded-lg border border-border-normal bg-bg-normal p-4 shadow-lg", className)}
         {...getFloatingProps(props)}
       >

package/src/components/HoverCard/components/HoverCardContext.tsx

@@ -9,6 +9,8 @@ export type HoverCardContextValue = {
     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/components/Message/Message.tsx

@@ -48,6 +48,8 @@ export type MessageIntent = Loose<MessageIntentName>;
 export type MessageProps = React.HTMLAttributes<HTMLDivElement> &
   VariantProps<typeof messageVariants> & {
     intent?: MessageIntent | undefined;
+    /** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the message follows the nearest `data-brand` ancestor. */
+    brand?: string | undefined;
     /** Simple API: Optional title displayed above children */
     title?: React.ReactNode;
     /** Simple API: Optional icon displayed on the left */
@@ -99,27 +101,29 @@ function intentRole(intent: MessageIntent): "status" | "alert" {
  * simple API can't express. Message detects which one is in use by
  * inspecting its children, so the two aren't meant to be mixed.
  */
-export const Message = React.forwardRef<HTMLDivElement, MessageProps>(({ className, intent = "neutral", size, title, icon, children, ...props }, ref) => {
-  const hasCompoundChildren = React.Children.toArray(children).some(
-    (child) =>
-      React.isValidElement(child) &&
-      (child.type === MessageIcon || child.type === MessageBody || child.type === MessageTitle || child.type === MessageDescription)
-  );
+export const Message = React.forwardRef<HTMLDivElement, MessageProps>(
+  ({ className, intent = "neutral", brand, size, title, icon, children, ...props }, ref) => {
+    const hasCompoundChildren = React.Children.toArray(children).some(
+      (child) =>
+        React.isValidElement(child) &&
+        (child.type === MessageIcon || child.type === MessageBody || child.type === MessageTitle || child.type === MessageDescription)
+    );
 
-  return (
-    <div ref={ref} role={intentRole(intent)} data-intent={intent} className={cn(messageVariants({ size, className }))} {...props}>
-      {hasCompoundChildren ? (
-        children
-      ) : (
-        <>
-          {icon && <MessageIcon>{icon}</MessageIcon>}
-          <MessageBody>
-            {title && <MessageTitle>{title}</MessageTitle>}
-            <MessageDescription>{children}</MessageDescription>
-          </MessageBody>
-        </>
-      )}
-    </div>
-  );
-});
+    return (
+      <div ref={ref} role={intentRole(intent)} data-intent={intent} data-brand={brand} className={cn(messageVariants({ size, className }))} {...props}>
+        {hasCompoundChildren ? (
+          children
+        ) : (
+          <>
+            {icon && <MessageIcon>{icon}</MessageIcon>}
+            <MessageBody>
+              {title && <MessageTitle>{title}</MessageTitle>}
+              <MessageDescription>{children}</MessageDescription>
+            </MessageBody>
+          </>
+        )}
+      </div>
+    );
+  }
+);
 Message.displayName = "Message";

package/src/components/Modal/Modal.tsx

@@ -4,6 +4,7 @@ import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useDismiss, useF
 import { useMergedFloatingRef, usePresence } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
 import { forwardRef, type HTMLAttributes, type ReactNode, useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
+import { useOpenerBrand } from "../../internal/brandScope";
 import { hasOpenEscapeLayer, useEscapeDialog } from "../../internal/escapeLayers";
 import { ModalBody, ModalContext, ModalFooter, ModalHeader } from "./components";
 
@@ -35,6 +36,12 @@ export type ModalProps = Pick<HTMLAttributes<HTMLDivElement>, "className" | "sty
   closable?: boolean;
   /** Vertical alignment on desktop. "center" (default) or "top" (anchored near top, content grows down) */
   align?: "center" | "top";
+  /**
+   * Name of a brand the theme defines, rendered as `data-brand` on the dialog.
+   * Omitted, the modal takes the brand scope of the control that opened it
+   * (whatever held focus), since the portal leaves the trigger's scope behind.
+   */
+  brand?: string | undefined;
 };
 
 // =============================================================================
@@ -63,6 +70,7 @@ const ModalRoot = forwardRef<HTMLDivElement, ModalProps>(
       dismissable = true,
       closable,
       align = "center",
+      brand,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       "aria-describedby": ariaDescribedBy,
@@ -81,6 +89,8 @@ const ModalRoot = forwardRef<HTMLDivElement, ModalProps>(
     }, [onOpenChange, contextValue]);
 
     const { ref: presenceRef, state, isMounted, show, hide } = usePresence();
+    // Mount-driven, so the modal is open for as long as it exists.
+    const openerBrand = useOpenerBrand(true);
 
     useEffect(() => {
       show();
@@ -163,6 +173,7 @@ const ModalRoot = forwardRef<HTMLDivElement, ModalProps>(
               aria-describedby={ariaDescribedBy}
               tabIndex={-1}
               data-state={state}
+              data-brand={brand ?? openerBrand}
               className={cn(
                 "modal fixed flex flex-col overflow-hidden outline-hidden",
                 "border-(color:--modal-border) rounded-xl border bg-(--modal-bg)",

package/src/components/Popover/Popover.tsx

@@ -4,6 +4,7 @@ import { autoUpdate, flip, offset, type Placement, shift, useClick, useDismiss,
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import type * as React from "react";
 import { useId } from "react";
+import { closestBrand } from "../../internal/brandScope";
 import { useEscapeLayer } from "../../internal/escapeLayers";
 import { PopoverBody } from "./components/PopoverBody";
 import { PopoverClose } from "./components/PopoverClose";
@@ -66,6 +67,8 @@ const PopoverRoot = ({ open: controlledOpen, onOpenChange, defaultOpen = false,
       setFloating: refs.setFloating,
     },
     floatingStyles,
+    // Read at render: `domReference` is state, so this updates once the trigger mounts.
+    inheritedBrand: closestBrand(context.elements.domReference),
     getReferenceProps,
     getFloatingProps,
     contentId,

package/src/components/Popover/components/PopoverBody.tsx

@@ -5,10 +5,17 @@ import { cn } from "@sixthshift/design-system/utils";
 import * as React from "react";
 import { usePopoverContext } from "./PopoverContext";
 
-export type PopoverBodyProps = React.HTMLAttributes<HTMLDivElement>;
+export type PopoverBodyProps = 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 PopoverBody = React.forwardRef<HTMLDivElement, PopoverBodyProps>(({ className, children, ...props }, forwardedRef) => {
-  const { open, refs, floatingStyles, getFloatingProps, contentId, triggerId } = usePopoverContext();
+export const PopoverBody = React.forwardRef<HTMLDivElement, PopoverBodyProps>(({ className, brand, children, ...props }, forwardedRef) => {
+  const { open, refs, floatingStyles, inheritedBrand, getFloatingProps, contentId, triggerId } = usePopoverContext();
 
   // `aria-labelledby` outranks `aria-label` in the name computation, so the
   // trigger only names the dialog when the caller hasn't named it themselves.
@@ -28,6 +35,7 @@ export const PopoverBody = React.forwardRef<HTMLDivElement, PopoverBodyProps>(({
         role="dialog"
         aria-labelledby={hasOwnLabel ? undefined : triggerId}
         style={floatingStyles}
+        data-brand={brand ?? inheritedBrand}
         className={cn("z-popover rounded-lg border border-border-normal bg-bg-normal p-4 shadow-lg", className)}
         {...getFloatingProps(props)}
       >

package/src/components/Popover/components/PopoverContext.tsx

@@ -10,6 +10,8 @@ export type PopoverContextValue = {
     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>;
   contentId: string;

package/src/components/Select/Select.tsx

@@ -3,6 +3,7 @@
 import { autoUpdate, flip, offset, shift, size, useFloating } from "@floating-ui/react";
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { forwardRef, type HTMLAttributes, type ReactElement, type Ref, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { closestBrand } from "../../internal/brandScope";
 import { useEscapeLayer } from "../../internal/escapeLayers";
 import { SelectDropdown, selectOptionId } from "./SelectDropdown";
 import { SelectTriggerButton, SelectTriggerSearch } from "./SelectTrigger";
@@ -117,7 +118,7 @@ const SelectRoot = forwardRef(function SelectRoot<T extends string = string>(pro
   const showClearButton = clearable && hasValue && !disabled;
 
   // Floating UI
-  const { refs, floatingStyles } = useFloating({
+  const { refs, elements, floatingStyles } = useFloating({
     open,
     onOpenChange: setOpen,
     placement: "bottom-start",
@@ -342,6 +343,7 @@ const SelectRoot = forwardRef(function SelectRoot<T extends string = string>(pro
           label={listboxLabel}
           activeOptionId={activeOptionId}
           floatingStyles={floatingStyles}
+          brand={closestBrand(elements.domReference)}
           displayOptions={filteredOptions}
           highlightedIndex={highlightedIndex}
           selectedValues={selectedValues}

package/src/components/Select/SelectDropdown.tsx

@@ -23,6 +23,8 @@ interface SelectDropdownProps<T extends string> {
   /** The highlighted option's id, or undefined when nothing is highlighted. */
   activeOptionId: string | undefined;
   floatingStyles: React.CSSProperties;
+  /** The trigger's brand scope, re-stamped here because the portal leaves it behind. */
+  brand: string | undefined;
   displayOptions: readonly { value: T; label: string }[];
   highlightedIndex: number;
   selectedValues: Set<T>;
@@ -41,6 +43,7 @@ export const SelectDropdown = <T extends string>({
   label,
   activeOptionId,
   floatingStyles,
+  brand,
   displayOptions,
   highlightedIndex,
   selectedValues,
@@ -68,6 +71,7 @@ export const SelectDropdown = <T extends string>({
       tabIndex={-1}
       onKeyDown={onKeyDown}
       style={floatingStyles}
+      data-brand={brand}
       className="select-dropdown border-(color:--select-dropdown-border) z-popover max-h-60 overflow-y-auto rounded-md border bg-(--select-dropdown-bg) shadow-lg"
     >
       {displayOptions.length === 0 ? (

package/src/components/Sheet/Sheet.tsx

@@ -4,6 +4,7 @@ import { FloatingFocusManager, FloatingPortal, useDismiss, useFloating, useInter
 import { useMergedFloatingRef, usePresence } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
 import { forwardRef, type HTMLAttributes, type ReactNode, useCallback, useEffect, useId, useMemo, useState } from "react";
+import { useOpenerBrand } from "../../internal/brandScope";
 import { hasOpenEscapeDialog, hasOpenEscapeLayer } from "../../internal/escapeLayers";
 import { SheetBody, SheetContext, SheetFooter, SheetHeader } from "./components";
 
@@ -26,6 +27,12 @@ export type SheetProps = Pick<HTMLAttributes<HTMLDivElement>, "className" | "sty
   dismissOnOutsidePress?: boolean;
   /** When true, shows a close (X) button in the header */
   closable?: boolean;
+  /**
+   * Name of a brand the theme defines, rendered as `data-brand` on the sheet.
+   * Omitted, the sheet takes the brand scope of the control that opened it
+   * (whatever held focus), since the portal leaves the trigger's scope behind.
+   */
+  brand?: string | undefined;
   /** Children — use Sheet.Header, Sheet.Body, Sheet.Footer */
   children: ReactNode;
 };
@@ -54,6 +61,7 @@ const SheetRoot = forwardRef<HTMLDivElement, SheetProps>(
       dismissable = true,
       dismissOnOutsidePress = false,
       closable,
+      brand,
       className,
       style,
       children,
@@ -64,6 +72,7 @@ const SheetRoot = forwardRef<HTMLDivElement, SheetProps>(
     ref
   ) => {
     const { ref: presenceRef, state, isMounted, show, hide } = usePresence();
+    const openerBrand = useOpenerBrand(open);
 
     // Drive presence from the controlled `open` prop.
     // When `open` flips to false, we play the exit animation, then unmount.
@@ -141,6 +150,7 @@ const SheetRoot = forwardRef<HTMLDivElement, SheetProps>(
             tabIndex={-1}
             data-state={state}
             data-side={side}
+            data-brand={brand ?? openerBrand}
             className={cn(
               "sheet fixed top-0 bottom-0 z-sheet flex flex-col overflow-hidden bg-(--sheet-bg) outline-hidden",
               "border-(color:--sheet-border) shadow-lg",

package/src/components/TimePicker/TimePicker.tsx

@@ -8,6 +8,7 @@ import * as React from "react";
 import { useCallback, useId, useMemo, useState } from "react";
 import { fromISOTime, fromISOTimeOrUndefined, type Temporal, toISOTimeOrUndefined } from "../../date-time";
 import { PickerField } from "../../internal";
+import { closestBrand } from "../../internal/brandScope";
 import { useEscapeLayer } from "../../internal/escapeLayers";
 import { Button } from "../Button";
 import { Separator } from "../Separator";
@@ -354,6 +355,8 @@ export const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>((pro
             role="dialog"
             aria-label="Choose time"
             style={floatingStyles}
+            // Portalled out of the trigger's brand scope, so carry it across.
+            data-brand={closestBrand(context.elements.domReference)}
             className="z-popover rounded-xl border border-border-normal bg-bg-normal p-4 shadow-lg"
             {...getFloatingProps()}
           >

package/src/components/Toast/Toast.tsx

@@ -68,7 +68,7 @@ export type ToastProps = Omit<MessageProps, "size"> & {
  * a dialog.
  */
 export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
-  ({ className, intent = "neutral", title, icon, action, onAction, onClose, root, open = true, standalone = true, children, ...props }, ref) => {
+  ({ className, intent = "neutral", brand, title, icon, action, onAction, onClose, root, open = true, standalone = true, children, ...props }, ref) => {
     const { ref: presenceRef, state, isMounted, show, hide } = usePresence();
 
     // `open` drives presence: enter on mount, exit when it flips false. The
@@ -118,6 +118,10 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
           isExiting && "animate-fade-out",
           className
         )}
+        // On the wrapper rather than the Message, so the dismiss and action
+        // buttons are in the same scope. A toast has no trigger to inherit
+        // from: it is opened from code, often long after the click.
+        data-brand={brand}
         {...props}
       >
         <Message intent={intent}>

package/src/components/Toggle/Toggle.tsx

@@ -15,6 +15,8 @@ export type ToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "o
   VariantProps<typeof buttonVariants> & {
     variant?: ButtonVariant | undefined;
     intent?: ButtonIntent | undefined;
+    /** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the toggle follows the nearest `data-brand` ancestor. */
+    brand?: string | undefined;
     /** Square the toggle at its current size, for an icon with no label. */
     iconOnly?: boolean;
     /** Controlled pressed state */
@@ -43,7 +45,20 @@ export type ToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "o
  */
 const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
   (
-    { className, variant, intent, size, iconOnly = false, pressed: controlledPressed, defaultPressed = false, onPressedChange, disabled, children, ...props },
+    {
+      className,
+      variant,
+      intent,
+      brand,
+      size,
+      iconOnly = false,
+      pressed: controlledPressed,
+      defaultPressed = false,
+      onPressedChange,
+      disabled,
+      children,
+      ...props
+    },
     ref
   ) => {
     const [pressed, setPressed] = useControllableState({
@@ -52,7 +67,7 @@ const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
       onChange: onPressedChange,
     });
 
-    const recipe = buttonRecipe({ variant, intent, size, iconOnly });
+    const recipe = buttonRecipe({ variant, intent, brand, size, iconOnly });
 
     return (
       <button

package/src/components/ToggleGroup/ToggleGroupMultiple.tsx

@@ -17,6 +17,7 @@ const ToggleGroupMultiple = React.forwardRef<HTMLDivElement, ToggleGroupMultiple
       orientation = "horizontal",
       variant = "solid",
       intent = "neutral",
+      brand,
       size = "md",
       iconOnly = false,
       disabled,
@@ -39,7 +40,7 @@ const ToggleGroupMultiple = React.forwardRef<HTMLDivElement, ToggleGroupMultiple
     };
 
     return (
-      <ToggleGroupContainer ref={ref} role="group" appearance={appearance} orientation={orientation} className={className} {...props}>
+      <ToggleGroupContainer ref={ref} role="group" data-brand={brand} appearance={appearance} orientation={orientation} className={className} {...props}>
         {options.map((option, index) => (
           <ToggleGroupItem
             key={option.value}