@backstage/ui 0.13.0-next.2 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,248 @@
 # @backstage/ui
 
+## 0.13.0
+
+### Minor Changes
+
+- 768f09d: **BREAKING**: Simplified the neutral background prop API for container components. The explicit `neutral-1`, `neutral-2`, `neutral-3`, and `neutral-auto` values have been removed from `ProviderBg`. They are replaced by a single `'neutral'` value that always auto-increments from the parent context, making it impossible to skip or pin to an explicit neutral level.
+
+  **Migration:**
+
+  Replace any explicit `bg="neutral-1"`, `bg="neutral-2"`, `bg="neutral-3"`, or `bg="neutral-auto"` props with `bg="neutral"`. To achieve a specific neutral level in stories or tests, use nested containers — each additional `bg="neutral"` wrapper increments by one level.
+
+  ```tsx
+  // Before
+  <Box bg="neutral-2">...</Box>
+
+  // After
+  <Box bg="neutral">
+    <Box bg="neutral">...</Box>
+  </Box>
+  ```
+
+  **Affected components:** Box, Flex, Grid, Card, Accordion, Popover, Tooltip, Dialog, Menu
+
+- b42fcdc: **BREAKING**: Removed `--bui-bg-popover` CSS token. Popover, Tooltip, Menu, and Dialog now use `--bui-bg-app` for their outer shell and `Box bg="neutral-1"` for content areas, providing better theme consistency and eliminating a redundant token.
+
+  **Migration:**
+
+  Replace any usage of `--bui-bg-popover` with `--bui-bg-neutral-1` (for content surfaces) or `--bui-bg-app` (for outer shells):
+
+  ```diff
+  - background: var(--bui-bg-popover);
+  + background: var(--bui-bg-neutral-1);
+  ```
+
+  **Affected components:** Popover, Tooltip, Menu, Dialog
+
+- bd3a76e: **BREAKING**: Data attributes rendered by components are now always lowercase. This affects CSS selectors targeting camelCase data attributes.
+
+  **Migration:**
+
+  Update any custom CSS selectors that target camelCase data attributes to use lowercase instead:
+
+  ```diff
+  - [data-startCollapsed='true'] { ... }
+  + [data-startcollapsed='true'] { ... }
+  ```
+
+  **Affected components:** SearchField
+
+- 95702ab: **BREAKING**: Removed deprecated types `ComponentDefinition`, `ClassNamesMap`, `DataAttributeValues`, and `DataAttributesMap` from the public API. These were internal styling infrastructure types that have been replaced by the `defineComponent` system.
+
+  **Migration:**
+
+  Remove any direct usage of these types. Component definitions now use `defineComponent()` and their shapes are not part of the public API contract.
+
+  ```diff
+  - import type { ComponentDefinition, ClassNamesMap } from '@backstage/ui';
+  ```
+
+  If you were reading `definition.dataAttributes`, use `definition.propDefs` instead — props with `dataAttribute: true` in `propDefs` are the equivalent.
+
+- 42f8c9b: **BREAKING**: Centralized client-side routing in `BUIProvider`. Components like Link, ButtonLink, Tabs, Menu, TagGroup, and Table now require a `BUIProvider` rendered inside a React Router context for client-side navigation to work.
+
+  **Migration:**
+
+  This change requires updating `@backstage/plugin-app` and `@backstage/core-app-api` alongside `@backstage/ui`. If you only upgrade `@backstage/ui`, BUI components will fall back to full-page navigation.
+
+  If you cannot upgrade all packages together, or if you have a custom app shell, add a `BUIProvider` inside your Router:
+
+  ```diff
+  + import { BUIProvider } from '@backstage/ui';
+
+    <BrowserRouter>
+  +   <BUIProvider>
+        <AppContent />
+  +   </BUIProvider>
+    </BrowserRouter>
+  ```
+
+  **Affected components:** Link, ButtonLink, Tabs, Menu, TagGroup, Table
+
+- 17d6398: **BREAKING**: Renamed internal CSS classes to match the `Header` component name.
+
+  **Migration:**: If you are targeting these classes directly in your styles, update the following:
+
+  - `bui-HeaderPage` → `bui-Header`
+  - `bui-HeaderPageContent` → `bui-HeaderContent`
+  - `bui-HeaderPageBreadcrumbs` → `bui-HeaderBreadcrumbs`
+  - `bui-HeaderPageTabsWrapper` → `bui-HeaderTabsWrapper`
+  - `bui-HeaderPageControls` → `bui-HeaderControls`
+
+  **Affected components:**: Header
+
+- 9d5f3ba: Removed redundant `selected` and `indeterminate` props from the `Checkbox` component. Use the `isSelected` and `isIndeterminate` props instead, which are the standard React Aria props and already handle both the checkbox behaviour and the corresponding CSS data attributes.
+
+  **Migration:**
+  Replace any usage of the `selected` and `indeterminate` props on `Checkbox` with the `isSelected` and `isIndeterminate` props. Note that the checked state and related CSS data attributes (such as `data-selected` and `data-indeterminate`) are now driven by React Aria, so any custom logic that previously inspected or set these via the old props should instead rely on the React Aria-managed state and attributes exposed through the new props.
+
+  **Affected components:** Checkbox
+
+### Patch Changes
+
+- 04d9d8d: Added `List` and `ListRow` components. These provide a standalone, accessible list of interactive rows built on top of React Aria's `GridList` and `GridListItem` primitives. Rows support icons, descriptions, actions, menus, and single or multiple selection modes.
+
+  **Affected components:** List, ListRow
+
+- 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.
+- db92751: Added interactive support to the `Card` component. Pass `onPress` to make the entire card surface pressable, or `href` to make it navigate to a URL. A transparent overlay handles the interaction while nested buttons and links remain independently clickable.
+- 12d8afe: Added analytics capabilities to the component library. Components with navigation behavior (Link, ButtonLink, Tab, MenuItem, Tag, Row) now fire analytics events on click when a `BUIProvider` is present.
+
+  New exports: `BUIProvider`, `useAnalytics`, `getNodeText`, and associated types (`AnalyticsTracker`, `UseAnalyticsFn`, `BUIProviderProps`, `AnalyticsEventAttributes`).
+
+  Components with analytics support now accept a `noTrack` prop to suppress event firing.
+
+  **Affected components:** Link, ButtonLink, Tab, MenuItem, Tag, Row
+
+- b838cc9: Added a `loading` prop and `data-loading` data attribute to `TableRoot`, allowing consumers to distinguish between stale data and initial loading states. Both `stale` and `loading` set `aria-busy` on the table.
+
+  Affected components: TableRoot
+
+- 690786f: Improved the `Table` component loading state to show a skeleton UI with visible headers instead of plain "Loading..." text. The table now renders its full structure during loading, with animated skeleton rows in place of data. The loading state includes proper accessibility support with `aria-busy` on the table and screen reader announcements.
+
+  Affected components: Table
+
+- 58224d3: Fixed neutral-1 hover & pressed state in light mode.
+- 95702ab: Migrated all components from `useStyles` to `useDefinition` hook. Exported `OwnProps` types for each component, enabling better type composition for consumers.
+
+  **Affected components:** Avatar, Checkbox, Container, Dialog, FieldError, FieldLabel, Flex, FullPage, Grid, HeaderPage, Link, Menu, PasswordField, PluginHeader, Popover, RadioGroup, SearchField, Select, Skeleton, Switch, Table, TablePagination, Tabs, TagGroup, Text, TextField, ToggleButton, ToggleButtonGroup, Tooltip, VisuallyHidden
+
+- 430d5ed: Fixed interactive cards so that CardBody can scroll when the card has a constrained height. Previously, the overlay element blocked scroll events.
+
+  **Affected components:** Card
+
+- 4c2c350: Removed the `transition` on `Container` padding to prevent an unwanted animation when the viewport is resized.
+
+  Affected components: Container
+
+- e0b7eb0: Fixed --bui-fg-success token in light mode to be more accessible.
+- ad7c883: Deprecated the `HeaderPage` component name in favor of `Header`. The old `HeaderPage`, `HeaderPageProps`, `HeaderPageOwnProps`, `HeaderPageBreadcrumb`, and `HeaderPageDefinition` exports are still available as deprecated aliases.
+- 0ebde15: Added documentation for the table cell wrapper requirement to TSDoc comments for `Cell`, `CellText`, `CellProfile`, `ColumnConfig`, and `RowRenderFn`.
+- d9d2dd6: Added `SearchAutocomplete` and `SearchAutocompleteItem` components for building accessible search-with-results patterns. Built on React Aria's Autocomplete with keyboard navigation and screen reader support. Designed for async/external search results with a configurable popover width.
+
+  **Affected components:** SearchAutocomplete, SearchAutocompleteItem
+
+- a6b84e1: Made Checkbox `children` optional and added a dev warning when neither a visible label, `aria-label`, nor `aria-labelledby` is provided. The label wrapper div is no longer rendered when there are no children, removing the unnecessary gap.
+
+  **Affected components:** Checkbox
+
+- b99f6d5: Fixed `Dialog` content overflowing when no `height` prop is set. The dialog now grows with its content and scrolls when content exceeds the viewport height.
+
+  **Affected components**: Dialog
+
+- 2f581de: Fixed focus ring styles to use React Aria's `[data-focus-visible]` data attribute instead of the native CSS `:focus-visible` pseudo-class. This ensures keyboard focus rings render reliably when focus is managed programmatically by React Aria (e.g. inside a GridList, Menu, or Select).
+
+  **Affected components:** Accordion, Button, ButtonIcon, ButtonLink, Card, List, Menu, Select, ToggleButtonGroup
+
+- 17d6398: Fixed incorrect bottom spacing caused by `Container` using `padding-bottom` for its default bottom spacing. Changed to `margin-bottom` and prevented it from applying when `Container` is used as the `Header` root element.
+
+  **Affected components:** Container, Header
+
+- 2e5c651: Fixed `PluginHeader` to avoid triggering `ResizeObserver loop completed with undelivered notifications` warnings when used in layouts that react to the header height, such as pages that use `FullPage`.
+
+  **Affected components:** PluginHeader
+
+- d4fa5b4: Fixed tab `matchStrategy` matching to ignore query parameters and hash fragments in tab `href` values. Previously, tabs with query params in their `href` (e.g., `/page?group=foo`) would never show as active since matching compared the full `href` string against `location.pathname` which never includes query params.
+
+  **Affected components:** Tabs, PluginHeader
+
+- bc42b60: Fixed Table component to use current `--bui-bg-neutral-1` tokens instead of the removed `--bui-bg-tint` tokens, restoring row hover, selected, pressed, and disabled background colors.
+- 9314ff5: Fixed a bug in the `useTable` hook where the loading skeleton was never shown for `complete` mode when using `getData`. The initial data state was an empty array instead of `undefined`, causing the `Table` component to skip the loading state.
+- f42f4cc: Fixed Table column headers overflowing and wrapping when there is not enough space. Headers now truncate with ellipsis instead.
+
+  **Affected components:** Table
+
+- 1f9682b: Fixed Table row hover, selected, pressed, and disabled background states to use the correct neutral token level based on the container background.
+
+  **Affected components:** Table
+
+- fbd5c5a: Fixed Table rows showing a pointer cursor when not interactive. Rows now only show `cursor: pointer` when they have an `href`, are selectable, or are pressable.
+
+  **Affected components:** Table
+
+- 612c217: Fixed `Table` rows with external `href` values to open in a new tab by automatically applying `target="_blank"` and `rel="noopener noreferrer"`.
+
+  **Affected components**: Table
+
+- 545129a: Updated Table selection checkboxes to use `aria-label` instead of empty fragment children, improving accessibility and removing the unnecessary label gap in the selection cells.
+
+  **Affected components:** Table
+
+- 36987db: Fixed handling of the `style` prop on `Button`, `ButtonIcon`, and `ButtonLink` so that it is now correctly forwarded to the underlying element instead of being silently dropped.
+
+  **Affected components:** Button, ButtonIcon, ButtonLink
+
+- 95702ab: Fixed Link variant default from `'body'` to `'body-medium'` to match actual CSS selectors. The previous default did not correspond to a valid variant value.
+
+  **Affected components:** Link
+
+- 9027b10: Fixed scroll overflow in Menu and Select popover content when constrained by viewport height.
+
+  **Affected components:** Menu, Select
+
+- 7960d54: Added support for native HTML div attributes on the `Flex`, `Grid`, and `Grid.Item` components.
+
+  **Affected components:** Flex, Grid, Grid.Item
+
+- 0559408: Added `virtualized` prop to `Table` component for virtualized rendering of large datasets. Accepts `true` for default row height, `{ rowHeight: number }` for fixed height, or `{ estimatedRowHeight: number }` for variable height rows.
+- 8909359: Fixed focus-visible outline styles for Menu and Select components.
+
+  **Affected components:** Menu, Select
+
+- 12d8afe: Fixed MenuItem `onAction` prop ordering so user-provided `onAction` handlers are chained rather than silently overwritten.
+- aa29b50: Pages created with `PageBlueprint` now render the plugin header by default in the new frontend system.
+- bb66b86: The `Select` trigger now automatically adapts its background colour based on the parent background context.
+
+  **Affected components:** Select
+
+- 4105a78: Merged the internal `PluginHeaderToolbar` component into `PluginHeader`, removing the separate component and its associated types (`PluginHeaderToolbarOwnProps`, `PluginHeaderToolbarProps`) and definition (`PluginHeaderToolbarDefinition`). This is an internal refactor with no changes to the public API of `PluginHeader`.
+
+  **Affected components:** PluginHeader
+
+- 9599697: Updated dependency `globals` to `^17.0.0`.
+- 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
+
+- fcaac3b: Fixed `Card` interactive cards not firing the `onPress` handler when clicking the card surface.
+
+  **Affected components**: Card
+
+- b303857: Fixed `isRequired` prop not being passed to the underlying React Aria field components in TextField, SearchField, and PasswordField. Previously, `isRequired` was consumed locally for the secondary label text but never forwarded, which meant the input elements lacked `aria-required="true"` and React Aria's built-in required validation was not activated.
+
+  **Affected components:** TextField, SearchField, PasswordField
+
+- 934ac03: `SearchField` and `TextField` now automatically adapt their background color based on the parent bg context, stepping up one neutral level (e.g. neutral-1 → neutral-2) when placed on a neutral background. `TextField` also gains a focus ring using the `--bui-ring` token.
+
+  **Affected components:** SearchField, TextField
+
+- cd3cb0f: Improved `useBreakpoint` performance by sharing a single set of `matchMedia` listeners across all component instances instead of creating independent listeners per hook call.
+- 36987db: Extended `AlertProps`, `ContainerProps`, `DialogBodyProps`, and `FieldLabelProps` with native div element props to allow passing attributes like `aria-*` and `data-*`.
+
+  **Affected components:** Alert, Container, DialogBody, FieldLabel
+
 ## 0.13.0-next.2
 
 ### Patch Changes

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__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"};
+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__b3bc0ab8d6 {\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__b3bc0ab8d6 {\n    all: unset;\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .Accordion_bui-AccordionTriggerButton__b3bc0ab8d6 {\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    &[data-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__b3bc0ab8d6 {\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__b3bc0ab8d6 {\n    font-size: var(--bui-font-size-2);\n    line-height: 140%;\n    color: var(--bui-fg-secondary);\n  }\n\n  .Accordion_bui-AccordionTriggerIcon__b3bc0ab8d6 {\n    transition: transform 150ms ease-out;\n    flex-shrink: 0;\n    width: 1rem;\n    height: 1rem;\n\n    .Accordion_bui-Accordion__b3bc0ab8d6[data-expanded='true'] > .Accordion_bui-AccordionTrigger__b3bc0ab8d6 & {\n      transform: rotate(180deg);\n    }\n  }\n\n  .Accordion_bui-AccordionPanel__b3bc0ab8d6 {\n    .Accordion_bui-Accordion__b3bc0ab8d6[data-expanded='true'] > & {\n      padding-top: var(--bui-space-1);\n    }\n  }\n\n  .Accordion_bui-AccordionGroup__b3bc0ab8d6 {\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__b3bc0ab8d6","bui-AccordionTrigger":"Accordion_bui-AccordionTrigger__b3bc0ab8d6","bui-AccordionTriggerButton":"Accordion_bui-AccordionTriggerButton__b3bc0ab8d6","bui-AccordionTriggerTitle":"Accordion_bui-AccordionTriggerTitle__b3bc0ab8d6","bui-AccordionTriggerSubtitle":"Accordion_bui-AccordionTriggerSubtitle__b3bc0ab8d6","bui-AccordionTriggerIcon":"Accordion_bui-AccordionTriggerIcon__b3bc0ab8d6","bui-AccordionPanel":"Accordion_bui-AccordionPanel__b3bc0ab8d6","bui-AccordionGroup":"Accordion_bui-AccordionGroup__b3bc0ab8d6"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/Button/Button.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 2024 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  .Button_bui-Button__ff4efd2527 {\n    --loading-duration: 200ms;\n    --bg: transparent;\n    --bg-hover: transparent;\n    --bg-active: transparent;\n    --fg: inherit;\n\n    position: relative;\n    display: inline-flex;\n    border: none;\n    user-select: none;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    padding: 0;\n    cursor: pointer;\n    border-radius: var(--bui-radius-2);\n    flex-shrink: 0;\n    transition: background-color var(--loading-duration) ease-out,\n      box-shadow var(--loading-duration) ease-out;\n\n    /* Apply variables */\n    color: var(--fg);\n    background-color: var(--bg);\n\n    &:hover {\n      background-color: var(--bg-hover);\n      transition: background-color 150ms ease;\n    }\n\n    &:active {\n      background-color: var(--bg-active);\n    }\n\n    &[data-disabled='true'] {\n      cursor: not-allowed;\n    }\n\n    &[data-loading='true'] {\n      cursor: wait;\n    }\n  }\n\n  .Button_bui-Button__ff4efd2527[data-variant='primary'] {\n    --bg: var(--bui-bg-solid);\n    --bg-hover: var(--bui-bg-solid-hover);\n    --bg-active: var(--bui-bg-solid-pressed);\n    --fg: var(--bui-fg-solid);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg: var(--bui-bg-solid-disabled);\n      --bg-hover: var(--bui-bg-solid-disabled);\n      --bg-active: var(--bui-bg-solid-disabled);\n      --fg: var(--bui-fg-solid-disabled);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n  }\n\n  .Button_bui-Button__ff4efd2527[data-variant='primary'][data-destructive='true'] {\n    /* Custom properties matching future token names (without bui- prefix) */\n    --bg-solid-danger: #dc2626;\n    --bg-solid-danger-hover: #b91c1c;\n    --bg-solid-danger-pressed: #991b1b;\n    --bg-solid-danger-disabled: #fca5a5;\n    --fg-solid-danger: var(--bui-white);\n\n    [data-theme-mode='dark'] & {\n      --bg-solid-danger: #ef4444;\n      --bg-solid-danger-hover: #dc2626;\n      --bg-solid-danger-pressed: #b91c1c;\n      --bg-solid-danger-disabled: #7f1d1d;\n    }\n\n    --bg: var(--bg-solid-danger);\n    --bg-hover: var(--bg-solid-danger-hover);\n    --bg-active: var(--bg-solid-danger-pressed);\n    --fg: var(--fg-solid-danger);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg: var(--bg-solid-danger-disabled);\n      --bg-hover: var(--bg-solid-danger-disabled);\n      --bg-active: var(--bg-solid-danger-disabled);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--bui-border-danger);\n      outline-offset: 2px;\n    }\n  }\n\n  .Button_bui-Button__ff4efd2527[data-variant='secondary'] {\n    --bg: var(--bui-bg-neutral-1);\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg: var(--bui-bg-neutral-2);\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg: var(--bui-bg-neutral-3);\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg: var(--bui-bg-neutral-4);\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .Button_bui-Button__ff4efd2527[data-variant='secondary'][data-destructive='true'] {\n    /* Custom properties for hover/active states (no tokens exist yet) */\n    --bg-danger-hover: #fecaca;\n    --bg-danger-pressed: #fca5a5;\n\n    [data-theme-mode='dark'] & {\n      --bg-danger-hover: #450a0a;\n      --bg-danger-pressed: #7f1d1d;\n    }\n\n    --bg: var(--bui-bg-danger);\n    --bg-hover: var(--bg-danger-hover);\n    --bg-active: var(--bg-danger-pressed);\n    --fg: var(--bui-fg-danger);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      box-shadow: inset 0 0 0 2px var(--bui-border-danger);\n    }\n  }\n\n  .Button_bui-Button__ff4efd2527[data-variant='tertiary'] {\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .Button_bui-Button__ff4efd2527[data-variant='tertiary'][data-destructive='true'] {\n    /* Custom properties for hover/active states (no tokens exist yet) */\n    --bg-danger-hover: #fecaca;\n    --bg-danger-pressed: #fca5a5;\n\n    [data-theme-mode='dark'] & {\n      --bg-danger-hover: #450a0a;\n      --bg-danger-pressed: #7f1d1d;\n    }\n\n    --bg-hover: var(--bui-bg-danger);\n    --bg-active: var(--bg-danger-pressed);\n    --fg: var(--bui-fg-danger);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      box-shadow: inset 0 0 0 2px var(--bui-border-danger);\n    }\n  }\n\n  .Button_bui-Button__ff4efd2527[data-size='small'] {\n    font-size: var(--bui-font-size-3);\n    padding: 0 var(--bui-space-2);\n    height: 2rem;\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Button_bui-Button__ff4efd2527[data-size='medium'] {\n    font-size: var(--bui-font-size-4);\n    padding: 0 var(--bui-space-3);\n    height: 2.5rem;\n\n    svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .Button_bui-ButtonContent__ff4efd2527 {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bui-space-1_5);\n    height: 100%;\n    width: 100%;\n    transition: opacity var(--loading-duration) ease-out;\n\n    .Button_bui-Button__ff4efd2527[data-loading='true'] & {\n      opacity: 0;\n    }\n  }\n\n  .Button_bui-ButtonSpinner__ff4efd2527 {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    opacity: 0;\n    transition: opacity var(--loading-duration) ease-in;\n\n    .Button_bui-Button__ff4efd2527[data-loading='true'] & {\n      opacity: 1;\n    }\n\n    & svg {\n      animation: Button_bui-spin__ff4efd2527 1s linear infinite;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .Button_bui-Button__ff4efd2527 {\n      transition-duration: 50ms;\n    }\n\n    .Button_bui-ButtonContent__ff4efd2527 {\n      transition-duration: 50ms;\n    }\n\n    .Button_bui-ButtonSpinner__ff4efd2527 {\n      transition-duration: 50ms;\n    }\n\n    .Button_bui-ButtonSpinner__ff4efd2527 svg {\n      animation: none;\n    }\n  }\n\n  @keyframes Button_bui-spin__ff4efd2527 {\n    from {\n      transform: rotate(0deg);\n    }\n\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n";
-var styles = {"bui-Button":"Button_bui-Button__ff4efd2527","bui-ButtonContent":"Button_bui-ButtonContent__ff4efd2527","bui-ButtonSpinner":"Button_bui-ButtonSpinner__ff4efd2527","bui-spin":"Button_bui-spin__ff4efd2527"};
+var css_248z = "/*\n * Copyright 2024 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  .Button_bui-Button__310e62cdd3 {\n    --loading-duration: 200ms;\n    --bg: transparent;\n    --bg-hover: transparent;\n    --bg-active: transparent;\n    --fg: inherit;\n\n    position: relative;\n    display: inline-flex;\n    border: none;\n    user-select: none;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    padding: 0;\n    cursor: pointer;\n    border-radius: var(--bui-radius-2);\n    flex-shrink: 0;\n    transition: background-color var(--loading-duration) ease-out,\n      box-shadow var(--loading-duration) ease-out;\n\n    /* Apply variables */\n    color: var(--fg);\n    background-color: var(--bg);\n\n    &:hover {\n      background-color: var(--bg-hover);\n      transition: background-color 150ms ease;\n    }\n\n    &:active {\n      background-color: var(--bg-active);\n    }\n\n    &[data-disabled='true'] {\n      cursor: not-allowed;\n    }\n\n    &[data-loading='true'] {\n      cursor: wait;\n    }\n  }\n\n  .Button_bui-Button__310e62cdd3[data-variant='primary'] {\n    --bg: var(--bui-bg-solid);\n    --bg-hover: var(--bui-bg-solid-hover);\n    --bg-active: var(--bui-bg-solid-pressed);\n    --fg: var(--bui-fg-solid);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg: var(--bui-bg-solid-disabled);\n      --bg-hover: var(--bui-bg-solid-disabled);\n      --bg-active: var(--bui-bg-solid-disabled);\n      --fg: var(--bui-fg-solid-disabled);\n    }\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n  }\n\n  .Button_bui-Button__310e62cdd3[data-variant='primary'][data-destructive='true'] {\n    /* Custom properties matching future token names (without bui- prefix) */\n    --bg-solid-danger: #dc2626;\n    --bg-solid-danger-hover: #b91c1c;\n    --bg-solid-danger-pressed: #991b1b;\n    --bg-solid-danger-disabled: #fca5a5;\n    --fg-solid-danger: var(--bui-white);\n\n    [data-theme-mode='dark'] & {\n      --bg-solid-danger: #ef4444;\n      --bg-solid-danger-hover: #dc2626;\n      --bg-solid-danger-pressed: #b91c1c;\n      --bg-solid-danger-disabled: #7f1d1d;\n    }\n\n    --bg: var(--bg-solid-danger);\n    --bg-hover: var(--bg-solid-danger-hover);\n    --bg-active: var(--bg-solid-danger-pressed);\n    --fg: var(--fg-solid-danger);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg: var(--bg-solid-danger-disabled);\n      --bg-hover: var(--bg-solid-danger-disabled);\n      --bg-active: var(--bg-solid-danger-disabled);\n    }\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--bui-border-danger);\n      outline-offset: 2px;\n    }\n  }\n\n  .Button_bui-Button__310e62cdd3[data-variant='secondary'] {\n    --bg: var(--bui-bg-neutral-1);\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg: var(--bui-bg-neutral-2);\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg: var(--bui-bg-neutral-3);\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg: var(--bui-bg-neutral-4);\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &[data-focus-visible] {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .Button_bui-Button__310e62cdd3[data-variant='secondary'][data-destructive='true'] {\n    /* Custom properties for hover/active states (no tokens exist yet) */\n    --bg-danger-hover: #fecaca;\n    --bg-danger-pressed: #fca5a5;\n\n    [data-theme-mode='dark'] & {\n      --bg-danger-hover: #450a0a;\n      --bg-danger-pressed: #7f1d1d;\n    }\n\n    --bg: var(--bui-bg-danger);\n    --bg-hover: var(--bg-danger-hover);\n    --bg-active: var(--bg-danger-pressed);\n    --fg: var(--bui-fg-danger);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &[data-focus-visible] {\n      box-shadow: inset 0 0 0 2px var(--bui-border-danger);\n    }\n  }\n\n  .Button_bui-Button__310e62cdd3[data-variant='tertiary'] {\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &[data-focus-visible] {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .Button_bui-Button__310e62cdd3[data-variant='tertiary'][data-destructive='true'] {\n    /* Custom properties for hover/active states (no tokens exist yet) */\n    --bg-danger-hover: #fecaca;\n    --bg-danger-pressed: #fca5a5;\n\n    [data-theme-mode='dark'] & {\n      --bg-danger-hover: #450a0a;\n      --bg-danger-pressed: #7f1d1d;\n    }\n\n    --bg-hover: var(--bui-bg-danger);\n    --bg-active: var(--bg-danger-pressed);\n    --fg: var(--bui-fg-danger);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &[data-focus-visible] {\n      box-shadow: inset 0 0 0 2px var(--bui-border-danger);\n    }\n  }\n\n  .Button_bui-Button__310e62cdd3[data-size='small'] {\n    font-size: var(--bui-font-size-3);\n    padding: 0 var(--bui-space-2);\n    height: 2rem;\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Button_bui-Button__310e62cdd3[data-size='medium'] {\n    font-size: var(--bui-font-size-4);\n    padding: 0 var(--bui-space-3);\n    height: 2.5rem;\n\n    svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .Button_bui-ButtonContent__310e62cdd3 {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bui-space-1_5);\n    height: 100%;\n    width: 100%;\n    transition: opacity var(--loading-duration) ease-out;\n\n    .Button_bui-Button__310e62cdd3[data-loading='true'] & {\n      opacity: 0;\n    }\n  }\n\n  .Button_bui-ButtonSpinner__310e62cdd3 {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    opacity: 0;\n    transition: opacity var(--loading-duration) ease-in;\n\n    .Button_bui-Button__310e62cdd3[data-loading='true'] & {\n      opacity: 1;\n    }\n\n    & svg {\n      animation: Button_bui-spin__310e62cdd3 1s linear infinite;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .Button_bui-Button__310e62cdd3 {\n      transition-duration: 50ms;\n    }\n\n    .Button_bui-ButtonContent__310e62cdd3 {\n      transition-duration: 50ms;\n    }\n\n    .Button_bui-ButtonSpinner__310e62cdd3 {\n      transition-duration: 50ms;\n    }\n\n    .Button_bui-ButtonSpinner__310e62cdd3 svg {\n      animation: none;\n    }\n  }\n\n  @keyframes Button_bui-spin__310e62cdd3 {\n    from {\n      transform: rotate(0deg);\n    }\n\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n";
+var styles = {"bui-Button":"Button_bui-Button__310e62cdd3","bui-ButtonContent":"Button_bui-ButtonContent__310e62cdd3","bui-ButtonSpinner":"Button_bui-ButtonSpinner__310e62cdd3","bui-spin":"Button_bui-spin__310e62cdd3"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/ButtonIcon/ButtonIcon.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 2024 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  .ButtonIcon_bui-ButtonIcon__c713a4989b {\n    --loading-duration: 200ms;\n    --bg: transparent;\n    --bg-hover: transparent;\n    --bg-active: transparent;\n    --fg: inherit;\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    user-select: none;\n    padding: 0;\n    cursor: pointer;\n    border-radius: var(--bui-radius-2);\n    flex-shrink: 0;\n    transition: background-color var(--loading-duration) ease-out,\n      box-shadow var(--loading-duration) ease-out;\n\n    /* Apply variables */\n    color: var(--fg);\n    background-color: var(--bg);\n\n    &:hover {\n      background-color: var(--bg-hover);\n      transition: background-color 150ms ease;\n    }\n\n    &:active {\n      background-color: var(--bg-active);\n    }\n\n    &[data-disabled='true'] {\n      cursor: not-allowed;\n    }\n\n    &[data-loading='true'] {\n      cursor: wait;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__c713a4989b[data-variant='primary'] {\n    --bg: var(--bui-bg-solid);\n    --bg-hover: var(--bui-bg-solid-hover);\n    --bg-active: var(--bui-bg-solid-pressed);\n    --fg: var(--bui-fg-solid);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg: var(--bui-bg-solid-disabled);\n      --bg-hover: var(--bui-bg-solid-disabled);\n      --bg-active: var(--bui-bg-solid-disabled);\n      --fg: var(--bui-fg-solid-disabled);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__c713a4989b[data-variant='secondary'] {\n    --bg: var(--bui-bg-neutral-1);\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg: var(--bui-bg-neutral-2);\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg: var(--bui-bg-neutral-3);\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg: var(--bui-bg-neutral-4);\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__c713a4989b[data-variant='tertiary'] {\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__c713a4989b[data-size='small'] {\n    width: 2rem;\n    height: 2rem;\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__c713a4989b[data-size='medium'] {\n    width: 2.5rem;\n    height: 2.5rem;\n\n    svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIconContent__c713a4989b {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    width: 100%;\n    transition: opacity var(--loading-duration) ease-out;\n\n    .ButtonIcon_bui-ButtonIcon__c713a4989b[data-loading='true'] & {\n      opacity: 0;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIconSpinner__c713a4989b {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    opacity: 0;\n    transition: opacity var(--loading-duration) ease-in;\n\n    .ButtonIcon_bui-ButtonIcon__c713a4989b[data-loading='true'] & {\n      opacity: 1;\n    }\n\n    & svg {\n      animation: ButtonIcon_bui-spin__c713a4989b 1s linear infinite;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ButtonIcon_bui-ButtonIcon__c713a4989b {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconContent__c713a4989b {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconSpinner__c713a4989b {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconSpinner__c713a4989b svg {\n      animation: none;\n    }\n  }\n}\n";
-var styles = {"bui-ButtonIcon":"ButtonIcon_bui-ButtonIcon__c713a4989b","bui-ButtonIconContent":"ButtonIcon_bui-ButtonIconContent__c713a4989b","bui-ButtonIconSpinner":"ButtonIcon_bui-ButtonIconSpinner__c713a4989b","bui-spin":"ButtonIcon_bui-spin__c713a4989b"};
+var css_248z = "/*\n * Copyright 2024 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  .ButtonIcon_bui-ButtonIcon__8d8d9edbaf {\n    --loading-duration: 200ms;\n    --bg: transparent;\n    --bg-hover: transparent;\n    --bg-active: transparent;\n    --fg: inherit;\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    user-select: none;\n    padding: 0;\n    cursor: pointer;\n    border-radius: var(--bui-radius-2);\n    flex-shrink: 0;\n    transition: background-color var(--loading-duration) ease-out,\n      box-shadow var(--loading-duration) ease-out;\n\n    /* Apply variables */\n    color: var(--fg);\n    background-color: var(--bg);\n\n    &:hover {\n      background-color: var(--bg-hover);\n      transition: background-color 150ms ease;\n    }\n\n    &:active {\n      background-color: var(--bg-active);\n    }\n\n    &[data-disabled='true'] {\n      cursor: not-allowed;\n    }\n\n    &[data-loading='true'] {\n      cursor: wait;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__8d8d9edbaf[data-variant='primary'] {\n    --bg: var(--bui-bg-solid);\n    --bg-hover: var(--bui-bg-solid-hover);\n    --bg-active: var(--bui-bg-solid-pressed);\n    --fg: var(--bui-fg-solid);\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg: var(--bui-bg-solid-disabled);\n      --bg-hover: var(--bui-bg-solid-disabled);\n      --bg-active: var(--bui-bg-solid-disabled);\n      --fg: var(--bui-fg-solid-disabled);\n    }\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__8d8d9edbaf[data-variant='secondary'] {\n    --bg: var(--bui-bg-neutral-1);\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg: var(--bui-bg-neutral-2);\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg: var(--bui-bg-neutral-3);\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg: var(--bui-bg-neutral-4);\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &[data-focus-visible] {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__8d8d9edbaf[data-variant='tertiary'] {\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &[data-focus-visible] {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__8d8d9edbaf[data-size='small'] {\n    width: 2rem;\n    height: 2rem;\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__8d8d9edbaf[data-size='medium'] {\n    width: 2.5rem;\n    height: 2.5rem;\n\n    svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIconContent__8d8d9edbaf {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    width: 100%;\n    transition: opacity var(--loading-duration) ease-out;\n\n    .ButtonIcon_bui-ButtonIcon__8d8d9edbaf[data-loading='true'] & {\n      opacity: 0;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIconSpinner__8d8d9edbaf {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    opacity: 0;\n    transition: opacity var(--loading-duration) ease-in;\n\n    .ButtonIcon_bui-ButtonIcon__8d8d9edbaf[data-loading='true'] & {\n      opacity: 1;\n    }\n\n    & svg {\n      animation: ButtonIcon_bui-spin__8d8d9edbaf 1s linear infinite;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ButtonIcon_bui-ButtonIcon__8d8d9edbaf {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconContent__8d8d9edbaf {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconSpinner__8d8d9edbaf {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconSpinner__8d8d9edbaf svg {\n      animation: none;\n    }\n  }\n}\n";
+var styles = {"bui-ButtonIcon":"ButtonIcon_bui-ButtonIcon__8d8d9edbaf","bui-ButtonIconContent":"ButtonIcon_bui-ButtonIconContent__8d8d9edbaf","bui-ButtonIconSpinner":"ButtonIcon_bui-ButtonIconSpinner__8d8d9edbaf","bui-spin":"ButtonIcon_bui-spin__8d8d9edbaf"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/ButtonLink/ButtonLink.esm.js

@@ -3,7 +3,6 @@ import { forwardRef } from 'react';
 import { Link } from 'react-aria-components';
 import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
 import { ButtonLinkDefinition } from './definition.esm.js';
-import { InternalLinkProvider } from '../InternalLinkProvider/InternalLinkProvider.esm.js';
 import { getNodeText } from '../../analytics/getNodeText.esm.js';
 
 const ButtonLink = forwardRef(
@@ -20,7 +19,7 @@ const ButtonLink = forwardRef(
         attributes: { to: String(restProps.href ?? "") }
       });
     };
-    return /* @__PURE__ */ jsx(InternalLinkProvider, { href: restProps.href, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(
       Link,
       {
         className: classes.root,
@@ -34,7 +33,7 @@ const ButtonLink = forwardRef(
           iconEnd
         ] })
       }
-    ) });
+    );
   }
 );
 ButtonLink.displayName = "ButtonLink";

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { Link as RALink } from 'react-aria-components';\nimport type { ButtonLinkProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { ButtonLinkDefinition } from './definition';\nimport { InternalLinkProvider } from '../InternalLinkProvider';\nimport { getNodeText } from '../../analytics/getNodeText';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n  (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n    const { ownProps, restProps, dataAttributes, analytics } = useDefinition(\n      ButtonLinkDefinition,\n      props,\n    );\n    const { classes, iconStart, iconEnd, children } = ownProps;\n\n    const handlePress: typeof restProps.onPress = e => {\n      restProps.onPress?.(e);\n      const text =\n        restProps['aria-label'] ??\n        getNodeText(children) ??\n        String(restProps.href ?? '');\n      analytics.captureEvent('click', text, {\n        attributes: { to: String(restProps.href ?? '') },\n      });\n    };\n\n    return (\n      <InternalLinkProvider href={restProps.href}>\n        <RALink\n          className={classes.root}\n          ref={ref}\n          {...dataAttributes}\n          {...restProps}\n          onPress={handlePress}\n        >\n          <span className={classes.content}>\n            {iconStart}\n            {children}\n            {iconEnd}\n          </span>\n        </RALink>\n      </InternalLinkProvider>\n    );\n  },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;;;AAyBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAgB,WAAU,GAAI,aAAA;AAAA,MACzD,oBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,OAAA,EAAS,UAAS,GAAI,QAAA;AAElD,IAAA,MAAM,cAAwC,CAAA,CAAA,KAAK;AACjD,MAAA,SAAA,CAAU,UAAU,CAAC,CAAA;AACrB,MAAA,MAAM,IAAA,GACJ,SAAA,CAAU,YAAY,CAAA,IACtB,WAAA,CAAY,QAAQ,CAAA,IACpB,MAAA,CAAO,SAAA,CAAU,IAAA,IAAQ,EAAE,CAAA;AAC7B,MAAA,SAAA,CAAU,YAAA,CAAa,SAAS,IAAA,EAAM;AAAA,QACpC,YAAY,EAAE,EAAA,EAAI,OAAO,SAAA,CAAU,IAAA,IAAQ,EAAE,CAAA;AAAE,OAChD,CAAA;AAAA,IACH,CAAA;AAEA,IAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,IAAA,EAAM,SAAA,CAAU,IAAA,EACpC,QAAA,kBAAA,GAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,OAAA,EAAS,WAAA;AAAA,QAET,QAAA,kBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAA,CAAQ,OAAA,EACtB,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA,SAAA,EACH;AAAA;AAAA,KACF,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
+{"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { Link as RALink } from 'react-aria-components';\nimport type { ButtonLinkProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { ButtonLinkDefinition } from './definition';\nimport { getNodeText } from '../../analytics/getNodeText';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n  (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n    const { ownProps, restProps, dataAttributes, analytics } = useDefinition(\n      ButtonLinkDefinition,\n      props,\n    );\n    const { classes, iconStart, iconEnd, children } = ownProps;\n\n    const handlePress: typeof restProps.onPress = e => {\n      restProps.onPress?.(e);\n      const text =\n        restProps['aria-label'] ??\n        getNodeText(children) ??\n        String(restProps.href ?? '');\n      analytics.captureEvent('click', text, {\n        attributes: { to: String(restProps.href ?? '') },\n      });\n    };\n\n    return (\n      <RALink\n        className={classes.root}\n        ref={ref}\n        {...dataAttributes}\n        {...restProps}\n        onPress={handlePress}\n      >\n        <span className={classes.content}>\n          {iconStart}\n          {children}\n          {iconEnd}\n        </span>\n      </RALink>\n    );\n  },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;;AAwBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAgB,WAAU,GAAI,aAAA;AAAA,MACzD,oBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,OAAA,EAAS,UAAS,GAAI,QAAA;AAElD,IAAA,MAAM,cAAwC,CAAA,CAAA,KAAK;AACjD,MAAA,SAAA,CAAU,UAAU,CAAC,CAAA;AACrB,MAAA,MAAM,IAAA,GACJ,SAAA,CAAU,YAAY,CAAA,IACtB,WAAA,CAAY,QAAQ,CAAA,IACpB,MAAA,CAAO,SAAA,CAAU,IAAA,IAAQ,EAAE,CAAA;AAC7B,MAAA,SAAA,CAAU,YAAA,CAAa,SAAS,IAAA,EAAM;AAAA,QACpC,YAAY,EAAE,EAAA,EAAI,OAAO,SAAA,CAAU,IAAA,IAAQ,EAAE,CAAA;AAAE,OAChD,CAAA;AAAA,IACH,CAAA;AAEA,IAAA,uBACE,GAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,OAAA,EAAS,WAAA;AAAA,QAET,QAAA,kBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAA,CAAQ,OAAA,EACtB,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA,SAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

package/dist/components/ButtonLink/ButtonLink.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 2026 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  .ButtonLink_bui-ButtonLink__12fa4bd0e1 {\n    --bg: transparent;\n    --bg-hover: transparent;\n    --bg-active: transparent;\n    --fg: inherit;\n\n    position: relative;\n    display: inline-flex;\n    border: none;\n    user-select: none;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    padding: 0;\n    cursor: pointer;\n    border-radius: var(--bui-radius-2);\n    flex-shrink: 0;\n    text-decoration: none;\n    transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n\n    /* Apply variables */\n    color: var(--fg);\n    background-color: var(--bg);\n\n    &:hover {\n      background-color: var(--bg-hover);\n      transition: background-color 150ms ease;\n    }\n\n    &:active {\n      background-color: var(--bg-active);\n    }\n\n    &[data-disabled='true'] {\n      cursor: not-allowed;\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__12fa4bd0e1[data-variant='primary'] {\n    --bg: var(--bui-bg-solid);\n    --bg-hover: var(--bui-bg-solid-hover);\n    --bg-active: var(--bui-bg-solid-pressed);\n    --fg: var(--bui-fg-solid);\n\n    &[data-disabled='true'] {\n      --bg: var(--bui-bg-solid-disabled);\n      --bg-hover: var(--bui-bg-solid-disabled);\n      --bg-active: var(--bui-bg-solid-disabled);\n      --fg: var(--bui-fg-solid-disabled);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__12fa4bd0e1[data-variant='secondary'] {\n    --bg: var(--bui-bg-neutral-1);\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg: var(--bui-bg-neutral-2);\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg: var(--bui-bg-neutral-3);\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg: var(--bui-bg-neutral-4);\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__12fa4bd0e1[data-variant='tertiary'] {\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__12fa4bd0e1[data-size='small'] {\n    font-size: var(--bui-font-size-3);\n    padding: 0 var(--bui-space-2);\n    height: 2rem;\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__12fa4bd0e1[data-size='medium'] {\n    font-size: var(--bui-font-size-4);\n    padding: 0 var(--bui-space-3);\n    height: 2.5rem;\n\n    svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .ButtonLink_bui-ButtonLinkContent__12fa4bd0e1 {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bui-space-1_5);\n    height: 100%;\n    width: 100%;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ButtonLink_bui-ButtonLink__12fa4bd0e1 {\n      transition-duration: 50ms;\n    }\n  }\n}\n";
-var styles = {"bui-ButtonLink":"ButtonLink_bui-ButtonLink__12fa4bd0e1","bui-ButtonLinkContent":"ButtonLink_bui-ButtonLinkContent__12fa4bd0e1"};
+var css_248z = "/*\n * Copyright 2026 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  .ButtonLink_bui-ButtonLink__053e4cbdce {\n    --bg: transparent;\n    --bg-hover: transparent;\n    --bg-active: transparent;\n    --fg: inherit;\n\n    position: relative;\n    display: inline-flex;\n    border: none;\n    user-select: none;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    padding: 0;\n    cursor: pointer;\n    border-radius: var(--bui-radius-2);\n    flex-shrink: 0;\n    text-decoration: none;\n    transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n\n    /* Apply variables */\n    color: var(--fg);\n    background-color: var(--bg);\n\n    &:hover {\n      background-color: var(--bg-hover);\n      transition: background-color 150ms ease;\n    }\n\n    &:active {\n      background-color: var(--bg-active);\n    }\n\n    &[data-disabled='true'] {\n      cursor: not-allowed;\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__053e4cbdce[data-variant='primary'] {\n    --bg: var(--bui-bg-solid);\n    --bg-hover: var(--bui-bg-solid-hover);\n    --bg-active: var(--bui-bg-solid-pressed);\n    --fg: var(--bui-fg-solid);\n\n    &[data-disabled='true'] {\n      --bg: var(--bui-bg-solid-disabled);\n      --bg-hover: var(--bui-bg-solid-disabled);\n      --bg-active: var(--bui-bg-solid-disabled);\n      --fg: var(--bui-fg-solid-disabled);\n    }\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__053e4cbdce[data-variant='secondary'] {\n    --bg: var(--bui-bg-neutral-1);\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg: var(--bui-bg-neutral-2);\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg: var(--bui-bg-neutral-3);\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg: var(--bui-bg-neutral-4);\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &[data-focus-visible] {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__053e4cbdce[data-variant='tertiary'] {\n    --bg-hover: var(--bui-bg-neutral-1-hover);\n    --bg-active: var(--bui-bg-neutral-1-pressed);\n    --fg: var(--bui-fg-primary);\n\n    &[data-on-bg='neutral-1'] {\n      --bg-hover: var(--bui-bg-neutral-2-hover);\n      --bg-active: var(--bui-bg-neutral-2-pressed);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      --bg-hover: var(--bui-bg-neutral-3-hover);\n      --bg-active: var(--bui-bg-neutral-3-pressed);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      --bg-hover: var(--bui-bg-neutral-4-hover);\n      --bg-active: var(--bui-bg-neutral-4-pressed);\n    }\n\n    &[data-disabled='true'] {\n      --bg-hover: var(--bg);\n      --bg-active: var(--bg);\n      --fg: var(--bui-fg-disabled);\n    }\n\n    &[data-focus-visible] {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__053e4cbdce[data-size='small'] {\n    font-size: var(--bui-font-size-3);\n    padding: 0 var(--bui-space-2);\n    height: 2rem;\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .ButtonLink_bui-ButtonLink__053e4cbdce[data-size='medium'] {\n    font-size: var(--bui-font-size-4);\n    padding: 0 var(--bui-space-3);\n    height: 2.5rem;\n\n    svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .ButtonLink_bui-ButtonLinkContent__053e4cbdce {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bui-space-1_5);\n    height: 100%;\n    width: 100%;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ButtonLink_bui-ButtonLink__053e4cbdce {\n      transition-duration: 50ms;\n    }\n  }\n}\n";
+var styles = {"bui-ButtonLink":"ButtonLink_bui-ButtonLink__053e4cbdce","bui-ButtonLinkContent":"ButtonLink_bui-ButtonLinkContent__053e4cbdce"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/Card/Card.esm.js

@@ -35,7 +35,7 @@ const Card = forwardRef((props, ref) => {
       if (window.getSelection()?.toString()) return;
       triggerRef.current.dispatchEvent(
         new MouseEvent("click", {
-          bubbles: false,
+          bubbles: true,
           cancelable: true,
           ctrlKey: e.ctrlKey,
           metaKey: e.metaKey,

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

@@ -1 +1 @@
-{"version":3,"file":"Card.esm.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["/*\n * Copyright 2024 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, useCallback, useRef } from 'react';\nimport { Button as RAButton } from 'react-aria-components';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  CardDefinition,\n  CardHeaderDefinition,\n  CardBodyDefinition,\n  CardFooterDefinition,\n} from './definition';\nimport type {\n  CardProps,\n  CardHeaderProps,\n  CardBodyProps,\n  CardFooterProps,\n} from './types';\nimport { Box } from '../Box/Box';\nimport { Link } from '../Link';\n\nconst INTERACTIVE_ELEMENT_SELECTOR =\n  'a[href],button,input,select,textarea,[role=\"button\"],[role=\"link\"],[tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Card component.\n *\n * @public\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {\n  const { ownProps, restProps, dataAttributes } = useDefinition(\n    CardDefinition,\n    props,\n  );\n  const {\n    classes,\n    children,\n    onPress,\n    href,\n    label,\n    target: linkTarget,\n    rel,\n    download,\n  } = ownProps;\n  const isInteractive = !!(onPress || href);\n\n  const triggerRef = useRef<HTMLAnchorElement | HTMLButtonElement>(null);\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!isInteractive || !triggerRef.current) return;\n\n      // Don't delegate if the click target is the trigger itself\n      if (triggerRef.current.contains(e.target as Node)) return;\n\n      // Don't delegate if the user clicked a nested interactive element\n      const targetNode = e.target as Node | null;\n      const targetElement =\n        targetNode instanceof Element ? targetNode : targetNode?.parentElement;\n      if (targetElement?.closest(INTERACTIVE_ELEMENT_SELECTOR)) return;\n\n      // Don't delegate if the user is selecting text\n      if (window.getSelection()?.toString()) return;\n\n      triggerRef.current.dispatchEvent(\n        new MouseEvent('click', {\n          bubbles: false,\n          cancelable: true,\n          ctrlKey: e.ctrlKey,\n          metaKey: e.metaKey,\n          shiftKey: e.shiftKey,\n        }),\n      );\n    },\n    [isInteractive],\n  );\n\n  return (\n    <Box\n      as=\"article\"\n      bg=\"neutral\"\n      ref={ref}\n      className={classes.root}\n      data-interactive={isInteractive || undefined}\n      {...dataAttributes}\n      {...restProps}\n      onClick={isInteractive ? handleClick : undefined}\n    >\n      {href && (\n        <Link\n          ref={triggerRef as React.Ref<HTMLAnchorElement>}\n          className={classes.trigger}\n          href={href}\n          target={linkTarget}\n          rel={rel}\n          download={download}\n          aria-label={label}\n        />\n      )}\n      {onPress && !href && (\n        <RAButton\n          ref={triggerRef as React.Ref<HTMLButtonElement>}\n          className={classes.trigger}\n          onPress={onPress}\n          aria-label={label}\n        />\n      )}\n      {children}\n    </Box>\n  );\n});\n\nCard.displayName = 'Card';\n\n/**\n * CardHeader component.\n *\n * @public\n */\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(CardHeaderDefinition, props);\n    const { classes, children } = ownProps;\n\n    return (\n      <div ref={ref} className={classes.root} {...restProps}>\n        {children}\n      </div>\n    );\n  },\n);\n\nCardHeader.displayName = 'CardHeader';\n\n/**\n * CardBody component.\n *\n * @public\n */\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(CardBodyDefinition, props);\n    const { classes, children } = ownProps;\n\n    return (\n      <div ref={ref} className={classes.root} {...restProps}>\n        {children}\n      </div>\n    );\n  },\n);\n\nCardBody.displayName = 'CardBody';\n\n/**\n * CardFooter component.\n *\n * @public\n */\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(CardFooterDefinition, props);\n    const { classes, children } = ownProps;\n\n    return (\n      <div ref={ref} className={classes.root} {...restProps}>\n        {children}\n      </div>\n    );\n  },\n);\n\nCardFooter.displayName = 'CardFooter';\n"],"names":["RAButton"],"mappings":"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"}
+{"version":3,"file":"Card.esm.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["/*\n * Copyright 2024 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, useCallback, useRef } from 'react';\nimport { Button as RAButton } from 'react-aria-components';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  CardDefinition,\n  CardHeaderDefinition,\n  CardBodyDefinition,\n  CardFooterDefinition,\n} from './definition';\nimport type {\n  CardProps,\n  CardHeaderProps,\n  CardBodyProps,\n  CardFooterProps,\n} from './types';\nimport { Box } from '../Box/Box';\nimport { Link } from '../Link';\n\nconst INTERACTIVE_ELEMENT_SELECTOR =\n  'a[href],button,input,select,textarea,[role=\"button\"],[role=\"link\"],[tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Card component.\n *\n * @public\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {\n  const { ownProps, restProps, dataAttributes } = useDefinition(\n    CardDefinition,\n    props,\n  );\n  const {\n    classes,\n    children,\n    onPress,\n    href,\n    label,\n    target: linkTarget,\n    rel,\n    download,\n  } = ownProps;\n  const isInteractive = !!(onPress || href);\n\n  const triggerRef = useRef<HTMLAnchorElement | HTMLButtonElement>(null);\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!isInteractive || !triggerRef.current) return;\n\n      // Don't delegate if the click target is the trigger itself\n      if (triggerRef.current.contains(e.target as Node)) return;\n\n      // Don't delegate if the user clicked a nested interactive element\n      const targetNode = e.target as Node | null;\n      const targetElement =\n        targetNode instanceof Element ? targetNode : targetNode?.parentElement;\n      if (targetElement?.closest(INTERACTIVE_ELEMENT_SELECTOR)) return;\n\n      // Don't delegate if the user is selecting text\n      if (window.getSelection()?.toString()) return;\n\n      triggerRef.current.dispatchEvent(\n        new MouseEvent('click', {\n          bubbles: true,\n          cancelable: true,\n          ctrlKey: e.ctrlKey,\n          metaKey: e.metaKey,\n          shiftKey: e.shiftKey,\n        }),\n      );\n    },\n    [isInteractive],\n  );\n\n  return (\n    <Box\n      as=\"article\"\n      bg=\"neutral\"\n      ref={ref}\n      className={classes.root}\n      data-interactive={isInteractive || undefined}\n      {...dataAttributes}\n      {...restProps}\n      onClick={isInteractive ? handleClick : undefined}\n    >\n      {href && (\n        <Link\n          ref={triggerRef as React.Ref<HTMLAnchorElement>}\n          className={classes.trigger}\n          href={href}\n          target={linkTarget}\n          rel={rel}\n          download={download}\n          aria-label={label}\n        />\n      )}\n      {onPress && !href && (\n        <RAButton\n          ref={triggerRef as React.Ref<HTMLButtonElement>}\n          className={classes.trigger}\n          onPress={onPress}\n          aria-label={label}\n        />\n      )}\n      {children}\n    </Box>\n  );\n});\n\nCard.displayName = 'Card';\n\n/**\n * CardHeader component.\n *\n * @public\n */\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(CardHeaderDefinition, props);\n    const { classes, children } = ownProps;\n\n    return (\n      <div ref={ref} className={classes.root} {...restProps}>\n        {children}\n      </div>\n    );\n  },\n);\n\nCardHeader.displayName = 'CardHeader';\n\n/**\n * CardBody component.\n *\n * @public\n */\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(CardBodyDefinition, props);\n    const { classes, children } = ownProps;\n\n    return (\n      <div ref={ref} className={classes.root} {...restProps}>\n        {children}\n      </div>\n    );\n  },\n);\n\nCardBody.displayName = 'CardBody';\n\n/**\n * CardFooter component.\n *\n * @public\n */\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(CardFooterDefinition, props);\n    const { classes, children } = ownProps;\n\n    return (\n      <div ref={ref} className={classes.root} {...restProps}>\n        {children}\n      </div>\n    );\n  },\n);\n\nCardFooter.displayName = 'CardFooter';\n"],"names":["RAButton"],"mappings":";;;;;;;;;AAkCA,MAAM,4BAAA,GACJ,oGAAA;AAOK,MAAM,IAAA,GAAO,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACxE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,IAC9C,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM;AAAA,IACJ,OAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,MAAA,EAAQ,UAAA;AAAA,IACR,GAAA;AAAA,IACA;AAAA,GACF,GAAI,QAAA;AACJ,EAAA,MAAM,aAAA,GAAgB,CAAC,EAAE,OAAA,IAAW,IAAA,CAAA;AAEpC,EAAA,MAAM,UAAA,GAAa,OAA8C,IAAI,CAAA;AAErE,EAAA,MAAM,WAAA,GAAc,WAAA;AAAA,IAClB,CAAC,CAAA,KAAwC;AACvC,MAAA,IAAI,CAAC,aAAA,IAAiB,CAAC,UAAA,CAAW,OAAA,EAAS;AAG3C,MAAA,IAAI,UAAA,CAAW,OAAA,CAAQ,QAAA,CAAS,CAAA,CAAE,MAAc,CAAA,EAAG;AAGnD,MAAA,MAAM,aAAa,CAAA,CAAE,MAAA;AACrB,MAAA,MAAM,aAAA,GACJ,UAAA,YAAsB,OAAA,GAAU,UAAA,GAAa,UAAA,EAAY,aAAA;AAC3D,MAAA,IAAI,aAAA,EAAe,OAAA,CAAQ,4BAA4B,CAAA,EAAG;AAG1D,MAAA,IAAI,MAAA,CAAO,YAAA,EAAa,EAAG,QAAA,EAAS,EAAG;AAEvC,MAAA,UAAA,CAAW,OAAA,CAAQ,aAAA;AAAA,QACjB,IAAI,WAAW,OAAA,EAAS;AAAA,UACtB,OAAA,EAAS,IAAA;AAAA,UACT,UAAA,EAAY,IAAA;AAAA,UACZ,SAAS,CAAA,CAAE,OAAA;AAAA,UACX,SAAS,CAAA,CAAE,OAAA;AAAA,UACX,UAAU,CAAA,CAAE;AAAA,SACb;AAAA,OACH;AAAA,IACF,CAAA;AAAA,IACA,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAG,SAAA;AAAA,MACH,EAAA,EAAG,SAAA;AAAA,MACH,GAAA;AAAA,MACA,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,oBAAkB,aAAA,IAAiB,MAAA;AAAA,MAClC,GAAG,cAAA;AAAA,MACH,GAAG,SAAA;AAAA,MACJ,OAAA,EAAS,gBAAgB,WAAA,GAAc,MAAA;AAAA,MAEtC,QAAA,EAAA;AAAA,QAAA,IAAA,oBACC,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,UAAA;AAAA,YACL,WAAW,OAAA,CAAQ,OAAA;AAAA,YACnB,IAAA;AAAA,YACA,MAAA,EAAQ,UAAA;AAAA,YACR,GAAA;AAAA,YACA,QAAA;AAAA,YACA,YAAA,EAAY;AAAA;AAAA,SACd;AAAA,QAED,OAAA,IAAW,CAAC,IAAA,oBACX,GAAA;AAAA,UAACA,MAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,UAAA;AAAA,YACL,WAAW,OAAA,CAAQ,OAAA;AAAA,YACnB,OAAA;AAAA,YACA,YAAA,EAAY;AAAA;AAAA,SACd;AAAA,QAED;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;AAOZ,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,sBAAsB,KAAK,CAAA;AACzE,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAS,GAAI,QAAA;AAE9B,IAAA,uBACE,GAAA,CAAC,SAAI,GAAA,EAAU,SAAA,EAAW,QAAQ,IAAA,EAAO,GAAG,WACzC,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAOlB,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,oBAAoB,KAAK,CAAA;AACvE,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAS,GAAI,QAAA;AAE9B,IAAA,uBACE,GAAA,CAAC,SAAI,GAAA,EAAU,SAAA,EAAW,QAAQ,IAAA,EAAO,GAAG,WACzC,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;AAOhB,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,sBAAsB,KAAK,CAAA;AACzE,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAS,GAAI,QAAA;AAE9B,IAAA,uBACE,GAAA,CAAC,SAAI,GAAA,EAAU,SAAA,EAAW,QAAQ,IAAA,EAAO,GAAG,WACzC,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

package/dist/components/Card/Card.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  .Card_bui-Card__a35e7cb59d {\n    display: flex;\n    flex-direction: column;\n    border-radius: var(--bui-radius-3);\n    color: var(--bui-fg-primary);\n    overflow: auto;\n    min-height: 0;\n    width: 100%;\n    position: relative;\n    padding: var(--bui-space-3);\n  }\n\n  .Card_bui-Card__a35e7cb59d[data-bg='neutral-1'] {\n    --bui-card-bg: var(--bui-bg-neutral-1);\n  }\n\n  .Card_bui-Card__a35e7cb59d[data-bg='neutral-2'] {\n    --bui-card-bg: var(--bui-bg-neutral-2);\n  }\n\n  .Card_bui-Card__a35e7cb59d[data-bg='neutral-3'] {\n    --bui-card-bg: var(--bui-bg-neutral-3);\n  }\n\n  .Card_bui-Card__a35e7cb59d:has(.Card_bui-CardHeader__a35e7cb59d, .Card_bui-CardBody__a35e7cb59d, .Card_bui-CardFooter__a35e7cb59d) {\n    padding: 0;\n  }\n\n  /*\n   * Cursor and hover tint are applied at the card level so they cover the\n   * entire surface.\n   */\n  .Card_bui-Card__a35e7cb59d[data-interactive] {\n    cursor: pointer;\n\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: color-mix(in srgb, currentColor 5%, transparent);\n      border-radius: inherit;\n      pointer-events: none;\n      z-index: 3;\n      opacity: 0;\n      transition: opacity 200ms ease-in-out;\n    }\n\n    &:hover::after {\n      opacity: 1;\n    }\n  }\n\n  .Card_bui-Card__a35e7cb59d[data-interactive]:has(.Card_bui-CardTrigger__a35e7cb59d:focus-visible) {\n    outline: 2px solid var(--bui-ring);\n    outline-offset: -2px;\n  }\n\n  .Card_bui-CardTrigger__a35e7cb59d {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    clip-path: inset(100%);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  .Card_bui-CardHeader__a35e7cb59d {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-3);\n  }\n\n  .Card_bui-CardBody__a35e7cb59d {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-3);\n  }\n\n  @keyframes Card_bui-card-body-shadow__a35e7cb59d {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  .Card_bui-Card__a35e7cb59d:has(.Card_bui-CardHeader__a35e7cb59d) .Card_bui-CardBody__a35e7cb59d {\n    padding-block-start: 0;\n\n    &::before {\n      content: '';\n      position: sticky;\n      top: 0;\n      display: block;\n      height: 1.5rem;\n      margin-bottom: -1.5rem;\n      background: linear-gradient(\n        to bottom,\n        var(--bui-card-bg),\n        rgb(from var(--bui-card-bg) r g b / 0)\n      );\n      pointer-events: none;\n      opacity: 0;\n      animation: Card_bui-card-body-shadow__a35e7cb59d linear both;\n      animation-timeline: scroll();\n      animation-range: 0px 2.5rem;\n    }\n  }\n\n  .Card_bui-Card__a35e7cb59d:has(.Card_bui-CardFooter__a35e7cb59d) .Card_bui-CardBody__a35e7cb59d {\n    padding-block-end: 0;\n\n    &::after {\n      content: '';\n      position: sticky;\n      bottom: 0;\n      display: block;\n      height: 1.5rem;\n      margin-top: -1.5rem;\n      background: linear-gradient(\n        to top,\n        var(--bui-card-bg),\n        rgb(from var(--bui-card-bg) r g b / 0)\n      );\n      pointer-events: none;\n      opacity: 0;\n      animation: Card_bui-card-body-shadow__a35e7cb59d linear forwards,\n        Card_bui-card-body-shadow__a35e7cb59d linear forwards reverse;\n      animation-timeline: scroll(), scroll();\n      animation-range: 0px 1px, calc(100% - 2.5rem) 100%;\n    }\n  }\n\n  .Card_bui-CardFooter__a35e7cb59d {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-3);\n  }\n}\n";
-var styles = {"bui-Card":"Card_bui-Card__a35e7cb59d","bui-CardHeader":"Card_bui-CardHeader__a35e7cb59d","bui-CardBody":"Card_bui-CardBody__a35e7cb59d","bui-CardFooter":"Card_bui-CardFooter__a35e7cb59d","bui-CardTrigger":"Card_bui-CardTrigger__a35e7cb59d","bui-card-body-shadow":"Card_bui-card-body-shadow__a35e7cb59d"};
+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  .Card_bui-Card__d4e76c810a {\n    display: flex;\n    flex-direction: column;\n    border-radius: var(--bui-radius-3);\n    color: var(--bui-fg-primary);\n    overflow: auto;\n    min-height: 0;\n    width: 100%;\n    position: relative;\n    padding: var(--bui-space-3);\n  }\n\n  .Card_bui-Card__d4e76c810a[data-bg='neutral-1'] {\n    --bui-card-bg: var(--bui-bg-neutral-1);\n  }\n\n  .Card_bui-Card__d4e76c810a[data-bg='neutral-2'] {\n    --bui-card-bg: var(--bui-bg-neutral-2);\n  }\n\n  .Card_bui-Card__d4e76c810a[data-bg='neutral-3'] {\n    --bui-card-bg: var(--bui-bg-neutral-3);\n  }\n\n  .Card_bui-Card__d4e76c810a:has(.Card_bui-CardHeader__d4e76c810a, .Card_bui-CardBody__d4e76c810a, .Card_bui-CardFooter__d4e76c810a) {\n    padding: 0;\n  }\n\n  /*\n   * Cursor and hover tint are applied at the card level so they cover the\n   * entire surface.\n   */\n  .Card_bui-Card__d4e76c810a[data-interactive] {\n    cursor: pointer;\n\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: color-mix(in srgb, currentColor 5%, transparent);\n      border-radius: inherit;\n      pointer-events: none;\n      z-index: 3;\n      opacity: 0;\n      transition: opacity 200ms ease-in-out;\n    }\n\n    &:hover::after {\n      opacity: 1;\n    }\n  }\n\n  .Card_bui-Card__d4e76c810a[data-interactive]:has(.Card_bui-CardTrigger__d4e76c810a[data-focus-visible]) {\n    outline: 2px solid var(--bui-ring);\n    outline-offset: -2px;\n  }\n\n  .Card_bui-CardTrigger__d4e76c810a {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    clip-path: inset(100%);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  .Card_bui-CardHeader__d4e76c810a {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-3);\n  }\n\n  .Card_bui-CardBody__d4e76c810a {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-3);\n  }\n\n  @keyframes Card_bui-card-body-shadow__d4e76c810a {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  .Card_bui-Card__d4e76c810a:has(.Card_bui-CardHeader__d4e76c810a) .Card_bui-CardBody__d4e76c810a {\n    padding-block-start: 0;\n\n    &::before {\n      content: '';\n      position: sticky;\n      top: 0;\n      display: block;\n      height: 1.5rem;\n      margin-bottom: -1.5rem;\n      background: linear-gradient(\n        to bottom,\n        var(--bui-card-bg),\n        rgb(from var(--bui-card-bg) r g b / 0)\n      );\n      pointer-events: none;\n      opacity: 0;\n      animation: Card_bui-card-body-shadow__d4e76c810a linear both;\n      animation-timeline: scroll();\n      animation-range: 0px 2.5rem;\n    }\n  }\n\n  .Card_bui-Card__d4e76c810a:has(.Card_bui-CardFooter__d4e76c810a) .Card_bui-CardBody__d4e76c810a {\n    padding-block-end: 0;\n\n    &::after {\n      content: '';\n      position: sticky;\n      bottom: 0;\n      display: block;\n      height: 1.5rem;\n      margin-top: -1.5rem;\n      background: linear-gradient(\n        to top,\n        var(--bui-card-bg),\n        rgb(from var(--bui-card-bg) r g b / 0)\n      );\n      pointer-events: none;\n      opacity: 0;\n      animation: Card_bui-card-body-shadow__d4e76c810a linear forwards,\n        Card_bui-card-body-shadow__d4e76c810a linear forwards reverse;\n      animation-timeline: scroll(), scroll();\n      animation-range: 0px 1px, calc(100% - 2.5rem) 100%;\n    }\n  }\n\n  .Card_bui-CardFooter__d4e76c810a {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-3);\n  }\n}\n";
+var styles = {"bui-Card":"Card_bui-Card__d4e76c810a","bui-CardHeader":"Card_bui-CardHeader__d4e76c810a","bui-CardBody":"Card_bui-CardBody__d4e76c810a","bui-CardFooter":"Card_bui-CardFooter__d4e76c810a","bui-CardTrigger":"Card_bui-CardTrigger__d4e76c810a","bui-card-body-shadow":"Card_bui-card-body-shadow__d4e76c810a"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/Checkbox/Checkbox.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect } from 'react';
 import { Checkbox as Checkbox$1 } from 'react-aria-components';
 import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
 import { CheckboxDefinition } from './definition.esm.js';
@@ -12,6 +12,15 @@ const Checkbox = forwardRef(
       props
     );
     const { classes, children } = ownProps;
+    const ariaLabel = restProps["aria-label"];
+    const ariaLabelledBy = restProps["aria-labelledby"];
+    useEffect(() => {
+      if (!children && !ariaLabel && !ariaLabelledBy) {
+        console.warn(
+          "Checkbox requires either a visible label, aria-label, or aria-labelledby for accessibility"
+        );
+      }
+    }, [children, ariaLabel, ariaLabelledBy]);
     return /* @__PURE__ */ jsx(
       Checkbox$1,
       {
@@ -20,8 +29,8 @@ const Checkbox = forwardRef(
         ...dataAttributes,
         ...restProps,
         children: ({ isIndeterminate }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: classes.indicator, children: isIndeterminate ? /* @__PURE__ */ jsx(RiSubtractLine, { size: 12 }) : /* @__PURE__ */ jsx(RiCheckLine, { size: 12 }) }),
-          children
+          /* @__PURE__ */ jsx("div", { className: classes.indicator, "aria-hidden": "true", children: isIndeterminate ? /* @__PURE__ */ jsx(RiSubtractLine, { size: 12 }) : /* @__PURE__ */ jsx(RiCheckLine, { size: 12 }) }),
+          children != null && /* @__PURE__ */ jsx("div", { children })
         ] })
       }
     );

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { Checkbox as RACheckbox } from 'react-aria-components';\nimport type { CheckboxProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { CheckboxDefinition } from './definition';\nimport { RiCheckLine, RiSubtractLine } from '@remixicon/react';\n\n/** @public */\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  (props, ref) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      CheckboxDefinition,\n      props,\n    );\n    const { classes, children } = ownProps;\n\n    return (\n      <RACheckbox\n        ref={ref}\n        className={classes.root}\n        {...dataAttributes}\n        {...restProps}\n      >\n        {({ isIndeterminate }) => (\n          <>\n            <div className={classes.indicator}>\n              {isIndeterminate ? (\n                <RiSubtractLine size={12} />\n              ) : (\n                <RiCheckLine size={12} />\n              )}\n            </div>\n            {children}\n          </>\n        )}\n      </RACheckbox>\n    );\n  },\n);\n"],"names":["RACheckbox"],"mappings":";;;;;;;AAwBO,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,kBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAS,GAAI,QAAA;AAE9B,IAAA,uBACE,GAAA;AAAA,MAACA,UAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAW,OAAA,CAAQ,IAAA;AAAA,QAClB,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QAEH,QAAA,EAAA,CAAC,EAAE,eAAA,EAAgB,qBAClB,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,SAAA,EACrB,4CACC,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAM,EAAA,EAAI,CAAA,mBAE1B,GAAA,CAAC,WAAA,EAAA,EAAY,IAAA,EAAM,IAAI,CAAA,EAE3B,CAAA;AAAA,UACC;AAAA,SAAA,EACH;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/*\n * Copyright 2024 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, useEffect } from 'react';\nimport { Checkbox as RACheckbox } from 'react-aria-components';\nimport type { CheckboxProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { CheckboxDefinition } from './definition';\nimport { RiCheckLine, RiSubtractLine } from '@remixicon/react';\n\n/** @public */\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  (props, ref) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      CheckboxDefinition,\n      props,\n    );\n    const { classes, children } = ownProps;\n    const ariaLabel = restProps['aria-label'];\n    const ariaLabelledBy = restProps['aria-labelledby'];\n\n    useEffect(() => {\n      if (!children && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'Checkbox requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [children, ariaLabel, ariaLabelledBy]);\n\n    return (\n      <RACheckbox\n        ref={ref}\n        className={classes.root}\n        {...dataAttributes}\n        {...restProps}\n      >\n        {({ isIndeterminate }) => (\n          <>\n            <div className={classes.indicator} aria-hidden=\"true\">\n              {isIndeterminate ? (\n                <RiSubtractLine size={12} />\n              ) : (\n                <RiCheckLine size={12} />\n              )}\n            </div>\n            {children != null && <div>{children}</div>}\n          </>\n        )}\n      </RACheckbox>\n    );\n  },\n);\n"],"names":["RACheckbox"],"mappings":";;;;;;;AAwBO,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,kBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAS,GAAI,QAAA;AAC9B,IAAA,MAAM,SAAA,GAAY,UAAU,YAAY,CAAA;AACxC,IAAA,MAAM,cAAA,GAAiB,UAAU,iBAAiB,CAAA;AAElD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,QAAA,IAAY,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC9C,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,QAAA,EAAU,SAAA,EAAW,cAAc,CAAC,CAAA;AAExC,IAAA,uBACE,GAAA;AAAA,MAACA,UAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAW,OAAA,CAAQ,IAAA;AAAA,QAClB,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QAEH,QAAA,EAAA,CAAC,EAAE,eAAA,EAAgB,qBAClB,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAI,SAAA,EAAW,OAAA,CAAQ,SAAA,EAAW,aAAA,EAAY,QAC5C,QAAA,EAAA,eAAA,mBACC,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAM,IAAI,CAAA,mBAE1B,GAAA,CAAC,WAAA,EAAA,EAAY,IAAA,EAAM,IAAI,CAAA,EAE3B,CAAA;AAAA,UACC,QAAA,IAAY,IAAA,oBAAQ,GAAA,CAAC,KAAA,EAAA,EAAK,QAAA,EAAS;AAAA,SAAA,EACtC;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;;;"}

package/dist/components/Checkbox/Checkbox.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  .Checkbox_bui-Checkbox__2699cf9993 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .Checkbox_bui-Checkbox__2699cf9993[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .Checkbox_bui-CheckboxIndicator__2699cf9993 {\n    border: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n    box-shadow: inset 0 0 0 1px var(--bui-border-2);\n    border-radius: 2px;\n    transition: background-color 0.2s ease-in-out;\n    background-color: var(--bui-bg-neutral-1);\n    padding: 0;\n    flex-shrink: 0;\n    color: transparent;\n\n    .Checkbox_bui-Checkbox__2699cf9993[data-focus-visible] & {\n      transition: none;\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n\n    .Checkbox_bui-Checkbox__2699cf9993[data-selected] & {\n      background-color: var(--bui-bg-solid);\n      box-shadow: none;\n      color: var(--bui-fg-solid);\n    }\n\n    .Checkbox_bui-Checkbox__2699cf9993[data-indeterminate] & {\n      background-color: var(--bui-bg-neutral-1);\n      box-shadow: inset 0 0 0 1px var(--bui-border-2);\n      color: var(--bui-fg-primary);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      & {\n        transition: none;\n      }\n    }\n  }\n}\n";
-var styles = {"bui-Checkbox":"Checkbox_bui-Checkbox__2699cf9993","bui-CheckboxIndicator":"Checkbox_bui-CheckboxIndicator__2699cf9993"};
+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  .Checkbox_bui-Checkbox__89b03c3ff8 {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .Checkbox_bui-Checkbox__89b03c3ff8[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .Checkbox_bui-CheckboxIndicator__89b03c3ff8 {\n    border: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n    box-shadow: inset 0 0 0 1px var(--bui-border-2);\n    border-radius: 2px;\n    transition: background-color 0.2s ease-in-out;\n    background-color: var(--bui-bg-neutral-1);\n    padding: 0;\n    flex-shrink: 0;\n    color: transparent;\n\n    .Checkbox_bui-Checkbox__89b03c3ff8[data-focus-visible] & {\n      transition: none;\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n\n    .Checkbox_bui-Checkbox__89b03c3ff8[data-selected] & {\n      background-color: var(--bui-bg-solid);\n      box-shadow: none;\n      color: var(--bui-fg-solid);\n    }\n\n    .Checkbox_bui-Checkbox__89b03c3ff8[data-indeterminate] & {\n      background-color: var(--bui-bg-neutral-1);\n      box-shadow: inset 0 0 0 1px var(--bui-border-2);\n      color: var(--bui-fg-primary);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      & {\n        transition: none;\n      }\n    }\n  }\n}\n";
+var styles = {"bui-Checkbox":"Checkbox_bui-Checkbox__89b03c3ff8","bui-CheckboxIndicator":"Checkbox_bui-CheckboxIndicator__89b03c3ff8"};
 styleInject(css_248z);
 
 export { styles as default };