@backstage/ui 0.12.0-next.2 → 0.12.1-next.0

package/CHANGELOG.md

@@ -1,9 +1,37 @@
 # @backstage/ui
 
-## 0.12.0-next.2
+## 0.12.1-next.0
+
+### Patch Changes
+
+- a1f4bee: Made Accordion a `bg` provider so nested components like Button auto-increment their background level. Updated `useDefinition` to resolve `bg` `propDef` defaults for provider components.
+- 8909359: Fixed focus-visible outline styles for Menu and Select components.
+
+  **Affected components:** Menu, Select
+
+- 0f462f8: Improved type safety in `useDefinition` by centralizing prop resolution and strengthening the `BgPropsConstraint` to require that `bg` provider components declare `children` as a required prop in their OwnProps type.
+- 8909359: Added proper cursor styles for RadioGroup items.
+
+  **Affected components:** RadioGroup
+
+- Updated dependencies
+  - @backstage/version-bridge@1.0.12
+
+## 0.12.0
 
 ### Minor Changes
 
+- 46a9adc: **BREAKING**: Alert no longer accepts a `surface` prop
+
+  The Alert component's background is now driven entirely by its `status` prop. The `surface` prop has been removed.
+
+  ```diff
+  - <Alert surface="1" status="info" />
+  + <Alert status="info" />
+  ```
+
+  **Affected components:** Alert
+
 - b63c25b: **BREAKING**: Removed gray scale tokens and renamed background surface tokens to neutral tokens
 
   The `--bui-gray-1` through `--bui-gray-8` tokens have been removed. The `--bui-bg-surface-*` and `--bui-bg-neutral-on-surface-*` tokens have been replaced by a unified `--bui-bg-neutral-*` scale.
@@ -31,6 +59,356 @@
   + background: var(--bui-bg-neutral-1);
   ```
 
+- 7898df0: **BREAKING**: Replaced `Surface` / `onSurface` system with new provider/consumer background system
+
+  The old `Surface` type (`'0'`–`'3'`, `'auto'`) and its associated props (`surface`, `onSurface`) have been replaced by a provider/consumer `bg` architecture.
+
+  **Types:**
+
+  - `ContainerBg` — `'neutral-1'` | `'neutral-2'` | `'neutral-3'` | `'danger'` | `'warning'` | `'success'`
+  - `ProviderBg` — `ContainerBg | 'neutral-auto'`
+
+  Consumer components (e.g. Button) inherit the parent's `bg` via `data-on-bg`, and CSS handles the visual step-up. See "Neutral level capping" below for details on how levels are bounded.
+
+  **Hooks:**
+
+  - `useBgProvider(bg?)` — for provider components. Returns `{ bg: undefined }` when no `bg` is given (transparent). Supports `'neutral-auto'` to auto-increment from the parent context.
+  - `useBgConsumer()` — for consumer components. Returns the parent container's `bg` unchanged.
+
+  **Component roles:**
+
+  - **Provider-only** (Box, Flex, Grid): set `data-bg`, wrap children in `BgProvider`. **Transparent by default** — they do _not_ auto-increment; pass `bg="neutral-auto"` explicitly if you want automatic neutral stepping.
+  - **Consumer-only** (Button, ButtonIcon, ButtonLink): set `data-on-bg`, inherit the parent container's `bg` unchanged.
+  - **Provider + Consumer** (Card): sets both `data-bg` and `data-on-bg`, wraps children. Card passes `bg="neutral-auto"` to its inner Box, so it auto-increments from the parent context.
+
+  **Neutral level capping:**
+
+  Provider components cap at `neutral-3`. There is no `neutral-4` prop value. The `neutral-4` level exists only in consumer component CSS — for example, a Button sitting on a `neutral-3` surface uses `neutral-4` tokens internally via `data-on-bg`.
+
+  **Migration:**
+
+  Rename the `surface` prop to `bg` on provider components and update values:
+
+  ```diff
+  - <Box surface="1">
+  + <Box bg="neutral-1">
+
+  - <Card surface="2">
+  + <Card bg="neutral-2">
+
+  - <Flex surface="0">
+  + <Flex bg="neutral-1">
+
+  - <Grid.Root surface="1">
+  + <Grid.Root bg="neutral-1">
+  ```
+
+  Remove `onSurface` from consumer components — they now always inherit from the parent container:
+
+  ```diff
+  - <Button onSurface="1" variant="secondary">
+  + <Button variant="secondary">
+
+  - <ButtonIcon onSurface="2" variant="secondary" />
+  + <ButtonIcon variant="secondary" />
+
+  - <ToggleButton onSurface="1">
+  + <ToggleButton>
+  ```
+
+  Update type imports:
+
+  ```diff
+  - import type { Surface, LeafSurfaceProps, ContainerSurfaceProps } from '@backstage/ui';
+  + import type { ContainerBg, ProviderBg } from '@backstage/ui';
+  ```
+
+  Replace hook usage in custom components:
+
+  ```diff
+  - import { useSurface, SurfaceProvider } from '@backstage/ui';
+  + import { useBgProvider, useBgConsumer, BgProvider } from '@backstage/ui';
+
+  - const { surface } = useSurface({ surface: props.surface });
+  + const { bg } = useBgProvider(props.bg);
+
+  - const { surface } = useSurface({ onSurface: props.onSurface });
+  + const { bg } = useBgConsumer();
+  ```
+
+  Update CSS selectors targeting surface data attributes:
+
+  ```diff
+  - [data-surface='1'] { ... }
+  + [data-bg='neutral-1'] { ... }
+
+  - [data-on-surface='1'] { ... }
+  + [data-on-bg='neutral-1'] { ... }
+  ```
+
+  Note: Provider components use `data-bg` (values: `neutral-1` through `neutral-3`, plus intent values). Consumer components use `data-on-bg`, which reflects the parent container's `bg` directly. The `neutral-4` level never appears as a prop or `data-bg` value — it is used only in consumer CSS.
+
+  **Affected components:** Box, Button, ButtonIcon, ButtonLink, ToggleButton, Card, Flex, Grid
+
+- 4137a43: **BREAKING:** Renamed, added, and removed CSS tokens.
+
+  - Renamed `--bui-bg-neutral-0` to `--bui-bg-app`.
+  - Renamed `--bui-border` to `--bui-border-2`.
+  - Added `--bui-border-1` for subtle, low-contrast borders.
+  - Added `--bui-bg-popover` for the background color of popovers, tooltips, menus, and dialogs.
+  - Removed `--bui-border-hover`, `--bui-border-pressed`, and `--bui-border-disabled`.
+
+  **Migration:**
+
+  ```diff
+  - var(--bui-bg-neutral-0)
+  + var(--bui-bg-app)
+
+  - var(--bui-border)
+  + var(--bui-border-2)
+  ```
+
+  Remove any references to `--bui-border-hover`, `--bui-border-pressed`, and `--bui-border-disabled` as these tokens no longer exist.
+
+- b1f723b: **BREAKING**: Changed CSS selectors for `ButtonIcon` and `ButtonLink` components. Custom styles targeting `.bui-Button` to style these components must be updated to use `.bui-ButtonIcon` or `.bui-ButtonLink` respectively.
+
+  ```diff
+  -/* This no longer styles ButtonIcon or ButtonLink */
+  -.bui-Button[data-variant="primary"] { ... }
+  +/* Use component-specific selectors */
+  +.bui-ButtonIcon[data-variant="primary"] { ... }
+  +.bui-ButtonLink[data-variant="primary"] { ... }
+  ```
+
+  Affected components: ButtonIcon, ButtonLink
+
+- caeb9ad: **BREAKING**: The `cell` and `header` properties in `ColumnConfig` now return `ReactElement` instead of `ReactNode`.
+
+  This fixes an issue where React Aria's Collection component would inject an `id` prop into Fragment wrappers, causing "Invalid prop `id` supplied to `React.Fragment`" errors on render.
+
+  Migration:
+
+  ```diff
+  const columns: ColumnConfig<MyItem>[] = [
+    {
+      id: 'name',
+      label: 'Name',
+  -   cell: (item) => item.name,
+  +   cell: (item) => <CellText title={item.name} />,
+  -   header: () => 'Name',
+  +   header: () => <Column>Name</Column>,
+    },
+  ];
+  ```
+
+- 0ec3c0e: **BREAKING**: Renamed the `Header` component to `PluginHeader` for clarity.
+
+  The following exports have been renamed:
+
+  - `Header` → `PluginHeader`
+  - `HeaderProps` → `PluginHeaderProps`
+  - `HeaderDefinition` → `PluginHeaderDefinition`
+
+  The `HeaderTab` type is unchanged as it is shared with `HeaderPage`.
+
+  CSS class names have been updated from `bui-Header*` to `bui-PluginHeader*`.
+
+  **Migration:**
+
+  ```diff
+  -import { Header, HeaderDefinition } from '@backstage/ui';
+  +import { PluginHeader, PluginHeaderDefinition } from '@backstage/ui';
+
+  -<Header title="My plugin" />
+  +<PluginHeader title="My plugin" />
+  ```
+
+  **Affected components:** plugin-header
+
+- 058ffd9: **BREAKING**: Removed `large` size variant from Button component as it was never implemented.
+
+  **Migration:**
+
+  ```diff
+  - <Button size="large">Click me</Button>
+  + <Button size="medium">Click me</Button>
+  ```
+
+  **Affected components:** Button
+
+- 110fec0: **BREAKING**: Removed link and tint color tokens, added new status foreground tokens, and improved Link component styling
+
+  The following color tokens have been removed:
+
+  - `--bui-fg-link` (and all related tokens: `-hover`, `-pressed`, `-disabled`)
+  - `--bui-fg-tint` (and all related tokens: `-hover`, `-pressed`, `-disabled`)
+  - `--bui-bg-tint` (and all related tokens: `-hover`, `-pressed`, `-disabled`)
+  - `--bui-border-tint` (and all related tokens)
+
+  **New Status Tokens:**
+
+  Added dedicated tokens for status colors that distinguish between usage on status backgrounds vs. standalone usage:
+
+  - `--bui-fg-danger-on-bg` / `--bui-fg-danger`
+  - `--bui-fg-warning-on-bg` / `--bui-fg-warning`
+  - `--bui-fg-success-on-bg` / `--bui-fg-success`
+  - `--bui-fg-info-on-bg` / `--bui-fg-info`
+
+  The `-on-bg` variants are designed for text on colored backgrounds, while the base variants are for standalone status indicators with improved visibility and contrast.
+
+  **Migration:**
+
+  For link colors, migrate to one of the following alternatives:
+
+  ```diff
+  .custom-link {
+  - color: var(--bui-fg-link);
+  + color: var(--bui-fg-info);  /* For informational links */
+  + /* or */
+  + color: var(--bui-fg-primary);  /* For standard text links */
+  }
+  ```
+
+  For tint colors (backgrounds, foregrounds, borders), migrate to appropriate status or neutral colors:
+
+  ```diff
+  .info-section {
+  - background: var(--bui-bg-tint);
+  + background: var(--bui-bg-info);  /* For informational sections */
+  + /* or */
+  + background: var(--bui-bg-neutral-1);  /* For neutral emphasis */
+  }
+  ```
+
+  If you're using status foreground colors on colored backgrounds, update to the new `-on-bg` tokens:
+
+  ```diff
+  .error-badge {
+  - color: var(--bui-fg-danger);
+  + color: var(--bui-fg-danger-on-bg);
+    background: var(--bui-bg-danger);
+  }
+  ```
+
+  **Affected components:** Link
+
+### Patch Changes
+
+- 644e303: Added a new `FullPage` component that fills the remaining viewport height below the `PluginHeader`.
+
+  ```tsx
+  <PluginHeader title="My Plugin" tabs={tabs} />
+  <FullPage>
+    {/* content fills remaining height */}
+  </FullPage>
+  ```
+
+  **Affected components:** FullPage
+
+- 44877e4: Fixed dark theme `--bui-fg-secondary` and `--bui-fg-disabled` tokens using black-based `oklch(0% ...)` instead of white-based `oklch(100% ...)`, making secondary and disabled text visible on dark backgrounds.
+- 350c948: Fixed Box component to forward HTML attributes to the underlying div element.
+
+  **Affected components:** Box
+
+- 7455dae: Use node prefix on native imports
+- c8ae765: Fixed nested Accordion icon state issue where the inner accordion's arrow icon would incorrectly show as expanded when only the outer accordion was expanded. The CSS selector now uses a direct parent selector to ensure the icon only responds to its own accordion's expanded state.
+
+  Affected components: Accordion
+
+- 4d1b7f4: Fixed CSS Module syntax to comply with Next.js 16 Turbopack validation by flattening nested dark theme selectors.
+
+  **Affected components:** Popover, Tooltip
+
+- 2c219b9: Added `destructive` prop to Button for dangerous actions like delete or remove. Works with all variants (primary, secondary, tertiary).
+
+  **Affected components:** Button
+
+- 5af9e14: Fixed `useDefinition` hook adding literal "undefined" class name when no className prop was passed.
+- 5c76d13: Allow `ref` as a prop on the `Tag` component
+
+  Affected components: Tag
+
+- ab25658: Cleaned up `useDefinition` `ownProps` types to remove never-typed ghost properties from autocomplete.
+- 741a98d: Allow data to be passed directly to the `useTable` hook using the property `data` instead of `getData()` for mode `"complete"`.
+
+  This simplifies usage as data changes, rather than having to perform a `useEffect` when data changes, and then reloading the data. It also happens immediately, so stale data won't remain until a rerender (with an internal async state change), so less flickering.
+
+  Affected components: Table
+
+- a0fe1b2: Fixed changing columns after first render from crashing. It now renders the table with the new column layout as columns change.
+
+  Affected components: Table
+
+- 508bd1a: Added new `Alert` component with support for status variants (info, success, warning, danger), icons, loading states, and custom actions.
+
+  Updated status color tokens for improved contrast and consistency across light and dark themes:
+
+  - Added new `--bui-bg-info` and `--bui-fg-info` tokens for info status
+  - Updated `--bui-bg-danger`, `--bui-fg-danger` tokens
+  - Updated `--bui-bg-warning`, `--bui-fg-warning` tokens
+  - Updated `--bui-bg-success`, `--bui-fg-success` tokens
+
+  **Affected components**: Alert
+
+- da30862: Fixed client-side navigation for container components by wrapping the container (not individual items) in RouterProvider. Components now conditionally provide routing context only when children have internal links, removing the Router context requirement when not needed. This also removes the need to wrap these components in MemoryRouter during tests when they are not using the `href` prop.
+
+  Additionally, when multiple tabs match the current URL via prefix matching, the tab with the most specific path (highest segment count) is now selected. For example, with URL `/catalog/users/john`, a tab with path `/catalog/users` is now selected over a tab with path `/catalog`.
+
+  Affected components: Tabs, Tab, TagGroup, Tag, Menu, MenuItem, MenuAutocomplete
+
+- 092c453: Fixed an infinite render loop in Tabs when navigating to a URL that doesn't match any tab `href`.
+- becf851: export PasswordField component
+- becee36: Migrated Accordion components to use `useDefinition` instead of `useStyles`, and added automatic background adaptation based on parent container context.
+- 5320aa8: Fixed components to not require a Router context when rendering without internal links.
+
+  Affected components: Link, ButtonLink, Row
+
+- a7e0d50: Updated `react-router-dom` peer dependency to `^6.30.2` and explicitly disabled v7 future flags to suppress deprecation warnings.
+- 8c39412: The Table component now wraps the react-aria-components `Table` with a `ResizableTableContainer` only if any column has a width property set. This means that column widths can adapt to the content otherwise (if no width is explicitly set).
+
+  Affected components: Table
+
+- cb090b4: Bump react-aria-components to v1.14.0
+- c429101: Fixed React 17 compatibility by using `useId` from `react-aria` instead of the built-in React hook which is only available in React 18+.
+- 74c5a76: Fixed Switch component disabled state styling to show `not-allowed` cursor and disabled text color.
+
+  **Affected components:** Switch
+
+- 20131c5: Migrated to use the standard `backstage-cli package build` for CSS bundling instead of a custom build script.
+- Updated dependencies
+  - @backstage/version-bridge@1.0.12
+
+## 0.12.0-next.2
+
+### Minor Changes
+
+- b63c25b: **BREAKING**: Removed gray scale tokens and renamed background surface tokens to neutral tokens
+
+  The `--bui-gray-1` through `--bui-gray-8` tokens have been removed. The `--bui-bg-surface-*` and `--bui-bg-neutral-on-surface-*` tokens have been replaced by a unified `--bui-bg-neutral-*` scale.
+
+  **Migration:**
+
+  Replace surface tokens directly:
+
+  ```diff
+  - background: var(--bui-bg-surface-0);
+  + background: var(--bui-bg-app);
+  ```
+
+  Replace on-surface tokens shifted by +1:
+
+  ```diff
+  - background: var(--bui-bg-neutral-on-surface-0);
+  + background: var(--bui-bg-neutral-1);
+  ```
+
+  Replace gray tokens 1-4 with neutral equivalents (`--bui-gray-5` through `--bui-gray-8` have no direct replacement):
+
+  ```diff
+  - background: var(--bui-gray-1);
+  + background: var(--bui-bg-neutral-1);
+  ```
+
 ### Patch Changes
 
 - c8ae765: Fixed nested Accordion icon state issue where the inner accordion's arrow icon would incorrectly show as expanded when only the outer accordion was expanded. The CSS selector now uses a direct parent selector to ensure the icon only responds to its own accordion's expanded state.

package/dist/components/Accordion/Accordion.esm.js

@@ -2,108 +2,94 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Disclosure, Heading, Button, DisclosurePanel, DisclosureGroup } from 'react-aria-components';
 import { RiArrowDownSLine } from '@remixicon/react';
-import clsx from 'clsx';
-import { useStyles } from '../../hooks/useStyles.esm.js';
-import { AccordionDefinition } from './definition.esm.js';
-import styles from './Accordion.module.css.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import { AccordionDefinition, AccordionTriggerDefinition, AccordionPanelDefinition, AccordionGroupDefinition } from './definition.esm.js';
 import { Flex } from '../Flex/Flex.esm.js';
 
-const Accordion = forwardRef(({ className, ...props }, ref) => {
-  const { classNames, cleanedProps } = useStyles(AccordionDefinition, props);
-  return /* @__PURE__ */ jsx(
-    Disclosure,
-    {
-      ref,
-      className: clsx(classNames.root, styles[classNames.root], className),
-      ...cleanedProps
-    }
-  );
-});
+const Accordion = forwardRef(
+  (props, ref) => {
+    const { ownProps, restProps, dataAttributes } = useDefinition(
+      AccordionDefinition,
+      props
+    );
+    const { classes, childrenWithBgProvider } = ownProps;
+    return /* @__PURE__ */ jsx(
+      Disclosure,
+      {
+        ref,
+        className: classes.root,
+        ...dataAttributes,
+        ...restProps,
+        children: childrenWithBgProvider
+      }
+    );
+  }
+);
 Accordion.displayName = "Accordion";
-const AccordionTrigger = forwardRef(({ className, title, subtitle, children, ...props }, ref) => {
-  const { classNames, cleanedProps } = useStyles(AccordionDefinition, props);
-  return /* @__PURE__ */ jsx(
-    Heading,
-    {
-      ref,
-      className: clsx(
-        classNames.trigger,
-        styles[classNames.trigger],
-        className
-      ),
-      ...cleanedProps,
-      children: /* @__PURE__ */ jsxs(
-        Button,
-        {
-          slot: "trigger",
-          className: clsx(
-            classNames.triggerButton,
-            styles[classNames.triggerButton]
-          ),
-          children: [
-            children ? children : /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: clsx(
-                    classNames.triggerTitle,
-                    styles[classNames.triggerTitle]
-                  ),
-                  children: title
-                }
-              ),
-              subtitle && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: clsx(
-                    classNames.triggerSubtitle,
-                    styles[classNames.triggerSubtitle]
-                  ),
-                  children: subtitle
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(
-              RiArrowDownSLine,
-              {
-                className: clsx(
-                  classNames.triggerIcon,
-                  styles[classNames.triggerIcon]
-                ),
-                size: 16
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-});
+const AccordionTrigger = forwardRef(
+  (props, ref) => {
+    const { ownProps, restProps, dataAttributes } = useDefinition(
+      AccordionTriggerDefinition,
+      props
+    );
+    const { classes, title, subtitle, children } = ownProps;
+    return /* @__PURE__ */ jsx(
+      Heading,
+      {
+        ref,
+        className: classes.root,
+        ...dataAttributes,
+        ...restProps,
+        children: /* @__PURE__ */ jsxs(Button, { slot: "trigger", className: classes.button, children: [
+          children ? children : /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", children: [
+            /* @__PURE__ */ jsx("span", { className: classes.title, children: title }),
+            subtitle && /* @__PURE__ */ jsx("span", { className: classes.subtitle, children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsx(RiArrowDownSLine, { className: classes.icon, size: 16 })
+        ] })
+      }
+    );
+  }
+);
 AccordionTrigger.displayName = "AccordionTrigger";
-const AccordionPanel = forwardRef(({ className, ...props }, ref) => {
-  const { classNames, cleanedProps } = useStyles(AccordionDefinition, props);
-  return /* @__PURE__ */ jsx(
-    DisclosurePanel,
-    {
-      ref,
-      className: clsx(classNames.panel, styles[classNames.panel], className),
-      ...cleanedProps
-    }
-  );
-});
+const AccordionPanel = forwardRef(
+  (props, ref) => {
+    const { ownProps, restProps, dataAttributes } = useDefinition(
+      AccordionPanelDefinition,
+      props
+    );
+    const { classes } = ownProps;
+    return /* @__PURE__ */ jsx(
+      DisclosurePanel,
+      {
+        ref,
+        className: classes.root,
+        ...dataAttributes,
+        ...restProps
+      }
+    );
+  }
+);
 AccordionPanel.displayName = "AccordionPanel";
-const AccordionGroup = forwardRef(({ className, allowsMultiple = false, ...props }, ref) => {
-  const { classNames, cleanedProps } = useStyles(AccordionDefinition, props);
-  return /* @__PURE__ */ jsx(
-    DisclosureGroup,
-    {
-      ref,
-      allowsMultipleExpanded: allowsMultiple,
-      className: clsx(classNames.group, styles[classNames.group], className),
-      ...cleanedProps
-    }
-  );
-});
+const AccordionGroup = forwardRef(
+  (props, ref) => {
+    const { ownProps, restProps, dataAttributes } = useDefinition(
+      AccordionGroupDefinition,
+      props
+    );
+    const { classes, allowsMultiple } = ownProps;
+    return /* @__PURE__ */ jsx(
+      DisclosureGroup,
+      {
+        ref,
+        allowsMultipleExpanded: allowsMultiple,
+        className: classes.root,
+        ...dataAttributes,
+        ...restProps
+      }
+    );
+  }
+);
 AccordionGroup.displayName = "AccordionGroup";
 
 export { Accordion, AccordionGroup, AccordionPanel, AccordionTrigger };

package/dist/components/Accordion/Accordion.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.esm.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport {\n  Disclosure as RADisclosure,\n  Button as RAButton,\n  DisclosurePanel as RADisclosurePanel,\n  DisclosureGroup as RADisclosureGroup,\n  Heading as RAHeading,\n} from 'react-aria-components';\nimport { RiArrowDownSLine } from '@remixicon/react';\nimport clsx from 'clsx';\nimport type {\n  AccordionProps,\n  AccordionTriggerProps,\n  AccordionPanelProps,\n  AccordionGroupProps,\n} from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { AccordionDefinition } from './definition';\nimport styles from './Accordion.module.css';\nimport { Flex } from '../Flex';\n\n/** @public */\nexport const Accordion = forwardRef<\n  React.ElementRef<typeof RADisclosure>,\n  AccordionProps\n>(({ className, ...props }, ref) => {\n  const { classNames, cleanedProps } = useStyles(AccordionDefinition, props);\n\n  return (\n    <RADisclosure\n      ref={ref}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...cleanedProps}\n    />\n  );\n});\n\nAccordion.displayName = 'Accordion';\n\n/** @public */\nexport const AccordionTrigger = forwardRef<\n  React.ElementRef<typeof RAHeading>,\n  AccordionTriggerProps\n>(({ className, title, subtitle, children, ...props }, ref) => {\n  const { classNames, cleanedProps } = useStyles(AccordionDefinition, props);\n\n  return (\n    <RAHeading\n      ref={ref}\n      className={clsx(\n        classNames.trigger,\n        styles[classNames.trigger],\n        className,\n      )}\n      {...cleanedProps}\n    >\n      <RAButton\n        slot=\"trigger\"\n        className={clsx(\n          classNames.triggerButton,\n          styles[classNames.triggerButton],\n        )}\n      >\n        {children ? (\n          children\n        ) : (\n          <Flex gap=\"2\" align=\"center\">\n            <span\n              className={clsx(\n                classNames.triggerTitle,\n                styles[classNames.triggerTitle],\n              )}\n            >\n              {title}\n            </span>\n            {subtitle && (\n              <span\n                className={clsx(\n                  classNames.triggerSubtitle,\n                  styles[classNames.triggerSubtitle],\n                )}\n              >\n                {subtitle}\n              </span>\n            )}\n          </Flex>\n        )}\n\n        <RiArrowDownSLine\n          className={clsx(\n            classNames.triggerIcon,\n            styles[classNames.triggerIcon],\n          )}\n          size={16}\n        />\n      </RAButton>\n    </RAHeading>\n  );\n});\n\nAccordionTrigger.displayName = 'AccordionTrigger';\n\n/** @public */\nexport const AccordionPanel = forwardRef<\n  React.ElementRef<typeof RADisclosurePanel>,\n  AccordionPanelProps\n>(({ className, ...props }, ref) => {\n  const { classNames, cleanedProps } = useStyles(AccordionDefinition, props);\n\n  return (\n    <RADisclosurePanel\n      ref={ref}\n      className={clsx(classNames.panel, styles[classNames.panel], className)}\n      {...cleanedProps}\n    />\n  );\n});\n\nAccordionPanel.displayName = 'AccordionPanel';\n\n/** @public */\nexport const AccordionGroup = forwardRef<\n  React.ElementRef<typeof RADisclosureGroup>,\n  AccordionGroupProps\n>(({ className, allowsMultiple = false, ...props }, ref) => {\n  const { classNames, cleanedProps } = useStyles(AccordionDefinition, props);\n\n  return (\n    <RADisclosureGroup\n      ref={ref}\n      allowsMultipleExpanded={allowsMultiple}\n      className={clsx(classNames.group, styles[classNames.group], className)}\n      {...cleanedProps}\n    />\n  );\n});\n\nAccordionGroup.displayName = 'AccordionGroup';\n"],"names":["RADisclosure","RAHeading","RAButton","RADisclosurePanel","RADisclosureGroup"],"mappings":"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"}
+{"version":3,"file":"Accordion.esm.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, Ref } from 'react';\nimport {\n  Disclosure as RADisclosure,\n  Button as RAButton,\n  DisclosurePanel as RADisclosurePanel,\n  DisclosureGroup as RADisclosureGroup,\n  Heading as RAHeading,\n} from 'react-aria-components';\nimport { RiArrowDownSLine } from '@remixicon/react';\nimport type {\n  AccordionProps,\n  AccordionTriggerProps,\n  AccordionPanelProps,\n  AccordionGroupProps,\n} from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  AccordionDefinition,\n  AccordionTriggerDefinition,\n  AccordionPanelDefinition,\n  AccordionGroupDefinition,\n} from './definition';\nimport { Flex } from '../Flex';\n\n/** @public */\nexport const Accordion = forwardRef(\n  (props: AccordionProps, ref: Ref<React.ElementRef<typeof RADisclosure>>) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      AccordionDefinition,\n      props,\n    );\n    const { classes, childrenWithBgProvider } = ownProps;\n\n    return (\n      <RADisclosure\n        ref={ref}\n        className={classes.root}\n        {...dataAttributes}\n        {...restProps}\n      >\n        {childrenWithBgProvider}\n      </RADisclosure>\n    );\n  },\n);\n\nAccordion.displayName = 'Accordion';\n\n/** @public */\nexport const AccordionTrigger = forwardRef(\n  (\n    props: AccordionTriggerProps,\n    ref: Ref<React.ElementRef<typeof RAHeading>>,\n  ) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      AccordionTriggerDefinition,\n      props,\n    );\n    const { classes, title, subtitle, children } = ownProps;\n\n    return (\n      <RAHeading\n        ref={ref}\n        className={classes.root}\n        {...dataAttributes}\n        {...restProps}\n      >\n        <RAButton slot=\"trigger\" className={classes.button}>\n          {children ? (\n            children\n          ) : (\n            <Flex gap=\"2\" align=\"center\">\n              <span className={classes.title}>{title}</span>\n              {subtitle && <span className={classes.subtitle}>{subtitle}</span>}\n            </Flex>\n          )}\n\n          <RiArrowDownSLine className={classes.icon} size={16} />\n        </RAButton>\n      </RAHeading>\n    );\n  },\n);\n\nAccordionTrigger.displayName = 'AccordionTrigger';\n\n/** @public */\nexport const AccordionPanel = forwardRef(\n  (\n    props: AccordionPanelProps,\n    ref: Ref<React.ElementRef<typeof RADisclosurePanel>>,\n  ) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      AccordionPanelDefinition,\n      props,\n    );\n    const { classes } = ownProps;\n\n    return (\n      <RADisclosurePanel\n        ref={ref}\n        className={classes.root}\n        {...dataAttributes}\n        {...restProps}\n      />\n    );\n  },\n);\n\nAccordionPanel.displayName = 'AccordionPanel';\n\n/** @public */\nexport const AccordionGroup = forwardRef(\n  (\n    props: AccordionGroupProps,\n    ref: Ref<React.ElementRef<typeof RADisclosureGroup>>,\n  ) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      AccordionGroupDefinition,\n      props,\n    );\n    const { classes, allowsMultiple } = ownProps;\n\n    return (\n      <RADisclosureGroup\n        ref={ref}\n        allowsMultipleExpanded={allowsMultiple}\n        className={classes.root}\n        {...dataAttributes}\n        {...restProps}\n      />\n    );\n  },\n);\n\nAccordionGroup.displayName = 'AccordionGroup';\n"],"names":["RADisclosure","RAHeading","RAButton","RADisclosurePanel","RADisclosureGroup"],"mappings":"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"}

package/dist/components/Accordion/Accordion.module.css.esm.js

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Accordion_bui-Accordion__089e06ba75 {\n    width: 100%;\n    background-color: var(--bui-bg-neutral-1);\n    border-radius: var(--bui-radius-3);\n    padding: var(--bui-space-3);\n  }\n\n  .Accordion_bui-AccordionTrigger__089e06ba75 {\n    all: unset;\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .Accordion_bui-AccordionTriggerButton__089e06ba75 {\n    all: unset;\n    width: 100%;\n    color: var(--bui-fg-primary);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    text-align: left;\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n\n    &[data-disabled='true'] {\n      background-color: transparent;\n      color: var(--bui-fg-disabled);\n      cursor: not-allowed;\n    }\n  }\n\n  .Accordion_bui-AccordionTriggerTitle__089e06ba75 {\n    font-size: var(--bui-font-size-4);\n    font-weight: var(--bui-font-weight-bold);\n    line-height: 140%;\n  }\n\n  .Accordion_bui-AccordionTriggerSubtitle__089e06ba75 {\n    font-size: var(--bui-font-size-2);\n    line-height: 140%;\n    color: var(--bui-fg-secondary);\n  }\n\n  .Accordion_bui-AccordionTriggerIcon__089e06ba75 {\n    transition: transform 150ms ease-out;\n    flex-shrink: 0;\n    width: 1rem;\n    height: 1rem;\n\n    .Accordion_bui-Accordion__089e06ba75[data-expanded='true'] > .Accordion_bui-AccordionTrigger__089e06ba75 & {\n      transform: rotate(180deg);\n    }\n  }\n\n  .Accordion_bui-AccordionPanel__089e06ba75 {\n    .Accordion_bui-Accordion__089e06ba75[data-expanded='true'] > & {\n      padding-top: var(--bui-space-1);\n    }\n  }\n\n  .Accordion_bui-AccordionGroup__089e06ba75 {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-3);\n    width: 100%;\n  }\n}\n";
-var styles = {"bui-Accordion":"Accordion_bui-Accordion__089e06ba75","bui-AccordionTrigger":"Accordion_bui-AccordionTrigger__089e06ba75","bui-AccordionTriggerButton":"Accordion_bui-AccordionTriggerButton__089e06ba75","bui-AccordionTriggerTitle":"Accordion_bui-AccordionTriggerTitle__089e06ba75","bui-AccordionTriggerSubtitle":"Accordion_bui-AccordionTriggerSubtitle__089e06ba75","bui-AccordionTriggerIcon":"Accordion_bui-AccordionTriggerIcon__089e06ba75","bui-AccordionPanel":"Accordion_bui-AccordionPanel__089e06ba75","bui-AccordionGroup":"Accordion_bui-AccordionGroup__089e06ba75"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Accordion_bui-Accordion__9b8ddcbafb {\n    width: 100%;\n    border-radius: var(--bui-radius-3);\n    padding: var(--bui-space-3);\n\n    &[data-bg='neutral-1'] {\n      background-color: var(--bui-bg-neutral-1);\n    }\n\n    &[data-bg='neutral-2'] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-bg='neutral-3'] {\n      background-color: var(--bui-bg-neutral-3);\n    }\n  }\n\n  .Accordion_bui-AccordionTrigger__9b8ddcbafb {\n    all: unset;\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .Accordion_bui-AccordionTriggerButton__9b8ddcbafb {\n    all: unset;\n    width: 100%;\n    color: var(--bui-fg-primary);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    text-align: left;\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n\n    &[data-disabled='true'] {\n      background-color: transparent;\n      color: var(--bui-fg-disabled);\n      cursor: not-allowed;\n    }\n  }\n\n  .Accordion_bui-AccordionTriggerTitle__9b8ddcbafb {\n    font-size: var(--bui-font-size-4);\n    font-weight: var(--bui-font-weight-bold);\n    line-height: 140%;\n  }\n\n  .Accordion_bui-AccordionTriggerSubtitle__9b8ddcbafb {\n    font-size: var(--bui-font-size-2);\n    line-height: 140%;\n    color: var(--bui-fg-secondary);\n  }\n\n  .Accordion_bui-AccordionTriggerIcon__9b8ddcbafb {\n    transition: transform 150ms ease-out;\n    flex-shrink: 0;\n    width: 1rem;\n    height: 1rem;\n\n    .Accordion_bui-Accordion__9b8ddcbafb[data-expanded='true'] > .Accordion_bui-AccordionTrigger__9b8ddcbafb & {\n      transform: rotate(180deg);\n    }\n  }\n\n  .Accordion_bui-AccordionPanel__9b8ddcbafb {\n    .Accordion_bui-Accordion__9b8ddcbafb[data-expanded='true'] > & {\n      padding-top: var(--bui-space-1);\n    }\n  }\n\n  .Accordion_bui-AccordionGroup__9b8ddcbafb {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-3);\n    width: 100%;\n  }\n}\n";
+var styles = {"bui-Accordion":"Accordion_bui-Accordion__9b8ddcbafb","bui-AccordionTrigger":"Accordion_bui-AccordionTrigger__9b8ddcbafb","bui-AccordionTriggerButton":"Accordion_bui-AccordionTriggerButton__9b8ddcbafb","bui-AccordionTriggerTitle":"Accordion_bui-AccordionTriggerTitle__9b8ddcbafb","bui-AccordionTriggerSubtitle":"Accordion_bui-AccordionTriggerSubtitle__9b8ddcbafb","bui-AccordionTriggerIcon":"Accordion_bui-AccordionTriggerIcon__9b8ddcbafb","bui-AccordionPanel":"Accordion_bui-AccordionPanel__9b8ddcbafb","bui-AccordionGroup":"Accordion_bui-AccordionGroup__9b8ddcbafb"};
 styleInject(css_248z);
 
 export { styles as default };