@base-ui/react 1.7.0 → 1.8.0

package/dialog/utils/stateAttributesMapping.mjs

@@ -1,5 +1,7 @@
 import { transitionStatusMapping } from "../../internals/stateAttributesMapping.mjs";
 import { popupStateMapping } from "../../utils/popupStateMapping.mjs";
+import * as DialogPopupDataAttributes from "../popup/DialogPopupDataAttributes.mjs";
+
 /**
  * Shared by `Dialog.Popup` and `Dialog.Viewport`, whose states have the same shape.
  * `nested` is not mapped: unmapped `true` booleans already render as `data-nested`.
@@ -9,7 +11,7 @@ export const dialogStateAttributesMapping = {
   ...transitionStatusMapping,
   nestedDialogOpen(value) {
     return value ? {
-      'data-nested-dialog-open': ''
+      [DialogPopupDataAttributes.nestedDialogOpen]: ''
     } : null;
   }
 };

package/dialog/viewport/DialogViewportDataAttributes.d.mts

@@ -1,26 +1,24 @@
-export declare enum DialogViewportDataAttributes {
-  /**
-   * Present when the dialog is open.
-   */
-  open = "data-open",
-  /**
-   * Present when the dialog is closed.
-   */
-  closed = "data-closed",
-  /**
-   * Present when the dialog begins animating in.
-   */
-  startingStyle = "data-starting-style",
-  /**
-   * Present when the dialog is animating out.
-   */
-  endingStyle = "data-ending-style",
-  /**
-   * Present when the dialog is nested within another dialog.
-   */
-  nested = "data-nested",
-  /**
-   * Present when the dialog has other open dialogs nested within it.
-   */
-  nestedDialogOpen = "data-nested-dialog-open",
-}
+/**
+ * Present when the dialog is open.
+ */
+export declare const open = "data-open";
+/**
+ * Present when the dialog is closed.
+ */
+export declare const closed = "data-closed";
+/**
+ * Present when the dialog begins animating in.
+ */
+export declare const startingStyle = "data-starting-style";
+/**
+ * Present when the dialog is animating out.
+ */
+export declare const endingStyle = "data-ending-style";
+/**
+ * Present when the dialog is nested within another dialog.
+ */
+export declare const nested = "data-nested";
+/**
+ * Present when the dialog has other open dialogs nested within it.
+ */
+export declare const nestedDialogOpen = "data-nested-dialog-open";

package/dialog/viewport/DialogViewportDataAttributes.d.ts

@@ -1,26 +1,24 @@
-export declare enum DialogViewportDataAttributes {
-  /**
-   * Present when the dialog is open.
-   */
-  open = "data-open",
-  /**
-   * Present when the dialog is closed.
-   */
-  closed = "data-closed",
-  /**
-   * Present when the dialog begins animating in.
-   */
-  startingStyle = "data-starting-style",
-  /**
-   * Present when the dialog is animating out.
-   */
-  endingStyle = "data-ending-style",
-  /**
-   * Present when the dialog is nested within another dialog.
-   */
-  nested = "data-nested",
-  /**
-   * Present when the dialog has other open dialogs nested within it.
-   */
-  nestedDialogOpen = "data-nested-dialog-open",
-}
+/**
+ * Present when the dialog is open.
+ */
+export declare const open = "data-open";
+/**
+ * Present when the dialog is closed.
+ */
+export declare const closed = "data-closed";
+/**
+ * Present when the dialog begins animating in.
+ */
+export declare const startingStyle = "data-starting-style";
+/**
+ * Present when the dialog is animating out.
+ */
+export declare const endingStyle = "data-ending-style";
+/**
+ * Present when the dialog is nested within another dialog.
+ */
+export declare const nested = "data-nested";
+/**
+ * Present when the dialog has other open dialogs nested within it.
+ */
+export declare const nestedDialogOpen = "data-nested-dialog-open";

package/dialog/viewport/DialogViewportDataAttributes.js

@@ -3,32 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DialogViewportDataAttributes = void 0;
+exports.startingStyle = exports.open = exports.nestedDialogOpen = exports.nested = exports.endingStyle = exports.closed = void 0;
 var _popupStateMapping = require("../../utils/popupStateMapping");
-let DialogViewportDataAttributes = exports.DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
-  /**
-   * Present when the dialog is open.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["open"] = _popupStateMapping.CommonPopupDataAttributes.open] = "open";
-  /**
-   * Present when the dialog is closed.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
-  /**
-   * Present when the dialog begins animating in.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
-  /**
-   * Present when the dialog is animating out.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["endingStyle"] = _popupStateMapping.CommonPopupDataAttributes.endingStyle] = "endingStyle";
-  /**
-   * Present when the dialog is nested within another dialog.
-   */
-  DialogViewportDataAttributes["nested"] = "data-nested";
-  /**
-   * Present when the dialog has other open dialogs nested within it.
-   */
-  DialogViewportDataAttributes["nestedDialogOpen"] = "data-nested-dialog-open";
-  return DialogViewportDataAttributes;
-}({});
+/**
+ * Present when the dialog is open.
+ */
+const open = exports.open = _popupStateMapping.CommonPopupDataAttributes.open;
+/**
+ * Present when the dialog is closed.
+ */
+const closed = exports.closed = _popupStateMapping.CommonPopupDataAttributes.closed;
+/**
+ * Present when the dialog begins animating in.
+ */
+const startingStyle = exports.startingStyle = _popupStateMapping.CommonPopupDataAttributes.startingStyle;
+/**
+ * Present when the dialog is animating out.
+ */
+const endingStyle = exports.endingStyle = _popupStateMapping.CommonPopupDataAttributes.endingStyle;
+/**
+ * Present when the dialog is nested within another dialog.
+ */
+const nested = exports.nested = 'data-nested';
+/**
+ * Present when the dialog has other open dialogs nested within it.
+ */
+const nestedDialogOpen = exports.nestedDialogOpen = 'data-nested-dialog-open';

package/dialog/viewport/DialogViewportDataAttributes.mjs

@@ -1,28 +1,26 @@
 import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.mjs";
-export let DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
-  /**
-   * Present when the dialog is open.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
-  /**
-   * Present when the dialog is closed.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
-  /**
-   * Present when the dialog begins animating in.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
-  /**
-   * Present when the dialog is animating out.
-   */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
-  /**
-   * Present when the dialog is nested within another dialog.
-   */
-  DialogViewportDataAttributes["nested"] = "data-nested";
-  /**
-   * Present when the dialog has other open dialogs nested within it.
-   */
-  DialogViewportDataAttributes["nestedDialogOpen"] = "data-nested-dialog-open";
-  return DialogViewportDataAttributes;
-}({});
+
+/**
+ * Present when the dialog is open.
+ */
+export const open = CommonPopupDataAttributes.open;
+/**
+ * Present when the dialog is closed.
+ */
+export const closed = CommonPopupDataAttributes.closed;
+/**
+ * Present when the dialog begins animating in.
+ */
+export const startingStyle = CommonPopupDataAttributes.startingStyle;
+/**
+ * Present when the dialog is animating out.
+ */
+export const endingStyle = CommonPopupDataAttributes.endingStyle;
+/**
+ * Present when the dialog is nested within another dialog.
+ */
+export const nested = 'data-nested';
+/**
+ * Present when the dialog has other open dialogs nested within it.
+ */
+export const nestedDialogOpen = 'data-nested-dialog-open';

package/docs/index.md

@@ -37,6 +37,7 @@ The Tailwind CSS examples are written for Tailwind CSS v4. If `package.json` use
 - [v1.5.0](./react/overview/releases/v1-5-0.md): v1.5.0 release notes. May 19, 2026.
 - [v1.6.0](./react/overview/releases/v1-6-0.md): v1.6.0 release notes. Jun 18, 2026.
 - [v1.7.0](./react/overview/releases/v1-7-0.md): v1.7.0 release notes. Aug 4, 2026.
+- [v1.8.0](./react/overview/releases/v1-8-0.md): v1.8.0 release notes. Sep 4, 2026.
 
 ## Handbook
 
@@ -72,7 +73,7 @@ The Tailwind CSS examples are written for Tailwind CSS v4. If `package.json` use
 - [Number Field](./react/components/number-field.md): A high-quality, unstyled React number field component with increment and decrement buttons, and a scrub area.
 - [OTP Field](./react/components/otp-field.md): A high-quality, unstyled React OTP field component for one-time password and verification code entry.
 - [Popover](./react/components/popover.md): A high-quality, unstyled React popover component that displays an accessible popup anchored to a button.
-- [Preview Card](./react/components/preview-card.md): A high-quality, unstyled React preview card component that appears when a link is hovered, showing a preview for sighted users.
+- [Preview Card](./react/components/preview-card.md): A high-quality, unstyled React preview card component for a link that shows a destination preview without interrupting keyboard or screen reader navigation.
 - [Progress](./react/components/progress.md): A high-quality, unstyled React progress bar component that displays the status of a task that takes a long time.
 - [Radio](./react/components/radio.md): A high-quality, unstyled React radio button component that is easy to style.
 - [Scroll Area](./react/components/scroll-area.md): A high-quality, unstyled React scroll area that provides a native scroll container with custom scrollbars.

package/docs/react/components/accordion.md

@@ -556,6 +556,312 @@ function PlusIcon(props: React.ComponentProps<'svg'>) {
 }
 ```
 
+### Hidden until found
+
+The `hiddenUntilFound` prop hides closed panels with [`hidden="until-found"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/hidden) so the browser can search their contents and reveal the matching panel automatically. It can be set on each `Accordion.Panel`, or once on `Accordion.Root` to apply to all panels.
+
+To try it, press <kbd>Ctrl</kbd>+<kbd>F</kbd> (<kbd>Cmd</kbd>+<kbd>F</kbd> on macOS) and search for "restocking"—the browser opens the closed panel containing the match. When `hiddenUntilFound` is enabled, closed panels always remain mounted in the DOM, which also makes their contents indexable by search engines.
+
+Older browsers that don't support `hidden="until-found"` keep panels hidden until their trigger opens them, and find-in-page skips over the contents.
+
+## Demo
+
+### Tailwind
+
+This example shows how to implement the component using Tailwind CSS.
+
+```tsx
+/* index.tsx */
+import * as React from 'react';
+import { Accordion } from '@base-ui/react/accordion';
+
+export default function ExampleAccordion() {
+  return (
+    <Accordion.Root
+      hiddenUntilFound
+      className="flex w-full max-w-80 flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white"
+    >
+      <Accordion.Item>
+        <Accordion.Header>
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
+            How long does shipping take?
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-[ease-out] group-data-panel-open:rotate-45" />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0">
+          <div className="px-3 py-2">
+            Standard shipping takes 3–5 business days. Express delivery arrives in 1–2 business
+            days.
+          </div>
+        </Accordion.Panel>
+      </Accordion.Item>
+
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
+        <Accordion.Header>
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
+            What is your return policy?
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-[ease-out] group-data-panel-open:rotate-45" />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0">
+          <div className="px-3 py-2">
+            You can return any item within 30 days of delivery. Opened items may be subject to a 10%
+            restocking fee.
+          </div>
+        </Accordion.Panel>
+      </Accordion.Item>
+
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
+        <Accordion.Header>
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
+            Do you ship internationally?
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-[ease-out] group-data-panel-open:rotate-45" />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0">
+          <div className="px-3 py-2">
+            Yes, we ship to over 40 countries. International orders typically arrive within 7–14
+            business days.
+          </div>
+        </Accordion.Panel>
+      </Accordion.Item>
+
+      <Accordion.Item className="border-t border-neutral-950 dark:border-white">
+        <Accordion.Header>
+          <Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
+            How can I track my order?
+            <PlusIcon className="shrink-0 transition-transform duration-100 ease-[ease-out] group-data-panel-open:rotate-45" />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0">
+          <div className="px-3 py-2">
+            Once your order ships, you’ll receive a tracking link by email. Tracking updates can
+            take up to 24 hours to appear.
+          </div>
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+}
+
+function PlusIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
+    </svg>
+  );
+}
+```
+
+### CSS Modules
+
+This example shows how to implement the component using CSS Modules.
+
+```css
+/* index.module.css */
+.Accordion {
+  box-sizing: border-box;
+  display: flex;
+  max-width: 20rem;
+  width: 100%;
+  flex-direction: column;
+  border: 1px solid oklch(14.5% 0 0deg);
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    color: white;
+  }
+}
+
+.Item {
+  & + & {
+    border-top: 1px solid oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      border-top: 1px solid white;
+    }
+  }
+}
+
+.Header {
+  margin: 0;
+}
+
+.Trigger {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.5rem 0.75rem;
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+  color: oklch(14.5% 0 0deg);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  text-align: left;
+  -webkit-user-select: none;
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:focus-visible {
+    position: relative;
+    outline: 2px solid oklch(14.5% 0 0deg);
+    z-index: 1;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
+}
+
+.Icon {
+  transition: transform 100ms ease-out;
+
+  [data-panel-open] > & {
+    transform: rotate(45deg);
+  }
+}
+
+.Panel {
+  box-sizing: border-box;
+  height: var(--accordion-panel-height);
+  overflow: hidden;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  transition: height 150ms ease-out;
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    height: 0;
+  }
+}
+
+.Content {
+  padding: 0.5rem 0.75rem;
+}
+```
+
+```tsx
+/* index.tsx */
+import * as React from 'react';
+import { Accordion } from '@base-ui/react/accordion';
+import styles from './index.module.css';
+
+export default function ExampleAccordion() {
+  return (
+    <Accordion.Root className={styles.Accordion} hiddenUntilFound>
+      <Accordion.Item className={styles.Item}>
+        <Accordion.Header className={styles.Header}>
+          <Accordion.Trigger className={styles.Trigger}>
+            How long does shipping take?
+            <PlusIcon className={styles.Icon} />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className={styles.Panel}>
+          <div className={styles.Content}>
+            Standard shipping takes 3–5 business days. Express delivery arrives in 1–2 business
+            days.
+          </div>
+        </Accordion.Panel>
+      </Accordion.Item>
+
+      <Accordion.Item className={styles.Item}>
+        <Accordion.Header className={styles.Header}>
+          <Accordion.Trigger className={styles.Trigger}>
+            What is your return policy?
+            <PlusIcon className={styles.Icon} />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className={styles.Panel}>
+          <div className={styles.Content}>
+            You can return any item within 30 days of delivery. Opened items may be subject to a 10%
+            restocking fee.
+          </div>
+        </Accordion.Panel>
+      </Accordion.Item>
+
+      <Accordion.Item className={styles.Item}>
+        <Accordion.Header className={styles.Header}>
+          <Accordion.Trigger className={styles.Trigger}>
+            Do you ship internationally?
+            <PlusIcon className={styles.Icon} />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className={styles.Panel}>
+          <div className={styles.Content}>
+            Yes, we ship to over 40 countries. International orders typically arrive within 7–14
+            business days.
+          </div>
+        </Accordion.Panel>
+      </Accordion.Item>
+
+      <Accordion.Item className={styles.Item}>
+        <Accordion.Header className={styles.Header}>
+          <Accordion.Trigger className={styles.Trigger}>
+            How can I track my order?
+            <PlusIcon className={styles.Icon} />
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel className={styles.Panel}>
+          <div className={styles.Content}>
+            Once your order ships, you’ll receive a tracking link by email. Tracking updates can
+            take up to 24 hours to appear.
+          </div>
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+}
+
+function PlusIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="M1.5 8h13M8 14.5v-13" />
+    </svg>
+  );
+}
+```
+
 ## API reference
 
 ### Root
@@ -595,7 +901,10 @@ Re-export of [Root](/react/components/accordion.md) props.
 
 ```typescript
 type AccordionRootState<TValue = any> = {
-  /** The current value. */
+  /**
+   * The current value.
+   * Treat it as read-only: it may be a shared frozen array when no value is set.
+   */
   value: TValue[];
   /** Whether the component should ignore user interaction. */
   disabled: boolean;
@@ -679,7 +988,10 @@ type AccordionTriggerState = {
   index: number;
   /** Whether the component is open. */
   open: boolean;
-  /** The current value. */
+  /**
+   * The current value.
+   * Treat it as read-only: it may be a shared frozen array when no value is set.
+   */
   value: any[];
   /** Whether the component should ignore user interaction. */
   disabled: boolean;
@@ -743,7 +1055,10 @@ type AccordionItemState = {
   index: number;
   /** Whether the component is open. */
   open: boolean;
-  /** The current value. */
+  /**
+   * The current value.
+   * Treat it as read-only: it may be a shared frozen array when no value is set.
+   */
   value: any[];
   /** Whether the component should ignore user interaction. */
   disabled: boolean;
@@ -821,7 +1136,10 @@ type AccordionHeaderState = {
   index: number;
   /** Whether the component is open. */
   open: boolean;
-  /** The current value. */
+  /**
+   * The current value.
+   * Treat it as read-only: it may be a shared frozen array when no value is set.
+   */
   value: any[];
   /** Whether the component should ignore user interaction. */
   disabled: boolean;
@@ -887,7 +1205,10 @@ type AccordionPanelState = {
   index: number;
   /** Whether the component is open. */
   open: boolean;
-  /** The current value. */
+  /**
+   * The current value.
+   * Treat it as read-only: it may be a shared frozen array when no value is set.
+   */
   value: any[];
   /** Whether the component should ignore user interaction. */
   disabled: boolean;