@itwin/itwinui-react 3.1.3-dev.1 → 3.2.0-dev.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/cjs/core/NonIdealState/ErrorPage.js +9 -10
- package/cjs/core/Overlay/Overlay.js +1 -1
- package/cjs/core/ThemeProvider/ThemeProvider.d.ts +10 -0
- package/cjs/core/ThemeProvider/ThemeProvider.js +4 -4
- package/cjs/core/utils/functions/import.d.ts +0 -6
- package/cjs/core/utils/functions/import.js +1 -9
- package/cjs/styles.js +2 -2
- package/esm/core/NonIdealState/ErrorPage.js +9 -10
- package/esm/core/Overlay/Overlay.js +2 -2
- package/esm/core/ThemeProvider/ThemeProvider.d.ts +10 -0
- package/esm/core/ThemeProvider/ThemeProvider.js +4 -4
- package/esm/core/utils/functions/import.d.ts +0 -6
- package/esm/core/utils/functions/import.js +0 -8
- package/esm/styles.js +2 -2
- package/package.json +5 -11
- package/styles.css +3 -3
|
@@ -32,16 +32,15 @@ const React = __importStar(require("react"));
|
|
|
32
32
|
const Button_js_1 = require("../Buttons/Button.js");
|
|
33
33
|
const NonIdealState_js_1 = require("./NonIdealState.js");
|
|
34
34
|
const ProgressRadial_js_1 = require("../ProgressIndicators/ProgressRadial.js");
|
|
35
|
-
const
|
|
36
|
-
const
|
|
37
|
-
const
|
|
38
|
-
const
|
|
39
|
-
const
|
|
40
|
-
const
|
|
41
|
-
const
|
|
42
|
-
const
|
|
43
|
-
const
|
|
44
|
-
const SvgTimedOut = React.lazy(() => (0, index_js_1.dynamicImport)('@itwin/itwinui-illustrations-react/SvgTimedOut'));
|
|
35
|
+
const Svg401 = React.lazy(() => import('@itwin/itwinui-illustrations-react/Svg401'));
|
|
36
|
+
const Svg403 = React.lazy(() => import('@itwin/itwinui-illustrations-react/Svg403'));
|
|
37
|
+
const Svg404 = React.lazy(() => import('@itwin/itwinui-illustrations-react/Svg404'));
|
|
38
|
+
const Svg500 = React.lazy(() => import('@itwin/itwinui-illustrations-react/Svg500'));
|
|
39
|
+
const Svg502 = React.lazy(() => import('@itwin/itwinui-illustrations-react/Svg502'));
|
|
40
|
+
const Svg503 = React.lazy(() => import('@itwin/itwinui-illustrations-react/Svg503'));
|
|
41
|
+
const SvgError = React.lazy(() => import('@itwin/itwinui-illustrations-react/SvgError'));
|
|
42
|
+
const SvgRedirect = React.lazy(() => import('@itwin/itwinui-illustrations-react/SvgRedirect'));
|
|
43
|
+
const SvgTimedOut = React.lazy(() => import('@itwin/itwinui-illustrations-react/SvgTimedOut'));
|
|
45
44
|
/**
|
|
46
45
|
* @deprecated Use `NonIdealState` instead for a smaller client bundle.
|
|
47
46
|
*
|
|
@@ -76,7 +76,7 @@ const useInertPolyfill = () => {
|
|
|
76
76
|
react_1.default.useEffect(() => {
|
|
77
77
|
(async () => {
|
|
78
78
|
if (!HTMLElement.prototype.hasOwnProperty('inert') && !loaded.current) {
|
|
79
|
-
await (
|
|
79
|
+
await import(/* webpackIgnore: true */ /* @vite-ignore */ modulePath);
|
|
80
80
|
loaded.current = true;
|
|
81
81
|
}
|
|
82
82
|
})();
|
|
@@ -64,6 +64,16 @@ type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
|
|
|
64
64
|
* </ThemeProvider>
|
|
65
65
|
*/
|
|
66
66
|
portalContainer?: HTMLElement;
|
|
67
|
+
/**
|
|
68
|
+
* This prop will be used to determine if `styles.css` should be automatically imported at runtime (if not already found).
|
|
69
|
+
*
|
|
70
|
+
* By default, this is enabled when using `theme='inherit'`.
|
|
71
|
+
* This default behavior is useful for packages that want to support incremental adoption of latest iTwinUI,
|
|
72
|
+
* without requiring consuming applications (that might still be using an older version) to manually import the CSS.
|
|
73
|
+
*
|
|
74
|
+
* If true or false is passed, it will override the default behavior.
|
|
75
|
+
*/
|
|
76
|
+
includeCss?: boolean;
|
|
67
77
|
};
|
|
68
78
|
/**
|
|
69
79
|
* This component provides global state and applies theme to the entire tree
|
|
@@ -66,7 +66,7 @@ const Toaster_js_1 = require("../Toast/Toaster.js");
|
|
|
66
66
|
* </ThemeProvider>
|
|
67
67
|
*/
|
|
68
68
|
exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
69
|
-
const { theme: themeProp = 'inherit', children, themeOptions = {}, portalContainer: portalContainerProp, ...rest } = props;
|
|
69
|
+
const { theme: themeProp = 'inherit', children, themeOptions = {}, portalContainer: portalContainerProp, includeCss = themeProp === 'inherit', ...rest } = props;
|
|
70
70
|
const [rootElement, setRootElement] = React.useState(null);
|
|
71
71
|
const parent = useParentThemeAndContext(rootElement);
|
|
72
72
|
const theme = themeProp === 'inherit' ? parent.theme || 'light' : themeProp;
|
|
@@ -86,7 +86,7 @@ exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
86
86
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
87
87
|
[theme, JSON.stringify(themeOptions), portalContainer]);
|
|
88
88
|
return (React.createElement(ThemeContext_js_1.ThemeContext.Provider, { value: contextValue },
|
|
89
|
-
|
|
89
|
+
includeCss && rootElement ? React.createElement(FallbackStyles, { root: rootElement }) : null,
|
|
90
90
|
React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: (0, index_js_1.useMergedRefs)(forwardedRef, setRootElement), ...rest },
|
|
91
91
|
React.createElement(Toaster_js_1.ToastProvider, null,
|
|
92
92
|
children,
|
|
@@ -157,10 +157,10 @@ const useParentThemeAndContext = (rootElement) => {
|
|
|
157
157
|
const FallbackStyles = ({ root }) => {
|
|
158
158
|
(0, index_js_1.useIsomorphicLayoutEffect)(() => {
|
|
159
159
|
// bail if styles are already loaded
|
|
160
|
-
if (root.
|
|
160
|
+
if (getComputedStyle(root).getPropertyValue('--_iui-v3-loaded') === 'yes') {
|
|
161
161
|
return;
|
|
162
162
|
}
|
|
163
|
-
// bail if jest because it
|
|
163
|
+
// bail if jest because it doesn't care about CSS 🤷
|
|
164
164
|
if (index_js_1.isJest) {
|
|
165
165
|
return;
|
|
166
166
|
}
|
|
@@ -1,9 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Wrapper around native `import()` with workarounds for:
|
|
3
|
-
* 1. typescript trying to transpile dynamic import in CJS environment (https://github.com/microsoft/TypeScript/issues/43329)
|
|
4
|
-
* 2. jest/node causing segfault when encountering dynamic import (https://github.com/nodejs/node/issues/35889)
|
|
5
|
-
*/
|
|
6
|
-
export declare const dynamicImport: Function;
|
|
7
1
|
/**
|
|
8
2
|
* Wrapper around native CSS module scripts (import attributes) for dynamic imports.
|
|
9
3
|
* In unsupported browsers, it gracefully degrades to import assertions, and then `fetch`.
|
|
@@ -4,15 +4,7 @@
|
|
|
4
4
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
5
5
|
*--------------------------------------------------------------------------------------------*/
|
|
6
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.importCss =
|
|
8
|
-
/**
|
|
9
|
-
* Wrapper around native `import()` with workarounds for:
|
|
10
|
-
* 1. typescript trying to transpile dynamic import in CJS environment (https://github.com/microsoft/TypeScript/issues/43329)
|
|
11
|
-
* 2. jest/node causing segfault when encountering dynamic import (https://github.com/nodejs/node/issues/35889)
|
|
12
|
-
*/
|
|
13
|
-
exports.dynamicImport = typeof jest === undefined
|
|
14
|
-
? new Function('specifier', 'return import(specifier)')
|
|
15
|
-
: (specifier) => import(/* webpackIgnore: true */ /* @vite-ignore */ specifier);
|
|
7
|
+
exports.importCss = void 0;
|
|
16
8
|
/**
|
|
17
9
|
* Wrapper around native CSS module scripts (import attributes) for dynamic imports.
|
|
18
10
|
* In unsupported browsers, it gracefully degrades to import assertions, and then `fetch`.
|
package/cjs/styles.js
CHANGED
|
@@ -208,9 +208,9 @@ const styles = {
|
|
|
208
208
|
"iui-overlay-exiting": "_iui3-overlay-exiting",
|
|
209
209
|
closeAnimation,
|
|
210
210
|
"iui-progress-indicator-radial": "_iui3-progress-indicator-radial",
|
|
211
|
-
"iui-
|
|
211
|
+
"iui-ur0duv3": "_iui3-ur0duv3",
|
|
212
212
|
"iui-progress-indicator-linear-label": "_iui3-progress-indicator-linear-label",
|
|
213
|
-
"iui-
|
|
213
|
+
"iui-ur0duvs": "_iui3-ur0duvs",
|
|
214
214
|
"iui-radio": "_iui3-radio",
|
|
215
215
|
"iui-radio-tile": "_iui3-radio-tile",
|
|
216
216
|
"iui-radio-tile-icon": "_iui3-radio-tile-icon",
|
|
@@ -6,16 +6,15 @@ import * as React from 'react';
|
|
|
6
6
|
import { Button } from '../Buttons/Button.js';
|
|
7
7
|
import { NonIdealState } from './NonIdealState.js';
|
|
8
8
|
import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
|
|
9
|
-
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
const
|
|
18
|
-
const SvgTimedOut = React.lazy(() => dynamicImport('@itwin/itwinui-illustrations-react/SvgTimedOut'));
|
|
9
|
+
const Svg401 = React.lazy(() => import('@itwin/itwinui-illustrations-react/Svg401'));
|
|
10
|
+
const Svg403 = React.lazy(() => import('@itwin/itwinui-illustrations-react/Svg403'));
|
|
11
|
+
const Svg404 = React.lazy(() => import('@itwin/itwinui-illustrations-react/Svg404'));
|
|
12
|
+
const Svg500 = React.lazy(() => import('@itwin/itwinui-illustrations-react/Svg500'));
|
|
13
|
+
const Svg502 = React.lazy(() => import('@itwin/itwinui-illustrations-react/Svg502'));
|
|
14
|
+
const Svg503 = React.lazy(() => import('@itwin/itwinui-illustrations-react/Svg503'));
|
|
15
|
+
const SvgError = React.lazy(() => import('@itwin/itwinui-illustrations-react/SvgError'));
|
|
16
|
+
const SvgRedirect = React.lazy(() => import('@itwin/itwinui-illustrations-react/SvgRedirect'));
|
|
17
|
+
const SvgTimedOut = React.lazy(() => import('@itwin/itwinui-illustrations-react/SvgTimedOut'));
|
|
19
18
|
/**
|
|
20
19
|
* @deprecated Use `NonIdealState` instead for a smaller client bundle.
|
|
21
20
|
*
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
4
|
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
import React from 'react';
|
|
6
|
-
import { Box, polymorphic
|
|
6
|
+
import { Box, polymorphic } from '../utils/index.js';
|
|
7
7
|
// --------------------------------------------------------------------------------
|
|
8
8
|
const OverlayComponent = React.forwardRef((props, forwardedRef) => {
|
|
9
9
|
const { content, children, ...rest } = props;
|
|
@@ -70,7 +70,7 @@ const useInertPolyfill = () => {
|
|
|
70
70
|
React.useEffect(() => {
|
|
71
71
|
(async () => {
|
|
72
72
|
if (!HTMLElement.prototype.hasOwnProperty('inert') && !loaded.current) {
|
|
73
|
-
await
|
|
73
|
+
await import(/* webpackIgnore: true */ /* @vite-ignore */ modulePath);
|
|
74
74
|
loaded.current = true;
|
|
75
75
|
}
|
|
76
76
|
})();
|
|
@@ -64,6 +64,16 @@ type ThemeProviderOwnProps = Pick<RootProps, 'theme'> & {
|
|
|
64
64
|
* </ThemeProvider>
|
|
65
65
|
*/
|
|
66
66
|
portalContainer?: HTMLElement;
|
|
67
|
+
/**
|
|
68
|
+
* This prop will be used to determine if `styles.css` should be automatically imported at runtime (if not already found).
|
|
69
|
+
*
|
|
70
|
+
* By default, this is enabled when using `theme='inherit'`.
|
|
71
|
+
* This default behavior is useful for packages that want to support incremental adoption of latest iTwinUI,
|
|
72
|
+
* without requiring consuming applications (that might still be using an older version) to manually import the CSS.
|
|
73
|
+
*
|
|
74
|
+
* If true or false is passed, it will override the default behavior.
|
|
75
|
+
*/
|
|
76
|
+
includeCss?: boolean;
|
|
67
77
|
};
|
|
68
78
|
/**
|
|
69
79
|
* This component provides global state and applies theme to the entire tree
|
|
@@ -37,7 +37,7 @@ import { ToastProvider, Toaster } from '../Toast/Toaster.js';
|
|
|
37
37
|
* </ThemeProvider>
|
|
38
38
|
*/
|
|
39
39
|
export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
40
|
-
const { theme: themeProp = 'inherit', children, themeOptions = {}, portalContainer: portalContainerProp, ...rest } = props;
|
|
40
|
+
const { theme: themeProp = 'inherit', children, themeOptions = {}, portalContainer: portalContainerProp, includeCss = themeProp === 'inherit', ...rest } = props;
|
|
41
41
|
const [rootElement, setRootElement] = React.useState(null);
|
|
42
42
|
const parent = useParentThemeAndContext(rootElement);
|
|
43
43
|
const theme = themeProp === 'inherit' ? parent.theme || 'light' : themeProp;
|
|
@@ -57,7 +57,7 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
57
57
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
58
58
|
[theme, JSON.stringify(themeOptions), portalContainer]);
|
|
59
59
|
return (React.createElement(ThemeContext.Provider, { value: contextValue },
|
|
60
|
-
|
|
60
|
+
includeCss && rootElement ? React.createElement(FallbackStyles, { root: rootElement }) : null,
|
|
61
61
|
React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: useMergedRefs(forwardedRef, setRootElement), ...rest },
|
|
62
62
|
React.createElement(ToastProvider, null,
|
|
63
63
|
children,
|
|
@@ -128,10 +128,10 @@ const useParentThemeAndContext = (rootElement) => {
|
|
|
128
128
|
const FallbackStyles = ({ root }) => {
|
|
129
129
|
useIsomorphicLayoutEffect(() => {
|
|
130
130
|
// bail if styles are already loaded
|
|
131
|
-
if (root.
|
|
131
|
+
if (getComputedStyle(root).getPropertyValue('--_iui-v3-loaded') === 'yes') {
|
|
132
132
|
return;
|
|
133
133
|
}
|
|
134
|
-
// bail if jest because it
|
|
134
|
+
// bail if jest because it doesn't care about CSS 🤷
|
|
135
135
|
if (isJest) {
|
|
136
136
|
return;
|
|
137
137
|
}
|
|
@@ -1,9 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Wrapper around native `import()` with workarounds for:
|
|
3
|
-
* 1. typescript trying to transpile dynamic import in CJS environment (https://github.com/microsoft/TypeScript/issues/43329)
|
|
4
|
-
* 2. jest/node causing segfault when encountering dynamic import (https://github.com/nodejs/node/issues/35889)
|
|
5
|
-
*/
|
|
6
|
-
export declare const dynamicImport: Function;
|
|
7
1
|
/**
|
|
8
2
|
* Wrapper around native CSS module scripts (import attributes) for dynamic imports.
|
|
9
3
|
* In unsupported browsers, it gracefully degrades to import assertions, and then `fetch`.
|
|
@@ -2,14 +2,6 @@
|
|
|
2
2
|
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
3
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
4
|
*--------------------------------------------------------------------------------------------*/
|
|
5
|
-
/**
|
|
6
|
-
* Wrapper around native `import()` with workarounds for:
|
|
7
|
-
* 1. typescript trying to transpile dynamic import in CJS environment (https://github.com/microsoft/TypeScript/issues/43329)
|
|
8
|
-
* 2. jest/node causing segfault when encountering dynamic import (https://github.com/nodejs/node/issues/35889)
|
|
9
|
-
*/
|
|
10
|
-
export const dynamicImport = typeof jest === undefined
|
|
11
|
-
? new Function('specifier', 'return import(specifier)')
|
|
12
|
-
: (specifier) => import(/* webpackIgnore: true */ /* @vite-ignore */ specifier);
|
|
13
5
|
/**
|
|
14
6
|
* Wrapper around native CSS module scripts (import attributes) for dynamic imports.
|
|
15
7
|
* In unsupported browsers, it gracefully degrades to import assertions, and then `fetch`.
|
package/esm/styles.js
CHANGED
|
@@ -207,9 +207,9 @@ const styles = {
|
|
|
207
207
|
"iui-overlay-exiting": "_iui3-overlay-exiting",
|
|
208
208
|
closeAnimation,
|
|
209
209
|
"iui-progress-indicator-radial": "_iui3-progress-indicator-radial",
|
|
210
|
-
"iui-
|
|
210
|
+
"iui-ur0duv3": "_iui3-ur0duv3",
|
|
211
211
|
"iui-progress-indicator-linear-label": "_iui3-progress-indicator-linear-label",
|
|
212
|
-
"iui-
|
|
212
|
+
"iui-ur0duvs": "_iui3-ur0duvs",
|
|
213
213
|
"iui-radio": "_iui3-radio",
|
|
214
214
|
"iui-radio-tile": "_iui3-radio-tile",
|
|
215
215
|
"iui-radio-tile-icon": "_iui3-radio-tile-icon",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itwin/itwinui-react",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.2.0-dev.0",
|
|
4
4
|
"author": "Bentley Systems",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -63,8 +63,8 @@
|
|
|
63
63
|
"clean:coverage": "rimraf coverage",
|
|
64
64
|
"clean": "rimraf .turbo && yarn clean:coverage && yarn clean:build && rimraf node_modules",
|
|
65
65
|
"test": "yarn test:types && yarn test:unit",
|
|
66
|
-
"test:unit": "jest",
|
|
67
|
-
"test:unit:watch": "
|
|
66
|
+
"test:unit": "dotenv -v NODE_OPTIONS=--experimental-vm-modules -- npx jest",
|
|
67
|
+
"test:unit:watch": "yarn test:unit --watch",
|
|
68
68
|
"test:types": "tsc -p tsconfig.test.json --noEmit",
|
|
69
69
|
"format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write",
|
|
70
70
|
"lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0",
|
|
@@ -76,6 +76,7 @@
|
|
|
76
76
|
"dev:styles": "yarn build:styles --watch"
|
|
77
77
|
},
|
|
78
78
|
"dependencies": {
|
|
79
|
+
"@itwin/itwinui-illustrations-react": "^2.1.0",
|
|
79
80
|
"@floating-ui/react": "^0.26.3",
|
|
80
81
|
"classnames": "^2.3.2",
|
|
81
82
|
"react-table": "^7.8.0",
|
|
@@ -84,13 +85,12 @@
|
|
|
84
85
|
},
|
|
85
86
|
"devDependencies": {
|
|
86
87
|
"@itwin/itwinui-css": "^2.1.0",
|
|
87
|
-
"@itwin/itwinui-illustrations-react": "^2.1.0",
|
|
88
88
|
"@itwin/itwinui-variables": "3.0.0",
|
|
89
89
|
"@swc/cli": "^0.1.62",
|
|
90
90
|
"@swc/core": "^1.3.68",
|
|
91
91
|
"@testing-library/jest-dom": "^5.16.4",
|
|
92
92
|
"@testing-library/react": "^13.2.0",
|
|
93
|
-
"@testing-library/user-event": "^14.
|
|
93
|
+
"@testing-library/user-event": "^14.5.1",
|
|
94
94
|
"@types/jest": "^29.0.0",
|
|
95
95
|
"@types/node": "^18.0.0",
|
|
96
96
|
"@types/react": "^18.2.0",
|
|
@@ -114,15 +114,9 @@
|
|
|
114
114
|
"vite": "^4.5.1"
|
|
115
115
|
},
|
|
116
116
|
"peerDependencies": {
|
|
117
|
-
"@itwin/itwinui-illustrations-react": "^2.1.0",
|
|
118
117
|
"react": ">= 17.0.0 < 19.0.0",
|
|
119
118
|
"react-dom": ">=17.0.0 < 19.0.0"
|
|
120
119
|
},
|
|
121
|
-
"peerDependenciesMeta": {
|
|
122
|
-
"@itwin/itwinui-illustrations-react": {
|
|
123
|
-
"optional": true
|
|
124
|
-
}
|
|
125
|
-
},
|
|
126
120
|
"lint-staged": {
|
|
127
121
|
"*.{tsx,ts,jsx,js}": [
|
|
128
122
|
"prettier --write",
|
package/styles.css
CHANGED
|
@@ -694,14 +694,14 @@
|
|
|
694
694
|
}
|
|
695
695
|
|
|
696
696
|
@layer itwinui.v3{
|
|
697
|
-
._iui3-progress-indicator-radial :is(svg,img){inline-size:var(--iui-size-m);block-size:var(--iui-size-m);fill:var(--iui-color-icon);flex-shrink:0;display:flex}._iui3-progress-indicator-radial[data-iui-status=positive]{color:var(--iui-color-text-positive)}._iui3-progress-indicator-radial[data-iui-status=positive]:after{background-color:var(--iui-color-border-positive)}._iui3-progress-indicator-radial[data-iui-status=positive] :is(svg,img){fill:var(--iui-color-border-positive)}._iui3-progress-indicator-radial[data-iui-status=negative]{color:var(--iui-color-text-negative)}._iui3-progress-indicator-radial[data-iui-status=negative]:after{background-color:var(--iui-color-border-negative)}._iui3-progress-indicator-radial[data-iui-status=negative] :is(svg,img){fill:var(--iui-color-border-negative)}._iui3-progress-indicator-radial[data-iui-size=x-small]{--_iui-progress-indicator-radial-size:var(--iui-size-m)}._iui3-progress-indicator-radial[data-iui-size=x-small]:before,._iui3-progress-indicator-radial[data-iui-size=x-small]:after{border-width:var(--iui-size-3xs)}._iui3-progress-indicator-radial[data-iui-size=x-small]>*{display:none}._iui3-progress-indicator-radial[data-iui-size=small]{--_iui-progress-indicator-radial-size:calc(1.5*var(--iui-size-m))}._iui3-progress-indicator-radial[data-iui-size=small]:before,._iui3-progress-indicator-radial[data-iui-size=small]:after{border-width:calc(var(--iui-size-3xs)*1.5)}._iui3-progress-indicator-radial[data-iui-size=large]{--_iui-progress-indicator-radial-size:calc(3*var(--iui-size-m));font-size:var(--iui-font-size-2)}._iui3-progress-indicator-radial[data-iui-size=large]:before,._iui3-progress-indicator-radial[data-iui-size=large]:after{border-width:calc(var(--iui-size-2xs)*1.5)}._iui3-progress-indicator-radial[data-iui-size=large] :is(svg,img){inline-size:calc(1.5*var(--iui-size-m));block-size:calc(1.5*var(--iui-size-m));flex-shrink:0;display:flex}._iui3-progress-indicator-radial:where(:not([data-iui-indeterminate=true])):after{-webkit-mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0);mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0)}._iui3-progress-indicator-radial:where([data-iui-indeterminate=true]):after{animation:.8s cubic-bezier(.6,.4,.4,.6) infinite _iui3-
|
|
697
|
+
._iui3-progress-indicator-radial :is(svg,img){inline-size:var(--iui-size-m);block-size:var(--iui-size-m);fill:var(--iui-color-icon);flex-shrink:0;display:flex}._iui3-progress-indicator-radial[data-iui-status=positive]{color:var(--iui-color-text-positive)}._iui3-progress-indicator-radial[data-iui-status=positive]:after{background-color:var(--iui-color-border-positive)}._iui3-progress-indicator-radial[data-iui-status=positive] :is(svg,img){fill:var(--iui-color-border-positive)}._iui3-progress-indicator-radial[data-iui-status=negative]{color:var(--iui-color-text-negative)}._iui3-progress-indicator-radial[data-iui-status=negative]:after{background-color:var(--iui-color-border-negative)}._iui3-progress-indicator-radial[data-iui-status=negative] :is(svg,img){fill:var(--iui-color-border-negative)}._iui3-progress-indicator-radial[data-iui-size=x-small]{--_iui-progress-indicator-radial-size:var(--iui-size-m)}._iui3-progress-indicator-radial[data-iui-size=x-small]:before,._iui3-progress-indicator-radial[data-iui-size=x-small]:after{border-width:var(--iui-size-3xs)}._iui3-progress-indicator-radial[data-iui-size=x-small]>*{display:none}._iui3-progress-indicator-radial[data-iui-size=small]{--_iui-progress-indicator-radial-size:calc(1.5*var(--iui-size-m))}._iui3-progress-indicator-radial[data-iui-size=small]:before,._iui3-progress-indicator-radial[data-iui-size=small]:after{border-width:calc(var(--iui-size-3xs)*1.5)}._iui3-progress-indicator-radial[data-iui-size=large]{--_iui-progress-indicator-radial-size:calc(3*var(--iui-size-m));font-size:var(--iui-font-size-2)}._iui3-progress-indicator-radial[data-iui-size=large]:before,._iui3-progress-indicator-radial[data-iui-size=large]:after{border-width:calc(var(--iui-size-2xs)*1.5)}._iui3-progress-indicator-radial[data-iui-size=large] :is(svg,img){inline-size:calc(1.5*var(--iui-size-m));block-size:calc(1.5*var(--iui-size-m));flex-shrink:0;display:flex}._iui3-progress-indicator-radial:where(:not([data-iui-indeterminate=true])):after{-webkit-mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0);mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0)}._iui3-progress-indicator-radial:where([data-iui-indeterminate=true]):after{animation:.8s cubic-bezier(.6,.4,.4,.6) infinite _iui3-ur0duv3;-webkit-mask-image:conic-gradient(#0000,#000),linear-gradient(#000 0 0);mask-image:conic-gradient(#0000,#000),linear-gradient(#000 0 0)}@keyframes _iui3-ur0duv3{to{transform:rotate(360deg)}}._iui3-progress-indicator-linear-label{font-size:var(--iui-font-size-0);color:var(--_iui-progress-indicator-linear-label-color);--iui-svg-fill:var(--_iui-progress-indicator-linear-label-fill);justify-content:space-between;align-items:center;display:flex}._iui3-progress-indicator-linear-label>:only-child{margin-inline:auto}._iui3-progress-indicator-linear{gap:var(--iui-size-2xs);display:grid}._iui3-progress-indicator-linear:before{content:"";block-size:var(--iui-size-2xs);background-color:var(--iui-color-border);background-image:linear-gradient(90deg,var(--_iui-progress-indicator-track-fill,var(--iui-color-border-accent))0% 100%);background-repeat:no-repeat;background-size:var(--iui-progress-percentage,100%)100%;forced-color-adjust:none}
|
|
698
698
|
}
|
|
699
699
|
|
|
700
700
|
@layer itwinui.v3{@media (forced-colors:active){._iui3-progress-indicator-linear:before{background-color:#0000;background-image:linear-gradient(90deg,CanvasText 0% 100%);border:.5px solid}}
|
|
701
701
|
}
|
|
702
702
|
|
|
703
703
|
@layer itwinui.v3{
|
|
704
|
-
._iui3-progress-indicator-linear[data-iui-status=positive]{--_iui-progress-indicator-track-fill:var(--iui-color-border-positive);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-positive);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-positive)}._iui3-progress-indicator-linear[data-iui-status=positive]::selection,._iui3-progress-indicator-linear[data-iui-status=positive] ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}._iui3-progress-indicator-linear[data-iui-status=negative]{--_iui-progress-indicator-track-fill:var(--iui-color-border-negative);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-negative);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-negative)}._iui3-progress-indicator-linear[data-iui-status=negative]::selection,._iui3-progress-indicator-linear[data-iui-status=negative] ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}._iui3-progress-indicator-linear:where([data-iui-animated=true]:not([data-iui-indeterminate=true])):before{transition:background-size 1s ease-in-out}._iui3-progress-indicator-linear:where([data-iui-indeterminate=true]):before{animation:1.5s linear infinite _iui3-
|
|
704
|
+
._iui3-progress-indicator-linear[data-iui-status=positive]{--_iui-progress-indicator-track-fill:var(--iui-color-border-positive);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-positive);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-positive)}._iui3-progress-indicator-linear[data-iui-status=positive]::selection,._iui3-progress-indicator-linear[data-iui-status=positive] ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}._iui3-progress-indicator-linear[data-iui-status=negative]{--_iui-progress-indicator-track-fill:var(--iui-color-border-negative);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-negative);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-negative)}._iui3-progress-indicator-linear[data-iui-status=negative]::selection,._iui3-progress-indicator-linear[data-iui-status=negative] ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}._iui3-progress-indicator-linear:where([data-iui-animated=true]:not([data-iui-indeterminate=true])):before{transition:background-size 1s ease-in-out}._iui3-progress-indicator-linear:where([data-iui-indeterminate=true]):before{animation:1.5s linear infinite _iui3-ur0duvs}@keyframes _iui3-ur0duvs{0%{background-position:-60% 0;background-size:30% 100%}40%{background-position:-40% 0;background-size:40% 100%}to{background-position:200% 0;background-size:50% 100%}}._iui3-radio-wrapper{vertical-align:baseline;font-size:var(--iui-font-size-1);-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--iui-color-text);align-items:center;gap:var(--iui-size-xs);border:none;inline-size:-moz-fit-content;inline-size:fit-content;margin:0;padding:0;display:flex;position:relative}._iui3-radio-wrapper._iui3-loading{cursor:progress;color:var(--iui-color-text-disabled);font-style:italic}._iui3-radio-wrapper>._iui3-checkbox-label,._iui3-radio-wrapper>._iui3-radio-label{line-height:var(--iui-size-l)}._iui3-radio-wrapper>._iui3-checkbox-label svg,._iui3-radio-wrapper>._iui3-radio-label svg{inline-size:var(--iui-size-m);block-size:var(--iui-size-m);vertical-align:middle;fill:var(--iui-color-icon);flex-shrink:0;display:flex}._iui3-radio-wrapper._iui3-disabled{cursor:not-allowed;color:var(--iui-color-text-disabled)}._iui3-radio-wrapper._iui3-disabled svg{fill:var(--iui-color-icon-disabled)}._iui3-radio-wrapper._iui3-positive{color:var(--iui-color-text-positive)}._iui3-radio-wrapper._iui3-warning{color:var(--iui-color-text-warning)}._iui3-radio-wrapper._iui3-negative{color:var(--iui-color-text-negative)}._iui3-radio{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m2.75 6.875h10.5v2.25h-10.5z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 16 16\"></svg>");--_iui-checkbox-svg-color:var(--iui-color-icon-accent);--_iui-checkbox-border-color:var(--iui-color-border-foreground);--_iui-checkbox-background-color:var(--iui-color-background);--_iui-checkbox-mask-image:initial;inline-size:var(--iui-size-m);block-size:var(--iui-size-m);appearance:none;border-radius:var(--iui-border-radius-1);background-color:var(--_iui-checkbox-background-color);cursor:pointer;transition:outline-color var(--iui-duration-1)ease-out;outline:solid 1px var(--_iui-checkbox-border-color);outline-offset:-1px;border-radius:50%;flex-shrink:0;margin:0;display:flex;position:relative}._iui3-radio:before{content:"";inset:calc((var(--iui-checkbox-target-size,24px) - 16px)/-2);position:absolute}._iui3-radio:after{content:"";background-color:var(--_iui-checkbox-svg-color);-webkit-mask:var(--_iui-checkbox-mask-image)no-repeat center;mask:var(--_iui-checkbox-mask-image)no-repeat center;position:absolute;inset:0}._iui3-radio:not(:checked){--_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg)}._iui3-radio:indeterminate{--_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg)}._iui3-radio:hover{--_iui-checkbox-border-color:var(--iui-color-border-foreground-hover)}._iui3-radio:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){._iui3-radio:focus{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}}._iui3-radio:disabled{--_iui-checkbox-svg-color:var(--iui-color-icon-disabled);--_iui-checkbox-border-color:var(--iui-color-border-disabled);--_iui-checkbox-background-color:var(--iui-color-background-disabled);cursor:not-allowed}._iui3-radio._iui3-checkbox-visibility{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z\" opacity=\".33\" /><path d=\"m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z\" /></svg>");--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:transparent;outline-width:1px}._iui3-radio._iui3-checkbox-visibility:where(:not(:checked):not(:indeterminate)){--_iui-checkbox-svg-color:var(--iui-color-icon)}._iui3-radio._iui3-checkbox-visibility:where(:hover){--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:var(--iui-color-background-transparent-hover)}._iui3-radio._iui3-checkbox-visibility:where(:disabled){--_iui-checkbox-svg-color:var(--iui-color-icon-disabled);--_iui-checkbox-background-color:var(--iui-color-background-disabled)}._iui3-radio._iui3-loading{--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:transparent;opacity:0;cursor:wait;position:absolute}._iui3-radio:checked{--_iui-checkbox-mask-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" ><circle cx=\"8\" cy=\"8\" r=\"4\" /></svg>")}._iui3-radio:not(:checked),._iui3-radio:indeterminate{--_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg)}._iui3-radio-tile{-webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));inline-size:calc(var(--iui-size-xl)*5);padding:var(--iui-size-xs);z-index:1;outline:1px solid var(--iui-color-border);background-color:var(--iui-color-background);transition:outline-color var(--iui-duration-1)ease-out;align-content:center;justify-items:center;display:grid;position:relative}._iui3-radio-tile:where(:hover){z-index:2;outline-color:var(--iui-color-border-hover)}._iui3-radio-tile:where(:hover) ._iui3-radio-tile-icon svg{fill:var(--iui-color-icon-hover)}._iui3-radio-tile:where(:has(input:disabled),[data-iui-disabled=true]){outline-color:var(--iui-color-border-disabled);background-color:var(--iui-color-background-disabled)}._iui3-radio-tile-container{-webkit-user-select:none;user-select:none;isolation:isolate;flex-wrap:wrap;gap:1px;display:inline-flex;position:relative}._iui3-radio-tile-input{z-index:1;appearance:none;cursor:pointer;margin:0;position:absolute;inset:0}._iui3-radio-tile-input:checked{z-index:3;outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}
|
|
705
705
|
}
|
|
706
706
|
|
|
707
707
|
@layer itwinui.v3{@media (forced-colors:active){._iui3-radio-tile-input:checked{outline-color:Highlight}}
|
|
@@ -1070,6 +1070,6 @@
|
|
|
1070
1070
|
|
|
1071
1071
|
@layer itwinui.v3 {
|
|
1072
1072
|
._iui3-root {
|
|
1073
|
-
--_iui-
|
|
1073
|
+
--_iui-v3-loaded: yes;
|
|
1074
1074
|
}
|
|
1075
1075
|
}
|