@backstage/ui 0.14.3 → 0.15.0-next.1

package/CHANGELOG.md

@@ -1,24 +1,70 @@
 # @backstage/ui
 
-## 0.14.3
+## 0.15.0-next.1
+
+### Minor Changes
+
+- 5351d8a: Added a `sticky` prop to the `Header` component. When `true`, the title-and-actions bar stays fixed to the top of its scroll container while the rest of the header (tags, description, metadata) scrolls away. The sticky bar background color automatically matches the container surface using the bg-consumer system.
+
+  **BREAKING**: Removed the main header class from the `Header` component. Custom styles that target this class should be updated to target the component sections that remain.
+
+  **Affected components:** Header
 
 ### Patch Changes
 
-- a58f74d: Fixed external URLs in BUI link components being rewritten as in-app paths when the app is served under a non-root base path. Absolute URLs (`http://`, `https://`, `//`, `mailto:`, `tel:`) are now passed through unchanged. Internal `href` values are resolved against the current `basename` exactly once, which also fixes a latent issue where internal link clicks under a non-root base path could navigate to a URL with the `basename` prefix doubled.
+- e7fc79f: Added support for grouping options into sections in the Select component. You can now pass section objects with a `title` and a nested `options` array alongside (or instead of) regular options to render grouped dropdowns with section headers.
+
+  **Affected components:** Select
+
+- 76635ae: Disabled `Card` scroll shadow in browsers that don't support `animation-timeline: scroll()`. Prevents the shadow from being always visible over the `CardBody` when there's nothing to scroll or the body is not scrolled.
+
+  **Affected components:** Card
+
+- de75f7c: Fixed `CardBody` showing an unwanted scrollbar when constrained below the scroll shadow height.
+
+  **Affected components:** Card
+
+- c96e2b3: Added `description`, `tags`, and `metadata` props to the `Header` component. The `description` prop accepts a markdown string with support for inline links. The `tags` prop renders a row of text or link items above the title. The `metadata` prop renders key-value pairs below the description. The `breadcrumbs` prop has been deprecated and will be removed in a future release.
+
+  **Affected components:** Header
+
+- f635139: Limited `@remixicon/react` dependency to versions below 4.9.0 due to a license change in that release.
+- 23ee789: Added invalid-state styling for Checkbox and corresponding Storybook variants for verification.
+
+  **Affected components:** Checkbox, CheckboxGroup
+
+- df705bb: Fixed external URLs in BUI link components being rewritten as in-app paths when the app is served under a non-root base path. Absolute URLs (`http://`, `https://`, `//`, `mailto:`, `tel:`) are now passed through unchanged. Internal `href` values are resolved against the current `basename` exactly once, which also fixes a latent issue where internal link clicks under a non-root base path could navigate to a URL with the `basename` prefix doubled.
 
   **Affected components:** ButtonLink, Card, Link, Menu, Tab, Table, Tag
 
-## 0.14.2
+## 0.15.0-next.0
 
-### Patch Changes
+### Minor Changes
 
-- 3f6e04c: Tightened React Aria dependency version ranges from `^` to `~` to prevent unintended minor version upgrades.
+- a281469: Add support for flex item props (`grow`, `shrink`, and `basis`) to `Box`, `Card`, `Grid`, and `Flex` itself.
 
-## 0.14.1
+  **Affected components:** Box, Card, Grid, Flex
 
 ### Patch Changes
 
-- 23fb582: Updated React Aria dependencies to v1.17.0 and migrated imports from individual `@react-aria/*` and `@react-stately/*` packages to the monopackages (`react-aria`, `react-stately`). This fixes a type resolution error for `@react-types/table` that occurred in new app installations.
+- 3846774: Added missing dependencies that were previously only available transitively.
+- e8a1a35: Added `isPending` prop to Alert, Button, ButtonIcon, Table, and TableRoot as a replacement for the `loading` prop, aligning with React Aria naming conventions. The `loading` prop is now deprecated but still supported as an alias. CSS selectors now use `data-ispending` instead of `data-loading` for styling pending states; `data-loading` is still emitted for backward compatibility but will be removed alongside the `loading` prop.
+
+  **Affected components:** Alert, Button, ButtonIcon, Table, TableRoot
+
+- e2d9831: Tightened React Aria dependency version ranges from `^` to `~` to prevent unintended minor version upgrades.
+- a42766e: Fixed dark mode background for Dialog component by correcting the theme attribute selector from `data-theme` to `data-theme-mode`.
+
+  **Affected components:** Dialog
+
+- c6fc76f: Fixed an issue where the active tab indicator would disappear shortly after page load for uncontrolled Tabs.
+
+  **Affected components:** Tabs
+
+- d1be10c: Updated React Aria dependencies to v1.17.0 and migrated imports from individual `@react-aria/*` and `@react-stately/*` packages to the monopackages (`react-aria`, `react-stately`). This fixes a type resolution error for `@react-types/table` that occurred in new app installations.
+- 401916d: Added new `DateRangePicker` component — combines two date fields and a calendar popover for selecting a date range, built on React Aria with full keyboard and screen reader accessibility. Uses BUI design tokens throughout, including auto-incremented backgrounds via the bg consumer pattern.
+- Updated dependencies
+  - @backstage/version-bridge@1.0.12
 
 ## 0.14.0
 
@@ -74,7 +120,7 @@
 
 - 8d79835: Added RangeSlider component for selecting numeric ranges.
 
-  **Affected components:** RangeSlider
+  **Affected components:** Slider
 
 - bcbb6eb: Made `SearchAutocomplete` background-aware. The input now adapts its background color based on its parent container's background level.
 
@@ -166,7 +212,7 @@
 - 2e5c5f8: Bumped `glob` dependency from v7/v8/v11 to v13 to address security vulnerabilities in older versions. Bumped `rollup` from v4.27 to v4.59+ to fix a high severity path traversal vulnerability (GHSA-mw96-cpmx-2vgc).
 - 8d79835: Added RangeSlider component for selecting numeric ranges.
 
-  **Affected components:** RangeSlider
+  **Affected components:** Slider
 
 - 5081bcc: Fixed `Avatar` becoming elliptical in flex layouts by preventing it from shrinking.
 

package/dist/components/Alert/Alert.esm.js

@@ -9,13 +9,18 @@ const Alert = forwardRef(
   (props, ref) => {
     const { ownProps, restProps, dataAttributes, utilityStyle } = useDefinition(
       AlertDefinition,
-      props
+      // Merge deprecated `loading` into `isPending` so data attributes and
+      // internal logic only need to check a single prop.
+      {
+        ...props,
+        isPending: props.isPending || props.loading ? true : props.isPending ?? props.loading
+      }
     );
     const {
       classes,
       status,
       icon,
-      loading,
+      isPending,
       customActions,
       title,
       description,
@@ -55,7 +60,7 @@ const Alert = forwardRef(
         "data-has-description": description ? "true" : "false",
         children: [
           /* @__PURE__ */ jsxs("div", { className: classes.contentWrapper, children: [
-            loading ? /* @__PURE__ */ jsx("div", { className: classes.icon, children: /* @__PURE__ */ jsx(
+            isPending ? /* @__PURE__ */ jsx("div", { className: classes.icon, children: /* @__PURE__ */ jsx(
               ProgressBar,
               {
                 "aria-label": "Loading",

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.esm.js","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, Ref, isValidElement, ReactElement } from 'react';\nimport { ProgressBar } from 'react-aria-components';\nimport {\n  RiLoader4Line,\n  RiInformationLine,\n  RiCheckLine,\n  RiErrorWarningLine,\n  RiAlertLine,\n} from '@remixicon/react';\nimport type { AlertProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { AlertDefinition } from './definition';\n\n/**\n * A component for displaying alert messages with different status levels.\n *\n * @remarks\n * The Alert component supports multiple status variants (info, success, warning, danger)\n * and can display icons, loading states, and custom actions. It automatically handles\n * icon selection based on status when the icon prop is set to true.\n *\n * @example\n * Basic usage with title only:\n * ```tsx\n * <Alert status=\"info\" title=\"This is an informational message\" />\n * ```\n *\n * @example\n * With title and description:\n * ```tsx\n * <Alert\n *   status=\"warning\"\n *   icon={true}\n *   title=\"Pending Review\"\n *   description=\"Please review the following items before proceeding.\"\n * />\n * ```\n *\n * @example\n * With custom actions and loading state:\n * ```tsx\n * <Alert\n *   status=\"success\"\n *   icon={true}\n *   title=\"Operation completed\"\n *   description=\"Your changes have been saved successfully.\"\n *   loading={isProcessing}\n *   customActions={\n *     <>\n *       <Button size=\"small\" variant=\"tertiary\">Dismiss</Button>\n *       <Button size=\"small\" variant=\"primary\">View</Button>\n *     </>\n *   }\n * />\n * ```\n *\n * @public\n */\nexport const Alert = forwardRef(\n  (props: AlertProps, ref: Ref<HTMLDivElement>) => {\n    const { ownProps, restProps, dataAttributes, utilityStyle } = useDefinition(\n      AlertDefinition,\n      props,\n    );\n    const {\n      classes,\n      status,\n      icon,\n      loading,\n      customActions,\n      title,\n      description,\n      style,\n    } = ownProps;\n\n    // Determine which icon to render\n    const getStatusIcon = (): ReactElement | null => {\n      // If icon is explicitly false, don't render any icon\n      if (icon === false) {\n        return null;\n      }\n\n      // If icon is a custom React element, use it\n      if (isValidElement(icon)) {\n        return icon;\n      }\n\n      // If icon is true, auto-select based on status\n      if (icon === true) {\n        switch (status) {\n          case 'success':\n            return <RiCheckLine aria-hidden=\"true\" />;\n          case 'warning':\n            return <RiErrorWarningLine aria-hidden=\"true\" />;\n          case 'danger':\n            return <RiAlertLine aria-hidden=\"true\" />;\n          case 'info':\n          default:\n            return <RiInformationLine aria-hidden=\"true\" />;\n        }\n      }\n\n      // Default: no icon\n      return null;\n    };\n\n    const statusIcon = getStatusIcon();\n\n    return (\n      <div\n        className={classes.root}\n        ref={ref}\n        style={{ ...style, ...utilityStyle }}\n        {...dataAttributes}\n        {...restProps}\n        data-has-description={description ? 'true' : 'false'}\n      >\n        <div className={classes.contentWrapper}>\n          {loading ? (\n            <div className={classes.icon}>\n              <ProgressBar\n                aria-label=\"Loading\"\n                isIndeterminate\n                className={classes.spinner}\n              >\n                <RiLoader4Line aria-hidden=\"true\" />\n              </ProgressBar>\n            </div>\n          ) : (\n            statusIcon && <div className={classes.icon}>{statusIcon}</div>\n          )}\n\n          <div className={classes.content}>\n            {title && <div className={classes.title}>{title}</div>}\n            {description && (\n              <div className={classes.description}>{description}</div>\n            )}\n          </div>\n        </div>\n\n        {customActions && (\n          <div className={classes.actions}>{customActions}</div>\n        )}\n      </div>\n    );\n  },\n);\n\nAlert.displayName = 'Alert';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Alert.esm.js","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, Ref, isValidElement, ReactElement } from 'react';\nimport { ProgressBar } from 'react-aria-components';\nimport {\n  RiLoader4Line,\n  RiInformationLine,\n  RiCheckLine,\n  RiErrorWarningLine,\n  RiAlertLine,\n} from '@remixicon/react';\nimport type { AlertProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { AlertDefinition } from './definition';\n\n/**\n * A component for displaying alert messages with different status levels.\n *\n * @remarks\n * The Alert component supports multiple status variants (info, success, warning, danger)\n * and can display icons, pending states, and custom actions. It automatically handles\n * icon selection based on status when the icon prop is set to true.\n *\n * @example\n * Basic usage with title only:\n * ```tsx\n * <Alert status=\"info\" title=\"This is an informational message\" />\n * ```\n *\n * @example\n * With title and description:\n * ```tsx\n * <Alert\n *   status=\"warning\"\n *   icon={true}\n *   title=\"Pending Review\"\n *   description=\"Please review the following items before proceeding.\"\n * />\n * ```\n *\n * @example\n * With custom actions and pending state:\n * ```tsx\n * <Alert\n *   status=\"success\"\n *   icon={true}\n *   title=\"Operation completed\"\n *   description=\"Your changes have been saved successfully.\"\n *   isPending={isProcessing}\n *   customActions={\n *     <>\n *       <Button size=\"small\" variant=\"tertiary\">Dismiss</Button>\n *       <Button size=\"small\" variant=\"primary\">View</Button>\n *     </>\n *   }\n * />\n * ```\n *\n * @public\n */\nexport const Alert = forwardRef(\n  (props: AlertProps, ref: Ref<HTMLDivElement>) => {\n    const { ownProps, restProps, dataAttributes, utilityStyle } = useDefinition(\n      AlertDefinition,\n      // Merge deprecated `loading` into `isPending` so data attributes and\n      // internal logic only need to check a single prop.\n      {\n        ...props,\n        isPending:\n          props.isPending || props.loading\n            ? true\n            : props.isPending ?? props.loading,\n      },\n    );\n    const {\n      classes,\n      status,\n      icon,\n      isPending,\n      customActions,\n      title,\n      description,\n      style,\n    } = ownProps;\n\n    // Determine which icon to render\n    const getStatusIcon = (): ReactElement | null => {\n      // If icon is explicitly false, don't render any icon\n      if (icon === false) {\n        return null;\n      }\n\n      // If icon is a custom React element, use it\n      if (isValidElement(icon)) {\n        return icon;\n      }\n\n      // If icon is true, auto-select based on status\n      if (icon === true) {\n        switch (status) {\n          case 'success':\n            return <RiCheckLine aria-hidden=\"true\" />;\n          case 'warning':\n            return <RiErrorWarningLine aria-hidden=\"true\" />;\n          case 'danger':\n            return <RiAlertLine aria-hidden=\"true\" />;\n          case 'info':\n          default:\n            return <RiInformationLine aria-hidden=\"true\" />;\n        }\n      }\n\n      // Default: no icon\n      return null;\n    };\n\n    const statusIcon = getStatusIcon();\n\n    return (\n      <div\n        className={classes.root}\n        ref={ref}\n        style={{ ...style, ...utilityStyle }}\n        {...dataAttributes}\n        {...restProps}\n        data-has-description={description ? 'true' : 'false'}\n      >\n        <div className={classes.contentWrapper}>\n          {isPending ? (\n            <div className={classes.icon}>\n              <ProgressBar\n                aria-label=\"Loading\"\n                isIndeterminate\n                className={classes.spinner}\n              >\n                <RiLoader4Line aria-hidden=\"true\" />\n              </ProgressBar>\n            </div>\n          ) : (\n            statusIcon && <div className={classes.icon}>{statusIcon}</div>\n          )}\n\n          <div className={classes.content}>\n            {title && <div className={classes.title}>{title}</div>}\n            {description && (\n              <div className={classes.description}>{description}</div>\n            )}\n          </div>\n        </div>\n\n        {customActions && (\n          <div className={classes.actions}>{customActions}</div>\n        )}\n      </div>\n    );\n  },\n);\n\nAlert.displayName = 'Alert';\n"],"names":[],"mappings":"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"}

package/dist/components/Alert/definition.esm.js

@@ -22,6 +22,7 @@ const AlertDefinition = defineComponent()({
   },
   propDefs: {
     status: { dataAttribute: true, default: "info" },
+    isPending: { dataAttribute: true },
     loading: { dataAttribute: true },
     icon: {},
     customActions: {},

package/dist/components/Alert/definition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Alert/definition.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { AlertOwnProps } from './types';\nimport styles from './Alert.module.css';\n\n/**\n * Component definition for Alert\n * @public\n */\nexport const AlertDefinition = defineComponent<AlertOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Alert',\n    contentWrapper: 'bui-AlertContentWrapper',\n    content: 'bui-AlertContent',\n    title: 'bui-AlertTitle',\n    description: 'bui-AlertDescription',\n    icon: 'bui-AlertIcon',\n    spinner: 'bui-AlertSpinner',\n    actions: 'bui-AlertActions',\n  },\n  propDefs: {\n    status: { dataAttribute: true, default: 'info' },\n    loading: { dataAttribute: true },\n    icon: {},\n    customActions: {},\n    title: {},\n    description: {},\n    className: {},\n    style: {},\n  },\n  utilityProps: ['m', 'mb', 'ml', 'mr', 'mt', 'mx', 'my'],\n});\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,eAAA,GAAkB,iBAA+B,CAAE;AAAA,EAC9D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,WAAA;AAAA,IACN,cAAA,EAAgB,yBAAA;AAAA,IAChB,OAAA,EAAS,kBAAA;AAAA,IACT,KAAA,EAAO,gBAAA;AAAA,IACP,WAAA,EAAa,sBAAA;AAAA,IACb,IAAA,EAAM,eAAA;AAAA,IACN,OAAA,EAAS,kBAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,MAAA,EAAQ,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,MAAA,EAAO;AAAA,IAC/C,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC/B,MAAM,EAAC;AAAA,IACP,eAAe,EAAC;AAAA,IAChB,OAAO,EAAC;AAAA,IACR,aAAa,EAAC;AAAA,IACd,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC,GACV;AAAA,EACA,YAAA,EAAc,CAAC,GAAA,EAAK,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAI;AACxD,CAAC;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Alert/definition.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { AlertOwnProps } from './types';\nimport styles from './Alert.module.css';\n\n/**\n * Component definition for Alert\n * @public\n */\nexport const AlertDefinition = defineComponent<AlertOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Alert',\n    contentWrapper: 'bui-AlertContentWrapper',\n    content: 'bui-AlertContent',\n    title: 'bui-AlertTitle',\n    description: 'bui-AlertDescription',\n    icon: 'bui-AlertIcon',\n    spinner: 'bui-AlertSpinner',\n    actions: 'bui-AlertActions',\n  },\n  propDefs: {\n    status: { dataAttribute: true, default: 'info' },\n    isPending: { dataAttribute: true },\n    loading: { dataAttribute: true },\n    icon: {},\n    customActions: {},\n    title: {},\n    description: {},\n    className: {},\n    style: {},\n  },\n  utilityProps: ['m', 'mb', 'ml', 'mr', 'mt', 'mx', 'my'],\n});\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,eAAA,GAAkB,iBAA+B,CAAE;AAAA,EAC9D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,WAAA;AAAA,IACN,cAAA,EAAgB,yBAAA;AAAA,IAChB,OAAA,EAAS,kBAAA;AAAA,IACT,KAAA,EAAO,gBAAA;AAAA,IACP,WAAA,EAAa,sBAAA;AAAA,IACb,IAAA,EAAM,eAAA;AAAA,IACN,OAAA,EAAS,kBAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,MAAA,EAAQ,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,MAAA,EAAO;AAAA,IAC/C,SAAA,EAAW,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IACjC,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC/B,MAAM,EAAC;AAAA,IACP,eAAe,EAAC;AAAA,IAChB,OAAO,EAAC;AAAA,IACR,aAAa,EAAC;AAAA,IACd,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC,GACV;AAAA,EACA,YAAA,EAAc,CAAC,GAAA,EAAK,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAI;AACxD,CAAC;;;;"}

package/dist/components/Box/Box.esm.js

@@ -13,7 +13,7 @@ const Box = forwardRef((props, ref) => {
     {
       ref,
       className: classes.root,
-      style: { ...ownProps.style, ...utilityStyle },
+      style: { ...utilityStyle, ...ownProps.style },
       ...dataAttributes,
       ...restProps
     },

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

@@ -1 +1 @@
-{"version":3,"file":"Box.esm.js","sources":["../../../src/components/Box/Box.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 { createElement, forwardRef } from 'react';\nimport { BoxProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { BoxDefinition } from './definition';\n\n/**\n * A general-purpose layout primitive that can render as any HTML element and supports spacing, sizing, and background props.\n *\n * @public\n */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {\n  const { ownProps, restProps, dataAttributes, utilityStyle } = useDefinition(\n    BoxDefinition,\n    props,\n  );\n  const { classes, as, childrenWithBgProvider } = ownProps;\n\n  return createElement(\n    as,\n    {\n      ref,\n      className: classes.root,\n      style: { ...ownProps.style, ...utilityStyle },\n      ...dataAttributes,\n      ...restProps,\n    },\n    childrenWithBgProvider,\n  );\n});\n\nBox.displayName = 'Box';\n"],"names":[],"mappings":";;;;AA0BO,MAAM,GAAA,GAAM,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACtE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAgB,cAAa,GAAI,aAAA;AAAA,IAC5D,aAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,EAAA,EAAI,sBAAA,EAAuB,GAAI,QAAA;AAEhD,EAAA,OAAO,aAAA;AAAA,IACL,EAAA;AAAA,IACA;AAAA,MACE,GAAA;AAAA,MACA,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,OAAO,EAAE,GAAG,QAAA,CAAS,KAAA,EAAO,GAAG,YAAA,EAAa;AAAA,MAC5C,GAAG,cAAA;AAAA,MACH,GAAG;AAAA,KACL;AAAA,IACA;AAAA,GACF;AACF,CAAC;AAED,GAAA,CAAI,WAAA,GAAc,KAAA;;;;"}
+{"version":3,"file":"Box.esm.js","sources":["../../../src/components/Box/Box.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 { createElement, forwardRef } from 'react';\nimport { BoxProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { BoxDefinition } from './definition';\n\n/**\n * A general-purpose layout primitive that can render as any HTML element and supports spacing, sizing, and background props.\n *\n * @public\n */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {\n  const { ownProps, restProps, dataAttributes, utilityStyle } = useDefinition(\n    BoxDefinition,\n    props,\n  );\n  const { classes, as, childrenWithBgProvider } = ownProps;\n\n  return createElement(\n    as,\n    {\n      ref,\n      className: classes.root,\n      style: { ...utilityStyle, ...ownProps.style },\n      ...dataAttributes,\n      ...restProps,\n    },\n    childrenWithBgProvider,\n  );\n});\n\nBox.displayName = 'Box';\n"],"names":[],"mappings":";;;;AA0BO,MAAM,GAAA,GAAM,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACtE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAgB,cAAa,GAAI,aAAA;AAAA,IAC5D,aAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,EAAA,EAAI,sBAAA,EAAuB,GAAI,QAAA;AAEhD,EAAA,OAAO,aAAA;AAAA,IACL,EAAA;AAAA,IACA;AAAA,MACE,GAAA;AAAA,MACA,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,OAAO,EAAE,GAAG,YAAA,EAAc,GAAG,SAAS,KAAA,EAAM;AAAA,MAC5C,GAAG,cAAA;AAAA,MACH,GAAG;AAAA,KACL;AAAA,IACA;AAAA,GACF;AACF,CAAC;AAED,GAAA,CAAI,WAAA,GAAc,KAAA;;;;"}

package/dist/components/Box/definition.esm.js

@@ -38,6 +38,9 @@ const BoxDefinition = defineComponent()({
     "py",
     "position",
     "display",
+    "grow",
+    "shrink",
+    "basis",
     "width",
     "minWidth",
     "maxWidth",

package/dist/components/Box/definition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Box/definition.ts"],"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 { defineComponent } from '../../hooks/useDefinition';\nimport type { BoxOwnProps } from './types';\nimport styles from './Box.module.css';\n\n/**\n * Component definition for Box\n * @public\n */\nexport const BoxDefinition = defineComponent<BoxOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Box',\n  },\n  bg: 'provider',\n  propDefs: {\n    as: { default: 'div' },\n    bg: { dataAttribute: true },\n    children: {},\n    className: {},\n    style: {},\n  },\n  utilityProps: [\n    'm',\n    'mb',\n    'ml',\n    'mr',\n    'mt',\n    'mx',\n    'my',\n    'p',\n    'pb',\n    'pl',\n    'pr',\n    'pt',\n    'px',\n    'py',\n    'position',\n    'display',\n    'width',\n    'minWidth',\n    'maxWidth',\n    'height',\n    'minHeight',\n    'maxHeight',\n  ],\n});\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,aAAA,GAAgB,iBAA6B,CAAE;AAAA,EAC1D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,EAAA,EAAI,EAAE,OAAA,EAAS,KAAA,EAAM;AAAA,IACrB,EAAA,EAAI,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC1B,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC,GACV;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Box/definition.ts"],"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 { defineComponent } from '../../hooks/useDefinition';\nimport type { BoxOwnProps } from './types';\nimport styles from './Box.module.css';\n\n/**\n * Component definition for Box\n * @public\n */\nexport const BoxDefinition = defineComponent<BoxOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Box',\n  },\n  bg: 'provider',\n  propDefs: {\n    as: { default: 'div' },\n    bg: { dataAttribute: true },\n    children: {},\n    className: {},\n    style: {},\n  },\n  utilityProps: [\n    'm',\n    'mb',\n    'ml',\n    'mr',\n    'mt',\n    'mx',\n    'my',\n    'p',\n    'pb',\n    'pl',\n    'pr',\n    'pt',\n    'px',\n    'py',\n    'position',\n    'display',\n    'grow',\n    'shrink',\n    'basis',\n    'width',\n    'minWidth',\n    'maxWidth',\n    'height',\n    'minHeight',\n    'maxHeight',\n  ],\n});\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,aAAA,GAAgB,iBAA6B,CAAE;AAAA,EAC1D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,EAAA,EAAI,EAAE,OAAA,EAAS,KAAA,EAAM;AAAA,IACrB,EAAA,EAAI,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC1B,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC,GACV;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA;AAEJ,CAAC;;;;"}

package/dist/components/Button/Button.esm.js

@@ -9,24 +9,29 @@ const Button = forwardRef(
   (props, ref) => {
     const { ownProps, restProps, dataAttributes } = useDefinition(
       ButtonDefinition,
-      props
+      // Merge deprecated `loading` into `isPending` so data attributes and
+      // internal logic only need to check a single prop.
+      {
+        ...props,
+        isPending: props.isPending || props.loading ? true : props.isPending ?? props.loading
+      }
     );
-    const { classes, iconStart, iconEnd, loading, children } = ownProps;
+    const { classes, iconStart, iconEnd, isPending, children } = ownProps;
     return /* @__PURE__ */ jsx(
       Button$1,
       {
         className: classes.root,
         ref,
-        isPending: loading,
+        isPending,
         ...dataAttributes,
         ...restProps,
-        children: ({ isPending }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        children: ({ isPending: isPending2 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs("span", { className: classes.content, children: [
             iconStart,
             children,
             iconEnd
           ] }),
-          isPending && /* @__PURE__ */ jsx(
+          isPending2 && /* @__PURE__ */ jsx(
             ProgressBar,
             {
               "aria-label": "Loading",

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

@@ -1 +1 @@
-{"version":3,"file":"Button.esm.js","sources":["../../../src/components/Button/Button.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 { Button as RAButton, ProgressBar } from 'react-aria-components';\nimport { RiLoader4Line } from '@remixicon/react';\nimport type { ButtonProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { ButtonDefinition } from './definition';\n\n/**\n * A button component built on React Aria Components that provides accessible\n * interactive elements for triggering actions.\n *\n * @remarks\n * The Button component supports multiple variants (primary, secondary, tertiary, danger),\n * sizes (small, medium), and states including loading and disabled. It automatically\n * handles keyboard navigation, focus management, and ARIA attributes for accessibility.\n *\n * @example\n * Basic usage:\n * ```tsx\n * <Button>Click me</Button>\n * ```\n *\n * @example\n * With icons and loading state:\n * ```tsx\n * <Button\n *   variant=\"primary\"\n *   size=\"medium\"\n *   iconStart={<IconComponent />}\n *   loading={isSubmitting}\n * >\n *   Submit\n * </Button>\n * ```\n *\n * @public\n */\nexport const Button = forwardRef(\n  (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      ButtonDefinition,\n      props,\n    );\n    const { classes, iconStart, iconEnd, loading, children } = ownProps;\n\n    return (\n      <RAButton\n        className={classes.root}\n        ref={ref}\n        isPending={loading}\n        {...dataAttributes}\n        {...restProps}\n      >\n        {({ isPending }) => (\n          <>\n            <span className={classes.content}>\n              {iconStart}\n              {children}\n              {iconEnd}\n            </span>\n\n            {isPending && (\n              <ProgressBar\n                aria-label=\"Loading\"\n                isIndeterminate\n                className={classes.spinner}\n              >\n                <RiLoader4Line aria-hidden=\"true\" />\n              </ProgressBar>\n            )}\n          </>\n        )}\n      </RAButton>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n"],"names":["RAButton"],"mappings":";;;;;;;AAqDO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAA,KAAgC;AACnD,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,gBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,OAAA,EAAS,OAAA,EAAS,UAAS,GAAI,QAAA;AAE3D,IAAA,uBACE,GAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,GAAA;AAAA,QACA,SAAA,EAAW,OAAA;AAAA,QACV,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QAEH,QAAA,EAAA,CAAC,EAAE,SAAA,EAAU,qBACZ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAA,CAAQ,OAAA,EACtB,QAAA,EAAA;AAAA,YAAA,SAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA,WAAA,EACH,CAAA;AAAA,UAEC,SAAA,oBACC,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAW,SAAA;AAAA,cACX,eAAA,EAAe,IAAA;AAAA,cACf,WAAW,OAAA,CAAQ,OAAA;AAAA,cAEnB,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,aAAA,EAAY,MAAA,EAAO;AAAA;AAAA;AACpC,SAAA,EAEJ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
+{"version":3,"file":"Button.esm.js","sources":["../../../src/components/Button/Button.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 { Button as RAButton, ProgressBar } from 'react-aria-components';\nimport { RiLoader4Line } from '@remixicon/react';\nimport type { ButtonProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { ButtonDefinition } from './definition';\n\n/**\n * A button component built on React Aria Components that provides accessible\n * interactive elements for triggering actions.\n *\n * @remarks\n * The Button component supports multiple variants (primary, secondary, tertiary, danger),\n * sizes (small, medium), and states including loading and disabled. It automatically\n * handles keyboard navigation, focus management, and ARIA attributes for accessibility.\n *\n * @example\n * Basic usage:\n * ```tsx\n * <Button>Click me</Button>\n * ```\n *\n * @example\n * With icons and loading state:\n * ```tsx\n * <Button\n *   variant=\"primary\"\n *   size=\"medium\"\n *   iconStart={<IconComponent />}\n *   isPending={isSubmitting}\n * >\n *   Submit\n * </Button>\n * ```\n *\n * @public\n */\nexport const Button = forwardRef(\n  (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      ButtonDefinition,\n      // Merge deprecated `loading` into `isPending` so data attributes and\n      // internal logic only need to check a single prop.\n      {\n        ...props,\n        isPending:\n          props.isPending || props.loading\n            ? true\n            : props.isPending ?? props.loading,\n      },\n    );\n    const { classes, iconStart, iconEnd, isPending, children } = ownProps;\n\n    return (\n      <RAButton\n        className={classes.root}\n        ref={ref}\n        isPending={isPending}\n        {...dataAttributes}\n        {...restProps}\n      >\n        {({ isPending }) => (\n          <>\n            <span className={classes.content}>\n              {iconStart}\n              {children}\n              {iconEnd}\n            </span>\n\n            {isPending && (\n              <ProgressBar\n                aria-label=\"Loading\"\n                isIndeterminate\n                className={classes.spinner}\n              >\n                <RiLoader4Line aria-hidden=\"true\" />\n              </ProgressBar>\n            )}\n          </>\n        )}\n      </RAButton>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n"],"names":["RAButton","isPending"],"mappings":";;;;;;;AAqDO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAA,KAAgC;AACnD,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,gBAAA;AAAA;AAAA;AAAA,MAGA;AAAA,QACE,GAAG,KAAA;AAAA,QACH,SAAA,EACE,MAAM,SAAA,IAAa,KAAA,CAAM,UACrB,IAAA,GACA,KAAA,CAAM,aAAa,KAAA,CAAM;AAAA;AACjC,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,OAAA,EAAS,SAAA,EAAW,UAAS,GAAI,QAAA;AAE7D,IAAA,uBACE,GAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,GAAA;AAAA,QACA,SAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QAEH,QAAA,EAAA,CAAC,EAAE,SAAA,EAAAC,UAAAA,uBACF,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAA,CAAQ,OAAA,EACtB,QAAA,EAAA;AAAA,YAAA,SAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA,WAAA,EACH,CAAA;AAAA,UAECA,UAAAA,oBACC,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAW,SAAA;AAAA,cACX,eAAA,EAAe,IAAA;AAAA,cACf,WAAW,OAAA,CAAQ,OAAA;AAAA,cAEnB,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,aAAA,EAAY,MAAA,EAAO;AAAA;AAAA;AACpC,SAAA,EAEJ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}

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__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"};
+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__a94f299a4a {\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-ispending='true'] {\n      cursor: wait;\n    }\n  }\n\n  .Button_bui-Button__a94f299a4a[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-ispending='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__a94f299a4a[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-ispending='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__a94f299a4a[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-ispending='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__a94f299a4a[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-ispending='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__a94f299a4a[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-ispending='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__a94f299a4a[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-ispending='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__a94f299a4a[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__a94f299a4a[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__a94f299a4a {\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__a94f299a4a[data-ispending='true'] & {\n      opacity: 0;\n    }\n  }\n\n  .Button_bui-ButtonSpinner__a94f299a4a {\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__a94f299a4a[data-ispending='true'] & {\n      opacity: 1;\n    }\n\n    & svg {\n      animation: Button_bui-spin__a94f299a4a 1s linear infinite;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .Button_bui-Button__a94f299a4a {\n      transition-duration: 50ms;\n    }\n\n    .Button_bui-ButtonContent__a94f299a4a {\n      transition-duration: 50ms;\n    }\n\n    .Button_bui-ButtonSpinner__a94f299a4a {\n      transition-duration: 50ms;\n    }\n\n    .Button_bui-ButtonSpinner__a94f299a4a svg {\n      animation: none;\n    }\n  }\n\n  @keyframes Button_bui-spin__a94f299a4a {\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__a94f299a4a","bui-ButtonContent":"Button_bui-ButtonContent__a94f299a4a","bui-ButtonSpinner":"Button_bui-ButtonSpinner__a94f299a4a","bui-spin":"Button_bui-spin__a94f299a4a"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/Button/definition.esm.js

@@ -20,6 +20,7 @@ const ButtonDefinition = defineComponent()({
     size: { dataAttribute: true, default: "small" },
     variant: { dataAttribute: true, default: "primary" },
     destructive: { dataAttribute: true },
+    isPending: { dataAttribute: true },
     loading: { dataAttribute: true },
     iconStart: {},
     iconEnd: {},

package/dist/components/Button/definition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Button/definition.ts"],"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 { defineComponent } from '../../hooks/useDefinition';\nimport type { ButtonOwnProps } from './types';\nimport styles from './Button.module.css';\n\n/**\n * Component definition for Button\n * @public\n */\nexport const ButtonDefinition = defineComponent<ButtonOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Button',\n    content: 'bui-ButtonContent',\n    spinner: 'bui-ButtonSpinner',\n  },\n  bg: 'consumer',\n  propDefs: {\n    size: { dataAttribute: true, default: 'small' },\n    variant: { dataAttribute: true, default: 'primary' },\n    destructive: { dataAttribute: true },\n    loading: { dataAttribute: true },\n    iconStart: {},\n    iconEnd: {},\n    children: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,gBAAA,GAAmB,iBAAgC,CAAE;AAAA,EAChE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,OAAA,EAAS,mBAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IACnD,WAAA,EAAa,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IACnC,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC/B,WAAW,EAAC;AAAA,IACZ,SAAS,EAAC;AAAA,IACV,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Button/definition.ts"],"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 { defineComponent } from '../../hooks/useDefinition';\nimport type { ButtonOwnProps } from './types';\nimport styles from './Button.module.css';\n\n/**\n * Component definition for Button\n * @public\n */\nexport const ButtonDefinition = defineComponent<ButtonOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Button',\n    content: 'bui-ButtonContent',\n    spinner: 'bui-ButtonSpinner',\n  },\n  bg: 'consumer',\n  propDefs: {\n    size: { dataAttribute: true, default: 'small' },\n    variant: { dataAttribute: true, default: 'primary' },\n    destructive: { dataAttribute: true },\n    isPending: { dataAttribute: true },\n    loading: { dataAttribute: true },\n    iconStart: {},\n    iconEnd: {},\n    children: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,gBAAA,GAAmB,iBAAgC,CAAE;AAAA,EAChE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,OAAA,EAAS,mBAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IACnD,WAAA,EAAa,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IACnC,SAAA,EAAW,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IACjC,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC/B,WAAW,EAAC;AAAA,IACZ,SAAS,EAAC;AAAA,IACV,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;;;;"}

package/dist/components/ButtonIcon/ButtonIcon.esm.js

@@ -9,20 +9,25 @@ const ButtonIcon = forwardRef(
   (props, ref) => {
     const { ownProps, restProps, dataAttributes } = useDefinition(
       ButtonIconDefinition,
-      props
+      // Merge deprecated `loading` into `isPending` so data attributes and
+      // internal logic only need to check a single prop.
+      {
+        ...props,
+        isPending: props.isPending || props.loading ? true : props.isPending ?? props.loading
+      }
     );
-    const { classes, icon, loading } = ownProps;
+    const { classes, icon, isPending } = ownProps;
     return /* @__PURE__ */ jsx(
       Button,
       {
         className: classes.root,
         ref,
-        isPending: loading,
+        isPending,
         ...dataAttributes,
         ...restProps,
-        children: ({ isPending }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        children: ({ isPending: isPending2 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("span", { className: classes.content, children: icon }),
-          isPending && /* @__PURE__ */ jsx(
+          isPending2 && /* @__PURE__ */ jsx(
             ProgressBar,
             {
               "aria-label": "Loading",

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.esm.js","sources":["../../../src/components/ButtonIcon/ButtonIcon.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 { Button as RAButton, ProgressBar } from 'react-aria-components';\nimport { RiLoader4Line } from '@remixicon/react';\nimport type { ButtonIconProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { ButtonIconDefinition } from './definition';\n\n/**\n * An icon-only button that supports a loading state and requires an accessible label.\n *\n * @public\n */\nexport const ButtonIcon = forwardRef(\n  (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      ButtonIconDefinition,\n      props,\n    );\n    const { classes, icon, loading } = ownProps;\n\n    return (\n      <RAButton\n        className={classes.root}\n        ref={ref}\n        isPending={loading}\n        {...dataAttributes}\n        {...restProps}\n      >\n        {({ isPending }) => (\n          <>\n            <span className={classes.content}>{icon}</span>\n\n            {isPending && (\n              <ProgressBar\n                aria-label=\"Loading\"\n                isIndeterminate\n                className={classes.spinner}\n              >\n                <RiLoader4Line aria-hidden=\"true\" />\n              </ProgressBar>\n            )}\n          </>\n        )}\n      </RAButton>\n    );\n  },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"],"names":["RAButton"],"mappings":";;;;;;;AA4BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,oBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,IAAA,EAAM,OAAA,EAAQ,GAAI,QAAA;AAEnC,IAAA,uBACE,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,GAAA;AAAA,QACA,SAAA,EAAW,OAAA;AAAA,QACV,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QAEH,QAAA,EAAA,CAAC,EAAE,SAAA,EAAU,qBACZ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAA,CAAQ,OAAA,EAAU,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,UAEvC,SAAA,oBACC,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAW,SAAA;AAAA,cACX,eAAA,EAAe,IAAA;AAAA,cACf,WAAW,OAAA,CAAQ,OAAA;AAAA,cAEnB,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,aAAA,EAAY,MAAA,EAAO;AAAA;AAAA;AACpC,SAAA,EAEJ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
+{"version":3,"file":"ButtonIcon.esm.js","sources":["../../../src/components/ButtonIcon/ButtonIcon.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 { Button as RAButton, ProgressBar } from 'react-aria-components';\nimport { RiLoader4Line } from '@remixicon/react';\nimport type { ButtonIconProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { ButtonIconDefinition } from './definition';\n\n/**\n * An icon-only button that supports a loading state and requires an accessible label.\n *\n * @public\n */\nexport const ButtonIcon = forwardRef(\n  (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      ButtonIconDefinition,\n      // Merge deprecated `loading` into `isPending` so data attributes and\n      // internal logic only need to check a single prop.\n      {\n        ...props,\n        isPending:\n          props.isPending || props.loading\n            ? true\n            : props.isPending ?? props.loading,\n      },\n    );\n    const { classes, icon, isPending } = ownProps;\n\n    return (\n      <RAButton\n        className={classes.root}\n        ref={ref}\n        isPending={isPending}\n        {...dataAttributes}\n        {...restProps}\n      >\n        {({ isPending }) => (\n          <>\n            <span className={classes.content}>{icon}</span>\n\n            {isPending && (\n              <ProgressBar\n                aria-label=\"Loading\"\n                isIndeterminate\n                className={classes.spinner}\n              >\n                <RiLoader4Line aria-hidden=\"true\" />\n              </ProgressBar>\n            )}\n          </>\n        )}\n      </RAButton>\n    );\n  },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"],"names":["RAButton","isPending"],"mappings":";;;;;;;AA4BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,oBAAA;AAAA;AAAA;AAAA,MAGA;AAAA,QACE,GAAG,KAAA;AAAA,QACH,SAAA,EACE,MAAM,SAAA,IAAa,KAAA,CAAM,UACrB,IAAA,GACA,KAAA,CAAM,aAAa,KAAA,CAAM;AAAA;AACjC,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,IAAA,EAAM,SAAA,EAAU,GAAI,QAAA;AAErC,IAAA,uBACE,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,GAAA;AAAA,QACA,SAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QAEH,QAAA,EAAA,CAAC,EAAE,SAAA,EAAAC,UAAAA,uBACF,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAA,CAAQ,OAAA,EAAU,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,UAEvCA,UAAAA,oBACC,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAW,SAAA;AAAA,cACX,eAAA,EAAe,IAAA;AAAA,cACf,WAAW,OAAA,CAAQ,OAAA;AAAA,cAEnB,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,aAAA,EAAY,MAAA,EAAO;AAAA;AAAA;AACpC,SAAA,EAEJ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

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__0b06ecea62 {\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__0b06ecea62[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__0b06ecea62[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__0b06ecea62[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__0b06ecea62[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__0b06ecea62[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__0b06ecea62 {\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__0b06ecea62[data-loading='true'] & {\n      opacity: 0;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIconSpinner__0b06ecea62 {\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__0b06ecea62[data-loading='true'] & {\n      opacity: 1;\n    }\n\n    & svg {\n      animation: ButtonIcon_bui-spin__0b06ecea62 1s linear infinite;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ButtonIcon_bui-ButtonIcon__0b06ecea62 {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconContent__0b06ecea62 {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconSpinner__0b06ecea62 {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconSpinner__0b06ecea62 svg {\n      animation: none;\n    }\n  }\n\n  @keyframes ButtonIcon_bui-spin__0b06ecea62 {\n    from {\n      transform: rotate(0deg);\n    }\n\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n";
-var styles = {"bui-ButtonIcon":"ButtonIcon_bui-ButtonIcon__0b06ecea62","bui-ButtonIconContent":"ButtonIcon_bui-ButtonIconContent__0b06ecea62","bui-ButtonIconSpinner":"ButtonIcon_bui-ButtonIconSpinner__0b06ecea62","bui-spin":"ButtonIcon_bui-spin__0b06ecea62"};
+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__29f40c7d21 {\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-ispending='true'] {\n      cursor: wait;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIcon__29f40c7d21[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-ispending='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__29f40c7d21[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-ispending='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__29f40c7d21[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-ispending='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__29f40c7d21[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__29f40c7d21[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__29f40c7d21 {\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__29f40c7d21[data-ispending='true'] & {\n      opacity: 0;\n    }\n  }\n\n  .ButtonIcon_bui-ButtonIconSpinner__29f40c7d21 {\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__29f40c7d21[data-ispending='true'] & {\n      opacity: 1;\n    }\n\n    & svg {\n      animation: ButtonIcon_bui-spin__29f40c7d21 1s linear infinite;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ButtonIcon_bui-ButtonIcon__29f40c7d21 {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconContent__29f40c7d21 {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconSpinner__29f40c7d21 {\n      transition-duration: 50ms;\n    }\n\n    .ButtonIcon_bui-ButtonIconSpinner__29f40c7d21 svg {\n      animation: none;\n    }\n  }\n\n  @keyframes ButtonIcon_bui-spin__29f40c7d21 {\n    from {\n      transform: rotate(0deg);\n    }\n\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n";
+var styles = {"bui-ButtonIcon":"ButtonIcon_bui-ButtonIcon__29f40c7d21","bui-ButtonIconContent":"ButtonIcon_bui-ButtonIconContent__29f40c7d21","bui-ButtonIconSpinner":"ButtonIcon_bui-ButtonIconSpinner__29f40c7d21","bui-spin":"ButtonIcon_bui-spin__29f40c7d21"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/ButtonIcon/definition.esm.js

@@ -19,6 +19,7 @@ const ButtonIconDefinition = defineComponent()({
   propDefs: {
     size: { dataAttribute: true, default: "small" },
     variant: { dataAttribute: true, default: "primary" },
+    isPending: { dataAttribute: true },
     loading: { dataAttribute: true },
     icon: {},
     className: {}

package/dist/components/ButtonIcon/definition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ButtonIcon/definition.ts"],"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 { defineComponent } from '../../hooks/useDefinition';\nimport type { ButtonIconOwnProps } from './types';\nimport styles from './ButtonIcon.module.css';\n\n/**\n * Component definition for ButtonIcon\n * @public\n */\nexport const ButtonIconDefinition = defineComponent<ButtonIconOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-ButtonIcon',\n    content: 'bui-ButtonIconContent',\n    spinner: 'bui-ButtonIconSpinner',\n  },\n  bg: 'consumer',\n  propDefs: {\n    size: { dataAttribute: true, default: 'small' },\n    variant: { dataAttribute: true, default: 'primary' },\n    loading: { dataAttribute: true },\n    icon: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,oBAAA,GAAuB,iBAAoC,CAAE;AAAA,EACxE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,gBAAA;AAAA,IACN,OAAA,EAAS,uBAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IACnD,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC/B,MAAM,EAAC;AAAA,IACP,WAAW;AAAC;AAEhB,CAAC;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ButtonIcon/definition.ts"],"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 { defineComponent } from '../../hooks/useDefinition';\nimport type { ButtonIconOwnProps } from './types';\nimport styles from './ButtonIcon.module.css';\n\n/**\n * Component definition for ButtonIcon\n * @public\n */\nexport const ButtonIconDefinition = defineComponent<ButtonIconOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-ButtonIcon',\n    content: 'bui-ButtonIconContent',\n    spinner: 'bui-ButtonIconSpinner',\n  },\n  bg: 'consumer',\n  propDefs: {\n    size: { dataAttribute: true, default: 'small' },\n    variant: { dataAttribute: true, default: 'primary' },\n    isPending: { dataAttribute: true },\n    loading: { dataAttribute: true },\n    icon: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,oBAAA,GAAuB,iBAAoC,CAAE;AAAA,EACxE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,gBAAA;AAAA,IACN,OAAA,EAAS,uBAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IACnD,SAAA,EAAW,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IACjC,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC/B,MAAM,EAAC;AAAA,IACP,WAAW;AAAC;AAEhB,CAAC;;;;"}

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

@@ -9,7 +9,7 @@ import '../Link/Link.module.css.esm.js';
 
 const INTERACTIVE_ELEMENT_SELECTOR = 'a[href],button,input,select,textarea,[role="button"],[role="link"],[tabindex]:not([tabindex="-1"])';
 const Card = forwardRef((props, ref) => {
-  const { ownProps, restProps, dataAttributes } = useDefinition(
+  const { ownProps, restProps, dataAttributes, utilityStyle } = useDefinition(
     CardDefinition,
     props
   );
@@ -56,6 +56,7 @@ const Card = forwardRef((props, ref) => {
       ...dataAttributes,
       ...restProps,
       onClick: isInteractive ? handleClick : void 0,
+      style: { ...utilityStyle, ...ownProps.style },
       children: [
         href && /* @__PURE__ */ jsx(
           Link,

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: 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":"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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, utilityStyle } = 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      style={{ ...utilityStyle, ...ownProps.style }}\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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"}

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__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"};
+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__c3fb74b317 {\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__c3fb74b317[data-bg='neutral-1'] {\n    --bui-card-bg: var(--bui-bg-neutral-1);\n  }\n\n  .Card_bui-Card__c3fb74b317[data-bg='neutral-2'] {\n    --bui-card-bg: var(--bui-bg-neutral-2);\n  }\n\n  .Card_bui-Card__c3fb74b317[data-bg='neutral-3'] {\n    --bui-card-bg: var(--bui-bg-neutral-3);\n  }\n\n  .Card_bui-Card__c3fb74b317:has(.Card_bui-CardHeader__c3fb74b317, .Card_bui-CardBody__c3fb74b317, .Card_bui-CardFooter__c3fb74b317) {\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__c3fb74b317[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__c3fb74b317[data-interactive]:has(.Card_bui-CardTrigger__c3fb74b317[data-focus-visible]) {\n    outline: 2px solid var(--bui-ring);\n    outline-offset: -2px;\n  }\n\n  .Card_bui-CardTrigger__c3fb74b317 {\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__c3fb74b317 {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-3);\n  }\n\n  .Card_bui-CardBody__c3fb74b317 {\n    flex: 1;\n    min-height: var(--bui-space-6);\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__c3fb74b317 {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  .Card_bui-Card__c3fb74b317:has(.Card_bui-CardHeader__c3fb74b317) .Card_bui-CardBody__c3fb74b317 {\n    padding-block-start: 0;\n  }\n\n  .Card_bui-Card__c3fb74b317:has(.Card_bui-CardFooter__c3fb74b317) .Card_bui-CardBody__c3fb74b317 {\n    padding-block-end: 0;\n  }\n\n  @supports (animation-timeline: scroll()) {\n    .Card_bui-Card__c3fb74b317:has(.Card_bui-CardHeader__c3fb74b317) .Card_bui-CardBody__c3fb74b317::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__c3fb74b317 linear both;\n      animation-timeline: scroll();\n      animation-range: 0px 2.5rem;\n    }\n\n    .Card_bui-Card__c3fb74b317:has(.Card_bui-CardFooter__c3fb74b317) .Card_bui-CardBody__c3fb74b317::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__c3fb74b317 linear forwards,\n        Card_bui-card-body-shadow__c3fb74b317 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__c3fb74b317 {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-3);\n  }\n}\n";
+var styles = {"bui-Card":"Card_bui-Card__c3fb74b317","bui-CardHeader":"Card_bui-CardHeader__c3fb74b317","bui-CardBody":"Card_bui-CardBody__c3fb74b317","bui-CardFooter":"Card_bui-CardFooter__c3fb74b317","bui-CardTrigger":"Card_bui-CardTrigger__c3fb74b317","bui-card-body-shadow":"Card_bui-card-body-shadow__c3fb74b317"};
 styleInject(css_248z);
 
 export { styles as default };