@sixthshift/design-system 0.2.1 → 0.4.0

package/src/components/Message/Message.tsx

@@ -6,33 +6,99 @@ import { MessageDescription } from "./components/MessageDescription";
 import { MessageIcon } from "./components/MessageIcon";
 import { MessageTitle } from "./components/MessageTitle";
 
-export const messageVariants = cva("flex gap-3 rounded-lg border p-4 text-sm [&>svg]:shrink-0", {
-  variants: {
-    intent: {
-      neutral: "border-border-normal bg-bg-normal text-fg-normal",
-      success: "border-border-success bg-bg-success-subtle text-fg-on-success-subtle",
-      warning: "border-border-warning bg-bg-warning-subtle text-fg-on-warning-subtle",
-      danger: "border-border-danger bg-bg-danger-subtle text-fg-on-danger-subtle",
+/**
+ * Geometry only, plus the three `--message-*` component tokens.
+ *
+ * Every colour reads a `--message-*` component token whose value is decided by
+ * src/theme/recipes/message.css. That file is the mapping from `intent` to a
+ * semantic token — the layer that used to be the `intent` entry in `variants`
+ * here, compiled into class-name literals and unreachable from outside.
+ * `size` stays here: it is pure geometry (padding, gap, font-size), not
+ * colour, so it has no reason to move.
+ */
+export const messageVariants = cva(
+  // One literal, deliberately: `useSortedClasses --unsafe` strips the trailing
+  // space before a `+`, silently welding the last class of one fragment to the
+  // first of the next. A single string means the sorter has nothing to break.
+  "message border-(color:--message-border) flex gap-3 rounded-lg border bg-(--message-bg) p-4 text-(--message-fg) text-sm [&>svg]:shrink-0",
+  {
+    variants: {
+      size: {
+        md: "p-4",
+        sm: "gap-2 p-3 text-xs",
+      },
     },
-    size: {
-      default: "p-4",
-      sm: "gap-2 p-3 text-xs",
+    defaultVariants: {
+      size: "md",
     },
-  },
-  defaultVariants: {
-    intent: "neutral",
-    size: "default",
-  },
-});
+  }
+);
+
+/**
+ * Widened deliberately, same reasoning as `ButtonIntent` in Button.tsx: adding
+ * an intent is a CSS change in the consuming app (a new `.message[data-intent=…]`
+ * cell in message.css), not a release here, so the type has to admit values
+ * this file has never heard of while still autocompleting the ones it ships.
+ */
+type Loose<T extends string> = T | (string & {});
+
+export type MessageIntentName = "neutral" | "success" | "warning" | "danger";
+export type MessageIntent = Loose<MessageIntentName>;
 
 export type MessageProps = React.HTMLAttributes<HTMLDivElement> &
   VariantProps<typeof messageVariants> & {
+    intent?: MessageIntent | undefined;
     /** Simple API: Optional title displayed above children */
     title?: React.ReactNode;
     /** Simple API: Optional icon displayed on the left */
     icon?: React.ReactNode;
   };
 
+/**
+ * A message is a live region, and the intent decides how rudely it interrupts.
+ * `danger` is the only intent that earns `role="alert"` — an assertive region
+ * cuts off whatever the screen reader was saying. Everything else is
+ * `role="status"` (polite), which is announced at the next natural pause. A
+ * success confirmation or a static "Note" callout stamped as `alert` trains
+ * users to ignore the role that actually matters. Consumers can override by
+ * passing their own `role` — `props` is spread after this.
+ *
+ * `intent` is widened to admit values this file has never heard of (see
+ * `MessageIntent` above), so this is deliberately not a lookup keyed by the
+ * closed union: an unrecognised intent has no entry and must fall through to
+ * `"status"` rather than resolving to `undefined`, which would render with no
+ * live-region role at all.
+ */
+const ALERT_INTENTS: ReadonlySet<string> = new Set<MessageIntentName>(["danger"]);
+function intentRole(intent: MessageIntent): "status" | "alert" {
+  return ALERT_INTENTS.has(intent) ? "alert" : "status";
+}
+
+/**
+ * An inline feedback banner — info, success, warning, or error — that
+ * renders wherever the caller places it and stays until the caller removes
+ * it. Reach for `Message` over `Toast` when the feedback belongs in the
+ * page's own layout (form validation, an in-card load error); reach for
+ * `Toast` when it should float above the page and disappear on its own.
+ * `Toast` itself renders a `Message` internally.
+ *
+ * `intent` (`"neutral"` (default) | `"success"` | `"warning"` | `"danger"`,
+ * widened to accept any string) drives both the color, via `--message-*`
+ * component tokens, and the ARIA live-region role: `"danger"` is the only
+ * intent that gets `role="alert"` (assertive — cuts off whatever a screen
+ * reader was announcing); every other intent, including one this library has
+ * never heard of, gets `role="status"` (polite — announced at the next
+ * natural pause). An unrecognised intent still falls through to
+ * `role="status"` rather than resolving to no role at all. `role` can be
+ * overridden directly if a specific case needs it. `size` (`"md"` | `"sm"`)
+ * is geometry only (padding/gap/font-size) and carries no color.
+ *
+ * Two ways to give it content: the simple API (`title` + `icon` props, with
+ * `children` as the description), or compound children (`Message.Icon`,
+ * `Message.Body`, `Message.Title`, `Message.Description`) for layouts the
+ * 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) =>
@@ -41,7 +107,7 @@ export const Message = React.forwardRef<HTMLDivElement, MessageProps>(({ classNa
   );
 
   return (
-    <div ref={ref} role="alert" className={cn(messageVariants({ intent, size, className }))} {...props}>
+    <div ref={ref} role={intentRole(intent)} data-intent={intent} className={cn(messageVariants({ size, className }))} {...props}>
       {hasCompoundChildren ? (
         children
       ) : (

package/src/components/Message/index.ts

@@ -6,5 +6,5 @@ export type { MessageIconProps } from "./components/MessageIcon";
 export { MessageIcon } from "./components/MessageIcon";
 export type { MessageTitleProps } from "./components/MessageTitle";
 export { MessageTitle } from "./components/MessageTitle";
-export type { MessageProps } from "./Message";
+export type { MessageIntent, MessageIntentName, MessageProps } from "./Message";
 export { Message, messageVariants } from "./Message";

package/src/components/Modal/Modal.tsx

@@ -1,14 +1,14 @@
 import { FloatingFocusManager, FloatingOverlay, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
 import { useMergedFloatingRef, usePresence } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
-import { type HTMLAttributes, type ReactNode, useCallback, useContext, useEffect, useMemo } from "react";
+import { forwardRef, type HTMLAttributes, type ReactNode, useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
 import { ModalBody, ModalContext, ModalFooter, ModalHeader } from "./components";
 
 // =============================================================================
 // Types
 // =============================================================================
 
-export type ModalProps = Pick<HTMLAttributes<HTMLDivElement>, "className" | "style"> & {
+export type ModalProps = Pick<HTMLAttributes<HTMLDivElement>, "className" | "style" | "aria-label" | "aria-labelledby" | "aria-describedby"> & {
   /**
    * Called when the modal's open state should change. Today Modal is mount-driven
    * (parent conditionally renders), so this fires only with `false` on dismissal.
@@ -47,98 +47,169 @@ const sizeClasses = {
 // Modal
 // =============================================================================
 
-const ModalRoot = ({ onOpenChange, size = "md", className, style, children, dismissable = true, closable, align = "center" }: ModalProps) => {
-  // Prefer explicit prop over context (context is set by useModal's overlay system)
-  const contextValue = useContext(ModalContext);
-  // Context provides a parameterless onClose for programmatic modals; adapt to the boolean shape.
-  const handleDismiss = useCallback(() => {
-    if (onOpenChange) onOpenChange(false);
-    else contextValue?.onClose();
-  }, [onOpenChange, contextValue]);
-
-  const { ref: presenceRef, state, isMounted, show, hide } = usePresence();
-
-  useEffect(() => {
-    show();
-  }, [show]);
-
-  const handleClose = useCallback(() => {
-    hide(handleDismiss);
-  }, [handleDismiss, hide]);
-
-  const { refs, context } = useFloating({
-    open: true,
-    onOpenChange: (nextOpen) => {
-      if (!nextOpen) handleClose();
+const ModalRoot = forwardRef<HTMLDivElement, ModalProps>(
+  (
+    {
+      onOpenChange,
+      size = "md",
+      className,
+      style,
+      children,
+      dismissable = true,
+      closable,
+      align = "center",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
     },
-  });
-
-  const mergedRef = useMergedFloatingRef(refs, presenceRef);
-
-  const dismiss = useDismiss(context, {
-    enabled: dismissable,
-    // OverlayContext handles escape key for proper stack ordering
-    escapeKey: false,
-    outsidePress: true,
-    outsidePressEvent: "mousedown",
-  });
-
-  const role = useRole(context, {
-    role: "dialog",
-  });
-
-  const { getFloatingProps } = useInteractions([dismiss, role]);
-
-  const modalContextValue = useMemo(() => ({ onClose: handleClose, closable }), [closable, handleClose]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  if (!isMounted) return null;
-
-  const isEntering = state === "entering";
-  const isExiting = state === "exiting";
-
-  return (
-    <FloatingFocusManager context={context} modal>
-      <FloatingOverlay lockScroll className={cn("fixed inset-0 z-modal bg-bg-overlay", isEntering && "animate-fade-in", isExiting && "animate-fade-out")}>
-        <div
-          ref={mergedRef}
-          role="dialog"
-          aria-modal="true"
-          tabIndex={-1}
-          data-state={state}
-          className={cn(
-            "fixed flex flex-col overflow-hidden outline-hidden",
-            "rounded-xl border border-border-normal bg-bg-normal",
-            // Size
-            sizeClasses[size],
-            // Cap height so ModalBody scrolls instead of overflowing the viewport
-            "max-h-[95%]",
-            // Mobile: slide up from bottom, full width
-            "max-sm:inset-x-0 max-sm:bottom-0 max-sm:rounded-b-none",
-            isEntering && "max-sm:animate-slide-up-in",
-            isExiting && "max-sm:animate-slide-up-out",
-            // Desktop: horizontal center + vertical alignment
-            "sm:left-1/2 sm:-translate-x-1/2",
-            align === "center" && "sm:top-1/2 sm:-translate-y-1/2",
-            align === "top" && "sm:top-[15vh]",
-            isEntering && "sm:animate-fade-in",
-            isExiting && "sm:animate-fade-out",
-            className
-          )}
-          style={style}
-          {...getFloatingProps({})}
+    ref
+  ) => {
+    // Prefer explicit prop over context (context is set by useModal's overlay system)
+    const contextValue = useContext(ModalContext);
+    // Context provides a parameterless onClose for programmatic modals; adapt to the boolean shape.
+    const handleDismiss = useCallback(() => {
+      if (onOpenChange) onOpenChange(false);
+      else contextValue?.onClose();
+    }, [onOpenChange, contextValue]);
+
+    const { ref: presenceRef, state, isMounted, show, hide } = usePresence();
+
+    useEffect(() => {
+      show();
+    }, [show]);
+
+    const handleClose = useCallback(() => {
+      hide(handleDismiss);
+    }, [handleDismiss, hide]);
+
+    const { refs, context } = useFloating({
+      open: true,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) handleClose();
+      },
+    });
+
+    const mergedRef = useMergedFloatingRef<HTMLDivElement>(refs, presenceRef, ref);
+
+    const dismiss = useDismiss(context, {
+      enabled: dismissable,
+      // OverlayContext handles escape key for proper stack ordering
+      escapeKey: false,
+      outsidePress: true,
+      outsidePressEvent: "mousedown",
+    });
+
+    const role = useRole(context, {
+      role: "dialog",
+    });
+
+    const { getFloatingProps } = useInteractions([dismiss, role]);
+
+    // The dialog names itself from its header. `Modal.Header` stamps `titleId`
+    // on itself and reports back, so a headerless modal falls through to the
+    // caller's `aria-label` instead of referencing an id that isn't there.
+    const titleId = useId();
+    const [hasTitle, setHasTitle] = useState(false);
+    const registerTitle = useCallback((present: boolean) => setHasTitle(present), []);
+
+    // `aria-labelledby` beats `aria-label` in the name computation, so a caller
+    // who passes a label must not also be pointed at the header — they would
+    // never see their own string win.
+    const labelledBy = ariaLabelledBy ?? (ariaLabel || !hasTitle ? undefined : titleId);
+
+    const modalContextValue = useMemo(() => ({ onClose: handleClose, closable, titleId, registerTitle }), [closable, handleClose, titleId, registerTitle]);
+
+    if (!isMounted) return null;
+
+    const isEntering = state === "entering";
+    const isExiting = state === "exiting";
+
+    return (
+      <FloatingFocusManager context={context} modal>
+        <FloatingOverlay
+          lockScroll
+          className={cn("modal-overlay fixed inset-0 z-modal bg-(--modal-overlay-bg)", isEntering && "animate-fade-in", isExiting && "animate-fade-out")}
         >
-          <ModalContext.Provider value={modalContextValue}>{children}</ModalContext.Provider>
-        </div>
-      </FloatingOverlay>
-    </FloatingFocusManager>
-  );
-};
+          <div
+            ref={mergedRef}
+            role="dialog"
+            aria-modal="true"
+            aria-label={ariaLabel}
+            aria-labelledby={labelledBy}
+            aria-describedby={ariaDescribedBy}
+            tabIndex={-1}
+            data-state={state}
+            className={cn(
+              "modal fixed flex flex-col overflow-hidden outline-hidden",
+              "border-(color:--modal-border) rounded-xl border bg-(--modal-bg)",
+              // Size
+              sizeClasses[size],
+              // Cap height so ModalBody scrolls instead of overflowing the viewport
+              "max-h-[95%]",
+              // Mobile: slide up from bottom, full width
+              "max-sm:inset-x-0 max-sm:bottom-0 max-sm:rounded-b-none",
+              isEntering && "max-sm:animate-slide-up-in",
+              isExiting && "max-sm:animate-slide-up-out",
+              // Desktop: horizontal center + vertical alignment
+              "sm:left-1/2 sm:-translate-x-1/2",
+              align === "center" && "sm:top-1/2 sm:-translate-y-1/2",
+              align === "top" && "sm:top-[15vh]",
+              isEntering && "sm:animate-fade-in",
+              isExiting && "sm:animate-fade-out",
+              className
+            )}
+            style={style}
+            {...getFloatingProps({})}
+          >
+            <ModalContext.Provider value={modalContextValue}>{children}</ModalContext.Provider>
+          </div>
+        </FloatingOverlay>
+      </FloatingFocusManager>
+    );
+  }
+);
 ModalRoot.displayName = "Modal";
 
 // =============================================================================
 // Compound Component Export
 // =============================================================================
 
+/**
+ * A centered, backdrop-dimmed dialog that fully interrupts the page — the
+ * background stays visually present but the user can't reach it. Reach for
+ * `Modal` when the interruption should own the user's attention completely
+ * (a confirmation, a focused form); reach for `Sheet` when the page behind
+ * should stay visible and interactive, or `Popover` when there's no need for
+ * a backdrop at all.
+ *
+ * `size` (`"sm" | "md" | "lg" | "full"`, default `"md"`) sets the desktop
+ * width — every size slides up full-width from the bottom on mobile.
+ * `align` positions the desktop dialog `"center"` (default) or `"top"`.
+ * `dismissable` (default `true`) governs outside-press only: clicking the
+ * backdrop closes the modal unless set to `false`. `closable` shows an X
+ * button in `Modal.Header`.
+ *
+ * Modal is mount-driven — a parent (or `useModal`'s stack) decides whether it
+ * renders at all, so there's no `open` prop. `onOpenChange` still exists,
+ * firing only with `false` on dismissal, so every overlay in this library
+ * shares one open/close shape. Escape is *not* wired inside Modal itself:
+ * `OverlayProvider` owns it globally so a stack of modals closes
+ * topmost-first. That means Escape only closes a Modal opened through
+ * `useModal()` — one a parent mounts directly from its own boolean state
+ * won't respond to Escape unless the app wires that separately.
+ *
+ * Focus moves into the modal on mount and is trapped there
+ * (`FloatingFocusManager modal`) until it unmounts, then returns to whatever
+ * triggered it. The dialog carries `role="dialog"` and `aria-modal="true"`,
+ * and names itself from `Modal.Header` via `aria-labelledby` unless the
+ * caller passes their own `aria-label`. It stays mounted through its
+ * fade-out exit animation (`usePresence`), so `onOpenChange(false)` fires
+ * only after the animation completes.
+ *
+ * Compound: `Modal.Header` (title + optional close button), `Modal.Body`
+ * (scrolls internally so the modal itself never grows past the viewport),
+ * `Modal.Footer` (action buttons). None are required.
+ */
 export const Modal = Object.assign(ModalRoot, {
   Header: ModalHeader,
   Body: ModalBody,

package/src/components/Modal/components/ModalContext.tsx

@@ -9,6 +9,20 @@ export type OnClose = () => void;
 interface ModalContextValue {
   onClose: OnClose;
   closable?: boolean | undefined;
+  /**
+   * The id `Modal.Header` stamps on itself so the dialog can name itself from
+   * its own title. A dialog with no accessible name is announced as just
+   * "dialog", which tells a screen-reader user nothing about what interrupted
+   * them.
+   */
+  titleId?: string;
+  /**
+   * The header reports its presence, because a headerless modal must not point
+   * `aria-labelledby` at an element that never rendered — a dangling reference
+   * is worse than no reference at all (it resolves to an empty name and axe
+   * flags it as an invalid attribute value).
+   */
+  registerTitle?: (present: boolean) => void;
 }
 
 export const ModalContext = createContext<ModalContextValue | null>(null);

package/src/components/Modal/components/ModalHeader.tsx

@@ -5,20 +5,32 @@ import { ModalContext } from "./ModalContext";
 
 export type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 
-export const ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(({ className, children, ...props }, ref) => {
+export const ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(({ className, children, id, ...props }, ref) => {
   const context = React.useContext(ModalContext);
   const closable = context?.closable;
   const onClose = context?.onClose;
+  const registerTitle = context?.registerTitle;
+
+  // Tell the dialog it has a title to point `aria-labelledby` at, and take that
+  // back on unmount so a header removed at runtime doesn't leave a dangling
+  // reference behind. A caller-supplied `id` wins over the generated one, which
+  // also means the dialog can no longer find it — say so rather than pointing
+  // at an id that isn't in the DOM, and let the caller label the Modal itself.
+  const ownsTitleId = id === undefined;
+  React.useEffect(() => {
+    registerTitle?.(ownsTitleId);
+    return () => registerTitle?.(false);
+  }, [registerTitle, ownsTitleId]);
 
   return (
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", closable && "pr-12", className)} {...props}>
+    <div ref={ref} id={id ?? context?.titleId} className={cn("flex flex-col space-y-1.5 p-6", closable && "pr-12", className)} {...props}>
       {children}
       {closable && (
         <button
           type="button"
           onClick={onClose}
           aria-label="Close"
-          className="absolute top-4 right-4 cursor-pointer rounded-md p-1 text-fg-subtle transition-colors hover:bg-bg-subtle hover:text-fg-normal"
+          className="modal-close absolute top-4 right-4 cursor-pointer rounded-md p-1 text-(--modal-close-fg) transition-colors hover:bg-(--modal-close-bg-hovered) hover:text-(--modal-close-fg-hovered)"
         >
           <X size={16} />
         </button>

package/src/components/Popover/Popover.tsx

@@ -44,6 +44,12 @@ const PopoverRoot = ({ open: controlledOpen, onOpenChange, defaultOpen = false,
 
   const id = useId();
   const contentId = `popover-content-${id}`;
+  // `Popover.Body` is a `role="dialog"`, and a dialog with no accessible name is
+  // announced as just "dialog". There is no title sub-part to read from, so the
+  // trigger — which always has a label, because it is what the user clicked —
+  // names the popover. A caller passing their own `aria-label`/`aria-labelledby`
+  // to `Popover.Body` still wins.
+  const triggerId = `popover-trigger-${id}`;
 
   const contextValue = {
     open,
@@ -56,11 +62,41 @@ const PopoverRoot = ({ open: controlledOpen, onOpenChange, defaultOpen = false,
     getReferenceProps,
     getFloatingProps,
     contentId,
+    triggerId,
   };
 
   return <PopoverContext.Provider value={contextValue}>{children}</PopoverContext.Provider>;
 };
 
+/**
+ * A click-triggered floating panel anchored to a trigger element, with no
+ * backdrop. Reach for `Popover` over `Modal`/`Sheet` when the content is a
+ * menu, a small edit form, or info-on-demand that should stay tethered to
+ * whatever the user clicked, rather than taking over the page. Reach for
+ * `HoverCard` instead when the panel should open passively on hover/focus
+ * rather than a click, and for `Tooltip` when it's a short text label rather
+ * than a panel with real content.
+ *
+ * Works both controlled (`open` + `onOpenChange`) and uncontrolled
+ * (`defaultOpen`) via `useControllableState`. `placement` (default
+ * `"bottom"`) and `offsetPx` (default `8`) position it relative to the
+ * trigger through floating-ui's `offset → flip → shift` middleware, which
+ * repositions automatically on scroll/resize (`autoUpdate`).
+ *
+ * Opens via `useClick` and dismisses via `useDismiss` — outside-press and
+ * Escape both close it, handled directly by floating-ui rather than
+ * `OverlayProvider`, since a Popover isn't part of the modal stack.
+ * `Popover.Body` renders in a `FloatingPortal` to `document.body` and hard
+ * unmounts (`return null`) when closed — there's no exit animation. It
+ * carries `role="dialog"` and, since there's no title slot to read from,
+ * names itself from `Popover.Trigger` via `aria-labelledby` unless the
+ * caller passes their own `aria-label`/`aria-labelledby`.
+ *
+ * Compound: `Popover.Trigger` (`asChild` to render the child element as the
+ * trigger instead of wrapping it in a `<button>`), `Popover.Body`,
+ * `Popover.Close` (a button that calls `onOpenChange(false)` — for a close
+ * affordance inside the panel's own content).
+ */
 export const Popover = Object.assign(PopoverRoot, {
   Trigger: PopoverTrigger,
   Body: PopoverBody,

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

@@ -6,7 +6,11 @@ import { usePopoverContext } from "./PopoverContext";
 export type PopoverBodyProps = React.HTMLAttributes<HTMLDivElement>;
 
 export const PopoverBody = React.forwardRef<HTMLDivElement, PopoverBodyProps>(({ className, children, ...props }, forwardedRef) => {
-  const { open, refs, floatingStyles, getFloatingProps, contentId } = usePopoverContext();
+  const { open, refs, floatingStyles, 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.
+  const hasOwnLabel = props["aria-label"] !== undefined || props["aria-labelledby"] !== undefined;
 
   if (!open) return null;
 
@@ -20,6 +24,7 @@ export const PopoverBody = React.forwardRef<HTMLDivElement, PopoverBodyProps>(({
         }}
         id={contentId}
         role="dialog"
+        aria-labelledby={hasOwnLabel ? undefined : triggerId}
         style={floatingStyles}
         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

@@ -11,6 +11,7 @@ export type PopoverContextValue = {
   getReferenceProps: (props?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
   getFloatingProps: (props?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
   contentId: string;
+  triggerId: string;
 };
 
 export const PopoverContext = createContext<PopoverContextValue | null>(null);

package/src/components/Popover/components/PopoverTrigger.tsx

@@ -8,7 +8,7 @@ export type PopoverTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement>
 };
 
 export const PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(({ asChild = false, children, ...props }, forwardedRef) => {
-  const { refs, getReferenceProps, contentId, open } = usePopoverContext();
+  const { refs, getReferenceProps, contentId, triggerId, open } = usePopoverContext();
   const Comp = asChild ? Slot : "button";
 
   return (
@@ -19,6 +19,7 @@ export const PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTrigger
         else if (forwardedRef) forwardedRef.current = node;
       }}
       type={asChild ? undefined : "button"}
+      id={triggerId}
       aria-haspopup="dialog"
       aria-expanded={open}
       aria-controls={open ? contentId : undefined}