@backstage/ui 0.15.0-next.3 → 0.15.1-next.0

package/CHANGELOG.md

@@ -1,5 +1,193 @@
 # @backstage/ui
 
+## 0.15.1-next.0
+
+### Patch Changes
+
+- 14a101f: Switch now adapts its track and thumb colors based on the background context of its parent container, and uses the accent token family when selected.
+
+  **Affected components:** Switch
+
+- b33bb24: Added a new `NumberField` component for numeric input with support for min, max, step, and keyboard increment/decrement.
+
+  **Affected components:** NumberField
+
+- 1f709a3: Fixed Header breadcrumb typography so it remains consistent when component styles are loaded in different orders.
+
+  **Affected components:** Header
+
+- 5d80f77: Introduces a new set of semantic color token families — Accent, Announcement, Warning, Negative, and Positive — each providing a consistent set of background, foreground, and border tokens for both light and dark themes. A gray scale (`--bui-gray-1` through `--bui-gray-11`) and updated foreground tokens are also included.
+
+  The previous tokens remain in place for backward compatibility but are now deprecated and will be removed in a future release.
+
+  **Migration:**
+
+  **Neutral backgrounds**
+
+  The neutral background tokens keep their existing names (`--bui-bg-app`, `--bui-bg-neutral-1` through `--bui-bg-neutral-4`) but are updated with new solid-color values for both light and dark themes. No token renaming is required. The `-hover`, `-pressed`, and `-disabled` interaction variants of these tokens are deprecated and should be removed.
+
+  **Foreground**
+
+  | Deprecated         | Replacement             |
+  | ------------------ | ----------------------- |
+  | `--bui-fg-danger`  | `--bui-fg-negative`     |
+  | `--bui-fg-success` | `--bui-fg-positive`     |
+  | `--bui-fg-info`    | `--bui-fg-announcement` |
+
+  **Accent**
+
+  | Deprecated                | Replacement                |
+  | ------------------------- | -------------------------- |
+  | `--bui-bg-solid`          | `--bui-accent-bg`          |
+  | `--bui-bg-solid-hover`    | `--bui-accent-bg-hover`    |
+  | `--bui-bg-solid-disabled` | `--bui-accent-bg-disabled` |
+  | `--bui-fg-solid`          | `--bui-accent-fg`          |
+  | `--bui-fg-solid-disabled` | `--bui-accent-fg-disabled` |
+
+  **Positive**
+
+  | Deprecated               | Replacement                 |
+  | ------------------------ | --------------------------- |
+  | `--bui-bg-success`       | `--bui-positive-bg-subdued` |
+  | `--bui-fg-success-on-bg` | `--bui-positive-fg-subdued` |
+  | `--bui-border-success`   | `--bui-positive-border`     |
+
+  **Negative**
+
+  | Deprecated              | Replacement                 |
+  | ----------------------- | --------------------------- |
+  | `--bui-bg-danger`       | `--bui-negative-bg-subdued` |
+  | `--bui-fg-danger-on-bg` | `--bui-negative-fg-subdued` |
+  | `--bui-border-danger`   | `--bui-negative-border`     |
+
+  **Warning**
+
+  | Deprecated               | Replacement                |
+  | ------------------------ | -------------------------- |
+  | `--bui-bg-warning`       | `--bui-warning-bg-subdued` |
+  | `--bui-fg-warning-on-bg` | `--bui-warning-fg-subdued` |
+  | `--bui-border-warning`   | `--bui-warning-border`     |
+
+  **Announcement**
+
+  | Deprecated            | Replacement                     |
+  | --------------------- | ------------------------------- |
+  | `--bui-bg-info`       | `--bui-announcement-bg-subdued` |
+  | `--bui-fg-info-on-bg` | `--bui-announcement-fg-subdued` |
+  | `--bui-border-info`   | `--bui-announcement-border`     |
+
+## 0.15.0
+
+### Minor Changes
+
+- a281469: Add support for flex item props (`grow`, `shrink`, and `basis`) to `Box`, `Card`, `Grid`, and `Flex` itself.
+
+  **Affected components:** Box, Card, Grid, Flex
+
+- 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
+
+- 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
+
+- 37535b2: Added a public `--bui-bg-inherit` CSS variable that resolves to the background
+  color of the nearest enclosing bg provider (`Box`, `Flex`, `Grid`, `Card`,
+  `Accordion`, or any element with a `data-bg` attribute), falling back to
+  `--bui-bg-app`. Use it from CSS for sticky or fixed elements that need to match
+  their surrounding surface without hardcoding a specific level.
+
+  ```css
+  .searchBarContainer {
+    position: sticky;
+    top: 0;
+    background-color: var(--bui-bg-inherit);
+  }
+  ```
+
+  As part of this change, the `data-bg` painting rules previously duplicated in
+  `Box`, `Flex`, `Grid`, `Accordion`, and `Card` have been centralized into a
+  single source in `core.css`. Painting and component behavior are unchanged for
+  all existing usages, with one minor expansion: any element with a `data-bg`
+  attribute (including provider elements and any element that sets it directly)
+  is now painted, not only `Box`/`Flex`/`Grid`/`Card`/`Accordion` elements.
+
+- e2d9831: Tightened React Aria dependency version ranges from `^` to `~` to prevent unintended minor version upgrades.
+- 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
+
+- 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
+
+- 5520e07: Updated field components to grow within flex layouts instead of forcing their width to remain fixed.
+- 11699ac: Updated `PasswordField` to visually match `TextField`, including consistent focus rings, error states, disabled appearance, and background colour behaviour.
+
+  **Affected components:** PasswordField
+
+- 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.
+- 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
+
+- 4bb649d: Fixed Table with row selection creating phantom scroll height on ancestor elements by establishing a containing block for visually-hidden checkbox inputs.
+
+  **Affected components:** Table, TableRoot
+
+- f635139: Limited `@remixicon/react` dependency to versions below 4.9.0 due to a license change in that release.
+- 5b85902: Fix `Card href=...` not showing a focus indicator on keyboard navigation. `Link` now composes `useFocusRing`, emits `data-focus-visible`, and renders a `--bui-ring` outline when keyboard-focused. The Card's existing focus-ring CSS matches when the trigger is focused.
+
+  _Affected components_: Card, Link
+
+- 23ee789: Added invalid-state styling for Checkbox and corresponding Storybook variants for verification.
+
+  **Affected components:** Checkbox, CheckboxGroup
+
+- 38bb056: Adjusted PluginHeader spacing and borders so headers with and without tabs align more consistently with surrounding page content, including when paired with page headers.
+
+  **Affected components:** PluginHeader, Header
+
+- 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
+
+- 3e0ff6c: Added container alignment to `Header` sections so tags, title actions, descriptions, metadata, and tabs use the same width as surrounding page content.
+
+  **Affected components:** Header
+
+- b67a862: Updated Storybook development tooling for `@backstage/ui` to version 10.4.
+- d726bcd: Added new `DatePicker` component — combines a date field and a calendar popover for selecting a date, 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.
+
+  **Affected components:** DatePicker
+
+- 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.
+- 25909ba: Added `searchDebounceMs` and `filterDebounceMs` options to `useTable` in `complete` mode. Both default to `0` (no debounce, no observable change for existing consumers); set them to defer the client-side filter/search/sort pipeline on large datasets without reimplementing input-layer debouncing. The controlled `search` / `onSearchChange` and `filter` / `onFilterChange` callbacks continue to fire on every change.
+
+  **Affected components:** Table
+
+- ddca41f: Added a new `Combobox` component. It pairs a text input with a filterable dropdown of options and supports single selection, sectioned options, icons, sizes, and custom typed values via `allowsCustomValue`.
+
+  **Affected components:** Combobox
+
 ## 0.15.0-next.3
 
 ### Patch Changes

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

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Combobox_bui-Combobox__90f6359000,\n  .Combobox_bui-ComboboxPopover__90f6359000 {\n    &[data-size='small'] {\n      --combobox-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --combobox-item-height: 2.5rem;\n    }\n  }\n\n  .Combobox_bui-ComboboxPopover__90f6359000 {\n    min-width: var(--trigger-width);\n\n    .bui-PopoverContent {\n      padding: 0;\n    }\n  }\n\n  .Combobox_bui-ComboboxInput__90f6359000 {\n    box-sizing: border-box;\n    border-radius: var(--bui-radius-3);\n    border: none;\n    outline: none;\n    background-color: var(--bui-bg-neutral-1);\n    transition: box-shadow 0.2s ease-in-out;\n\n    &[data-on-bg='neutral-1'] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      background-color: var(--bui-bg-neutral-3);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      background-color: var(--bui-bg-neutral-4);\n    }\n\n    .Combobox_bui-Combobox__90f6359000[data-focus-within] & {\n      box-shadow: inset 0 0 0 1px var(--bui-ring);\n    }\n\n    .Combobox_bui-Combobox__90f6359000[data-invalid] & {\n      box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n    }\n\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n    width: 100%;\n    height: var(--combobox-item-height);\n\n    .Combobox_bui-Combobox__90f6359000[data-size='small'] & {\n      padding-inline: var(--bui-space-3) 0;\n    }\n\n    .Combobox_bui-Combobox__90f6359000[data-size='medium'] & {\n      padding-inline: var(--bui-space-4) 0;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  }\n\n  .Combobox_bui-ComboboxInputIcon__90f6359000 {\n    display: grid;\n    place-content: center;\n    flex-shrink: 0;\n    color: var(--bui-fg-secondary);\n    pointer-events: none;\n\n    .Combobox_bui-Combobox__90f6359000[data-size='small'] & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n\n    .Combobox_bui-Combobox__90f6359000[data-size='medium'] & svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .Combobox_bui-ComboboxInputField__90f6359000 {\n    flex: 1;\n    min-width: 0;\n    width: 100%;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    padding: 0;\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    line-height: var(--combobox-item-height);\n    height: 100%;\n    text-overflow: ellipsis;\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Combobox_bui-ComboboxInputChevron__90f6359000 {\n    flex-shrink: 0;\n    flex-grow: 0;\n    display: grid;\n    place-content: center;\n    width: var(--combobox-item-height);\n    height: var(--combobox-item-height);\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    outline: none;\n    transition: color 0.2s ease-in-out;\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      .Combobox_bui-Combobox__90f6359000[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .Combobox_bui-Combobox__90f6359000[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Combobox_bui-ComboboxList__90f6359000 {\n    overflow: auto;\n    min-height: 0;\n    padding-block: var(--bui-space-1);\n    padding-inline: var(--bui-space-1);\n\n    &[data-focus-visible] {\n      outline: none;\n    }\n  }\n\n  .Combobox_bui-ComboboxItem__90f6359000 {\n    box-sizing: border-box;\n    position: relative;\n    display: grid;\n    grid-template-areas: 'icon text';\n    grid-template-columns: 1rem 1fr;\n    align-items: center;\n    min-height: var(--combobox-item-height);\n    padding-block: var(--bui-space-1);\n    padding-left: var(--bui-space-3);\n    padding-right: var(--bui-space-4);\n    color: var(--bui-fg-primary);\n    cursor: pointer;\n    user-select: none;\n    font-size: var(--bui-font-size-3);\n    gap: var(--bui-space-2);\n    outline: none;\n    border-radius: var(--bui-radius-2);\n\n    &[data-focused] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-selected] .Combobox_bui-ComboboxItemIndicator__90f6359000 {\n      opacity: 1;\n    }\n  }\n\n  .Combobox_bui-ComboboxItemIndicator__90f6359000 {\n    grid-area: icon;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  .Combobox_bui-ComboboxItemLabel__90f6359000 {\n    flex: 1;\n    grid-area: text;\n  }\n\n  .Combobox_bui-ComboboxSection__90f6359000 {\n    &:first-child .Combobox_bui-ComboboxSectionHeader__90f6359000 {\n      padding-top: 0;\n    }\n  }\n\n  .Combobox_bui-ComboboxSectionHeader__90f6359000 {\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    padding-top: var(--bui-space-3);\n    padding-left: var(--bui-space-3);\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-1);\n    font-weight: bold;\n    letter-spacing: 0.05rem;\n    text-transform: uppercase;\n  }\n\n  .Combobox_bui-ComboboxNoResults__90f6359000 {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n  }\n}\n";
-var styles = {"bui-Combobox":"Combobox_bui-Combobox__90f6359000","bui-ComboboxPopover":"Combobox_bui-ComboboxPopover__90f6359000","bui-ComboboxInput":"Combobox_bui-ComboboxInput__90f6359000","bui-ComboboxInputIcon":"Combobox_bui-ComboboxInputIcon__90f6359000","bui-ComboboxInputField":"Combobox_bui-ComboboxInputField__90f6359000","bui-ComboboxInputChevron":"Combobox_bui-ComboboxInputChevron__90f6359000","bui-ComboboxList":"Combobox_bui-ComboboxList__90f6359000","bui-ComboboxItem":"Combobox_bui-ComboboxItem__90f6359000","bui-ComboboxItemIndicator":"Combobox_bui-ComboboxItemIndicator__90f6359000","bui-ComboboxItemLabel":"Combobox_bui-ComboboxItemLabel__90f6359000","bui-ComboboxSection":"Combobox_bui-ComboboxSection__90f6359000","bui-ComboboxSectionHeader":"Combobox_bui-ComboboxSectionHeader__90f6359000","bui-ComboboxNoResults":"Combobox_bui-ComboboxNoResults__90f6359000"};
+var css_248z = "/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Combobox_bui-Combobox__38e006d509,\n  .Combobox_bui-ComboboxPopover__38e006d509 {\n    &[data-size='small'] {\n      --combobox-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --combobox-item-height: 2.5rem;\n    }\n  }\n\n  .Combobox_bui-Combobox__38e006d509 {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    flex: 1;\n  }\n\n  .Combobox_bui-ComboboxPopover__38e006d509 {\n    min-width: var(--trigger-width);\n\n    .bui-PopoverContent {\n      padding: 0;\n    }\n  }\n\n  .Combobox_bui-ComboboxInput__38e006d509 {\n    box-sizing: border-box;\n    border-radius: var(--bui-radius-3);\n    border: none;\n    outline: none;\n    background-color: var(--bui-bg-neutral-1);\n    transition: box-shadow 0.2s ease-in-out;\n\n    &[data-on-bg='neutral-1'] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      background-color: var(--bui-bg-neutral-3);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      background-color: var(--bui-bg-neutral-4);\n    }\n\n    .Combobox_bui-Combobox__38e006d509[data-focus-within] & {\n      box-shadow: inset 0 0 0 1px var(--bui-ring);\n    }\n\n    .Combobox_bui-Combobox__38e006d509[data-invalid] & {\n      box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n    }\n\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n    width: 100%;\n    height: var(--combobox-item-height);\n\n    .Combobox_bui-Combobox__38e006d509[data-size='small'] & {\n      padding-inline: var(--bui-space-3) 0;\n    }\n\n    .Combobox_bui-Combobox__38e006d509[data-size='medium'] & {\n      padding-inline: var(--bui-space-4) 0;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  }\n\n  .Combobox_bui-ComboboxInputIcon__38e006d509 {\n    display: grid;\n    place-content: center;\n    flex-shrink: 0;\n    color: var(--bui-fg-secondary);\n    pointer-events: none;\n\n    .Combobox_bui-Combobox__38e006d509[data-size='small'] & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n\n    .Combobox_bui-Combobox__38e006d509[data-size='medium'] & svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .Combobox_bui-ComboboxInputField__38e006d509 {\n    flex: 1;\n    min-width: 0;\n    width: 100%;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    padding: 0;\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    line-height: var(--combobox-item-height);\n    height: 100%;\n    text-overflow: ellipsis;\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Combobox_bui-ComboboxInputChevron__38e006d509 {\n    flex-shrink: 0;\n    flex-grow: 0;\n    display: grid;\n    place-content: center;\n    width: var(--combobox-item-height);\n    height: var(--combobox-item-height);\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    outline: none;\n    transition: color 0.2s ease-in-out;\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      .Combobox_bui-Combobox__38e006d509[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .Combobox_bui-Combobox__38e006d509[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Combobox_bui-ComboboxList__38e006d509 {\n    overflow: auto;\n    min-height: 0;\n    padding-block: var(--bui-space-1);\n    padding-inline: var(--bui-space-1);\n\n    &[data-focus-visible] {\n      outline: none;\n    }\n  }\n\n  .Combobox_bui-ComboboxItem__38e006d509 {\n    box-sizing: border-box;\n    position: relative;\n    display: grid;\n    grid-template-areas: 'icon text';\n    grid-template-columns: 1rem 1fr;\n    align-items: center;\n    min-height: var(--combobox-item-height);\n    padding-block: var(--bui-space-1);\n    padding-left: var(--bui-space-3);\n    padding-right: var(--bui-space-4);\n    color: var(--bui-fg-primary);\n    cursor: pointer;\n    user-select: none;\n    font-size: var(--bui-font-size-3);\n    gap: var(--bui-space-2);\n    outline: none;\n    border-radius: var(--bui-radius-2);\n\n    &[data-focused] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-selected] .Combobox_bui-ComboboxItemIndicator__38e006d509 {\n      opacity: 1;\n    }\n  }\n\n  .Combobox_bui-ComboboxItemIndicator__38e006d509 {\n    grid-area: icon;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  .Combobox_bui-ComboboxItemLabel__38e006d509 {\n    flex: 1;\n    grid-area: text;\n  }\n\n  .Combobox_bui-ComboboxSection__38e006d509 {\n    &:first-child .Combobox_bui-ComboboxSectionHeader__38e006d509 {\n      padding-top: 0;\n    }\n  }\n\n  .Combobox_bui-ComboboxSectionHeader__38e006d509 {\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    padding-top: var(--bui-space-3);\n    padding-left: var(--bui-space-3);\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-1);\n    font-weight: bold;\n    letter-spacing: 0.05rem;\n    text-transform: uppercase;\n  }\n\n  .Combobox_bui-ComboboxNoResults__38e006d509 {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n  }\n}\n";
+var styles = {"bui-Combobox":"Combobox_bui-Combobox__38e006d509","bui-ComboboxPopover":"Combobox_bui-ComboboxPopover__38e006d509","bui-ComboboxInput":"Combobox_bui-ComboboxInput__38e006d509","bui-ComboboxInputIcon":"Combobox_bui-ComboboxInputIcon__38e006d509","bui-ComboboxInputField":"Combobox_bui-ComboboxInputField__38e006d509","bui-ComboboxInputChevron":"Combobox_bui-ComboboxInputChevron__38e006d509","bui-ComboboxList":"Combobox_bui-ComboboxList__38e006d509","bui-ComboboxItem":"Combobox_bui-ComboboxItem__38e006d509","bui-ComboboxItemIndicator":"Combobox_bui-ComboboxItemIndicator__38e006d509","bui-ComboboxItemLabel":"Combobox_bui-ComboboxItemLabel__38e006d509","bui-ComboboxSection":"Combobox_bui-ComboboxSection__38e006d509","bui-ComboboxSectionHeader":"Combobox_bui-ComboboxSectionHeader__38e006d509","bui-ComboboxNoResults":"Combobox_bui-ComboboxNoResults__38e006d509"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/DatePicker/DatePicker.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  /* ============================================================\n     Root\n  ============================================================ */\n\n  .DatePicker_bui-DatePicker__5f91f82970 {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n  }\n\n  /* ============================================================\n     Field group — custom container (not reusing any BUI field)\n  ============================================================ */\n\n  .DatePicker_bui-DatePickerGroup__5f91f82970 {\n    display: flex;\n    align-items: center;\n    background-color: var(--bui-bg-neutral-1);\n    border-radius: var(--bui-radius-2);\n    padding: 0 var(--bui-space-1) 0 var(--bui-space-3);\n    width: fit-content;\n    min-width: 200px;\n    max-width: 100%;\n    overflow: clip;\n    transition: box-shadow 0.2s ease-in-out;\n    cursor: text;\n\n    /* bg consumer — auto-increment background based on parent context */\n    &[data-on-bg='neutral-1'] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      background-color: var(--bui-bg-neutral-3);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      background-color: var(--bui-bg-neutral-4);\n    }\n\n    &[data-focus-within] {\n      outline: none;\n      box-shadow: inset 0 0 0 1px var(--bui-ring);\n    }\n\n    &[data-invalid] {\n      box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    /* Sizes */\n    &[data-size='small'] {\n      height: 2rem;\n      padding-inline-start: var(--bui-space-2);\n    }\n\n    &[data-size='medium'] {\n      height: 2.5rem;\n      min-width: 210px;\n      padding-inline-end: var(--bui-space-1);\n\n      & .DatePicker_bui-DatePickerButton__5f91f82970 {\n        width: 2rem;\n        height: 2rem;\n      }\n    }\n  }\n\n  /* ============================================================\n     Date input\n  ============================================================ */\n\n  .DatePicker_bui-DatePickerDateInput__5f91f82970 {\n    flex: 1;\n    display: inline-flex;\n    align-items: center;\n    width: unset;\n    min-width: unset;\n    padding: unset;\n    border: unset;\n    box-shadow: none;\n    background: none;\n    height: auto;\n    overflow-x: auto;\n    overflow-y: clip;\n    scrollbar-width: none;\n  }\n\n  /* ============================================================\n     Date segments (month, day, year literals and placeholders)\n  ============================================================ */\n\n  .DatePicker_bui-DatePickerSegment__5f91f82970 {\n    display: inline-block;\n    padding: var(--bui-space-0_5) var(--bui-space-1);\n    border-radius: var(--bui-radius-1);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    caret-color: transparent;\n    outline: none;\n    font-variant-numeric: tabular-nums;\n\n    &[data-placeholder] {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-type='literal'] {\n      color: var(--bui-fg-secondary);\n      padding: 0;\n    }\n\n    &[data-focused] {\n      background-color: var(--bui-bg-solid);\n      color: var(--bui-fg-solid);\n      border-radius: var(--bui-radius-1);\n\n      &[data-placeholder] {\n        color: var(--bui-fg-solid);\n      }\n    }\n\n    &[data-disabled] {\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  /* ============================================================\n     Calendar trigger button\n  ============================================================ */\n\n  .DatePicker_bui-DatePickerButton__5f91f82970 {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    padding: 0;\n    background: none;\n    border: none;\n    border-radius: var(--bui-radius-2);\n    color: var(--bui-fg-secondary);\n    cursor: pointer;\n    margin-left: auto;\n    transition: color 0.15s ease-in-out;\n    outline: none;\n\n    &[data-hovered] {\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-focus-visible] {\n      box-shadow: inset 0 0 0 1px var(--bui-ring);\n    }\n\n    &[data-pressed] {\n      color: var(--bui-fg-primary);\n    }\n  }\n\n  /* ============================================================\n     Calendar (inside Popover)\n  ============================================================ */\n\n  .DatePicker_bui-DatePickerCalendar__5f91f82970 {\n    width: fit-content;\n    outline: none;\n  }\n\n  .DatePicker_bui-DatePickerCalendarHeader__5f91f82970 {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--bui-space-3);\n  }\n\n  .DatePicker_bui-DatePickerCalendarHeading__5f91f82970 {\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-bold);\n    font-family: var(--bui-font-regular);\n    color: var(--bui-fg-primary);\n    flex: 1;\n    text-align: center;\n  }\n\n  .DatePicker_bui-DatePickerCalendarNavButton__5f91f82970 {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--bui-space-8);\n    height: var(--bui-space-8);\n    background: none;\n    border: none;\n    border-radius: var(--bui-radius-2);\n    color: var(--bui-fg-secondary);\n    cursor: pointer;\n    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;\n\n    &[data-hovered] {\n      background-color: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 1px;\n    }\n\n    &[data-pressed] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n  }\n\n  /* ============================================================\n     Calendar grid\n  ============================================================ */\n\n  .DatePicker_bui-DatePickerCalendarGrid__5f91f82970 {\n    width: 100%;\n    border-collapse: separate;\n    border-spacing: 0 2px;\n  }\n\n  .DatePicker_bui-DatePickerCalendarHeaderCell__5f91f82970 {\n    font-size: var(--bui-font-size-2);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-secondary);\n    text-align: center;\n    padding-bottom: var(--bui-space-2);\n    width: 40px;\n  }\n\n  /* ============================================================\n     Calendar cells\n  ============================================================ */\n\n  .DatePicker_bui-DatePickerCalendarCell__5f91f82970 {\n    position: relative;\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    cursor: default;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    color: var(--bui-fg-primary);\n    border-radius: var(--bui-radius-full);\n\n    &[data-outside-month] {\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-disabled] {\n      color: var(--bui-fg-disabled);\n      cursor: not-allowed;\n    }\n\n    &[data-unavailable] {\n      color: var(--bui-fg-disabled);\n      cursor: not-allowed;\n      text-decoration: line-through;\n    }\n\n    &[data-hovered]:not([data-disabled]):not([data-unavailable]):not(\n        [data-selected]\n      ) {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: -2px;\n    }\n\n    /* Today marker */\n    &[data-today]:not([data-selected]) {\n      font-weight: var(--bui-font-weight-bold);\n    }\n\n    /* Selected day */\n    &[data-selected] {\n      background-color: var(--bui-bg-solid);\n      color: var(--bui-fg-solid);\n    }\n  }\n}\n";
-var styles = {"bui-DatePicker":"DatePicker_bui-DatePicker__5f91f82970","bui-DatePickerGroup":"DatePicker_bui-DatePickerGroup__5f91f82970","bui-DatePickerButton":"DatePicker_bui-DatePickerButton__5f91f82970","bui-DatePickerDateInput":"DatePicker_bui-DatePickerDateInput__5f91f82970","bui-DatePickerSegment":"DatePicker_bui-DatePickerSegment__5f91f82970","bui-DatePickerCalendar":"DatePicker_bui-DatePickerCalendar__5f91f82970","bui-DatePickerCalendarHeader":"DatePicker_bui-DatePickerCalendarHeader__5f91f82970","bui-DatePickerCalendarHeading":"DatePicker_bui-DatePickerCalendarHeading__5f91f82970","bui-DatePickerCalendarNavButton":"DatePicker_bui-DatePickerCalendarNavButton__5f91f82970","bui-DatePickerCalendarGrid":"DatePicker_bui-DatePickerCalendarGrid__5f91f82970","bui-DatePickerCalendarHeaderCell":"DatePicker_bui-DatePickerCalendarHeaderCell__5f91f82970","bui-DatePickerCalendarCell":"DatePicker_bui-DatePickerCalendarCell__5f91f82970"};
+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  /* ============================================================\n     Root\n  ============================================================ */\n\n  .DatePicker_bui-DatePicker__9e29d67f28 {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex: 1;\n  }\n\n  /* ============================================================\n     Field group — custom container (not reusing any BUI field)\n  ============================================================ */\n\n  .DatePicker_bui-DatePickerGroup__9e29d67f28 {\n    display: flex;\n    align-items: center;\n    background-color: var(--bui-bg-neutral-1);\n    border-radius: var(--bui-radius-2);\n    padding: 0 var(--bui-space-1) 0 var(--bui-space-3);\n    width: fit-content;\n    min-width: 200px;\n    max-width: 100%;\n    overflow: clip;\n    transition: box-shadow 0.2s ease-in-out;\n    cursor: text;\n\n    /* bg consumer — auto-increment background based on parent context */\n    &[data-on-bg='neutral-1'] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      background-color: var(--bui-bg-neutral-3);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      background-color: var(--bui-bg-neutral-4);\n    }\n\n    &[data-focus-within] {\n      outline: none;\n      box-shadow: inset 0 0 0 1px var(--bui-ring);\n    }\n\n    &[data-invalid] {\n      box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    /* Sizes */\n    &[data-size='small'] {\n      height: 2rem;\n      padding-inline-start: var(--bui-space-2);\n    }\n\n    &[data-size='medium'] {\n      height: 2.5rem;\n      min-width: 210px;\n      padding-inline-end: var(--bui-space-1);\n\n      & .DatePicker_bui-DatePickerButton__9e29d67f28 {\n        width: 2rem;\n        height: 2rem;\n      }\n    }\n  }\n\n  /* ============================================================\n     Date input\n  ============================================================ */\n\n  .DatePicker_bui-DatePickerDateInput__9e29d67f28 {\n    flex: 1;\n    display: inline-flex;\n    align-items: center;\n    width: unset;\n    min-width: unset;\n    padding: unset;\n    border: unset;\n    box-shadow: none;\n    background: none;\n    height: auto;\n    overflow-x: auto;\n    overflow-y: clip;\n    scrollbar-width: none;\n  }\n\n  /* ============================================================\n     Date segments (month, day, year literals and placeholders)\n  ============================================================ */\n\n  .DatePicker_bui-DatePickerSegment__9e29d67f28 {\n    display: inline-block;\n    padding: var(--bui-space-0_5) var(--bui-space-1);\n    border-radius: var(--bui-radius-1);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    caret-color: transparent;\n    outline: none;\n    font-variant-numeric: tabular-nums;\n\n    &[data-placeholder] {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-type='literal'] {\n      color: var(--bui-fg-secondary);\n      padding: 0;\n    }\n\n    &[data-focused] {\n      background-color: var(--bui-bg-solid);\n      color: var(--bui-fg-solid);\n      border-radius: var(--bui-radius-1);\n\n      &[data-placeholder] {\n        color: var(--bui-fg-solid);\n      }\n    }\n\n    &[data-disabled] {\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  /* ============================================================\n     Calendar trigger button\n  ============================================================ */\n\n  .DatePicker_bui-DatePickerButton__9e29d67f28 {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    padding: 0;\n    background: none;\n    border: none;\n    border-radius: var(--bui-radius-2);\n    color: var(--bui-fg-secondary);\n    cursor: pointer;\n    margin-left: auto;\n    transition: color 0.15s ease-in-out;\n    outline: none;\n\n    &[data-hovered] {\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-focus-visible] {\n      box-shadow: inset 0 0 0 1px var(--bui-ring);\n    }\n\n    &[data-pressed] {\n      color: var(--bui-fg-primary);\n    }\n  }\n\n  /* ============================================================\n     Calendar (inside Popover)\n  ============================================================ */\n\n  .DatePicker_bui-DatePickerCalendar__9e29d67f28 {\n    width: fit-content;\n    outline: none;\n  }\n\n  .DatePicker_bui-DatePickerCalendarHeader__9e29d67f28 {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--bui-space-3);\n  }\n\n  .DatePicker_bui-DatePickerCalendarHeading__9e29d67f28 {\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-bold);\n    font-family: var(--bui-font-regular);\n    color: var(--bui-fg-primary);\n    flex: 1;\n    text-align: center;\n  }\n\n  .DatePicker_bui-DatePickerCalendarNavButton__9e29d67f28 {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--bui-space-8);\n    height: var(--bui-space-8);\n    background: none;\n    border: none;\n    border-radius: var(--bui-radius-2);\n    color: var(--bui-fg-secondary);\n    cursor: pointer;\n    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;\n\n    &[data-hovered] {\n      background-color: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 1px;\n    }\n\n    &[data-pressed] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n  }\n\n  /* ============================================================\n     Calendar grid\n  ============================================================ */\n\n  .DatePicker_bui-DatePickerCalendarGrid__9e29d67f28 {\n    width: 100%;\n    border-collapse: separate;\n    border-spacing: 0 2px;\n  }\n\n  .DatePicker_bui-DatePickerCalendarHeaderCell__9e29d67f28 {\n    font-size: var(--bui-font-size-2);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-secondary);\n    text-align: center;\n    padding-bottom: var(--bui-space-2);\n    width: 40px;\n  }\n\n  /* ============================================================\n     Calendar cells\n  ============================================================ */\n\n  .DatePicker_bui-DatePickerCalendarCell__9e29d67f28 {\n    position: relative;\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    cursor: default;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    color: var(--bui-fg-primary);\n    border-radius: var(--bui-radius-full);\n\n    &[data-outside-month] {\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-disabled] {\n      color: var(--bui-fg-disabled);\n      cursor: not-allowed;\n    }\n\n    &[data-unavailable] {\n      color: var(--bui-fg-disabled);\n      cursor: not-allowed;\n      text-decoration: line-through;\n    }\n\n    &[data-hovered]:not([data-disabled]):not([data-unavailable]):not(\n        [data-selected]\n      ) {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: -2px;\n    }\n\n    /* Today marker */\n    &[data-today]:not([data-selected]) {\n      font-weight: var(--bui-font-weight-bold);\n    }\n\n    /* Selected day */\n    &[data-selected] {\n      background-color: var(--bui-bg-solid);\n      color: var(--bui-fg-solid);\n    }\n  }\n}\n";
+var styles = {"bui-DatePicker":"DatePicker_bui-DatePicker__9e29d67f28","bui-DatePickerGroup":"DatePicker_bui-DatePickerGroup__9e29d67f28","bui-DatePickerButton":"DatePicker_bui-DatePickerButton__9e29d67f28","bui-DatePickerDateInput":"DatePicker_bui-DatePickerDateInput__9e29d67f28","bui-DatePickerSegment":"DatePicker_bui-DatePickerSegment__9e29d67f28","bui-DatePickerCalendar":"DatePicker_bui-DatePickerCalendar__9e29d67f28","bui-DatePickerCalendarHeader":"DatePicker_bui-DatePickerCalendarHeader__9e29d67f28","bui-DatePickerCalendarHeading":"DatePicker_bui-DatePickerCalendarHeading__9e29d67f28","bui-DatePickerCalendarNavButton":"DatePicker_bui-DatePickerCalendarNavButton__9e29d67f28","bui-DatePickerCalendarGrid":"DatePicker_bui-DatePickerCalendarGrid__9e29d67f28","bui-DatePickerCalendarHeaderCell":"DatePicker_bui-DatePickerCalendarHeaderCell__9e29d67f28","bui-DatePickerCalendarCell":"DatePicker_bui-DatePickerCalendarCell__9e29d67f28"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/DateRangePicker/DateRangePicker.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  /* ============================================================\n     Root\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePicker__723456065f {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n  }\n\n  /* ============================================================\n     Field group — custom container (not reusing any BUI field)\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerGroup__723456065f {\n    display: flex;\n    align-items: center;\n    background-color: var(--bui-bg-neutral-1);\n    border-radius: var(--bui-radius-2);\n    padding: 0 var(--bui-space-1) 0 var(--bui-space-3);\n    width: fit-content;\n    min-width: 280px;\n    max-width: 100%;\n    overflow: clip;\n    transition: box-shadow 0.2s ease-in-out;\n    cursor: text;\n\n    /* bg consumer — auto-increment background based on parent context */\n    &[data-on-bg='neutral-1'] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      background-color: var(--bui-bg-neutral-3);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      background-color: var(--bui-bg-neutral-4);\n    }\n\n    &[data-focus-within] {\n      outline: none;\n      box-shadow: inset 0 0 0 1px var(--bui-ring);\n    }\n\n    &[data-invalid] {\n      box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    /* Sizes */\n    &[data-size='small'] {\n      height: 2rem;\n      padding-inline-start: var(--bui-space-2);\n    }\n\n    &[data-size='medium'] {\n      height: 2.5rem;\n      min-width: 290px;\n      padding-inline-end: var(--bui-space-1);\n\n      & .DateRangePicker_bui-DateRangePickerButton__723456065f {\n        width: 2rem;\n        height: 2rem;\n      }\n    }\n  }\n\n  /* ============================================================\n     Date fields wrapper — scrollable row of inputs + separator\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerDateFields__723456065f {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    width: fit-content;\n    overflow-x: auto;\n    overflow-y: clip;\n    scrollbar-width: none;\n  }\n\n  /* ============================================================\n     Date inputs\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerDateInput__723456065f {\n    display: inline-flex;\n    align-items: center;\n    width: unset;\n    min-width: unset;\n    padding: unset;\n    border: unset;\n    box-shadow: none;\n    background: none;\n    height: auto;\n\n    &[slot='end'] {\n      flex: 1;\n    }\n  }\n\n  /* ============================================================\n     Date segments (month, day, year literals and placeholders)\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerSegment__723456065f {\n    display: inline-block;\n    padding: var(--bui-space-0_5) var(--bui-space-1);\n    border-radius: var(--bui-radius-1);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    caret-color: transparent;\n    outline: none;\n    font-variant-numeric: tabular-nums;\n\n    &[data-placeholder] {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-type='literal'] {\n      color: var(--bui-fg-secondary);\n      padding: 0;\n    }\n\n    &[data-focused] {\n      background-color: var(--bui-bg-solid);\n      color: var(--bui-fg-solid);\n      border-radius: var(--bui-radius-1);\n\n      &[data-placeholder] {\n        color: var(--bui-fg-solid);\n      }\n    }\n\n    &[data-disabled] {\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  /* ============================================================\n     Separator between start and end\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerSeparator__723456065f {\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    flex-shrink: 0;\n    user-select: none;\n    padding: 0 var(--bui-space-1);\n  }\n\n  /* ============================================================\n     Calendar trigger button\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerButton__723456065f {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    padding: 0;\n    background: none;\n    border: none;\n    border-radius: var(--bui-radius-2);\n    color: var(--bui-fg-secondary);\n    cursor: pointer;\n    margin-left: auto;\n    transition: color 0.15s ease-in-out;\n    outline: none;\n\n    &[data-hovered] {\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-focus-visible] {\n      box-shadow: inset 0 0 0 1px var(--bui-ring);\n    }\n\n    &[data-pressed] {\n      color: var(--bui-fg-primary);\n    }\n  }\n\n  /* ============================================================\n     Calendar (inside Popover)\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerCalendar__723456065f {\n    width: fit-content;\n    outline: none;\n  }\n\n  .DateRangePicker_bui-DateRangePickerCalendarHeader__723456065f {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--bui-space-3);\n  }\n\n  .DateRangePicker_bui-DateRangePickerCalendarHeading__723456065f {\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-bold);\n    font-family: var(--bui-font-regular);\n    color: var(--bui-fg-primary);\n    flex: 1;\n    text-align: center;\n  }\n\n  .DateRangePicker_bui-DateRangePickerCalendarNavButton__723456065f {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--bui-space-8);\n    height: var(--bui-space-8);\n    background: none;\n    border: none;\n    border-radius: var(--bui-radius-2);\n    color: var(--bui-fg-secondary);\n    cursor: pointer;\n    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;\n\n    &[data-hovered] {\n      background-color: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 1px;\n    }\n\n    &[data-pressed] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n  }\n\n  /* ============================================================\n     Calendar grid\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerCalendarGrid__723456065f {\n    width: 100%;\n    border-collapse: separate;\n    border-spacing: 0 2px;\n  }\n\n  .DateRangePicker_bui-DateRangePickerCalendarHeaderCell__723456065f {\n    font-size: var(--bui-font-size-2);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-secondary);\n    text-align: center;\n    padding-bottom: var(--bui-space-2);\n    width: 40px;\n  }\n\n  /* ============================================================\n     Calendar cells\n     \n     Technique: isolation: isolate creates a stacking context so\n     that ::before (range fill, z-index: -2) and ::after (circle,\n     z-index: -1) paint behind the cell's text content while still\n     rendering on top of the page background.\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerCalendarCell__723456065f {\n    isolation: isolate;\n    position: relative;\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    cursor: default;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    color: var(--bui-fg-primary);\n\n    &[data-outside-month] {\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-disabled] {\n      color: var(--bui-fg-disabled);\n      cursor: not-allowed;\n    }\n\n    &[data-unavailable] {\n      color: var(--bui-fg-disabled);\n      cursor: not-allowed;\n      text-decoration: line-through;\n    }\n\n    &[data-hovered]:not([data-disabled]):not([data-unavailable]):not(\n        [data-selected]\n      ) {\n      background-color: var(--bui-bg-neutral-2);\n      border-radius: var(--bui-radius-full);\n    }\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: -2px;\n      border-radius: var(--bui-radius-full);\n    }\n\n    /* Today marker */\n    &[data-today]:not([data-selected]):not([data-selection-start]):not(\n        [data-selection-end]\n      ) {\n      font-weight: var(--bui-font-weight-bold);\n    }\n\n    /* ── Range fill via ::before ─────────────────────────────── */\n\n    &[data-selected]::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: color-mix(in srgb, var(--bui-bg-solid) 15%, transparent);\n      z-index: -2;\n    }\n\n    /* Start cell: fill only the right half to connect forward */\n    &[data-selection-start]::before {\n      left: 50%;\n    }\n\n    /* End cell: fill only the left half to connect backward */\n    &[data-selection-end]::before {\n      right: 50%;\n    }\n\n    /* Same-day selection: no range fill needed */\n    &[data-selection-start][data-selection-end]::before {\n      display: none;\n    }\n\n    /* ── Solid circle for start / end via ::after ────────────── */\n\n    &[data-selection-start]::after,\n    &[data-selection-end]::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: var(--bui-bg-solid);\n      border-radius: var(--bui-radius-full);\n      z-index: -1;\n    }\n\n    /* Text color on top of the solid circle */\n    &[data-selection-start],\n    &[data-selection-end] {\n      color: var(--bui-fg-solid);\n    }\n  }\n\n  /* Round the left edge of ::before when the cell is the first in its row\n     (our class is on an inner element inside <td>, hence td:first-child > *) */\n  .DateRangePicker_bui-DateRangePickerCalendarCell__723456065f[data-selected]:not(\n      [data-selection-start]\n    ):is(td:first-child > *, [aria-disabled] + td > *)::before {\n    border-start-start-radius: var(--bui-radius-full);\n    border-end-start-radius: var(--bui-radius-full);\n  }\n\n  /* Round the right edge of ::before when the cell is the last in its row */\n  .DateRangePicker_bui-DateRangePickerCalendarCell__723456065f[data-selected]:not([data-selection-end]):is(\n      td:last-child > *\n    )::before {\n    border-start-end-radius: var(--bui-radius-full);\n    border-end-end-radius: var(--bui-radius-full);\n  }\n}\n";
-var styles = {"bui-DateRangePicker":"DateRangePicker_bui-DateRangePicker__723456065f","bui-DateRangePickerGroup":"DateRangePicker_bui-DateRangePickerGroup__723456065f","bui-DateRangePickerButton":"DateRangePicker_bui-DateRangePickerButton__723456065f","bui-DateRangePickerDateFields":"DateRangePicker_bui-DateRangePickerDateFields__723456065f","bui-DateRangePickerDateInput":"DateRangePicker_bui-DateRangePickerDateInput__723456065f","bui-DateRangePickerSegment":"DateRangePicker_bui-DateRangePickerSegment__723456065f","bui-DateRangePickerSeparator":"DateRangePicker_bui-DateRangePickerSeparator__723456065f","bui-DateRangePickerCalendar":"DateRangePicker_bui-DateRangePickerCalendar__723456065f","bui-DateRangePickerCalendarHeader":"DateRangePicker_bui-DateRangePickerCalendarHeader__723456065f","bui-DateRangePickerCalendarHeading":"DateRangePicker_bui-DateRangePickerCalendarHeading__723456065f","bui-DateRangePickerCalendarNavButton":"DateRangePicker_bui-DateRangePickerCalendarNavButton__723456065f","bui-DateRangePickerCalendarGrid":"DateRangePicker_bui-DateRangePickerCalendarGrid__723456065f","bui-DateRangePickerCalendarHeaderCell":"DateRangePicker_bui-DateRangePickerCalendarHeaderCell__723456065f","bui-DateRangePickerCalendarCell":"DateRangePicker_bui-DateRangePickerCalendarCell__723456065f"};
+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  /* ============================================================\n     Root\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePicker__933437904e {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex: 1;\n  }\n\n  /* ============================================================\n     Field group — custom container (not reusing any BUI field)\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerGroup__933437904e {\n    display: flex;\n    align-items: center;\n    background-color: var(--bui-bg-neutral-1);\n    border-radius: var(--bui-radius-2);\n    padding: 0 var(--bui-space-1) 0 var(--bui-space-3);\n    width: fit-content;\n    min-width: 280px;\n    max-width: 100%;\n    overflow: clip;\n    transition: box-shadow 0.2s ease-in-out;\n    cursor: text;\n\n    /* bg consumer — auto-increment background based on parent context */\n    &[data-on-bg='neutral-1'] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      background-color: var(--bui-bg-neutral-3);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      background-color: var(--bui-bg-neutral-4);\n    }\n\n    &[data-focus-within] {\n      outline: none;\n      box-shadow: inset 0 0 0 1px var(--bui-ring);\n    }\n\n    &[data-invalid] {\n      box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    /* Sizes */\n    &[data-size='small'] {\n      height: 2rem;\n      padding-inline-start: var(--bui-space-2);\n    }\n\n    &[data-size='medium'] {\n      height: 2.5rem;\n      min-width: 290px;\n      padding-inline-end: var(--bui-space-1);\n\n      & .DateRangePicker_bui-DateRangePickerButton__933437904e {\n        width: 2rem;\n        height: 2rem;\n      }\n    }\n  }\n\n  /* ============================================================\n     Date fields wrapper — scrollable row of inputs + separator\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerDateFields__933437904e {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    width: fit-content;\n    overflow-x: auto;\n    overflow-y: clip;\n    scrollbar-width: none;\n  }\n\n  /* ============================================================\n     Date inputs\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerDateInput__933437904e {\n    display: inline-flex;\n    align-items: center;\n    width: unset;\n    min-width: unset;\n    padding: unset;\n    border: unset;\n    box-shadow: none;\n    background: none;\n    height: auto;\n\n    &[slot='end'] {\n      flex: 1;\n    }\n  }\n\n  /* ============================================================\n     Date segments (month, day, year literals and placeholders)\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerSegment__933437904e {\n    display: inline-block;\n    padding: var(--bui-space-0_5) var(--bui-space-1);\n    border-radius: var(--bui-radius-1);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    caret-color: transparent;\n    outline: none;\n    font-variant-numeric: tabular-nums;\n\n    &[data-placeholder] {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-type='literal'] {\n      color: var(--bui-fg-secondary);\n      padding: 0;\n    }\n\n    &[data-focused] {\n      background-color: var(--bui-bg-solid);\n      color: var(--bui-fg-solid);\n      border-radius: var(--bui-radius-1);\n\n      &[data-placeholder] {\n        color: var(--bui-fg-solid);\n      }\n    }\n\n    &[data-disabled] {\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  /* ============================================================\n     Separator between start and end\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerSeparator__933437904e {\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    flex-shrink: 0;\n    user-select: none;\n    padding: 0 var(--bui-space-1);\n  }\n\n  /* ============================================================\n     Calendar trigger button\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerButton__933437904e {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    padding: 0;\n    background: none;\n    border: none;\n    border-radius: var(--bui-radius-2);\n    color: var(--bui-fg-secondary);\n    cursor: pointer;\n    margin-left: auto;\n    transition: color 0.15s ease-in-out;\n    outline: none;\n\n    &[data-hovered] {\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-focus-visible] {\n      box-shadow: inset 0 0 0 1px var(--bui-ring);\n    }\n\n    &[data-pressed] {\n      color: var(--bui-fg-primary);\n    }\n  }\n\n  /* ============================================================\n     Calendar (inside Popover)\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerCalendar__933437904e {\n    width: fit-content;\n    outline: none;\n  }\n\n  .DateRangePicker_bui-DateRangePickerCalendarHeader__933437904e {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--bui-space-3);\n  }\n\n  .DateRangePicker_bui-DateRangePickerCalendarHeading__933437904e {\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-bold);\n    font-family: var(--bui-font-regular);\n    color: var(--bui-fg-primary);\n    flex: 1;\n    text-align: center;\n  }\n\n  .DateRangePicker_bui-DateRangePickerCalendarNavButton__933437904e {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--bui-space-8);\n    height: var(--bui-space-8);\n    background: none;\n    border: none;\n    border-radius: var(--bui-radius-2);\n    color: var(--bui-fg-secondary);\n    cursor: pointer;\n    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;\n\n    &[data-hovered] {\n      background-color: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 1px;\n    }\n\n    &[data-pressed] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n  }\n\n  /* ============================================================\n     Calendar grid\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerCalendarGrid__933437904e {\n    width: 100%;\n    border-collapse: separate;\n    border-spacing: 0 2px;\n  }\n\n  .DateRangePicker_bui-DateRangePickerCalendarHeaderCell__933437904e {\n    font-size: var(--bui-font-size-2);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-secondary);\n    text-align: center;\n    padding-bottom: var(--bui-space-2);\n    width: 40px;\n  }\n\n  /* ============================================================\n     Calendar cells\n     \n     Technique: isolation: isolate creates a stacking context so\n     that ::before (range fill, z-index: -2) and ::after (circle,\n     z-index: -1) paint behind the cell's text content while still\n     rendering on top of the page background.\n  ============================================================ */\n\n  .DateRangePicker_bui-DateRangePickerCalendarCell__933437904e {\n    isolation: isolate;\n    position: relative;\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    cursor: default;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    color: var(--bui-fg-primary);\n\n    &[data-outside-month] {\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-disabled] {\n      color: var(--bui-fg-disabled);\n      cursor: not-allowed;\n    }\n\n    &[data-unavailable] {\n      color: var(--bui-fg-disabled);\n      cursor: not-allowed;\n      text-decoration: line-through;\n    }\n\n    &[data-hovered]:not([data-disabled]):not([data-unavailable]):not(\n        [data-selected]\n      ) {\n      background-color: var(--bui-bg-neutral-2);\n      border-radius: var(--bui-radius-full);\n    }\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: -2px;\n      border-radius: var(--bui-radius-full);\n    }\n\n    /* Today marker */\n    &[data-today]:not([data-selected]):not([data-selection-start]):not(\n        [data-selection-end]\n      ) {\n      font-weight: var(--bui-font-weight-bold);\n    }\n\n    /* ── Range fill via ::before ─────────────────────────────── */\n\n    &[data-selected]::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: color-mix(in srgb, var(--bui-bg-solid) 15%, transparent);\n      z-index: -2;\n    }\n\n    /* Start cell: fill only the right half to connect forward */\n    &[data-selection-start]::before {\n      left: 50%;\n    }\n\n    /* End cell: fill only the left half to connect backward */\n    &[data-selection-end]::before {\n      right: 50%;\n    }\n\n    /* Same-day selection: no range fill needed */\n    &[data-selection-start][data-selection-end]::before {\n      display: none;\n    }\n\n    /* ── Solid circle for start / end via ::after ────────────── */\n\n    &[data-selection-start]::after,\n    &[data-selection-end]::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: var(--bui-bg-solid);\n      border-radius: var(--bui-radius-full);\n      z-index: -1;\n    }\n\n    /* Text color on top of the solid circle */\n    &[data-selection-start],\n    &[data-selection-end] {\n      color: var(--bui-fg-solid);\n    }\n  }\n\n  /* Round the left edge of ::before when the cell is the first in its row\n     (our class is on an inner element inside <td>, hence td:first-child > *) */\n  .DateRangePicker_bui-DateRangePickerCalendarCell__933437904e[data-selected]:not(\n      [data-selection-start]\n    ):is(td:first-child > *, [aria-disabled] + td > *)::before {\n    border-start-start-radius: var(--bui-radius-full);\n    border-end-start-radius: var(--bui-radius-full);\n  }\n\n  /* Round the right edge of ::before when the cell is the last in its row */\n  .DateRangePicker_bui-DateRangePickerCalendarCell__933437904e[data-selected]:not([data-selection-end]):is(\n      td:last-child > *\n    )::before {\n    border-start-end-radius: var(--bui-radius-full);\n    border-end-end-radius: var(--bui-radius-full);\n  }\n}\n";
+var styles = {"bui-DateRangePicker":"DateRangePicker_bui-DateRangePicker__933437904e","bui-DateRangePickerGroup":"DateRangePicker_bui-DateRangePickerGroup__933437904e","bui-DateRangePickerButton":"DateRangePicker_bui-DateRangePickerButton__933437904e","bui-DateRangePickerDateFields":"DateRangePicker_bui-DateRangePickerDateFields__933437904e","bui-DateRangePickerDateInput":"DateRangePicker_bui-DateRangePickerDateInput__933437904e","bui-DateRangePickerSegment":"DateRangePicker_bui-DateRangePickerSegment__933437904e","bui-DateRangePickerSeparator":"DateRangePicker_bui-DateRangePickerSeparator__933437904e","bui-DateRangePickerCalendar":"DateRangePicker_bui-DateRangePickerCalendar__933437904e","bui-DateRangePickerCalendarHeader":"DateRangePicker_bui-DateRangePickerCalendarHeader__933437904e","bui-DateRangePickerCalendarHeading":"DateRangePicker_bui-DateRangePickerCalendarHeading__933437904e","bui-DateRangePickerCalendarNavButton":"DateRangePicker_bui-DateRangePickerCalendarNavButton__933437904e","bui-DateRangePickerCalendarGrid":"DateRangePicker_bui-DateRangePickerCalendarGrid__933437904e","bui-DateRangePickerCalendarHeaderCell":"DateRangePicker_bui-DateRangePickerCalendarHeaderCell__933437904e","bui-DateRangePickerCalendarCell":"DateRangePicker_bui-DateRangePickerCalendarCell__933437904e"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/Header/Header.esm.js

@@ -10,6 +10,8 @@ import { Lexer } from 'marked';
 import { Link } from '../Link/Link.esm.js';
 import '../Link/Link.module.css.esm.js';
 import { useMemo, useRef, useState, useEffect, Fragment as Fragment$1 } from 'react';
+import { Container } from '../Container/Container.esm.js';
+import '../Container/Container.module.css.esm.js';
 
 const getScrollParent = (element) => {
   let parent = element?.parentElement;
@@ -96,23 +98,30 @@ const Header = (props) => {
     };
   }, [sticky]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: classes.headerTop, "data-sticky": sticky || void 0, children: tags && tags.length > 0 && /* @__PURE__ */ jsx("ul", { className: classes.tags, children: tags.map((tag, i) => /* @__PURE__ */ jsx(
-      "li",
+    /* @__PURE__ */ jsx(
+      Container,
       {
-        className: classes.tag,
-        children: tag.href ? /* @__PURE__ */ jsx(
-          Link,
+        className: classes.headerTop,
+        "data-sticky": sticky || void 0,
+        children: tags && tags.length > 0 && /* @__PURE__ */ jsx("ul", { className: classes.tags, children: tags.map((tag, i) => /* @__PURE__ */ jsx(
+          "li",
           {
-            href: tag.href,
-            variant: "body-medium",
-            color: "secondary",
-            standalone: true,
-            children: tag.label
-          }
-        ) : /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: tag.label })
-      },
-      `${i}:${tag.label}:${tag.href ?? ""}`
-    )) }) }),
+            className: classes.tag,
+            children: tag.href ? /* @__PURE__ */ jsx(
+              Link,
+              {
+                href: tag.href,
+                variant: "body-medium",
+                color: "secondary",
+                standalone: true,
+                children: tag.label
+              }
+            ) : /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: tag.label })
+          },
+          `${i}:${tag.label}:${tag.href ?? ""}`
+        )) })
+      }
+    ),
     sticky && /* @__PURE__ */ jsx(
       "div",
       {
@@ -123,7 +132,7 @@ const Header = (props) => {
       }
     ),
     /* @__PURE__ */ jsxs(
-      "div",
+      Container,
       {
         className: classes.content,
         "data-sticky": sticky || void 0,
@@ -180,22 +189,29 @@ const Header = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: classes.headerBottom, "data-sticky": sticky || void 0, children: [
-      description && /* @__PURE__ */ jsx(
-        Text,
-        {
-          variant: "body-medium",
-          color: "secondary",
-          className: classes.description,
-          children: descriptionNodes
-        }
-      ),
-      metadata && metadata.length > 0 && /* @__PURE__ */ jsx("dl", { className: classes.metaRow, children: metadata.map((item, i) => /* @__PURE__ */ jsxs("div", { className: classes.metaItem, children: [
-        /* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: item.label }) }),
-        /* @__PURE__ */ jsx("dd", { children: typeof item.value === "string" ? /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: item.value }) : item.value })
-      ] }, `${i}:${item.label}`)) }),
-      tabs && /* @__PURE__ */ jsx("div", { className: classes.tabsWrapper, children: /* @__PURE__ */ jsx(HeaderNav, { tabs, activeTabId }) })
-    ] })
+    /* @__PURE__ */ jsxs(
+      Container,
+      {
+        className: classes.headerBottom,
+        "data-sticky": sticky || void 0,
+        children: [
+          description && /* @__PURE__ */ jsx(
+            Text,
+            {
+              variant: "body-medium",
+              color: "secondary",
+              className: classes.description,
+              children: descriptionNodes
+            }
+          ),
+          metadata && metadata.length > 0 && /* @__PURE__ */ jsx("dl", { className: classes.metaRow, children: metadata.map((item, i) => /* @__PURE__ */ jsxs("div", { className: classes.metaItem, children: [
+            /* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: item.label }) }),
+            /* @__PURE__ */ jsx("dd", { children: typeof item.value === "string" ? /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: item.value }) : item.value })
+          ] }, `${i}:${item.label}`)) }),
+          tabs && /* @__PURE__ */ jsx("div", { className: classes.tabsWrapper, children: /* @__PURE__ */ jsx(HeaderNav, { tabs, activeTabId }) })
+        ]
+      }
+    )
   ] });
 };
 const HeaderPage = Header;

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

@@ -1 +1 @@
-{"version":3,"file":"Header.esm.js","sources":["../../../src/components/Header/Header.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 type { HeaderProps } from './types';\nimport { Text } from '../Text';\nimport { RiArrowRightSLine } from '@remixicon/react';\nimport { HeaderNav } from './HeaderNav';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { HeaderDefinition } from './definition';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\nimport { Lexer } from 'marked';\nimport { Link } from '../Link';\nimport { Fragment, useEffect, useMemo, useRef, useState } from 'react';\n\nconst getScrollParent = (element: HTMLElement | null): Element | null => {\n  let parent = element?.parentElement;\n\n  while (parent) {\n    const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);\n\n    if (\n      /(auto|scroll|overlay|hidden)/.test(`${overflow}${overflowX}${overflowY}`)\n    ) {\n      return parent;\n    }\n\n    parent = parent.parentElement;\n  }\n\n  return null;\n};\n\nconst isStickySentinelOutOfView = (\n  sentinel: HTMLElement,\n  root: Element | null,\n) => {\n  const sentinelRect = sentinel.getBoundingClientRect();\n  const rootTop = root ? root.getBoundingClientRect().top : 0;\n\n  return sentinelRect.bottom <= rootTop;\n};\n\n/**\n * Parses inline Markdown links in a string and returns an array of React nodes.\n * URLs are sanitized via `@braintree/sanitize-url`; unsafe URLs are rendered as\n * plain text. Uses `marked` instead of `react-markdown` to avoid ESM issues.\n */\nfunction renderInlineMarkdown(text: string): React.ReactNode[] {\n  return Lexer.lexInline(text).map((token, i) => {\n    if (token.type === 'link') {\n      const href = sanitizeUrl(token.href);\n      if (href === 'about:blank') return token.text;\n      return (\n        <Link key={i} href={href} standalone>\n          {token.text}\n        </Link>\n      );\n    }\n    return token.raw;\n  });\n}\n\n/**\n * A secondary header with title, breadcrumbs, tabs, and actions.\n *\n * @public\n */\nexport const Header = (props: HeaderProps) => {\n  const { ownProps, dataAttributes } = useDefinition(HeaderDefinition, props, {\n    classNameTarget: 'content',\n  });\n  const {\n    classes,\n    title,\n    tabs,\n    activeTabId,\n    customActions,\n    breadcrumbs,\n    description,\n    tags,\n    metadata,\n    sticky,\n  } = ownProps;\n\n  const descriptionNodes = useMemo(\n    () => (description ? renderInlineMarkdown(description) : null),\n    [description],\n  );\n\n  // The sentinel sits directly before the sticky content and leaves the\n  // viewport when the content becomes stuck, letting us toggle stuck styling.\n  const stickySentinelRef = useRef<HTMLDivElement>(null);\n  const [isStuck, setIsStuck] = useState(false);\n\n  useEffect(() => {\n    if (!sticky) {\n      setIsStuck(false);\n      return;\n    }\n\n    const sentinel = stickySentinelRef.current;\n    if (!sentinel) {\n      return;\n    }\n\n    const root = getScrollParent(sentinel);\n\n    if (typeof IntersectionObserver === 'undefined') {\n      const updateStuckState = () => {\n        setIsStuck(isStickySentinelOutOfView(sentinel, root));\n      };\n      const scrollTarget = root ?? window;\n\n      updateStuckState();\n      scrollTarget.addEventListener('scroll', updateStuckState, {\n        passive: true,\n      });\n      window.addEventListener('resize', updateStuckState);\n\n      return () => {\n        scrollTarget.removeEventListener('scroll', updateStuckState);\n        window.removeEventListener('resize', updateStuckState);\n      };\n    }\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        setIsStuck(!entry.isIntersecting);\n      },\n      { root, threshold: 0 },\n    );\n\n    observer.observe(sentinel);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [sticky]);\n\n  return (\n    <>\n      <div className={classes.headerTop} data-sticky={sticky || undefined}>\n        {tags && tags.length > 0 && (\n          <ul className={classes.tags}>\n            {tags.map((tag, i) => (\n              <li\n                key={`${i}:${tag.label}:${tag.href ?? ''}`}\n                className={classes.tag}\n              >\n                {tag.href ? (\n                  <Link\n                    href={tag.href}\n                    variant=\"body-medium\"\n                    color=\"secondary\"\n                    standalone\n                  >\n                    {tag.label}\n                  </Link>\n                ) : (\n                  <Text variant=\"body-medium\" color=\"secondary\">\n                    {tag.label}\n                  </Text>\n                )}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n      {sticky && (\n        <div\n          ref={stickySentinelRef}\n          className={classes.stickySentinel}\n          data-sticky=\"\"\n          aria-hidden=\"true\"\n        />\n      )}\n      <div\n        className={classes.content}\n        data-sticky={sticky || undefined}\n        data-stuck={isStuck || undefined}\n        data-has-tags={tags && tags.length > 0 ? '' : undefined}\n        {...dataAttributes}\n      >\n        <div className={classes.titleStack}>\n          {isStuck ? (\n            <div className={classes.breadcrumbsSmall}>\n              {breadcrumbs &&\n                breadcrumbs.map(breadcrumb => (\n                  <Fragment key={breadcrumb.label}>\n                    <Link\n                      href={breadcrumb.href}\n                      color=\"secondary\"\n                      className={classes.breadcrumbLinkSmall}\n                      standalone\n                    >\n                      {breadcrumb.label}\n                    </Link>\n                    <RiArrowRightSLine\n                      className={classes.breadcrumbSeparator}\n                      size={16}\n                      color=\"var(--bui-fg-secondary)\"\n                    />\n                  </Fragment>\n                ))}\n              <h2 className={classes.titleSmall}>{title}</h2>\n            </div>\n          ) : (\n            <div className={classes.breadcrumbs}>\n              {breadcrumbs &&\n                breadcrumbs.map(breadcrumb => (\n                  <Fragment key={breadcrumb.label}>\n                    <Link\n                      href={breadcrumb.href}\n                      color=\"secondary\"\n                      className={classes.breadcrumbLink}\n                      standalone\n                    >\n                      {breadcrumb.label}\n                    </Link>\n                    <RiArrowRightSLine\n                      className={classes.breadcrumbSeparator}\n                      size={16}\n                      color=\"var(--bui-fg-secondary)\"\n                    />\n                  </Fragment>\n                ))}\n              <h2 className={classes.title}>{title}</h2>\n            </div>\n          )}\n        </div>\n        <div className={classes.controls}>{customActions}</div>\n      </div>\n      <div className={classes.headerBottom} data-sticky={sticky || undefined}>\n        {description && (\n          <Text\n            variant=\"body-medium\"\n            color=\"secondary\"\n            className={classes.description}\n          >\n            {descriptionNodes}\n          </Text>\n        )}\n        {metadata && metadata.length > 0 && (\n          <dl className={classes.metaRow}>\n            {metadata.map((item, i) => (\n              <div key={`${i}:${item.label}`} className={classes.metaItem}>\n                <dt>\n                  <Text variant=\"body-medium\" color=\"secondary\">\n                    {item.label}\n                  </Text>\n                </dt>\n                <dd>\n                  {typeof item.value === 'string' ? (\n                    <Text variant=\"body-medium\">{item.value}</Text>\n                  ) : (\n                    item.value\n                  )}\n                </dd>\n              </div>\n            ))}\n          </dl>\n        )}\n        {tabs && (\n          <div className={classes.tabsWrapper}>\n            <HeaderNav tabs={tabs} activeTabId={activeTabId} />\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\n/**\n * @public\n * @deprecated Use {@link Header} instead.\n */\nexport const HeaderPage = Header;\n"],"names":["Fragment"],"mappings":"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"}
+{"version":3,"file":"Header.esm.js","sources":["../../../src/components/Header/Header.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 type { HeaderProps } from './types';\nimport { Text } from '../Text';\nimport { RiArrowRightSLine } from '@remixicon/react';\nimport { HeaderNav } from './HeaderNav';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { HeaderDefinition } from './definition';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\nimport { Lexer } from 'marked';\nimport { Link } from '../Link';\nimport { Fragment, useEffect, useMemo, useRef, useState } from 'react';\nimport { Container } from '../Container';\n\nconst getScrollParent = (element: HTMLElement | null): Element | null => {\n  let parent = element?.parentElement;\n\n  while (parent) {\n    const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);\n\n    if (\n      /(auto|scroll|overlay|hidden)/.test(`${overflow}${overflowX}${overflowY}`)\n    ) {\n      return parent;\n    }\n\n    parent = parent.parentElement;\n  }\n\n  return null;\n};\n\nconst isStickySentinelOutOfView = (\n  sentinel: HTMLElement,\n  root: Element | null,\n) => {\n  const sentinelRect = sentinel.getBoundingClientRect();\n  const rootTop = root ? root.getBoundingClientRect().top : 0;\n\n  return sentinelRect.bottom <= rootTop;\n};\n\n/**\n * Parses inline Markdown links in a string and returns an array of React nodes.\n * URLs are sanitized via `@braintree/sanitize-url`; unsafe URLs are rendered as\n * plain text. Uses `marked` instead of `react-markdown` to avoid ESM issues.\n */\nfunction renderInlineMarkdown(text: string): React.ReactNode[] {\n  return Lexer.lexInline(text).map((token, i) => {\n    if (token.type === 'link') {\n      const href = sanitizeUrl(token.href);\n      if (href === 'about:blank') return token.text;\n      return (\n        <Link key={i} href={href} standalone>\n          {token.text}\n        </Link>\n      );\n    }\n    return token.raw;\n  });\n}\n\n/**\n * A secondary header with title, breadcrumbs, tabs, and actions.\n *\n * @public\n */\nexport const Header = (props: HeaderProps) => {\n  const { ownProps, dataAttributes } = useDefinition(HeaderDefinition, props, {\n    classNameTarget: 'content',\n  });\n  const {\n    classes,\n    title,\n    tabs,\n    activeTabId,\n    customActions,\n    breadcrumbs,\n    description,\n    tags,\n    metadata,\n    sticky,\n  } = ownProps;\n\n  const descriptionNodes = useMemo(\n    () => (description ? renderInlineMarkdown(description) : null),\n    [description],\n  );\n\n  // The sentinel sits directly before the sticky content and leaves the\n  // viewport when the content becomes stuck, letting us toggle stuck styling.\n  const stickySentinelRef = useRef<HTMLDivElement>(null);\n  const [isStuck, setIsStuck] = useState(false);\n\n  useEffect(() => {\n    if (!sticky) {\n      setIsStuck(false);\n      return;\n    }\n\n    const sentinel = stickySentinelRef.current;\n    if (!sentinel) {\n      return;\n    }\n\n    const root = getScrollParent(sentinel);\n\n    if (typeof IntersectionObserver === 'undefined') {\n      const updateStuckState = () => {\n        setIsStuck(isStickySentinelOutOfView(sentinel, root));\n      };\n      const scrollTarget = root ?? window;\n\n      updateStuckState();\n      scrollTarget.addEventListener('scroll', updateStuckState, {\n        passive: true,\n      });\n      window.addEventListener('resize', updateStuckState);\n\n      return () => {\n        scrollTarget.removeEventListener('scroll', updateStuckState);\n        window.removeEventListener('resize', updateStuckState);\n      };\n    }\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        setIsStuck(!entry.isIntersecting);\n      },\n      { root, threshold: 0 },\n    );\n\n    observer.observe(sentinel);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [sticky]);\n\n  return (\n    <>\n      <Container\n        className={classes.headerTop}\n        data-sticky={sticky || undefined}\n      >\n        {tags && tags.length > 0 && (\n          <ul className={classes.tags}>\n            {tags.map((tag, i) => (\n              <li\n                key={`${i}:${tag.label}:${tag.href ?? ''}`}\n                className={classes.tag}\n              >\n                {tag.href ? (\n                  <Link\n                    href={tag.href}\n                    variant=\"body-medium\"\n                    color=\"secondary\"\n                    standalone\n                  >\n                    {tag.label}\n                  </Link>\n                ) : (\n                  <Text variant=\"body-medium\" color=\"secondary\">\n                    {tag.label}\n                  </Text>\n                )}\n              </li>\n            ))}\n          </ul>\n        )}\n      </Container>\n      {sticky && (\n        <div\n          ref={stickySentinelRef}\n          className={classes.stickySentinel}\n          data-sticky=\"\"\n          aria-hidden=\"true\"\n        />\n      )}\n      <Container\n        className={classes.content}\n        data-sticky={sticky || undefined}\n        data-stuck={isStuck || undefined}\n        data-has-tags={tags && tags.length > 0 ? '' : undefined}\n        {...dataAttributes}\n      >\n        <div className={classes.titleStack}>\n          {isStuck ? (\n            <div className={classes.breadcrumbsSmall}>\n              {breadcrumbs &&\n                breadcrumbs.map(breadcrumb => (\n                  <Fragment key={breadcrumb.label}>\n                    <Link\n                      href={breadcrumb.href}\n                      color=\"secondary\"\n                      className={classes.breadcrumbLinkSmall}\n                      standalone\n                    >\n                      {breadcrumb.label}\n                    </Link>\n                    <RiArrowRightSLine\n                      className={classes.breadcrumbSeparator}\n                      size={16}\n                      color=\"var(--bui-fg-secondary)\"\n                    />\n                  </Fragment>\n                ))}\n              <h2 className={classes.titleSmall}>{title}</h2>\n            </div>\n          ) : (\n            <div className={classes.breadcrumbs}>\n              {breadcrumbs &&\n                breadcrumbs.map(breadcrumb => (\n                  <Fragment key={breadcrumb.label}>\n                    <Link\n                      href={breadcrumb.href}\n                      color=\"secondary\"\n                      className={classes.breadcrumbLink}\n                      standalone\n                    >\n                      {breadcrumb.label}\n                    </Link>\n                    <RiArrowRightSLine\n                      className={classes.breadcrumbSeparator}\n                      size={16}\n                      color=\"var(--bui-fg-secondary)\"\n                    />\n                  </Fragment>\n                ))}\n              <h2 className={classes.title}>{title}</h2>\n            </div>\n          )}\n        </div>\n        <div className={classes.controls}>{customActions}</div>\n      </Container>\n      <Container\n        className={classes.headerBottom}\n        data-sticky={sticky || undefined}\n      >\n        {description && (\n          <Text\n            variant=\"body-medium\"\n            color=\"secondary\"\n            className={classes.description}\n          >\n            {descriptionNodes}\n          </Text>\n        )}\n        {metadata && metadata.length > 0 && (\n          <dl className={classes.metaRow}>\n            {metadata.map((item, i) => (\n              <div key={`${i}:${item.label}`} className={classes.metaItem}>\n                <dt>\n                  <Text variant=\"body-medium\" color=\"secondary\">\n                    {item.label}\n                  </Text>\n                </dt>\n                <dd>\n                  {typeof item.value === 'string' ? (\n                    <Text variant=\"body-medium\">{item.value}</Text>\n                  ) : (\n                    item.value\n                  )}\n                </dd>\n              </div>\n            ))}\n          </dl>\n        )}\n        {tabs && (\n          <div className={classes.tabsWrapper}>\n            <HeaderNav tabs={tabs} activeTabId={activeTabId} />\n          </div>\n        )}\n      </Container>\n    </>\n  );\n};\n\n/**\n * @public\n * @deprecated Use {@link Header} instead.\n */\nexport const HeaderPage = Header;\n"],"names":["Fragment"],"mappings":"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"}

package/dist/components/Header/Header.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  .Header_bui-HeaderBottom__88cf7f55e4 {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-3);\n    margin-bottom: var(--bui-space-5);\n  }\n\n  .Header_bui-HeaderTop__88cf7f55e4,\n  .Header_bui-HeaderContent__88cf7f55e4,\n  .Header_bui-HeaderBottom__88cf7f55e4 {\n    width: 100%;\n    padding-inline: var(--bui-space-5);\n    box-sizing: border-box;\n  }\n\n  .Header_bui-HeaderStickySentinel__88cf7f55e4 {\n    height: 1px;\n    margin-bottom: -1px;\n    pointer-events: none;\n  }\n\n  .Header_bui-HeaderContent__88cf7f55e4 {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    gap: var(--bui-space-3);\n    padding-top: var(--bui-space-3);\n    padding-bottom: var(--bui-space-3);\n  }\n\n  .Header_bui-HeaderContent__88cf7f55e4[data-has-tags] {\n    padding-top: var(--bui-space-2);\n  }\n\n  .Header_bui-HeaderContent__88cf7f55e4[data-sticky] {\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    background-color: var(--bui-bg-app);\n\n    &[data-on-bg='neutral-1'] {\n      background-color: var(--bui-bg-neutral-1);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      background-color: var(--bui-bg-neutral-3);\n    }\n  }\n\n  .Header_bui-HeaderContent__88cf7f55e4[data-sticky]::after {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 1px;\n    content: '';\n    background-color: var(--bui-border-1);\n    opacity: 0;\n    transition: opacity 200ms ease;\n  }\n\n  .Header_bui-HeaderContent__88cf7f55e4[data-stuck]::after {\n    opacity: 1;\n  }\n\n  .Header_bui-HeaderTabsWrapper__88cf7f55e4 {\n    margin-left: -8px;\n  }\n\n  .Header_bui-HeaderControls__88cf7f55e4 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    flex-shrink: 0;\n  }\n\n  .Header_bui-HeaderTitleStack__88cf7f55e4 {\n    position: relative;\n    flex: 1 1 auto;\n    height: 1lh;\n    min-width: 0;\n    font-size: var(--bui-font-size-6);\n    line-height: 140%;\n    overflow: hidden;\n  }\n\n  .Header_bui-HeaderBreadcrumbs__88cf7f55e4,\n  .Header_bui-HeaderBreadcrumbsSmall__88cf7f55e4 {\n    position: absolute;\n    inset-inline: 0;\n    top: 50%;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    min-width: 0;\n    transform: translateY(-50%);\n  }\n\n  .Header_bui-HeaderBreadcrumbsSmall__88cf7f55e4 {\n    gap: var(--bui-space-1);\n  }\n\n  .Header_bui-HeaderBreadcrumbs__88cf7f55e4 .Header_bui-HeaderBreadcrumbLink__88cf7f55e4,\n  .Header_bui-HeaderBreadcrumbsSmall__88cf7f55e4 .Header_bui-HeaderBreadcrumbLinkSmall__88cf7f55e4 {\n    max-width: 240px;\n    overflow: hidden;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    line-height: inherit;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .Header_bui-HeaderBreadcrumbs__88cf7f55e4 .Header_bui-HeaderBreadcrumbLink__88cf7f55e4 {\n    font-size: inherit;\n  }\n\n  .Header_bui-HeaderBreadcrumbsSmall__88cf7f55e4 .Header_bui-HeaderBreadcrumbLinkSmall__88cf7f55e4 {\n    font-size: var(--bui-font-size-4);\n  }\n\n  .Header_bui-HeaderBreadcrumbSeparator__88cf7f55e4 {\n    flex-shrink: 0;\n  }\n\n  .Header_bui-HeaderTitle__88cf7f55e4,\n  .Header_bui-HeaderTitleSmall__88cf7f55e4 {\n    margin: 0;\n    padding: 0;\n    flex: 1 1 auto;\n    min-width: 0;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    line-height: inherit;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .Header_bui-HeaderTitle__88cf7f55e4 {\n    font-size: inherit;\n  }\n\n  .Header_bui-HeaderTitleSmall__88cf7f55e4 {\n    font-size: var(--bui-font-size-4);\n  }\n\n  .Header_bui-HeaderTags__88cf7f55e4 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    flex-wrap: wrap;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  .Header_bui-HeaderTag__88cf7f55e4 {\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .Header_bui-HeaderTag__88cf7f55e4 + .Header_bui-HeaderTag__88cf7f55e4::before {\n    content: '';\n    width: 3px;\n    height: 3px;\n    border-radius: 50%;\n    background-color: var(--bui-fg-secondary);\n    flex-shrink: 0;\n  }\n\n  .Header_bui-HeaderMetaRow__88cf7f55e4 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-5);\n    flex-wrap: wrap;\n    margin: 0;\n  }\n\n  .Header_bui-HeaderMetaItem__88cf7f55e4 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n\n    dd {\n      margin: 0;\n    }\n  }\n}\n";
-var styles = {"bui-HeaderBottom":"Header_bui-HeaderBottom__88cf7f55e4","bui-HeaderTop":"Header_bui-HeaderTop__88cf7f55e4","bui-HeaderContent":"Header_bui-HeaderContent__88cf7f55e4","bui-HeaderStickySentinel":"Header_bui-HeaderStickySentinel__88cf7f55e4","bui-HeaderTabsWrapper":"Header_bui-HeaderTabsWrapper__88cf7f55e4","bui-HeaderControls":"Header_bui-HeaderControls__88cf7f55e4","bui-HeaderTitleStack":"Header_bui-HeaderTitleStack__88cf7f55e4","bui-HeaderBreadcrumbs":"Header_bui-HeaderBreadcrumbs__88cf7f55e4","bui-HeaderBreadcrumbsSmall":"Header_bui-HeaderBreadcrumbsSmall__88cf7f55e4","bui-HeaderBreadcrumbLink":"Header_bui-HeaderBreadcrumbLink__88cf7f55e4","bui-HeaderBreadcrumbLinkSmall":"Header_bui-HeaderBreadcrumbLinkSmall__88cf7f55e4","bui-HeaderBreadcrumbSeparator":"Header_bui-HeaderBreadcrumbSeparator__88cf7f55e4","bui-HeaderTitle":"Header_bui-HeaderTitle__88cf7f55e4","bui-HeaderTitleSmall":"Header_bui-HeaderTitleSmall__88cf7f55e4","bui-HeaderTags":"Header_bui-HeaderTags__88cf7f55e4","bui-HeaderTag":"Header_bui-HeaderTag__88cf7f55e4","bui-HeaderMetaRow":"Header_bui-HeaderMetaRow__88cf7f55e4","bui-HeaderMetaItem":"Header_bui-HeaderMetaItem__88cf7f55e4"};
+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  .Header_bui-HeaderTop__f866914784.Header_bui-HeaderTop__f866914784,\n  .Header_bui-HeaderContent__f866914784.Header_bui-HeaderContent__f866914784 {\n    flex: none;\n    margin-bottom: 0;\n  }\n\n  .Header_bui-HeaderBottom__f866914784 {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-3);\n    margin-bottom: var(--bui-space-5);\n  }\n\n  .Header_bui-HeaderBottom__f866914784.Header_bui-HeaderBottom__f866914784 {\n    flex: none;\n    margin-bottom: var(--bui-space-5);\n  }\n\n  .Header_bui-HeaderStickySentinel__f866914784 {\n    height: 1px;\n    margin-bottom: -1px;\n    pointer-events: none;\n  }\n\n  .Header_bui-HeaderContent__f866914784 {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    gap: var(--bui-space-3);\n    padding-top: var(--bui-space-3);\n    padding-bottom: var(--bui-space-3);\n  }\n\n  .Header_bui-HeaderContent__f866914784[data-has-tags] {\n    padding-top: var(--bui-space-2);\n  }\n\n  .Header_bui-HeaderContent__f866914784[data-sticky] {\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    background-color: var(--bui-bg-app);\n\n    &[data-on-bg='neutral-1'] {\n      background-color: var(--bui-bg-neutral-1);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      background-color: var(--bui-bg-neutral-3);\n    }\n  }\n\n  .Header_bui-HeaderContent__f866914784[data-sticky]::after {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 1px;\n    content: '';\n    background-color: var(--bui-border-1);\n    opacity: 0;\n    transition: opacity 200ms ease;\n  }\n\n  .Header_bui-HeaderContent__f866914784[data-stuck]::after {\n    opacity: 1;\n  }\n\n  .Header_bui-HeaderTabsWrapper__f866914784 {\n    margin-left: -8px;\n  }\n\n  .Header_bui-HeaderControls__f866914784 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    flex-shrink: 0;\n  }\n\n  .Header_bui-HeaderTitleStack__f866914784 {\n    position: relative;\n    flex: 1 1 auto;\n    height: 1lh;\n    min-width: 0;\n    font-size: var(--bui-font-size-6);\n    line-height: 140%;\n    overflow: hidden;\n  }\n\n  .Header_bui-HeaderBreadcrumbs__f866914784,\n  .Header_bui-HeaderBreadcrumbsSmall__f866914784 {\n    position: absolute;\n    inset-inline: 0;\n    top: 50%;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    min-width: 0;\n    transform: translateY(-50%);\n  }\n\n  .Header_bui-HeaderBreadcrumbsSmall__f866914784 {\n    gap: var(--bui-space-1);\n  }\n\n  /*\n   * Link variant defaults have the same specificity as these contextual styles.\n   * Repeat the slot class so the Header styles win regardless of stylesheet order.\n   */\n  .Header_bui-HeaderBreadcrumbs__f866914784 .Header_bui-HeaderBreadcrumbLink__f866914784.Header_bui-HeaderBreadcrumbLink__f866914784,\n  .Header_bui-HeaderBreadcrumbsSmall__f866914784\n    .Header_bui-HeaderBreadcrumbLinkSmall__f866914784.Header_bui-HeaderBreadcrumbLinkSmall__f866914784 {\n    max-width: 240px;\n    overflow: hidden;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    line-height: inherit;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .Header_bui-HeaderBreadcrumbs__f866914784 .Header_bui-HeaderBreadcrumbLink__f866914784.Header_bui-HeaderBreadcrumbLink__f866914784 {\n    font-size: inherit;\n  }\n\n  .Header_bui-HeaderBreadcrumbsSmall__f866914784\n    .Header_bui-HeaderBreadcrumbLinkSmall__f866914784.Header_bui-HeaderBreadcrumbLinkSmall__f866914784 {\n    font-size: var(--bui-font-size-4);\n  }\n\n  .Header_bui-HeaderBreadcrumbSeparator__f866914784 {\n    flex-shrink: 0;\n  }\n\n  .Header_bui-HeaderTitle__f866914784,\n  .Header_bui-HeaderTitleSmall__f866914784 {\n    margin: 0;\n    padding: 0;\n    flex: 1 1 auto;\n    min-width: 0;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    line-height: inherit;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .Header_bui-HeaderTitle__f866914784 {\n    font-size: inherit;\n  }\n\n  .Header_bui-HeaderTitleSmall__f866914784 {\n    font-size: var(--bui-font-size-4);\n  }\n\n  .Header_bui-HeaderTags__f866914784 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    flex-wrap: wrap;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  .Header_bui-HeaderTag__f866914784 {\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .Header_bui-HeaderTag__f866914784 + .Header_bui-HeaderTag__f866914784::before {\n    content: '';\n    width: 3px;\n    height: 3px;\n    border-radius: 50%;\n    background-color: var(--bui-fg-secondary);\n    flex-shrink: 0;\n  }\n\n  .Header_bui-HeaderMetaRow__f866914784 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-5);\n    flex-wrap: wrap;\n    margin: 0;\n  }\n\n  .Header_bui-HeaderMetaItem__f866914784 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n\n    dd {\n      margin: 0;\n    }\n  }\n}\n";
+var styles = {"bui-HeaderTop":"Header_bui-HeaderTop__f866914784","bui-HeaderContent":"Header_bui-HeaderContent__f866914784","bui-HeaderBottom":"Header_bui-HeaderBottom__f866914784","bui-HeaderStickySentinel":"Header_bui-HeaderStickySentinel__f866914784","bui-HeaderTabsWrapper":"Header_bui-HeaderTabsWrapper__f866914784","bui-HeaderControls":"Header_bui-HeaderControls__f866914784","bui-HeaderTitleStack":"Header_bui-HeaderTitleStack__f866914784","bui-HeaderBreadcrumbs":"Header_bui-HeaderBreadcrumbs__f866914784","bui-HeaderBreadcrumbsSmall":"Header_bui-HeaderBreadcrumbsSmall__f866914784","bui-HeaderBreadcrumbLink":"Header_bui-HeaderBreadcrumbLink__f866914784","bui-HeaderBreadcrumbLinkSmall":"Header_bui-HeaderBreadcrumbLinkSmall__f866914784","bui-HeaderBreadcrumbSeparator":"Header_bui-HeaderBreadcrumbSeparator__f866914784","bui-HeaderTitle":"Header_bui-HeaderTitle__f866914784","bui-HeaderTitleSmall":"Header_bui-HeaderTitleSmall__f866914784","bui-HeaderTags":"Header_bui-HeaderTags__f866914784","bui-HeaderTag":"Header_bui-HeaderTag__f866914784","bui-HeaderMetaRow":"Header_bui-HeaderMetaRow__f866914784","bui-HeaderMetaItem":"Header_bui-HeaderMetaItem__f866914784"};
 styleInject(css_248z);
 
 export { styles as default };