@viraui/react 0.0.15 → 0.0.16

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.
Files changed (9) hide show
  1. package/dist/components/button/button.css +2 -1
  2. package/dist/components/button/button.d.ts +1 -0
  3. package/dist/components/button/button.js +46 -1
  4. package/dist/components/text/text.css +15 -10
  5. package/dist/components/title/title.css +37 -27
  6. package/dist/consumption.json +2 -2
  7. package/dist/preflight-surface.json +160 -0
  8. package/dist/preflight.css +1 -1
  9. package/package.json +3 -2
package/dist/components/button/button.css CHANGED
@@ -26,7 +26,8 @@
26
26
  overflow: hidden;
27
27
  position: relative;
28
28
  padding: var(--button-padding-block) var(--button-padding-inline);
29
- font-variation-settings: 'wght' 500;
29
+ font-weight: 400;
30
+ font-variation-settings: 'wght' 400;
30
31
  gap: var(--space-small);
31
32
  border: 1px solid transparent;
32
33
  background: var(--button-background);
package/dist/components/button/button.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Button as PrimitiveButton } from '@base-ui/react/button';
2
+ import * as React from 'react';
2
3
  import './button.css';
3
4
  import type { ReactNode } from 'react';
4
5
  import type { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
package/dist/components/button/button.js CHANGED
@@ -1,17 +1,62 @@
1
+ 'use client';
1
2
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import { Button as PrimitiveButton } from '@base-ui/react/button';
4
+ import { useRender } from '@base-ui/react/use-render';
3
5
  import { Spinner } from '../../components/spinner/index.js';
4
6
  import { extractIntrinsicViraProps } from '../../core/props/intrinsic-vira-props.js';
5
7
  import { clsx } from 'clsx';
8
+ import * as React from 'react';
6
9
  import './button.css';
7
10
  const spinnerDimensionsBySize = {
8
11
  small: 'small',
9
12
  medium: 'small',
10
13
  big: 'regular',
11
14
  };
15
+ function usesButtonPrimitiveRender(render) {
16
+ return render === undefined || (React.isValidElement(render) && render.type === 'button');
17
+ }
18
+ const ButtonRenderRoot = ({ isDisabled, ref, render, rootProps }) => {
19
+ const { onClick, ...restRootProps } = rootProps;
20
+ return useRender({
21
+ defaultTagName: 'button',
22
+ render,
23
+ ref,
24
+ state: { disabled: isDisabled },
25
+ props: {
26
+ ...restRootProps,
27
+ onClick: (event) => {
28
+ if (isDisabled) {
29
+ event.preventDefault();
30
+ return;
31
+ }
32
+ onClick?.(event);
33
+ },
34
+ ...(isDisabled ? { 'aria-disabled': true } : {}),
35
+ },
36
+ });
37
+ };
38
+ const ButtonRoot = ({ children, className, intrinsicAttributes, isDisabled, isIconOnly, icon, iconPosition, loading, passThroughProps, ref, render, size, variant, }) => {
39
+ const rootProps = {
40
+ ...passThroughProps,
41
+ ...intrinsicAttributes,
42
+ 'aria-busy': loading || undefined,
43
+ children,
44
+ className: clsx('Button', className),
45
+ 'data-loading': loading ? 'true' : 'false',
46
+ 'data-size': size,
47
+ 'data-icon-only': isIconOnly ? 'true' : undefined,
48
+ 'data-icon-position': icon && !isIconOnly ? iconPosition : undefined,
49
+ 'data-variant': variant,
50
+ };
51
+ if (usesButtonPrimitiveRender(render)) {
52
+ return (_jsx(PrimitiveButton, { ...rootProps, render: render, ref: ref, disabled: isDisabled, focusableWhenDisabled: loading }));
53
+ }
54
+ return (_jsx(ButtonRenderRoot, { isDisabled: isDisabled, ref: ref, render: render, rootProps: rootProps }));
55
+ };
12
56
  export const Button = ({ children, className, disabled, icon, iconPosition = 'start', loading = false, size = 'medium', variant = 'primary', ...otherProps }) => {
13
57
  const isDisabled = disabled || loading;
14
58
  const isIconOnly = Boolean(icon) && (children == null || children === '');
15
59
  const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
16
- return (_jsxs(PrimitiveButton, { ...componentProps, ...intrinsicAttributes, "aria-busy": loading || undefined, className: clsx('Button', className), "data-loading": loading ? 'true' : 'false', "data-size": size, "data-icon-only": isIconOnly ? 'true' : undefined, "data-icon-position": icon && !isIconOnly ? iconPosition : undefined, "data-variant": variant, disabled: isDisabled, focusableWhenDisabled: loading, children: [isIconOnly ? (_jsx("span", { "aria-hidden": "true", className: "Content", "data-loading": loading ? 'true' : 'false', children: icon })) : (_jsxs(_Fragment, { children: [icon && (_jsx("span", { "aria-hidden": "true", className: "Content", "data-loading": loading ? 'true' : 'false', children: icon })), _jsx("span", { className: "Content", "data-loading": loading ? 'true' : 'false', children: children })] })), loading ? (_jsx("span", { "aria-hidden": "true", className: "SpinnerOverlay", children: _jsx(Spinner, { size: spinnerDimensionsBySize[size] }) })) : null] }));
60
+ const { render, ref, ...passThroughProps } = componentProps;
61
+ return (_jsxs(ButtonRoot, { className: className, intrinsicAttributes: intrinsicAttributes, isDisabled: isDisabled, isIconOnly: isIconOnly, icon: icon, iconPosition: iconPosition, loading: loading, passThroughProps: passThroughProps, ref: ref, render: render, size: size, variant: variant, children: [isIconOnly ? (_jsx("span", { "aria-hidden": "true", className: "Content", "data-loading": loading ? 'true' : 'false', children: icon })) : (_jsxs(_Fragment, { children: [icon && (_jsx("span", { "aria-hidden": "true", className: "Content", "data-loading": loading ? 'true' : 'false', children: icon })), _jsx("span", { className: "Content", "data-loading": loading ? 'true' : 'false', children: children })] })), loading ? (_jsx("span", { "aria-hidden": "true", className: "SpinnerOverlay", children: _jsx(Spinner, { size: spinnerDimensionsBySize[size] }) })) : null] }));
17
62
  };
package/dist/components/text/text.css CHANGED
@@ -1,5 +1,15 @@
1
1
  @scope (.Text) {
2
2
  :scope {
3
+ /*
4
+ * Fluid body scale (web.dev baseline pattern).
5
+ * Foundation refs: --font-scale-body-medium (fluid base), --font-heading-typescale, --font-scale-body-* bounds.
6
+ */
7
+ --text-medium: clamp(
8
+ var(--font-scale-body-medium),
9
+ calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),
10
+ calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3)
11
+ );
12
+
3
13
  --text-align: start;
4
14
  --text-max-width: none;
5
15
  --text-white-space: normal;
@@ -8,8 +18,7 @@
8
18
  --text-padding-block-start: 0;
9
19
  --text-padding-block-end: 0;
10
20
  --text-font-family: var(--font-family-body);
11
- --text-fluid-factor: 5vw;
12
- --text-font-size: clamp(var(--font-scale-body-small), var(--text-fluid-factor, 5vw), var(--font-scale-body-medium));
21
+ --text-font-size: clamp(var(--font-scale-body-small), var(--text-medium), var(--font-scale-body-medium));
13
22
  --text-font-weight: 400;
14
23
  --text-font-width: 100;
15
24
  --text-font-opsz: 16;
@@ -48,7 +57,7 @@
48
57
  &[data-text-size='x-large'] {
49
58
  --text-font-size: clamp(
50
59
  var(--font-scale-body-large),
51
- var(--text-fluid-factor, 5vw),
60
+ calc(var(--text-medium) * pow(var(--font-heading-typescale), 2)),
52
61
  var(--font-scale-body-x-large)
53
62
  );
54
63
  }
@@ -56,23 +65,19 @@
56
65
  &[data-text-size='large'] {
57
66
  --text-font-size: clamp(
58
67
  var(--font-scale-body-medium),
59
- var(--text-fluid-factor, 5vw),
68
+ calc(var(--text-medium) * pow(var(--font-heading-typescale), 1)),
60
69
  var(--font-scale-body-large)
61
70
  );
62
71
  }
63
72
 
64
73
  &[data-text-size='medium'] {
65
- --text-font-size: clamp(
66
- var(--font-scale-body-small),
67
- var(--text-fluid-factor, 5vw),
68
- var(--font-scale-body-medium)
69
- );
74
+ --text-font-size: clamp(var(--font-scale-body-small), var(--text-medium), var(--font-scale-body-medium));
70
75
  }
71
76
 
72
77
  &[data-text-size='small'] {
73
78
  --text-font-size: clamp(
74
79
  var(--font-scale-body-x-small),
75
- var(--text-fluid-factor, 5vw),
80
+ calc(var(--text-medium) * pow(var(--font-heading-typescale), -0.1)),
76
81
  var(--font-scale-body-small)
77
82
  );
78
83
  }
package/dist/components/title/title.css CHANGED
@@ -1,18 +1,19 @@
1
1
  @scope (.Title) {
2
2
  :scope {
3
- /* --- fluid scale --- */
4
- --title-scale-min-vw: 320;
5
- --title-scale-max-vw: 1440;
6
- --title-scale-progress: clamp(
7
- 0,
8
- (100vw - calc(var(--title-scale-min-vw) * 1px)) /
9
- calc((var(--title-scale-max-vw) - var(--title-scale-min-vw)) * 1px),
10
- 1
3
+ /*
4
+ * Fluid heading scale (web.dev baseline pattern).
5
+ * Foundation refs: --font-scale-body-medium (fluid base), --font-heading-typescale, --font-scale-* bounds.
6
+ */
7
+ --title-medium: clamp(
8
+ var(--font-scale-body-medium),
9
+ calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),
10
+ calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3)
11
11
  );
12
12
 
13
- /* Default fallback ≈ h2 → h3 */
14
- --title-font-size: calc(
15
- var(--font-scale-h3) + (var(--font-scale-h2) - var(--font-scale-h3)) * var(--title-scale-progress)
13
+ --title-font-size: clamp(
14
+ var(--font-scale-h2),
15
+ calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),
16
+ var(--font-scale-h1)
16
17
  );
17
18
 
18
19
  /* --- typography --- */
@@ -60,47 +61,56 @@
60
61
 
61
62
  /* --- level overrides --- */
62
63
  &[data-title-level='display'] {
63
- --title-font-size: calc(
64
- var(--font-scale-h1) + (var(--font-scale-display) - var(--font-scale-h1)) * var(--title-scale-progress)
64
+ --title-font-size: clamp(
65
+ var(--font-scale-h1),
66
+ calc(var(--font-scale-h1) + 4.643cqi - 0.9286rem),
67
+ var(--font-scale-display)
65
68
  );
66
69
  }
67
70
 
68
71
  &[data-title-level='h1'] {
69
- --title-font-size: calc(
70
- var(--font-scale-h2) + (var(--font-scale-h1) - var(--font-scale-h2)) * var(--title-scale-progress)
72
+ --title-font-size: clamp(
73
+ var(--font-scale-h2),
74
+ calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),
75
+ var(--font-scale-h1)
71
76
  );
72
77
  }
73
78
 
74
79
  &[data-title-level='h2'] {
75
- --title-font-size: calc(
76
- var(--font-scale-h3) + (var(--font-scale-h2) - var(--font-scale-h3)) * var(--title-scale-progress)
80
+ --title-font-size: clamp(
81
+ var(--font-scale-h3),
82
+ calc(var(--title-medium) * pow(var(--font-heading-typescale), 4)),
83
+ var(--font-scale-h2)
77
84
  );
78
85
  }
79
86
 
80
87
  &[data-title-level='h3'] {
81
- --title-font-size: calc(
82
- var(--font-scale-h4) + (var(--font-scale-h3) - var(--font-scale-h4)) * var(--title-scale-progress)
88
+ --title-font-size: clamp(
89
+ var(--font-scale-h4),
90
+ calc(var(--title-medium) * pow(var(--font-heading-typescale), 3)),
91
+ var(--font-scale-h3)
83
92
  );
84
93
  }
85
94
 
86
95
  &[data-title-level='h4'] {
87
- --title-font-size: calc(
88
- var(--font-scale-h5) + (var(--font-scale-h4) - var(--font-scale-h5)) * var(--title-scale-progress)
96
+ --title-font-size: clamp(
97
+ var(--font-scale-h5),
98
+ calc(var(--title-medium) * pow(var(--font-heading-typescale), 2)),
99
+ var(--font-scale-h4)
89
100
  );
90
101
  }
91
102
 
92
103
  &[data-title-level='h5'] {
93
- --title-font-size: calc(
94
- var(--font-scale-h6) + (var(--font-scale-h5) - var(--font-scale-h6)) * var(--title-scale-progress)
104
+ --title-font-size: clamp(
105
+ var(--font-scale-h6),
106
+ calc(var(--title-medium) * pow(var(--font-heading-typescale), 1)),
107
+ var(--font-scale-h5)
95
108
  );
96
109
  --title-letter-spacing: -0.02em;
97
110
  }
98
111
 
99
112
  &[data-title-level='h6'] {
100
- --title-font-size: calc(
101
- var(--font-scale-body-medium) + (var(--font-scale-h6) - var(--font-scale-body-medium)) *
102
- var(--title-scale-progress)
103
- );
113
+ --title-font-size: clamp(var(--font-scale-body-medium), var(--title-medium), var(--font-scale-h6));
104
114
  --title-letter-spacing: -0.02em;
105
115
  }
106
116
 
package/dist/consumption.json CHANGED
@@ -7,8 +7,7 @@
7
7
  "@base-ui/react": "Peer dependency for wrapped primitives."
8
8
  },
9
9
  "optionalPackages": {
10
- "@viraui/foundation": "Preset Vira brand theme CSS, ThemeTypes, and JSON only.",
11
- "@viraui/icons": "ViraUI icons assets when not using Icon from @viraui/react."
10
+ "@viraui/foundation": "Preset Vira brand theme CSS, ThemeTypes, and JSON only."
12
11
  },
13
12
  "importOrder": [
14
13
  "Compatible theme CSS (preset @viraui/foundation/vira.css, custom theme CSS, or future theme-builder export)",
@@ -72,6 +71,7 @@
72
71
  "catalog": "@viraui/react/catalog.json",
73
72
  "consumption": "@viraui/react/consumption.json",
74
73
  "themeSurface": "@viraui/react/theme-surface.json",
74
+ "preflightSurface": "@viraui/react/preflight-surface.json",
75
75
  "componentGuide": "@viraui/react/<component>.guide.json"
76
76
  }
77
77
  }
package/dist/preflight-surface.json ADDED
@@ -0,0 +1,160 @@
1
+ {
2
+ "summary": "Data attributes and related CSS custom properties exposed by @viraui/react/preflight.css.",
3
+ "prerequisite": "Import compatible theme CSS, then @viraui/react/preflight.css. See @viraui/react/consumption.json.",
4
+ "sourceModules": [
5
+ {
6
+ "id": "themes",
7
+ "file": "themes.css",
8
+ "purpose": "Runtime color-scheme hints for light and dark mode."
9
+ },
10
+ {
11
+ "id": "typography",
12
+ "file": "typography.css",
13
+ "purpose": "Semantic HTML element typography and link styling opt-out."
14
+ },
15
+ {
16
+ "id": "elevations",
17
+ "file": "elevations.css",
18
+ "purpose": "Resting and hover box-shadow elevation stacks."
19
+ },
20
+ {
21
+ "id": "layout",
22
+ "file": "layout.css",
23
+ "purpose": "Flex growth and shrink opt-out utilities for Stack and component children."
24
+ }
25
+ ],
26
+ "attributes": [
27
+ {
28
+ "name": "data-theme",
29
+ "module": "themes",
30
+ "values": ["light", "dark"],
31
+ "presence": "value required",
32
+ "effect": "Narrows color-scheme on the element subtree: light forces light, dark forces dark.",
33
+ "whenToUse": [
34
+ "Toggle runtime light or dark mode on html, body, or a layout wrapper",
35
+ "Scope a subtree to one mode while the rest of the page stays unchanged"
36
+ ],
37
+ "whenNotToUse": [
38
+ "As a substitute for loading compatible theme CSS",
39
+ "To swap brand stylesheets; use theme CSS imports instead"
40
+ ],
41
+ "related": ["data-theme is independent from brand stylesheet selection; see runtime-enhancements.md"]
42
+ },
43
+ {
44
+ "name": "data-no-link-style",
45
+ "module": "typography",
46
+ "values": ["(boolean presence)"],
47
+ "presence": "boolean attribute on anchor elements",
48
+ "effect": "Excludes the anchor from preflight default link styling (interactive color, no underline, animated underline on unclassed links).",
49
+ "whenToUse": [
50
+ "Links that must keep component-owned or custom link chrome",
51
+ "Anchors inside Button, IconButton, or other interactive surfaces"
52
+ ],
53
+ "whenNotToUse": ["Standard inline prose links that should inherit preflight link styling"],
54
+ "related": []
55
+ },
56
+ {
57
+ "name": "data-elevation",
58
+ "module": "elevations",
59
+ "values": ["0", "1", "2", "3", "4"],
60
+ "presence": "value required",
61
+ "effect": "Applies resting box-shadow stack for the chosen elevation level.",
62
+ "whenToUse": [
63
+ "Static surfaces such as cards, panels, and popovers",
64
+ "Direct DOM usage without the Elevator component"
65
+ ],
66
+ "whenNotToUse": ["When Elevator or getElevationProps already sets elevation hooks on the target element"],
67
+ "related": ["Elevator", "Surface", "getElevationProps"]
68
+ },
69
+ {
70
+ "name": "data-elevation-hover",
71
+ "module": "elevations",
72
+ "values": ["0", "1", "2", "3", "4"],
73
+ "presence": "optional value",
74
+ "effect": "Applies a different elevation level on :hover than the resting data-elevation value.",
75
+ "whenToUse": [
76
+ "Interactive surfaces that should lift on hover",
77
+ "Pair with data-elevation for resting and hover shadow levels"
78
+ ],
79
+ "whenNotToUse": ["When hover elevation is not desired; omit the attribute entirely"],
80
+ "related": ["Elevator", "getElevationProps"]
81
+ },
82
+ {
83
+ "name": "data-elevation-direction",
84
+ "module": "elevations",
85
+ "values": ["bottom", "top", "left", "right"],
86
+ "presence": "optional; defaults to bottom when data-elevation is present",
87
+ "effect": "Casts the shadow downward, upward, to the left, or to the right.",
88
+ "whenToUse": ["Side drawers, top bars, or lateral panels where shadow direction matters"],
89
+ "whenNotToUse": ["When default bottom cast is sufficient"],
90
+ "related": ["Elevator", "getElevationProps"]
91
+ },
92
+ {
93
+ "name": "data-grow",
94
+ "module": "layout",
95
+ "values": ["false"],
96
+ "presence": "only false is meaningful; true or omitted does not render the attribute",
97
+ "effect": "Sets --vira-flex-grow: 0 and flex-grow: 0 so the element opts out of flex growth.",
98
+ "whenToUse": [
99
+ "Fixed-width icons, indicators, or trailing slots inside Stack fillChildren layouts",
100
+ "Public component grow={false} on the outermost root"
101
+ ],
102
+ "whenNotToUse": ["When the element should grow to fill available flex space"],
103
+ "related": ["Stack", "grow prop on public components"]
104
+ },
105
+ {
106
+ "name": "data-shrink",
107
+ "module": "layout",
108
+ "values": ["false"],
109
+ "presence": "only false is meaningful; true or omitted does not render the attribute",
110
+ "effect": "Sets --vira-flex-shrink: 0 and flex-shrink: 0 so the element resists flex shrink.",
111
+ "whenToUse": [
112
+ "Labels, icons, or controls that must keep their intrinsic width in shrinking flex rows",
113
+ "Public component shrink={false} on the outermost root"
114
+ ],
115
+ "whenNotToUse": ["When the element should shrink with the flex container"],
116
+ "related": ["Stack", "shrink prop on public components"]
117
+ }
118
+ ],
119
+ "customProperties": [
120
+ {
121
+ "name": "--shadow-color",
122
+ "module": "elevations",
123
+ "setBy": "inline style or component elevation mapping",
124
+ "default": "oklch(0% 0 0deg)",
125
+ "purpose": "Shadow tint for data-elevation stacks."
126
+ },
127
+ {
128
+ "name": "--extra-shadow",
129
+ "module": "elevations",
130
+ "setBy": "inline style or component elevation mapping",
131
+ "default": "0 0 0 1px transparent",
132
+ "purpose": "Additional box-shadow layer appended to elevation stacks, for example hairline borders."
133
+ },
134
+ {
135
+ "name": "--vira-flex-grow",
136
+ "module": "layout",
137
+ "setBy": "data-grow=\"false\"",
138
+ "default": "unset; Stack child rules use var(--vira-flex-grow, 1)",
139
+ "purpose": "Lets component child flex defaults honor grow opt-out without !important."
140
+ },
141
+ {
142
+ "name": "--vira-flex-shrink",
143
+ "module": "layout",
144
+ "setBy": "data-shrink=\"false\"",
145
+ "default": "unset",
146
+ "purpose": "Lets component child flex defaults honor shrink opt-out without !important."
147
+ }
148
+ ],
149
+ "antiPatterns": [
150
+ "Setting data-grow or data-shrink to true; only false is serialized by Vira components",
151
+ "Using data-elevation without importing @viraui/react/preflight.css",
152
+ "Fighting data-theme color-scheme rules without documenting a deliberate override",
153
+ "Applying data-no-link-style to prose links that should use the default interactive underline treatment"
154
+ ],
155
+ "discovery": {
156
+ "consumption": "@viraui/react/consumption.json",
157
+ "themeSurface": "@viraui/react/theme-surface.json",
158
+ "elevationUtility": "Elevator and getElevationProps from @viraui/react"
159
+ }
160
+ }
package/dist/preflight.css CHANGED
@@ -1 +1 @@
1
- @layer viraui.preflight;@layer viraui.preflight{html{font-size:100%;box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground)}*{corner-shape:var(--corner-shape,unset)}*,:after,:before{margin:0;box-sizing:inherit}:focus-visible{outline:2px solid var(--global-foreground);outline-offset:2px}body{color:var(--global-foreground);margin:0;font-size:1rem;font-optical-sizing:auto;font-family:var(--font-family-body),sans-serif;font-variation-settings:"wght" 400}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg:not([fill]){fill:currentcolor}fieldset{border:0}ol ul,ul ol{font-size:medium}table{border-spacing:0;width:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table td,table th{border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}table[data-layout-fixed] th{white-space:unset}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px transparent;--shadow-color:oklch(0% 0 0deg)}}@layer viraui.preflight{[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),transparent calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:2px;--y3:4px;--y4:7px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 1px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 2px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 2px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:0px;--x2:2px;--x3:4px;--x4:7px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:1px;--y2:5px;--y3:11px;--y4:19px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 6px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]):hover,[data-elevation="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]){box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 7px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:1px;--x2:5px;--x3:11px;--x4:19px}[data-elevation-hover="2"]:where([data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=right]){box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 6px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 4px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 7px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 10px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 12px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:2px;--x2:7px;--x3:16px;--x4:29px}[data-elevation-hover="3"]:where([data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=right]){--x2:10px;--x3:22px;--x4:39px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 10px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 13px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 15px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 14px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 15px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:where([data-elevation-direction=left]):hover,[data-elevation="4"]:where([data-elevation-direction=left]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:15px;--x3:33px;--x4:58px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 15px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:where([data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:14px;--x3:33px;--x4:58px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 14px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}}@layer viraui.preflight{[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}:root{color-scheme:light dark}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}}@layer viraui.preflight{}[data-elevation]{transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}
1
+ @layer viraui.preflight;@layer viraui.preflight{html{--scrollbar-thumb:light-dark(var(--base-4),var(--base-3));--scrollbar-track:transparent;font-size:100%;box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground)}*{corner-shape:var(--corner-shape,unset)}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}:focus-visible{outline:2px solid var(--global-foreground);outline-offset:2px}body{color:var(--global-foreground);margin:0;font-size:1rem;font-optical-sizing:auto;font-family:var(--font-family-body),sans-serif;font-variation-settings:"wght" 400}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg:not([fill]){fill:currentcolor}fieldset{border:0}ol ul,ul ol{font-size:medium}table{border-spacing:0;width:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table td,table th{border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px transparent;--shadow-color:oklch(0% 0 0deg)}}@layer viraui.preflight{[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),transparent calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:2px;--y3:4px;--y4:7px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 1px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 2px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 2px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:0px;--x2:2px;--x3:4px;--x4:7px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:1px;--y2:5px;--y3:11px;--y4:19px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 6px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]):hover,[data-elevation="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]){box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 7px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:1px;--x2:5px;--x3:11px;--x4:19px}[data-elevation-hover="2"]:where([data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=right]){box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 6px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 4px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 7px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 10px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 12px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:2px;--x2:7px;--x3:16px;--x4:29px}[data-elevation-hover="3"]:where([data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=right]){--x2:10px;--x3:22px;--x4:39px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 10px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 13px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 15px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 14px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 15px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:where([data-elevation-direction=left]):hover,[data-elevation="4"]:where([data-elevation-direction=left]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:15px;--x3:33px;--x4:58px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 15px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:where([data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:14px;--x3:33px;--x4:58px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 14px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}}@layer viraui.preflight{[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/15%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em;font-size:1em;font-family:var(--font-family-mono);vertical-align:top}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}}@layer viraui.preflight{}[data-elevation]{transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@viraui/react",
3
- "version": "0.0.15",
3
+ "version": "0.0.16",
4
4
  "private": false,
5
5
  "files": [
6
6
  "dist"
@@ -24,6 +24,7 @@
24
24
  "./catalog.json": "./dist/catalog.json",
25
25
  "./consumption.json": "./dist/consumption.json",
26
26
  "./theme-surface.json": "./dist/theme-surface.json",
27
+ "./preflight-surface.json": "./dist/preflight-surface.json",
27
28
  "./*.css": "./dist/components/*/*.css",
28
29
  "./*.guide.json": "./dist/components/*/*.guide.json"
29
30
  },
@@ -40,7 +41,7 @@
40
41
  "react": ">=19.2.7",
41
42
  "react-dom": ">=19.2.7",
42
43
  "svger-cli": "4.0.8",
43
- "@viraui/foundation": "0.0.15",
44
+ "@viraui/foundation": "0.0.16",
44
45
  "@viraui/icons": "0.0.15",
45
46
  "@viraui/postcss-config": "0.0.15",
46
47
  "@viraui/tsconfig": "0.0.15"