@itwin/itwinui-react 3.1.2 → 3.1.3-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/ThemeProvider/ThemeProvider.js +34 -0
- package/cjs/core/utils/functions/import.d.ts +12 -0
- package/cjs/core/utils/functions/import.js +30 -1
- package/cjs/styles.js +2 -2
- package/esm/core/ThemeProvider/ThemeProvider.js +35 -1
- package/esm/core/utils/functions/import.d.ts +12 -0
- package/esm/core/utils/functions/import.js +28 -0
- package/esm/styles.js +2 -2
- package/package.json +1 -1
- package/styles.css +8 -2
|
@@ -61,6 +61,7 @@ exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
|
|
|
61
61
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
62
62
|
[theme, JSON.stringify(themeOptions), portalContainer]);
|
|
63
63
|
return (React.createElement(ThemeContext_js_1.ThemeContext.Provider, { value: contextValue },
|
|
64
|
+
themeProp === 'inherit' && rootElement ? (React.createElement(FallbackStyles, { root: rootElement })) : null,
|
|
64
65
|
React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: (0, index_js_1.useMergedRefs)(forwardedRef, setRootElement), ...rest },
|
|
65
66
|
React.createElement(Toaster_js_1.ToastProvider, null,
|
|
66
67
|
children,
|
|
@@ -123,3 +124,36 @@ const useParentThemeAndContext = (rootElement) => {
|
|
|
123
124
|
context: parentContext,
|
|
124
125
|
};
|
|
125
126
|
};
|
|
127
|
+
// ----------------------------------------------------------------------------
|
|
128
|
+
/**
|
|
129
|
+
* When `@itwin/itwinui-react/styles.css` is not imported, we will attempt to
|
|
130
|
+
* dynamically import it (if possible) and fallback to loading it from a CDN.
|
|
131
|
+
*/
|
|
132
|
+
const FallbackStyles = ({ root }) => {
|
|
133
|
+
(0, index_js_1.useIsomorphicLayoutEffect)(() => {
|
|
134
|
+
// bail if styles are already loaded
|
|
135
|
+
if (root.style.getPropertyValue('--_iui-version') === '3') {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
// bail if jest because it does not support dynamic imports 🤷
|
|
139
|
+
if (index_js_1.isJest) {
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
142
|
+
(async () => {
|
|
143
|
+
try {
|
|
144
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
145
|
+
// @ts-ignore
|
|
146
|
+
await Promise.resolve().then(() => tslib_1.__importStar(require('../../../styles.css')));
|
|
147
|
+
}
|
|
148
|
+
catch (error) {
|
|
149
|
+
console.log('Error loading styles.css locally', error);
|
|
150
|
+
const css = await (0, index_js_1.importCss)('https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@3/styles.css');
|
|
151
|
+
document.adoptedStyleSheets = [
|
|
152
|
+
...document.adoptedStyleSheets,
|
|
153
|
+
css.default,
|
|
154
|
+
];
|
|
155
|
+
}
|
|
156
|
+
})();
|
|
157
|
+
}, [root]);
|
|
158
|
+
return React.createElement(React.Fragment, null);
|
|
159
|
+
};
|
|
@@ -4,3 +4,15 @@
|
|
|
4
4
|
* 2. jest/node causing segfault when encountering dynamic import (https://github.com/nodejs/node/issues/35889)
|
|
5
5
|
*/
|
|
6
6
|
export declare const dynamicImport: Function;
|
|
7
|
+
/**
|
|
8
|
+
* Wrapper around native CSS module scripts (import attributes) for dynamic imports.
|
|
9
|
+
* In unsupported browsers, it gracefully degrades to import assertions, and then `fetch`.
|
|
10
|
+
*
|
|
11
|
+
* Returns a constructable CSSStyleSheet object that can be adopted.
|
|
12
|
+
*
|
|
13
|
+
* @see https://web.dev/articles/css-module-scripts
|
|
14
|
+
* @see https://github.com/tc39/proposal-import-attributes
|
|
15
|
+
*/
|
|
16
|
+
export declare const importCss: (url: string) => Promise<{
|
|
17
|
+
default: CSSStyleSheet;
|
|
18
|
+
}>;
|
|
@@ -27,7 +27,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
27
27
|
return result;
|
|
28
28
|
};
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
exports.dynamicImport = void 0;
|
|
30
|
+
exports.importCss = exports.dynamicImport = void 0;
|
|
31
31
|
/**
|
|
32
32
|
* Wrapper around native `import()` with workarounds for:
|
|
33
33
|
* 1. typescript trying to transpile dynamic import in CJS environment (https://github.com/microsoft/TypeScript/issues/43329)
|
|
@@ -36,3 +36,32 @@ exports.dynamicImport = void 0;
|
|
|
36
36
|
exports.dynamicImport = typeof jest === undefined
|
|
37
37
|
? new Function('specifier', 'return import(specifier)')
|
|
38
38
|
: (specifier) => Promise.resolve(`${specifier}`).then(s => __importStar(require(s)));
|
|
39
|
+
/**
|
|
40
|
+
* Wrapper around native CSS module scripts (import attributes) for dynamic imports.
|
|
41
|
+
* In unsupported browsers, it gracefully degrades to import assertions, and then `fetch`.
|
|
42
|
+
*
|
|
43
|
+
* Returns a constructable CSSStyleSheet object that can be adopted.
|
|
44
|
+
*
|
|
45
|
+
* @see https://web.dev/articles/css-module-scripts
|
|
46
|
+
* @see https://github.com/tc39/proposal-import-attributes
|
|
47
|
+
*/
|
|
48
|
+
const importCss = async (url) => {
|
|
49
|
+
try {
|
|
50
|
+
return await new Function(`return import("${url}", { with: { type: "css" } })`)();
|
|
51
|
+
}
|
|
52
|
+
catch {
|
|
53
|
+
try {
|
|
54
|
+
return await new Function(`return import("${url}", { assert: { type: "css" } })`)();
|
|
55
|
+
}
|
|
56
|
+
catch {
|
|
57
|
+
return await fetch(url)
|
|
58
|
+
.then((res) => res.text())
|
|
59
|
+
.then((cssText) => {
|
|
60
|
+
const stylesheet = new CSSStyleSheet();
|
|
61
|
+
stylesheet.replaceSync(cssText);
|
|
62
|
+
return { default: stylesheet };
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
exports.importCss = importCss;
|
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-u7a7wmx": "_iui3-u7a7wmx",
|
|
212
212
|
"iui-progress-indicator-linear-label": "_iui3-progress-indicator-linear-label",
|
|
213
|
-
"iui-
|
|
213
|
+
"iui-u7a7wnb": "_iui3-u7a7wnb",
|
|
214
214
|
"iui-radio": "_iui3-radio",
|
|
215
215
|
"iui-radio-tile": "_iui3-radio-tile",
|
|
216
216
|
"iui-radio-tile-icon": "_iui3-radio-tile-icon",
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import * as ReactDOM from 'react-dom';
|
|
7
7
|
import cx from 'classnames';
|
|
8
|
-
import { useMediaQuery, useMergedRefs, Box, useIsomorphicLayoutEffect, useControlledState, useLatestRef, } from '../utils/index.js';
|
|
8
|
+
import { useMediaQuery, useMergedRefs, Box, useIsomorphicLayoutEffect, useControlledState, useLatestRef, importCss, isJest, } from '../utils/index.js';
|
|
9
9
|
import { ThemeContext } from './ThemeContext.js';
|
|
10
10
|
import { ToastProvider, Toaster } from '../Toast/Toaster.js';
|
|
11
11
|
/**
|
|
@@ -57,6 +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
|
+
themeProp === 'inherit' && rootElement ? (React.createElement(FallbackStyles, { root: rootElement })) : null,
|
|
60
61
|
React.createElement(Root, { theme: theme, themeOptions: themeOptions, ref: useMergedRefs(forwardedRef, setRootElement), ...rest },
|
|
61
62
|
React.createElement(ToastProvider, null,
|
|
62
63
|
children,
|
|
@@ -119,3 +120,36 @@ const useParentThemeAndContext = (rootElement) => {
|
|
|
119
120
|
context: parentContext,
|
|
120
121
|
};
|
|
121
122
|
};
|
|
123
|
+
// ----------------------------------------------------------------------------
|
|
124
|
+
/**
|
|
125
|
+
* When `@itwin/itwinui-react/styles.css` is not imported, we will attempt to
|
|
126
|
+
* dynamically import it (if possible) and fallback to loading it from a CDN.
|
|
127
|
+
*/
|
|
128
|
+
const FallbackStyles = ({ root }) => {
|
|
129
|
+
useIsomorphicLayoutEffect(() => {
|
|
130
|
+
// bail if styles are already loaded
|
|
131
|
+
if (root.style.getPropertyValue('--_iui-version') === '3') {
|
|
132
|
+
return;
|
|
133
|
+
}
|
|
134
|
+
// bail if jest because it does not support dynamic imports 🤷
|
|
135
|
+
if (isJest) {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
(async () => {
|
|
139
|
+
try {
|
|
140
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
141
|
+
// @ts-ignore
|
|
142
|
+
await import('../../../styles.css');
|
|
143
|
+
}
|
|
144
|
+
catch (error) {
|
|
145
|
+
console.log('Error loading styles.css locally', error);
|
|
146
|
+
const css = await importCss('https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@3/styles.css');
|
|
147
|
+
document.adoptedStyleSheets = [
|
|
148
|
+
...document.adoptedStyleSheets,
|
|
149
|
+
css.default,
|
|
150
|
+
];
|
|
151
|
+
}
|
|
152
|
+
})();
|
|
153
|
+
}, [root]);
|
|
154
|
+
return React.createElement(React.Fragment, null);
|
|
155
|
+
};
|
|
@@ -4,3 +4,15 @@
|
|
|
4
4
|
* 2. jest/node causing segfault when encountering dynamic import (https://github.com/nodejs/node/issues/35889)
|
|
5
5
|
*/
|
|
6
6
|
export declare const dynamicImport: Function;
|
|
7
|
+
/**
|
|
8
|
+
* Wrapper around native CSS module scripts (import attributes) for dynamic imports.
|
|
9
|
+
* In unsupported browsers, it gracefully degrades to import assertions, and then `fetch`.
|
|
10
|
+
*
|
|
11
|
+
* Returns a constructable CSSStyleSheet object that can be adopted.
|
|
12
|
+
*
|
|
13
|
+
* @see https://web.dev/articles/css-module-scripts
|
|
14
|
+
* @see https://github.com/tc39/proposal-import-attributes
|
|
15
|
+
*/
|
|
16
|
+
export declare const importCss: (url: string) => Promise<{
|
|
17
|
+
default: CSSStyleSheet;
|
|
18
|
+
}>;
|
|
@@ -10,3 +10,31 @@
|
|
|
10
10
|
export const dynamicImport = typeof jest === undefined
|
|
11
11
|
? new Function('specifier', 'return import(specifier)')
|
|
12
12
|
: (specifier) => import(/* webpackIgnore: true */ /* @vite-ignore */ specifier);
|
|
13
|
+
/**
|
|
14
|
+
* Wrapper around native CSS module scripts (import attributes) for dynamic imports.
|
|
15
|
+
* In unsupported browsers, it gracefully degrades to import assertions, and then `fetch`.
|
|
16
|
+
*
|
|
17
|
+
* Returns a constructable CSSStyleSheet object that can be adopted.
|
|
18
|
+
*
|
|
19
|
+
* @see https://web.dev/articles/css-module-scripts
|
|
20
|
+
* @see https://github.com/tc39/proposal-import-attributes
|
|
21
|
+
*/
|
|
22
|
+
export const importCss = async (url) => {
|
|
23
|
+
try {
|
|
24
|
+
return await new Function(`return import("${url}", { with: { type: "css" } })`)();
|
|
25
|
+
}
|
|
26
|
+
catch {
|
|
27
|
+
try {
|
|
28
|
+
return await new Function(`return import("${url}", { assert: { type: "css" } })`)();
|
|
29
|
+
}
|
|
30
|
+
catch {
|
|
31
|
+
return await fetch(url)
|
|
32
|
+
.then((res) => res.text())
|
|
33
|
+
.then((cssText) => {
|
|
34
|
+
const stylesheet = new CSSStyleSheet();
|
|
35
|
+
stylesheet.replaceSync(cssText);
|
|
36
|
+
return { default: stylesheet };
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
};
|
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-u7a7wmx": "_iui3-u7a7wmx",
|
|
211
211
|
"iui-progress-indicator-linear-label": "_iui3-progress-indicator-linear-label",
|
|
212
|
-
"iui-
|
|
212
|
+
"iui-u7a7wnb": "_iui3-u7a7wnb",
|
|
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
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-u7a7wmx;-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-u7a7wmx{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-u7a7wnb}@keyframes _iui3-u7a7wnb{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}}
|
|
@@ -1067,3 +1067,9 @@
|
|
|
1067
1067
|
@layer itwinui.v3{
|
|
1068
1068
|
._iui3-divider:is(hr){border:none;margin:0}._iui3-divider:not([aria-orientation=vertical]){block-size:1px}._iui3-divider[aria-orientation=vertical]{min-block-size:100%;inline-size:1px}._iui3-flex{--iui-flex-display:flex;--iui-flex-direction:row;--iui-flex-gap:var(--iui-size-xs);--iui-flex-justify:flex-start;--iui-flex-align:center;--iui-flex-wrap:nowrap;display:var(--iui-flex-display);flex-direction:var(--iui-flex-direction);gap:var(--iui-flex-gap);justify-content:var(--iui-flex-justify);align-items:var(--iui-flex-align);flex-wrap:var(--iui-flex-wrap)}._iui3-flex-spacer{--iui-flex-spacer-flex:999;flex:var(--iui-flex-spacer-flex)}._iui3-flex-item{--iui-flex-item-flex:auto;--iui-flex-item-align:auto;flex:var(--iui-flex-item-flex);align-self:var(--iui-flex-item-align);--iui-off: ;--iui-on:initial;--iui-flex-item-gap-before-toggle:var(--iui-off);--iui-flex-item-gap-after-toggle:var(--iui-off);margin-inline-start:var(--iui-flex-item-gap-before-toggle,calc(var(--iui-flex-item-gap-before) - var(--iui-flex-gap)));margin-inline-end:var(--iui-flex-item-gap-after-toggle,calc(var(--iui-flex-item-gap-after) - var(--iui-flex-gap)))}._iui3-visually-hidden:where(:not([data-iui-unhide-on-focus]:is(:focus-within,:active))){clip-path:inset(50%)!important;white-space:nowrap!important;block-size:1px!important;inline-size:1px!important;position:absolute!important;overflow:hidden!important}._iui3-link-box{position:relative}._iui3-link-box:has(._iui3-link-action:focus-visible){outline:var(--iui-size-3xs)solid var(--iui-color-border-accent)}@supports not selector(:has(+ *)){._iui3-link-box:where(:focus-within){outline:var(--iui-size-3xs)solid var(--iui-color-border-accent)}}._iui3-link-action{all:unset;color:inherit;cursor:pointer}._iui3-link-action:after{content:"";position:absolute;inset:0}._iui3-workflow-diagram{vertical-align:baseline;border:none;justify-content:space-around;align-items:center;inline-size:100%;margin:0;padding:0;display:flex}._iui3-workflow-diagram-step{--_iui-workflow-diagram-circle-background-color:var(--iui-color-background-positive);--_iui-workflow-diagram-circle-border-color:var(--iui-color-background-positive);--_iui-workflow-diagram-circle-border-radius:var(--iui-border-radius-1);--_iui-workflow-diagram-circle-text-color:var(--iui-color-white);--_iui-workflow-diagram-track-before-color:var(--iui-color-border-positive);--_iui-workflow-diagram-track-after-color:var(--iui-color-border-positive);vertical-align:baseline;font-size:var(--iui-font-size-0);font-weight:var(--iui-font-weight-normal);color:var(--_iui-workflow-diagram-circle-text-color);border:none;flex:1;align-items:center;margin:0;padding:0;display:flex}._iui3-workflow-diagram-step:first-of-type,._iui3-workflow-diagram-step:last-of-type{--_iui-workflow-diagram-circle-background-color:var(--iui-color-background);--_iui-workflow-diagram-circle-border-color:var(--iui-color-border-positive);--_iui-workflow-diagram-circle-border-radius:var(--iui-size-s);--_iui-workflow-diagram-circle-text-color:var(--iui-color-text-positive)}._iui3-workflow-diagram-step:before,._iui3-workflow-diagram-step:after{content:"";block-size:var(--iui-size-3xs);flex:1 2 auto}._iui3-workflow-diagram-step:before{background-color:var(--_iui-workflow-diagram-track-before-color)}._iui3-workflow-diagram-step:after{background-color:var(--_iui-workflow-diagram-track-after-color)}._iui3-workflow-diagram-step:first-of-type{--_iui-workflow-diagram-track-before-color:transparent}._iui3-workflow-diagram-step:last-of-type{--_iui-workflow-diagram-track-after-color:transparent}._iui3-workflow-diagram-content{padding-block:var(--iui-size-3xs);padding-inline:var(--iui-size-m);font-weight:var(--iui-font-weight-normal);text-align:center;background-color:var(--_iui-workflow-diagram-circle-background-color);border:1px solid var(--_iui-workflow-diagram-circle-border-color);border-radius:var(--_iui-workflow-diagram-circle-border-radius)}
|
|
1069
1069
|
}
|
|
1070
|
+
|
|
1071
|
+
@layer itwinui.v3 {
|
|
1072
|
+
._iui3-root {
|
|
1073
|
+
--_iui-version: 3;
|
|
1074
|
+
}
|
|
1075
|
+
}
|