@backstage/ui 0.19.0-next.0 → 0.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -0
- package/dist/components/Accordion/Accordion.module.css.esm.js +2 -2
- package/dist/components/Alert/Alert.module.css.esm.js +2 -2
- package/dist/components/Avatar/Avatar.module.css.esm.js +2 -2
- package/dist/components/Badge/Badge.module.css.esm.js +2 -2
- package/dist/components/Box/Box.module.css.esm.js +2 -2
- package/dist/components/Button/Button.module.css.esm.js +2 -2
- package/dist/components/ButtonIcon/ButtonIcon.module.css.esm.js +2 -2
- package/dist/components/ButtonLink/ButtonLink.module.css.esm.js +2 -2
- package/dist/components/Card/Card.module.css.esm.js +2 -2
- package/dist/components/Checkbox/Checkbox.module.css.esm.js +2 -2
- package/dist/components/CheckboxGroup/CheckboxGroup.module.css.esm.js +2 -2
- package/dist/components/Combobox/Combobox.module.css.esm.js +2 -2
- package/dist/components/Container/Container.module.css.esm.js +2 -2
- package/dist/components/DatePicker/DatePicker.module.css.esm.js +2 -2
- package/dist/components/DateRangePicker/DateRangePicker.module.css.esm.js +2 -2
- package/dist/components/Dialog/Dialog.module.css.esm.js +2 -2
- package/dist/components/FieldError/FieldError.module.css.esm.js +2 -2
- package/dist/components/FieldLabel/FieldLabel.module.css.esm.js +2 -2
- package/dist/components/Flex/Flex.module.css.esm.js +2 -2
- package/dist/components/FullPage/FullPage.module.css.esm.js +2 -2
- package/dist/components/Grid/Grid.module.css.esm.js +2 -2
- package/dist/components/Header/Header.module.css.esm.js +2 -2
- package/dist/components/Header/HeaderMetadataStatus.module.css.esm.js +2 -2
- package/dist/components/Header/HeaderMetadataUsers.module.css.esm.js +2 -2
- package/dist/components/Header/HeaderNav.module.css.esm.js +2 -2
- package/dist/components/Link/Link.module.css.esm.js +2 -2
- package/dist/components/List/List.module.css.esm.js +2 -2
- package/dist/components/Menu/Menu.module.css.esm.js +2 -2
- package/dist/components/NumberField/NumberField.module.css.esm.js +2 -2
- package/dist/components/PasswordField/PasswordField.module.css.esm.js +2 -2
- package/dist/components/PluginHeader/PluginHeader.module.css.esm.js +2 -2
- package/dist/components/Popover/Popover.module.css.esm.js +2 -2
- package/dist/components/RadioGroup/RadioGroup.module.css.esm.js +2 -2
- package/dist/components/SearchAutocomplete/SearchAutocomplete.module.css.esm.js +2 -2
- package/dist/components/SearchField/SearchField.module.css.esm.js +2 -2
- package/dist/components/Select/Select.module.css.esm.js +2 -2
- package/dist/components/Skeleton/Skeleton.module.css.esm.js +2 -2
- package/dist/components/Slider/Slider.module.css.esm.js +2 -2
- package/dist/components/Switch/Switch.module.css.esm.js +2 -2
- package/dist/components/Table/Table.module.css.esm.js +2 -2
- package/dist/components/TablePagination/TablePagination.module.css.esm.js +2 -2
- package/dist/components/Tabs/Tabs.module.css.esm.js +2 -2
- package/dist/components/TagGroup/TagGroup.module.css.esm.js +2 -2
- package/dist/components/Text/Text.module.css.esm.js +2 -2
- package/dist/components/TextAreaField/TextAreaField.module.css.esm.js +2 -2
- package/dist/components/TextField/TextField.module.css.esm.js +2 -2
- package/dist/components/ToggleButton/ToggleButton.module.css.esm.js +2 -2
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.module.css.esm.js +2 -2
- package/dist/components/Tooltip/Tooltip.module.css.esm.js +2 -2
- package/dist/components/VisuallyHidden/VisuallyHidden.module.css.esm.js +2 -2
- package/dist/css/styles.css +17 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# @backstage/ui
|
|
2
2
|
|
|
3
|
+
## 0.19.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 4e7a710: Updated React Aria dependencies to React Aria Components 1.22.0, React Aria 3.53.0, and React Stately 3.51.0. Existing Checkbox, Radio, and Switch implementations are retained.
|
|
8
|
+
|
|
9
|
+
**Migration:**
|
|
10
|
+
|
|
11
|
+
`MenuSection` no longer accepts `disabledKeys`. Move `disabledKeys` to `Menu` or set `isDisabled` on the affected `MenuItem` components.
|
|
12
|
+
|
|
13
|
+
Programmatic clicks on Checkbox and Switch labels no longer toggle their selection. Target the input when activating these controls programmatically, and use a full pointer interaction when simulating label clicks in tests.
|
|
14
|
+
|
|
15
|
+
**Affected components:** Checkbox, Menu, Switch
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- 46659eb: The `--bui-bg-app` token now follows the page's `color-scheme` until a theme mode is set. While the app loads, the page background then matches a dark theme instead of showing as light. Browsers without `light-dark()` support keep the light value until the theme mode is set, as before.
|
|
20
|
+
- 6c9ed14: Fixed `Combobox` keyboard selection while filtering. With `search`, or with `items` and no `search`, the arrow keys now move through the matching options only, and Enter selects the highlighted one. Screen readers also announce the number of matching options. As with a `Combobox` without `search`, opening the list with the button or on focus shows every option until the user types. With `search.filter`, Escape and blur now restore the label of the selected option even when the filter excludes it. In that case, the number of options announced to screen readers still counts the hidden selected option.
|
|
21
|
+
|
|
22
|
+
**Affected components:** Combobox
|
|
23
|
+
|
|
24
|
+
- b313f2d: Added a `theme` CSS cascade layer between `components` and `utilities`. BUI leaves it empty: put your app's brand overrides in `@layer theme` to win over component styles without raising specificity, while utility props still take precedence. Existing styles are unaffected.
|
|
25
|
+
|
|
26
|
+
If your app already declares its own layer named `theme`, its rules now sit below BUI's utility classes instead of above them.
|
|
27
|
+
|
|
3
28
|
## 0.19.0-next.0
|
|
4
29
|
|
|
5
30
|
### Minor Changes
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Accordion_bui-
|
|
4
|
-
var styles = {"bui-Accordion":"Accordion_bui-
|
|
3
|
+
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, theme, utilities;\n\n@layer components {\n .Accordion_bui-Accordion__5d4e39b610 {\n width: 100%;\n border-radius: var(--bui-radius-3);\n padding: var(--bui-space-3);\n }\n\n .Accordion_bui-Accordion__5d4e39b610[data-bg='danger'],\n .Accordion_bui-Accordion__5d4e39b610[data-bg='warning'],\n .Accordion_bui-Accordion__5d4e39b610[data-bg='success'] {\n background-color: transparent;\n }\n\n .Accordion_bui-AccordionTrigger__5d4e39b610 {\n all: unset;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .Accordion_bui-AccordionTriggerButton__5d4e39b610 {\n all: unset;\n width: 100%;\n color: var(--bui-fg-primary);\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n text-align: left;\n\n &[data-focus-visible] {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n &[data-disabled='true'] {\n background-color: transparent;\n color: var(--bui-fg-disabled);\n cursor: not-allowed;\n }\n }\n\n .Accordion_bui-AccordionTriggerTitle__5d4e39b610 {\n font-size: var(--bui-font-size-4);\n font-weight: var(--bui-font-weight-bold);\n line-height: 140%;\n }\n\n .Accordion_bui-AccordionTriggerSubtitle__5d4e39b610 {\n font-size: var(--bui-font-size-2);\n line-height: 140%;\n color: var(--bui-fg-secondary);\n }\n\n .Accordion_bui-AccordionTriggerIcon__5d4e39b610 {\n transition: transform 150ms ease-out;\n flex-shrink: 0;\n width: 1rem;\n height: 1rem;\n\n .Accordion_bui-Accordion__5d4e39b610[data-expanded='true'] > .Accordion_bui-AccordionTrigger__5d4e39b610 & {\n transform: rotate(180deg);\n }\n }\n\n .Accordion_bui-AccordionPanel__5d4e39b610 {\n .Accordion_bui-Accordion__5d4e39b610[data-expanded='true'] > & {\n padding-top: var(--bui-space-1);\n }\n }\n\n .Accordion_bui-AccordionGroup__5d4e39b610 {\n display: flex;\n flex-direction: column;\n gap: var(--bui-space-3);\n width: 100%;\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Accordion":"Accordion_bui-Accordion__5d4e39b610","bui-AccordionTrigger":"Accordion_bui-AccordionTrigger__5d4e39b610","bui-AccordionTriggerButton":"Accordion_bui-AccordionTriggerButton__5d4e39b610","bui-AccordionTriggerTitle":"Accordion_bui-AccordionTriggerTitle__5d4e39b610","bui-AccordionTriggerSubtitle":"Accordion_bui-AccordionTriggerSubtitle__5d4e39b610","bui-AccordionTriggerIcon":"Accordion_bui-AccordionTriggerIcon__5d4e39b610","bui-AccordionPanel":"Accordion_bui-AccordionPanel__5d4e39b610","bui-AccordionGroup":"Accordion_bui-AccordionGroup__5d4e39b610"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
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 .Alert_bui-
|
|
4
|
-
var styles = {"bui-Alert":"Alert_bui-
|
|
3
|
+
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, theme, utilities;\n\n@layer components {\n .Alert_bui-Alert__b6f5bf78f7 {\n --alert-bg: var(--bui-bg-neutral-1);\n --alert-fg: var(--bui-fg-primary);\n\n display: flex;\n gap: var(--bui-space-6);\n padding: var(--bui-space-3) var(--bui-space-3);\n border-radius: var(--bui-radius-3);\n font-family: var(--bui-font-regular);\n font-size: var(--bui-font-size-3);\n line-height: 1.5;\n\n /* Apply variables */\n background-color: var(--alert-bg);\n color: var(--alert-fg);\n }\n\n .Alert_bui-Alert__b6f5bf78f7[data-status='info'] {\n --alert-bg: var(--bui-bg-info);\n --alert-fg: var(--bui-fg-info-on-bg);\n }\n\n .Alert_bui-Alert__b6f5bf78f7[data-status='success'] {\n --alert-bg: var(--bui-bg-success);\n --alert-fg: var(--bui-fg-success-on-bg);\n }\n\n .Alert_bui-Alert__b6f5bf78f7[data-status='warning'] {\n --alert-bg: var(--bui-bg-warning);\n --alert-fg: var(--bui-fg-warning-on-bg);\n }\n\n .Alert_bui-Alert__b6f5bf78f7[data-status='danger'] {\n --alert-bg: var(--bui-bg-danger);\n --alert-fg: var(--bui-fg-danger-on-bg);\n }\n\n .Alert_bui-AlertIcon__b6f5bf78f7 {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n\n /* Add slight top margin when there's a description for better alignment */\n .Alert_bui-Alert__b6f5bf78f7[data-has-description='true'] & {\n margin-top: 0.125rem;\n }\n }\n\n .Alert_bui-AlertContentWrapper__b6f5bf78f7 {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: var(--bui-space-3);\n flex: 1;\n min-width: 0;\n\n /* Center align when there's no description */\n .Alert_bui-Alert__b6f5bf78f7[data-has-description='false'] & {\n align-items: center;\n }\n }\n\n .Alert_bui-AlertContent__b6f5bf78f7 {\n flex: 1;\n min-width: 0;\n word-wrap: break-word;\n }\n\n .Alert_bui-AlertTitle__b6f5bf78f7 {\n font-weight: var(--bui-font-weight-bold);\n font-size: var(--bui-font-size-3);\n }\n\n .Alert_bui-AlertDescription__b6f5bf78f7 {\n font-size: var(--bui-font-size-2);\n opacity: 0.9;\n }\n\n .Alert_bui-AlertSpinner__b6f5bf78f7 {\n display: flex;\n\n & svg {\n width: 1rem;\n height: 1rem;\n animation: Alert_bui-spin__b6f5bf78f7 1s linear infinite;\n }\n }\n\n .Alert_bui-AlertActions__b6f5bf78f7 {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--bui-space-2);\n margin-left: auto;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .Alert_bui-AlertSpinner__b6f5bf78f7 svg {\n animation: none;\n }\n }\n\n @keyframes Alert_bui-spin__b6f5bf78f7 {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Alert":"Alert_bui-Alert__b6f5bf78f7","bui-AlertIcon":"Alert_bui-AlertIcon__b6f5bf78f7","bui-AlertContentWrapper":"Alert_bui-AlertContentWrapper__b6f5bf78f7","bui-AlertContent":"Alert_bui-AlertContent__b6f5bf78f7","bui-AlertTitle":"Alert_bui-AlertTitle__b6f5bf78f7","bui-AlertDescription":"Alert_bui-AlertDescription__b6f5bf78f7","bui-AlertSpinner":"Alert_bui-AlertSpinner__b6f5bf78f7","bui-spin":"Alert_bui-spin__b6f5bf78f7","bui-AlertActions":"Alert_bui-AlertActions__b6f5bf78f7"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
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 .Avatar_bui-
|
|
4
|
-
var styles = {"bui-AvatarRoot":"Avatar_bui-
|
|
3
|
+
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, theme, utilities;\n\n@layer components {\n .Avatar_bui-AvatarRoot__49bb4896a9 {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n vertical-align: middle;\n border-radius: 100%;\n user-select: none;\n font-weight: 500;\n color: var(--bui-fg-primary);\n background-color: var(--bui-bg-neutral-2);\n font-size: 1rem;\n line-height: 1;\n overflow: hidden;\n flex-shrink: 0;\n height: 2rem;\n width: 2rem;\n }\n\n .Avatar_bui-AvatarRoot__49bb4896a9[data-size='x-small'] {\n height: 1.25rem;\n width: 1.25rem;\n }\n\n .Avatar_bui-AvatarRoot__49bb4896a9[data-size='small'] {\n height: 1.5rem;\n width: 1.5rem;\n }\n\n .Avatar_bui-AvatarRoot__49bb4896a9[data-size='medium'] {\n height: 2rem;\n width: 2rem;\n }\n\n .Avatar_bui-AvatarRoot__49bb4896a9[data-size='large'] {\n height: 2.5rem;\n width: 2.5rem;\n }\n\n .Avatar_bui-AvatarRoot__49bb4896a9[data-size='x-large'] {\n height: 3rem;\n width: 3rem;\n }\n\n .Avatar_bui-AvatarImage__49bb4896a9 {\n object-fit: cover;\n height: 100%;\n width: 100%;\n display: block;\n }\n\n .Avatar_bui-AvatarFallback__49bb4896a9 {\n align-items: center;\n display: flex;\n justify-content: center;\n height: 100%;\n width: 100%;\n font-size: var(--bui-font-size-3);\n font-weight: var(--bui-font-weight-regular);\n box-shadow: inset 0 0 0 1px var(--bui-border-2);\n border-radius: var(--bui-radius-full);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-AvatarRoot":"Avatar_bui-AvatarRoot__49bb4896a9","bui-AvatarImage":"Avatar_bui-AvatarImage__49bb4896a9","bui-AvatarFallback":"Avatar_bui-AvatarFallback__49bb4896a9"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
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 .Badge_bui-
|
|
4
|
-
var styles = {"bui-Badge":"Badge_bui-
|
|
3
|
+
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, theme, utilities;\n\n@layer components {\n .Badge_bui-Badge__7a25904b6a {\n color: var(--bui-fg-primary);\n background-color: var(--bui-bg-neutral-1);\n border-radius: var(--bui-radius-2);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-weight: var(--bui-font-weight-regular);\n line-height: 1.15;\n gap: var(--bui-space-1);\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\n .Badge_bui-Badge__7a25904b6a[data-size='small'] {\n height: 26px;\n padding: 0 var(--bui-space-2);\n font-size: var(--bui-font-size-1);\n }\n\n .Badge_bui-Badge__7a25904b6a[data-size='medium'] {\n height: 32px;\n padding: 0 var(--bui-space-2);\n font-size: var(--bui-font-size-2);\n }\n\n .Badge_bui-BadgeIcon__7a25904b6a {\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Badge":"Badge_bui-Badge__7a25904b6a","bui-BadgeIcon":"Badge_bui-BadgeIcon__7a25904b6a"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
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 .Box_bui-
|
|
4
|
-
var styles = {"bui-Box":"Box_bui-
|
|
3
|
+
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, theme, utilities;\n\n@layer components {\n .Box_bui-Box__a36843388d {\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Box":"Box_bui-Box__a36843388d"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Button_bui-
|
|
4
|
-
var styles = {"bui-Button":"Button_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, theme, utilities;\n\n@layer components {\n .Button_bui-Button__56261dcf70 {\n --loading-duration: 200ms;\n --bg: transparent;\n --bg-hover: transparent;\n --bg-active: transparent;\n --fg: inherit;\n\n position: relative;\n display: inline-flex;\n border: none;\n user-select: none;\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n line-height: 1.15;\n padding: 0;\n cursor: pointer;\n border-radius: var(--bui-radius-2);\n flex-shrink: 0;\n transition: background-color var(--loading-duration) ease-out,\n box-shadow var(--loading-duration) ease-out;\n\n /* Apply variables */\n color: var(--fg);\n background-color: var(--bg);\n\n &:hover {\n background-color: var(--bg-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bg-active);\n }\n\n &[data-disabled='true'] {\n cursor: not-allowed;\n }\n\n &[data-ispending='true'] {\n cursor: wait;\n }\n }\n\n .Button_bui-Button__56261dcf70[data-variant='primary'] {\n --bg: var(--bui-bg-solid);\n --bg-hover: var(--bui-bg-solid-hover);\n --bg-active: var(--bui-bg-solid-pressed);\n --fg: var(--bui-fg-solid);\n\n &[data-disabled='true'],\n &[data-ispending='true'] {\n --bg: var(--bui-bg-solid-disabled);\n --bg-hover: var(--bui-bg-solid-disabled);\n --bg-active: var(--bui-bg-solid-disabled);\n --fg: var(--bui-fg-solid-disabled);\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n }\n\n .Button_bui-Button__56261dcf70[data-variant='primary'][data-destructive='true'] {\n /* Custom properties matching future token names (without bui- prefix) */\n --bg-solid-danger: #dc2626;\n --bg-solid-danger-hover: #b91c1c;\n --bg-solid-danger-pressed: #991b1b;\n --bg-solid-danger-disabled: #fca5a5;\n --fg-solid-danger: var(--bui-white);\n\n [data-theme-mode='dark'] & {\n --bg-solid-danger: #ef4444;\n --bg-solid-danger-hover: #dc2626;\n --bg-solid-danger-pressed: #b91c1c;\n --bg-solid-danger-disabled: #7f1d1d;\n }\n\n --bg: var(--bg-solid-danger);\n --bg-hover: var(--bg-solid-danger-hover);\n --bg-active: var(--bg-solid-danger-pressed);\n --fg: var(--fg-solid-danger);\n\n &[data-disabled='true'],\n &[data-ispending='true'] {\n --bg: var(--bg-solid-danger-disabled);\n --bg-hover: var(--bg-solid-danger-disabled);\n --bg-active: var(--bg-solid-danger-disabled);\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--bui-border-danger);\n outline-offset: 2px;\n }\n }\n\n .Button_bui-Button__56261dcf70[data-variant='secondary'] {\n --bg: var(--bui-bg-neutral-1);\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-bg='neutral-1'] {\n --bg: var(--bui-bg-neutral-2);\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-bg='neutral-2'] {\n --bg: var(--bui-bg-neutral-3);\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-bg='neutral-3'] {\n --bg: var(--bui-bg-neutral-4);\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'],\n &[data-ispending='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &[data-focus-visible] {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .Button_bui-Button__56261dcf70[data-variant='secondary'][data-destructive='true'] {\n /* Custom properties for hover/active states (no tokens exist yet) */\n --bg-danger-hover: #fecaca;\n --bg-danger-pressed: #fca5a5;\n\n [data-theme-mode='dark'] & {\n --bg-danger-hover: #450a0a;\n --bg-danger-pressed: #7f1d1d;\n }\n\n --bg: var(--bui-bg-danger);\n --bg-hover: var(--bg-danger-hover);\n --bg-active: var(--bg-danger-pressed);\n --fg: var(--bui-fg-danger);\n\n &[data-disabled='true'],\n &[data-ispending='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &[data-focus-visible] {\n box-shadow: inset 0 0 0 2px var(--bui-border-danger);\n }\n }\n\n .Button_bui-Button__56261dcf70[data-variant='tertiary'] {\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-bg='neutral-1'] {\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-bg='neutral-2'] {\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-bg='neutral-3'] {\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'],\n &[data-ispending='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &[data-focus-visible] {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .Button_bui-Button__56261dcf70[data-variant='tertiary'][data-destructive='true'] {\n /* Custom properties for hover/active states (no tokens exist yet) */\n --bg-danger-hover: #fecaca;\n --bg-danger-pressed: #fca5a5;\n\n [data-theme-mode='dark'] & {\n --bg-danger-hover: #450a0a;\n --bg-danger-pressed: #7f1d1d;\n }\n\n --bg-hover: var(--bui-bg-danger);\n --bg-active: var(--bg-danger-pressed);\n --fg: var(--bui-fg-danger);\n\n &[data-disabled='true'],\n &[data-ispending='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &[data-focus-visible] {\n box-shadow: inset 0 0 0 2px var(--bui-border-danger);\n }\n }\n\n .Button_bui-Button__56261dcf70[data-size='small'] {\n font-size: var(--bui-font-size-3);\n padding: 0 var(--bui-space-2);\n height: 2rem;\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Button_bui-Button__56261dcf70[data-size='medium'] {\n font-size: var(--bui-font-size-4);\n padding: 0 var(--bui-space-3);\n height: 2.5rem;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .Button_bui-ButtonContent__56261dcf70 {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bui-space-1_5);\n height: 100%;\n width: 100%;\n transition: opacity var(--loading-duration) ease-out;\n\n .Button_bui-Button__56261dcf70[data-ispending='true'] & {\n opacity: 0;\n }\n }\n\n .Button_bui-ButtonSpinner__56261dcf70 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n opacity: 0;\n transition: opacity var(--loading-duration) ease-in;\n\n .Button_bui-Button__56261dcf70[data-ispending='true'] & {\n opacity: 1;\n }\n\n & svg {\n animation: Button_bui-spin__56261dcf70 1s linear infinite;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .Button_bui-Button__56261dcf70 {\n transition-duration: 50ms;\n }\n\n .Button_bui-ButtonContent__56261dcf70 {\n transition-duration: 50ms;\n }\n\n .Button_bui-ButtonSpinner__56261dcf70 {\n transition-duration: 50ms;\n }\n\n .Button_bui-ButtonSpinner__56261dcf70 svg {\n animation: none;\n }\n }\n\n @keyframes Button_bui-spin__56261dcf70 {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Button":"Button_bui-Button__56261dcf70","bui-ButtonContent":"Button_bui-ButtonContent__56261dcf70","bui-ButtonSpinner":"Button_bui-ButtonSpinner__56261dcf70","bui-spin":"Button_bui-spin__56261dcf70"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .ButtonIcon_bui-
|
|
4
|
-
var styles = {"bui-ButtonIcon":"ButtonIcon_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, theme, utilities;\n\n@layer components {\n .ButtonIcon_bui-ButtonIcon__26aa8eaa38 {\n --loading-duration: 200ms;\n --bg: transparent;\n --bg-hover: transparent;\n --bg-active: transparent;\n --fg: inherit;\n\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n user-select: none;\n padding: 0;\n cursor: pointer;\n border-radius: var(--bui-radius-2);\n flex-shrink: 0;\n transition: background-color var(--loading-duration) ease-out,\n box-shadow var(--loading-duration) ease-out;\n\n /* Apply variables */\n color: var(--fg);\n background-color: var(--bg);\n\n &:hover {\n background-color: var(--bg-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bg-active);\n }\n\n &[data-disabled='true'] {\n cursor: not-allowed;\n }\n\n &[data-ispending='true'] {\n cursor: wait;\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__26aa8eaa38[data-variant='primary'] {\n --bg: var(--bui-bg-solid);\n --bg-hover: var(--bui-bg-solid-hover);\n --bg-active: var(--bui-bg-solid-pressed);\n --fg: var(--bui-fg-solid);\n\n &[data-disabled='true'],\n &[data-ispending='true'] {\n --bg: var(--bui-bg-solid-disabled);\n --bg-hover: var(--bui-bg-solid-disabled);\n --bg-active: var(--bui-bg-solid-disabled);\n --fg: var(--bui-fg-solid-disabled);\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__26aa8eaa38[data-variant='secondary'] {\n --bg: var(--bui-bg-neutral-1);\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-bg='neutral-1'] {\n --bg: var(--bui-bg-neutral-2);\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-bg='neutral-2'] {\n --bg: var(--bui-bg-neutral-3);\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-bg='neutral-3'] {\n --bg: var(--bui-bg-neutral-4);\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'],\n &[data-ispending='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &[data-focus-visible] {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__26aa8eaa38[data-variant='tertiary'] {\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-bg='neutral-1'] {\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-bg='neutral-2'] {\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-bg='neutral-3'] {\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'],\n &[data-ispending='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &[data-focus-visible] {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__26aa8eaa38[data-size='small'] {\n width: 2rem;\n height: 2rem;\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__26aa8eaa38[data-size='medium'] {\n width: 2.5rem;\n height: 2.5rem;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .ButtonIcon_bui-ButtonIconContent__26aa8eaa38 {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n transition: opacity var(--loading-duration) ease-out;\n\n .ButtonIcon_bui-ButtonIcon__26aa8eaa38[data-ispending='true'] & {\n opacity: 0;\n }\n }\n\n .ButtonIcon_bui-ButtonIconSpinner__26aa8eaa38 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n opacity: 0;\n transition: opacity var(--loading-duration) ease-in;\n\n .ButtonIcon_bui-ButtonIcon__26aa8eaa38[data-ispending='true'] & {\n opacity: 1;\n }\n\n & svg {\n animation: ButtonIcon_bui-spin__26aa8eaa38 1s linear infinite;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ButtonIcon_bui-ButtonIcon__26aa8eaa38 {\n transition-duration: 50ms;\n }\n\n .ButtonIcon_bui-ButtonIconContent__26aa8eaa38 {\n transition-duration: 50ms;\n }\n\n .ButtonIcon_bui-ButtonIconSpinner__26aa8eaa38 {\n transition-duration: 50ms;\n }\n\n .ButtonIcon_bui-ButtonIconSpinner__26aa8eaa38 svg {\n animation: none;\n }\n }\n\n @keyframes ButtonIcon_bui-spin__26aa8eaa38 {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-ButtonIcon":"ButtonIcon_bui-ButtonIcon__26aa8eaa38","bui-ButtonIconContent":"ButtonIcon_bui-ButtonIconContent__26aa8eaa38","bui-ButtonIconSpinner":"ButtonIcon_bui-ButtonIconSpinner__26aa8eaa38","bui-spin":"ButtonIcon_bui-spin__26aa8eaa38"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .ButtonLink_bui-
|
|
4
|
-
var styles = {"bui-ButtonLink":"ButtonLink_bui-
|
|
3
|
+
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, theme, utilities;\n\n@layer components {\n .ButtonLink_bui-ButtonLink__497c7aed01 {\n --bg: transparent;\n --bg-hover: transparent;\n --bg-active: transparent;\n --fg: inherit;\n\n position: relative;\n display: inline-flex;\n border: none;\n user-select: none;\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n line-height: 1.15;\n padding: 0;\n cursor: pointer;\n border-radius: var(--bui-radius-2);\n flex-shrink: 0;\n text-decoration: none;\n transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n\n /* Apply variables */\n color: var(--fg);\n background-color: var(--bg);\n\n &:hover {\n background-color: var(--bg-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bg-active);\n }\n\n &[data-disabled='true'] {\n cursor: not-allowed;\n }\n }\n\n .ButtonLink_bui-ButtonLink__497c7aed01[data-variant='primary'] {\n --bg: var(--bui-bg-solid);\n --bg-hover: var(--bui-bg-solid-hover);\n --bg-active: var(--bui-bg-solid-pressed);\n --fg: var(--bui-fg-solid);\n\n &[data-disabled='true'] {\n --bg: var(--bui-bg-solid-disabled);\n --bg-hover: var(--bui-bg-solid-disabled);\n --bg-active: var(--bui-bg-solid-disabled);\n --fg: var(--bui-fg-solid-disabled);\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n }\n\n .ButtonLink_bui-ButtonLink__497c7aed01[data-variant='secondary'] {\n --bg: var(--bui-bg-neutral-1);\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-bg='neutral-1'] {\n --bg: var(--bui-bg-neutral-2);\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-bg='neutral-2'] {\n --bg: var(--bui-bg-neutral-3);\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-bg='neutral-3'] {\n --bg: var(--bui-bg-neutral-4);\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &[data-focus-visible] {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .ButtonLink_bui-ButtonLink__497c7aed01[data-variant='tertiary'] {\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-bg='neutral-1'] {\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-bg='neutral-2'] {\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-bg='neutral-3'] {\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &[data-focus-visible] {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .ButtonLink_bui-ButtonLink__497c7aed01[data-size='small'] {\n font-size: var(--bui-font-size-3);\n padding: 0 var(--bui-space-2);\n height: 2rem;\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .ButtonLink_bui-ButtonLink__497c7aed01[data-size='medium'] {\n font-size: var(--bui-font-size-4);\n padding: 0 var(--bui-space-3);\n height: 2.5rem;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .ButtonLink_bui-ButtonLinkContent__497c7aed01 {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bui-space-1_5);\n height: 100%;\n width: 100%;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ButtonLink_bui-ButtonLink__497c7aed01 {\n transition-duration: 50ms;\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-ButtonLink":"ButtonLink_bui-ButtonLink__497c7aed01","bui-ButtonLinkContent":"ButtonLink_bui-ButtonLinkContent__497c7aed01"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Card_bui-
|
|
4
|
-
var styles = {"bui-Card":"Card_bui-
|
|
3
|
+
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, theme, utilities;\n\n@layer components {\n .Card_bui-Card__605b0cf698 {\n display: flex;\n flex-direction: column;\n border-radius: var(--bui-radius-3);\n color: var(--bui-fg-primary);\n line-height: 1.15;\n overflow: auto;\n min-height: 0;\n width: 100%;\n position: relative;\n padding: var(--bui-space-3);\n }\n\n .Card_bui-Card__605b0cf698:has(.Card_bui-CardHeader__605b0cf698, .Card_bui-CardBody__605b0cf698, .Card_bui-CardFooter__605b0cf698) {\n padding: 0;\n }\n\n /*\n * Cursor and hover tint are applied at the card level so they cover the\n * entire surface.\n */\n .Card_bui-Card__605b0cf698[data-interactive] {\n cursor: pointer;\n\n &::after {\n content: '';\n position: absolute;\n inset: 0;\n background: color-mix(in srgb, currentColor 5%, transparent);\n border-radius: inherit;\n pointer-events: none;\n z-index: 3;\n opacity: 0;\n transition: opacity 200ms ease-in-out;\n }\n\n &:hover::after {\n opacity: 1;\n }\n }\n\n .Card_bui-Card__605b0cf698[data-interactive]:has(.Card_bui-CardTrigger__605b0cf698[data-focus-visible]) {\n outline: 2px solid var(--bui-ring);\n outline-offset: -2px;\n }\n\n .Card_bui-CardTrigger__605b0cf698 {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(100%);\n white-space: nowrap;\n border: 0;\n }\n\n .Card_bui-CardHeader__605b0cf698 {\n padding-inline: var(--bui-space-3);\n padding-block: var(--bui-space-3);\n }\n\n .Card_bui-CardBody__605b0cf698 {\n flex: 1;\n min-height: var(--bui-space-6);\n overflow: auto;\n padding-inline: var(--bui-space-3);\n padding-block: var(--bui-space-3);\n }\n\n @keyframes Card_bui-card-body-shadow__605b0cf698 {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n .Card_bui-Card__605b0cf698:has(.Card_bui-CardHeader__605b0cf698) .Card_bui-CardBody__605b0cf698 {\n padding-block-start: 0;\n }\n\n .Card_bui-Card__605b0cf698:has(.Card_bui-CardFooter__605b0cf698) .Card_bui-CardBody__605b0cf698 {\n padding-block-end: 0;\n }\n\n @supports (animation-timeline: scroll()) {\n .Card_bui-Card__605b0cf698:has(.Card_bui-CardHeader__605b0cf698) .Card_bui-CardBody__605b0cf698::before {\n content: '';\n position: sticky;\n top: 0;\n display: block;\n height: 1.5rem;\n margin-bottom: -1.5rem;\n background: linear-gradient(\n to bottom,\n var(--bui-bg-inherit),\n rgb(from var(--bui-bg-inherit) r g b / 0)\n );\n pointer-events: none;\n opacity: 0;\n animation: Card_bui-card-body-shadow__605b0cf698 linear both;\n animation-timeline: scroll();\n animation-range: 0px 2.5rem;\n }\n\n .Card_bui-Card__605b0cf698:has(.Card_bui-CardFooter__605b0cf698) .Card_bui-CardBody__605b0cf698::after {\n content: '';\n position: sticky;\n bottom: 0;\n display: block;\n height: 1.5rem;\n margin-top: -1.5rem;\n background: linear-gradient(\n to top,\n var(--bui-bg-inherit),\n rgb(from var(--bui-bg-inherit) r g b / 0)\n );\n pointer-events: none;\n opacity: 0;\n animation: Card_bui-card-body-shadow__605b0cf698 linear forwards,\n Card_bui-card-body-shadow__605b0cf698 linear forwards reverse;\n animation-timeline: scroll(), scroll();\n animation-range: 0px 1px, calc(100% - 2.5rem) 100%;\n }\n }\n\n .Card_bui-CardFooter__605b0cf698 {\n padding-inline: var(--bui-space-3);\n padding-block: var(--bui-space-3);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Card":"Card_bui-Card__605b0cf698","bui-CardHeader":"Card_bui-CardHeader__605b0cf698","bui-CardBody":"Card_bui-CardBody__605b0cf698","bui-CardFooter":"Card_bui-CardFooter__605b0cf698","bui-CardTrigger":"Card_bui-CardTrigger__605b0cf698","bui-card-body-shadow":"Card_bui-card-body-shadow__605b0cf698"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Checkbox_bui-
|
|
4
|
-
var styles = {"bui-Checkbox":"Checkbox_bui-
|
|
3
|
+
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, theme, utilities;\n\n@layer components {\n .Checkbox_bui-Checkbox__ac2af4498c {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: var(--bui-space-2);\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n line-height: 1.15;\n color: var(--bui-fg-primary);\n user-select: none;\n cursor: pointer;\n }\n\n .Checkbox_bui-Checkbox__ac2af4498c[data-disabled] {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .Checkbox_bui-CheckboxIndicator__ac2af4498c {\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n box-shadow: inset 0 0 0 1px var(--bui-border-2);\n border-radius: 2px;\n transition: background-color 0.2s ease-in-out;\n background-color: var(--bui-bg-neutral-1);\n padding: 0;\n flex-shrink: 0;\n color: transparent;\n\n .Checkbox_bui-Checkbox__ac2af4498c[data-focus-visible] & {\n transition: none;\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n\n .Checkbox_bui-Checkbox__ac2af4498c[data-selected] & {\n background-color: var(--bui-bg-solid);\n box-shadow: none;\n color: var(--bui-fg-solid);\n }\n\n .Checkbox_bui-Checkbox__ac2af4498c[data-indeterminate] & {\n background-color: var(--bui-bg-neutral-1);\n box-shadow: inset 0 0 0 1px var(--bui-border-2);\n color: var(--bui-fg-primary);\n }\n\n .Checkbox_bui-Checkbox__ac2af4498c[data-invalid] & {\n box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n }\n\n .Checkbox_bui-Checkbox__ac2af4498c[data-invalid][data-selected] & {\n background-color: var(--bui-border-danger);\n box-shadow: none;\n }\n\n .Checkbox_bui-Checkbox__ac2af4498c[data-invalid][data-indeterminate] & {\n box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n }\n\n @media (prefers-reduced-motion: reduce) {\n & {\n transition: none;\n }\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Checkbox":"Checkbox_bui-Checkbox__ac2af4498c","bui-CheckboxIndicator":"Checkbox_bui-CheckboxIndicator__ac2af4498c"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "@layer tokens, base, components, utilities;\n\n@layer components {\n .CheckboxGroup_bui-
|
|
4
|
-
var styles = {"bui-CheckboxGroup":"CheckboxGroup_bui-
|
|
3
|
+
var css_248z = "@layer tokens, base, components, theme, utilities;\n\n@layer components {\n .CheckboxGroup_bui-CheckboxGroup__9ea462f89b {\n display: flex;\n flex-direction: column;\n }\n\n .CheckboxGroup_bui-CheckboxGroup__9ea462f89b[data-orientation='horizontal'] .CheckboxGroup_bui-CheckboxGroupContent__9ea462f89b {\n flex-direction: row;\n gap: var(--bui-space-4);\n }\n\n .CheckboxGroup_bui-CheckboxGroupContent__9ea462f89b {\n display: flex;\n flex-direction: column;\n gap: var(--bui-space-2);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-CheckboxGroup":"CheckboxGroup_bui-CheckboxGroup__9ea462f89b","bui-CheckboxGroupContent":"CheckboxGroup_bui-CheckboxGroupContent__9ea462f89b"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
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-
|
|
4
|
-
var styles = {"bui-Combobox":"Combobox_bui-
|
|
3
|
+
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, theme, utilities;\n\n@layer components {\n .Combobox_bui-Combobox__b37ad52723,\n .Combobox_bui-ComboboxPopover__b37ad52723 {\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__b37ad52723 {\n display: flex;\n flex-direction: column;\n width: 100%;\n flex: 1;\n }\n\n .Combobox_bui-ComboboxPopover__b37ad52723 {\n min-width: var(--trigger-width);\n\n .bui-PopoverContent {\n padding: 0;\n }\n }\n\n .Combobox_bui-ComboboxInput__b37ad52723 {\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__b37ad52723[data-focus-within] & {\n box-shadow: inset 0 0 0 1px var(--bui-ring);\n }\n\n .Combobox_bui-Combobox__b37ad52723[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__b37ad52723[data-size='small'] & {\n padding-inline: var(--bui-space-3) 0;\n }\n\n .Combobox_bui-Combobox__b37ad52723[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__b37ad52723 {\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__b37ad52723[data-size='small'] & svg {\n width: 1rem;\n height: 1rem;\n }\n\n .Combobox_bui-Combobox__b37ad52723[data-size='medium'] & svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .Combobox_bui-ComboboxInputField__b37ad52723 {\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__b37ad52723 {\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__b37ad52723[data-size='small'] & {\n width: 1rem;\n height: 1rem;\n }\n\n .Combobox_bui-Combobox__b37ad52723[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__b37ad52723 {\n padding-block: var(--bui-space-1);\n padding-inline: var(--bui-space-1);\n transition: opacity 0.2s ease-in-out;\n\n &[data-stale] {\n opacity: 0.6;\n }\n\n &[data-focus-visible] {\n outline: none;\n }\n }\n\n .Combobox_bui-ComboboxItem__b37ad52723 {\n box-sizing: border-box;\n position: relative;\n display: block;\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 line-height: 1.15;\n outline: none;\n border-radius: var(--bui-radius-2);\n\n &:has(> .Combobox_bui-ComboboxItemIndicator__b37ad52723) {\n display: grid;\n grid-template-areas: 'icon text';\n grid-template-columns: 1rem 1fr;\n align-items: center;\n gap: var(--bui-space-2);\n }\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__b37ad52723 {\n opacity: 1;\n }\n }\n\n .Combobox_bui-ComboboxItemIndicator__b37ad52723 {\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__b37ad52723 {\n flex: 1;\n grid-area: text;\n }\n\n .Combobox_bui-ComboboxItemContent__b37ad52723 {\n display: flex;\n align-items: center;\n gap: var(--bui-space-2);\n grid-area: text;\n min-width: 0;\n }\n\n .Combobox_bui-ComboboxItemText__b37ad52723,\n .Combobox_bui-ComboboxItemProfile__b37ad52723 {\n min-width: 0;\n }\n\n .Combobox_bui-ComboboxItemTextLeadingIcon__b37ad52723 {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n\n & > svg {\n width: 1em;\n height: 1em;\n }\n }\n\n .Combobox_bui-ComboboxItemAvatar__b37ad52723 {\n flex-shrink: 0;\n }\n\n .Combobox_bui-ComboboxItemTextContent__b37ad52723 {\n display: flex;\n flex-direction: column;\n min-width: 0;\n }\n\n .Combobox_bui-ComboboxItemTitle__b37ad52723,\n .Combobox_bui-ComboboxItemDescription__b37ad52723 {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .Combobox_bui-ComboboxItemDescription__b37ad52723 {\n font-size: var(--bui-font-size-2);\n color: var(--bui-fg-secondary);\n }\n\n .Combobox_bui-ComboboxSection__b37ad52723 {\n &:first-child .Combobox_bui-ComboboxSectionHeader__b37ad52723 {\n padding-top: 0;\n }\n }\n\n .Combobox_bui-ComboboxSectionHeader__b37ad52723 {\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 line-height: 1.15;\n font-weight: bold;\n letter-spacing: 0.05rem;\n text-transform: uppercase;\n }\n\n .Combobox_bui-ComboboxNoResults__b37ad52723 {\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 line-height: 1.15;\n }\n\n .Combobox_bui-ComboboxLoading__b37ad52723 {\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n\n .Combobox_bui-ComboboxLoadingRow__b37ad52723 {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n min-height: var(--combobox-item-height);\n padding-block: var(--bui-space-1);\n padding-left: calc(var(--bui-space-3) + 1rem + var(--bui-space-2));\n padding-right: var(--bui-space-4);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Combobox":"Combobox_bui-Combobox__b37ad52723","bui-ComboboxPopover":"Combobox_bui-ComboboxPopover__b37ad52723","bui-ComboboxInput":"Combobox_bui-ComboboxInput__b37ad52723","bui-ComboboxInputIcon":"Combobox_bui-ComboboxInputIcon__b37ad52723","bui-ComboboxInputField":"Combobox_bui-ComboboxInputField__b37ad52723","bui-ComboboxInputChevron":"Combobox_bui-ComboboxInputChevron__b37ad52723","bui-ComboboxList":"Combobox_bui-ComboboxList__b37ad52723","bui-ComboboxItem":"Combobox_bui-ComboboxItem__b37ad52723","bui-ComboboxItemIndicator":"Combobox_bui-ComboboxItemIndicator__b37ad52723","bui-ComboboxItemLabel":"Combobox_bui-ComboboxItemLabel__b37ad52723","bui-ComboboxItemContent":"Combobox_bui-ComboboxItemContent__b37ad52723","bui-ComboboxItemText":"Combobox_bui-ComboboxItemText__b37ad52723","bui-ComboboxItemProfile":"Combobox_bui-ComboboxItemProfile__b37ad52723","bui-ComboboxItemTextLeadingIcon":"Combobox_bui-ComboboxItemTextLeadingIcon__b37ad52723","bui-ComboboxItemAvatar":"Combobox_bui-ComboboxItemAvatar__b37ad52723","bui-ComboboxItemTextContent":"Combobox_bui-ComboboxItemTextContent__b37ad52723","bui-ComboboxItemTitle":"Combobox_bui-ComboboxItemTitle__b37ad52723","bui-ComboboxItemDescription":"Combobox_bui-ComboboxItemDescription__b37ad52723","bui-ComboboxSection":"Combobox_bui-ComboboxSection__b37ad52723","bui-ComboboxSectionHeader":"Combobox_bui-ComboboxSectionHeader__b37ad52723","bui-ComboboxNoResults":"Combobox_bui-ComboboxNoResults__b37ad52723","bui-ComboboxLoading":"Combobox_bui-ComboboxLoading__b37ad52723","bui-ComboboxLoadingRow":"Combobox_bui-ComboboxLoadingRow__b37ad52723"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
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 .Container_bui-
|
|
4
|
-
var styles = {"bui-Container":"Container_bui-
|
|
3
|
+
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, theme, utilities;\n\n@layer components {\n .Container_bui-Container__4df60bab55 {\n flex: 1;\n width: 100%;\n max-width: 120rem;\n padding-inline: var(--bui-space-4);\n margin-inline: auto;\n margin-bottom: var(--bui-space-8);\n }\n\n @media (min-width: 640px) {\n .Container_bui-Container__4df60bab55 {\n padding-inline: var(--bui-space-5);\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Container":"Container_bui-Container__4df60bab55"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
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-
|
|
4
|
-
var styles = {"bui-DatePicker":"DatePicker_bui-
|
|
3
|
+
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, theme, utilities;\n\n@layer components {\n /* ============================================================\n Root\n ============================================================ */\n\n .DatePicker_bui-DatePicker__3f0c9df846 {\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__3f0c9df846 {\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__3f0c9df846 {\n width: 2rem;\n height: 2rem;\n }\n }\n }\n\n /* ============================================================\n Date input\n ============================================================ */\n\n .DatePicker_bui-DatePickerDateInput__3f0c9df846 {\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__3f0c9df846 {\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 line-height: 1.15;\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__3f0c9df846 {\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__3f0c9df846 {\n width: fit-content;\n outline: none;\n }\n\n .DatePicker_bui-DatePickerCalendarHeader__3f0c9df846 {\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__3f0c9df846 {\n font-size: var(--bui-font-size-3);\n font-weight: var(--bui-font-weight-bold);\n font-family: var(--bui-font-regular);\n line-height: 1.15;\n color: var(--bui-fg-primary);\n flex: 1;\n text-align: center;\n }\n\n .DatePicker_bui-DatePickerCalendarNavButton__3f0c9df846 {\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__3f0c9df846 {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0 2px;\n }\n\n .DatePicker_bui-DatePickerCalendarHeaderCell__3f0c9df846 {\n font-size: var(--bui-font-size-2);\n font-weight: var(--bui-font-weight-regular);\n line-height: 1.15;\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__3f0c9df846 {\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 line-height: 1.15;\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";
|
|
4
|
+
var styles = {"bui-DatePicker":"DatePicker_bui-DatePicker__3f0c9df846","bui-DatePickerGroup":"DatePicker_bui-DatePickerGroup__3f0c9df846","bui-DatePickerButton":"DatePicker_bui-DatePickerButton__3f0c9df846","bui-DatePickerDateInput":"DatePicker_bui-DatePickerDateInput__3f0c9df846","bui-DatePickerSegment":"DatePicker_bui-DatePickerSegment__3f0c9df846","bui-DatePickerCalendar":"DatePicker_bui-DatePickerCalendar__3f0c9df846","bui-DatePickerCalendarHeader":"DatePicker_bui-DatePickerCalendarHeader__3f0c9df846","bui-DatePickerCalendarHeading":"DatePicker_bui-DatePickerCalendarHeading__3f0c9df846","bui-DatePickerCalendarNavButton":"DatePicker_bui-DatePickerCalendarNavButton__3f0c9df846","bui-DatePickerCalendarGrid":"DatePicker_bui-DatePickerCalendarGrid__3f0c9df846","bui-DatePickerCalendarHeaderCell":"DatePicker_bui-DatePickerCalendarHeaderCell__3f0c9df846","bui-DatePickerCalendarCell":"DatePicker_bui-DatePickerCalendarCell__3f0c9df846"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
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__496fcd1b97 {\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__496fcd1b97 {\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__496fcd1b97 {\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__496fcd1b97 {\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__496fcd1b97 {\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__496fcd1b97 {\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 line-height: 1.15;\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__496fcd1b97 {\n color: var(--bui-fg-secondary);\n font-size: var(--bui-font-size-3);\n line-height: 1.15;\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__496fcd1b97 {\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__496fcd1b97 {\n width: fit-content;\n outline: none;\n }\n\n .DateRangePicker_bui-DateRangePickerCalendarHeader__496fcd1b97 {\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__496fcd1b97 {\n font-size: var(--bui-font-size-3);\n font-weight: var(--bui-font-weight-bold);\n font-family: var(--bui-font-regular);\n line-height: 1.15;\n color: var(--bui-fg-primary);\n flex: 1;\n text-align: center;\n }\n\n .DateRangePicker_bui-DateRangePickerCalendarNavButton__496fcd1b97 {\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__496fcd1b97 {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0 2px;\n }\n\n .DateRangePicker_bui-DateRangePickerCalendarHeaderCell__496fcd1b97 {\n font-size: var(--bui-font-size-2);\n font-weight: var(--bui-font-weight-regular);\n line-height: 1.15;\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__496fcd1b97 {\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 line-height: 1.15;\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__496fcd1b97[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__496fcd1b97[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";
|
|
4
|
-
var styles = {"bui-DateRangePicker":"DateRangePicker_bui-
|
|
3
|
+
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, theme, utilities;\n\n@layer components {\n /* ============================================================\n Root\n ============================================================ */\n\n .DateRangePicker_bui-DateRangePicker__2670dd8e84 {\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__2670dd8e84 {\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__2670dd8e84 {\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__2670dd8e84 {\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__2670dd8e84 {\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__2670dd8e84 {\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 line-height: 1.15;\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__2670dd8e84 {\n color: var(--bui-fg-secondary);\n font-size: var(--bui-font-size-3);\n line-height: 1.15;\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__2670dd8e84 {\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__2670dd8e84 {\n width: fit-content;\n outline: none;\n }\n\n .DateRangePicker_bui-DateRangePickerCalendarHeader__2670dd8e84 {\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__2670dd8e84 {\n font-size: var(--bui-font-size-3);\n font-weight: var(--bui-font-weight-bold);\n font-family: var(--bui-font-regular);\n line-height: 1.15;\n color: var(--bui-fg-primary);\n flex: 1;\n text-align: center;\n }\n\n .DateRangePicker_bui-DateRangePickerCalendarNavButton__2670dd8e84 {\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__2670dd8e84 {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0 2px;\n }\n\n .DateRangePicker_bui-DateRangePickerCalendarHeaderCell__2670dd8e84 {\n font-size: var(--bui-font-size-2);\n font-weight: var(--bui-font-weight-regular);\n line-height: 1.15;\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__2670dd8e84 {\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 line-height: 1.15;\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__2670dd8e84[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__2670dd8e84[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";
|
|
4
|
+
var styles = {"bui-DateRangePicker":"DateRangePicker_bui-DateRangePicker__2670dd8e84","bui-DateRangePickerGroup":"DateRangePicker_bui-DateRangePickerGroup__2670dd8e84","bui-DateRangePickerButton":"DateRangePicker_bui-DateRangePickerButton__2670dd8e84","bui-DateRangePickerDateFields":"DateRangePicker_bui-DateRangePickerDateFields__2670dd8e84","bui-DateRangePickerDateInput":"DateRangePicker_bui-DateRangePickerDateInput__2670dd8e84","bui-DateRangePickerSegment":"DateRangePicker_bui-DateRangePickerSegment__2670dd8e84","bui-DateRangePickerSeparator":"DateRangePicker_bui-DateRangePickerSeparator__2670dd8e84","bui-DateRangePickerCalendar":"DateRangePicker_bui-DateRangePickerCalendar__2670dd8e84","bui-DateRangePickerCalendarHeader":"DateRangePicker_bui-DateRangePickerCalendarHeader__2670dd8e84","bui-DateRangePickerCalendarHeading":"DateRangePicker_bui-DateRangePickerCalendarHeading__2670dd8e84","bui-DateRangePickerCalendarNavButton":"DateRangePicker_bui-DateRangePickerCalendarNavButton__2670dd8e84","bui-DateRangePickerCalendarGrid":"DateRangePicker_bui-DateRangePickerCalendarGrid__2670dd8e84","bui-DateRangePickerCalendarHeaderCell":"DateRangePicker_bui-DateRangePickerCalendarHeaderCell__2670dd8e84","bui-DateRangePickerCalendarCell":"DateRangePicker_bui-DateRangePickerCalendarCell__2670dd8e84"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|