@viraui/react 2026.1.4 → 2026.1.6

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 (20) hide show
  1. package/dist/catalog.json +1 -1
  2. package/dist/components/avatar/avatar.css +1 -1
  3. package/dist/components/avatar/avatar.d.ts +1 -7
  4. package/dist/components/avatar/avatar.guide.json +2 -7
  5. package/dist/components/avatar/avatar.js +5 -12
  6. package/dist/components/avatar/avatar.module.js +1 -3
  7. package/dist/components/select/select.css +1 -1
  8. package/dist/components/skeleton/index.d.ts +1 -0
  9. package/dist/components/skeleton/skeleton-overlay.d.ts +37 -0
  10. package/dist/components/skeleton/skeleton-overlay.js +27 -0
  11. package/dist/components/skeleton/skeleton.css +1 -1
  12. package/dist/components/skeleton/skeleton.d.ts +23 -6
  13. package/dist/components/skeleton/skeleton.guide.json +45 -13
  14. package/dist/components/skeleton/skeleton.js +6 -2
  15. package/dist/components/skeleton/skeleton.module.js +7 -2
  16. package/dist/core/theme/resolve-theme-value.d.ts +1 -1
  17. package/dist/preflight-surface.json +20 -10
  18. package/dist/preflight.css +1 -1
  19. package/dist/theme-surface.json +4 -4
  20. package/package.json +2 -2
package/dist/catalog.json CHANGED
@@ -173,7 +173,7 @@
173
173
  {
174
174
  "id": "skeleton",
175
175
  "name": "Skeleton",
176
- "summary": "Decorative loading placeholder sized by props, not children.",
176
+ "summary": "Decorative opacity pulse block sized by props, or Overlay sized by hidden child content.",
177
177
  "guidePath": "./components/skeleton/skeleton.guide.json"
178
178
  },
179
179
  {
package/dist/components/avatar/avatar.css CHANGED
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-avatar-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-avatar-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-avatar-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-avatar-foreground{syntax:"<color>";inherits:false;initial-value:#0000}.viraui__avatar-module__Avatar_BRuS3{--vui-avatar-size:var(--space-2x-large);--vui-avatar-background:var(--global-contrast);--vui-avatar-foreground:var(--global-foreground);--vui-avatar-radius:var(--radius-small);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--vui-avatar-size);block-size:var(--vui-avatar-size);min-inline-size:var(--vui-avatar-size);min-block-size:var(--vui-avatar-size);overflow:hidden;border-radius:var(--vui-avatar-radius);background:var(--vui-avatar-background);color:var(--vui-avatar-foreground);vertical-align:middle;-webkit-user-select:none;user-select:none;container-type:inline-size;&[data-size=x-small]{--vui-avatar-size:var(--space-large);--vui-avatar-radius:var(--radius-small)}&[data-size=medium]{--vui-avatar-size:var(--space-wide)}&[data-size=large]{--vui-avatar-size:var(--space-2x-wide);--vui-avatar-radius:var(--radius-large)}}.viraui__avatar-module__Image_Q7bHi{inline-size:100%;block-size:100%;display:block;object-fit:cover}}@layer viraui.overrides{.viraui__avatar-module__AvatarSkeleton_AnE8Q{border-radius:inherit}.viraui__avatar-module__Label_QASTF{font-size:30cqw}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-avatar-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-avatar-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-avatar-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-avatar-foreground{syntax:"<color>";inherits:false;initial-value:#0000}.viraui__avatar-module__Avatar_BRuS3{--vui-avatar-size:var(--space-2x-large);--vui-avatar-background:var(--global-contrast);--vui-avatar-foreground:var(--global-foreground);--vui-avatar-radius:var(--radius-small);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--vui-avatar-size);block-size:var(--vui-avatar-size);min-inline-size:var(--vui-avatar-size);min-block-size:var(--vui-avatar-size);overflow:hidden;border-radius:var(--vui-avatar-radius);background:var(--vui-avatar-background);color:var(--vui-avatar-foreground);vertical-align:middle;-webkit-user-select:none;user-select:none;container-type:inline-size;&[data-size=x-small]{--vui-avatar-size:var(--space-large);--vui-avatar-radius:var(--radius-small)}&[data-size=medium]{--vui-avatar-size:var(--space-wide)}&[data-size=large]{--vui-avatar-size:var(--space-2x-wide);--vui-avatar-radius:var(--radius-large)}}.viraui__avatar-module__Image_Q7bHi{inline-size:100%;block-size:100%;display:block;object-fit:cover}}@layer viraui.overrides{.viraui__avatar-module__Label_QASTF{font-size:30cqw}}
package/dist/components/avatar/avatar.d.ts CHANGED
@@ -3,7 +3,7 @@ import type * as React from 'react';
3
3
  * Public Avatar props.
4
4
  *
5
5
  * Includes standard `span` attributes such as `id`, `title`, ARIA props, and event handlers,
6
- * plus Vira-owned image, fallback, size, and loading controls.
6
+ * plus Vira-owned image, fallback, and size controls.
7
7
  *
8
8
  * @default Native span pass-through props keep React defaults.
9
9
  */
@@ -32,12 +32,6 @@ export type AvatarProps = React.ComponentPropsWithRef<'span'> & {
32
32
  * @default 'small'
33
33
  */
34
34
  size?: 'x-small' | 'small' | 'medium' | 'large';
35
- /**
36
- * Replaces the avatar content with a same-size skeleton while image data is still loading upstream.
37
- *
38
- * @default false
39
- */
40
- loading?: boolean;
41
35
  /**
42
36
  * Ref forwarded to the rendered avatar root element.
43
37
  *
package/dist/components/avatar/avatar.guide.json CHANGED
@@ -5,14 +5,12 @@
5
5
  "summary": "Circular identity image or fallback for users, entities, or profile chips.",
6
6
  "whenToUse": [
7
7
  "Show a user or entity photo with text or image fallback",
8
- "Display profile chips from x-small through large sizes",
9
- "Defer image paint with a loading skeleton placeholder"
8
+ "Display profile chips from x-small through large sizes"
10
9
  ],
11
10
  "whenNotToUse": ["Interactive controls or navigation", "Non-identity imagery without a fallback plan"],
12
11
  "accessibility": [
13
12
  "Provide meaningful alt text when the image conveys identity",
14
- "Use fallback text or initials when the image is unavailable",
15
- "Loading uses aria-busy on the avatar region while Skeleton stays decorative"
13
+ "Use fallback text or initials when the image is unavailable"
16
14
  ],
17
15
  "antiPatterns": [
18
16
  "Relying on Avatar children for layout sizing",
@@ -27,9 +25,6 @@
27
25
  "fallback": {
28
26
  "description": "Supplies the content shown when the image is absent or fails to load."
29
27
  },
30
- "loading": {
31
- "description": "Replaces the avatar content with a same-size skeleton while image data is still loading upstream."
32
- },
33
28
  "ref": {
34
29
  "description": "Ref forwarded to the rendered avatar root element."
35
30
  },
package/dist/components/avatar/avatar.js CHANGED
@@ -2,8 +2,7 @@ import './avatar.css';
2
2
  import { clsx } from "../../core/clsx.js";
3
3
  import { Text } from "../text/text.js";
4
4
  import avatar_module_default from "./avatar.module.js";
5
- import { Skeleton } from "../skeleton/skeleton.js";
6
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
5
+ import { jsx, jsxs } from "react/jsx-runtime";
7
6
  import { Avatar } from "@base-ui/react/avatar";
8
7
  //#region src/components/avatar/avatar.tsx
9
8
  var fallbackTextSizeByAvatarSize = {
@@ -12,22 +11,16 @@ var fallbackTextSizeByAvatarSize = {
12
11
  medium: "small",
13
12
  large: "large"
14
13
  };
15
- var Avatar$1 = ({ alt = "", className, fallback, loading = false, ref, size = "small", src, ...otherProps }) => {
14
+ var Avatar$1 = ({ alt = "", className, fallback, ref, size = "small", src, ...otherProps }) => {
16
15
  const hasImage = Boolean(src);
17
- return /* @__PURE__ */ jsx(Avatar.Root, {
16
+ return /* @__PURE__ */ jsxs(Avatar.Root, {
18
17
  ...otherProps,
19
18
  ref,
20
- "aria-busy": loading || void 0,
21
19
  className: clsx(avatar_module_default.Avatar, className),
22
20
  "data-size": size,
23
21
  "data-grow": "false",
24
22
  "data-shrink": "false",
25
- children: loading ? /* @__PURE__ */ jsx(Skeleton, {
26
- className: avatar_module_default.AvatarSkeleton,
27
- minHeight: "100%",
28
- minWidth: "100%",
29
- width: "100%"
30
- }) : /* @__PURE__ */ jsxs(Fragment, { children: [hasImage ? /* @__PURE__ */ jsx(Avatar.Image, {
23
+ children: [hasImage ? /* @__PURE__ */ jsx(Avatar.Image, {
31
24
  draggable: false,
32
25
  decoding: "async",
33
26
  loading: "eager",
@@ -42,7 +35,7 @@ var Avatar$1 = ({ alt = "", className, fallback, loading = false, ref, size = "s
42
35
  size: fallbackTextSizeByAvatarSize[size]
43
36
  }),
44
37
  children: fallback
45
- })] })
38
+ })]
46
39
  });
47
40
  };
48
41
  //#endregion
package/dist/components/avatar/avatar.module.js CHANGED
@@ -1,13 +1,11 @@
1
1
  //#region src/components/avatar/avatar.module.css
2
2
  var Avatar = "viraui__avatar-module__Avatar_BRuS3";
3
3
  var Image = "viraui__avatar-module__Image_Q7bHi";
4
- var AvatarSkeleton = "viraui__avatar-module__AvatarSkeleton_AnE8Q";
5
4
  var Label = "viraui__avatar-module__Label_QASTF";
6
5
  var avatar_module_default = {
7
6
  Avatar,
8
7
  Image,
9
- AvatarSkeleton,
10
8
  Label
11
9
  };
12
10
  //#endregion
13
- export { Avatar, AvatarSkeleton, Image, Label, avatar_module_default as default };
11
+ export { Avatar, Image, Label, avatar_module_default as default };
package/dist/components/select/select.css CHANGED
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-select-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-start{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-end{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-list-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-list-padding{syntax:"<length>";inherits:true;initial-value:0}@property --__select-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__select-module__Select_eXv4Y{--vui-select-input-height:var(--space-2x-large);--vui-select-control-group-background:var(--base-1);--vui-select-control-group-color:var(--global-foreground);--vui-select-control-group-border-color:var(--global-contrast);--vui-select-control-group-border-radius:var(--radius-medium);--vui-select-trigger-padding-inline-start:calc(var(--space-small) + var(--space-x-small));--vui-select-trigger-padding-inline-end:var(--space-x-small);--vui-field-label-padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2);max-block-size:min-content;z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR{&:after{content:" ＊";color:var(--highlight-red)}&:dir(rtl){&:after{content:none}&:before{content:"＊ ";color:var(--highlight-red)}}}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--vui-select-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-select-input-height);padding-inline:var(--vui-select-trigger-padding-inline-start) var(--vui-select-trigger-padding-inline-end);border:1px solid var(--vui-select-control-group-border-color);border-radius:var(--vui-select-control-group-border-radius);background:var(--vui-select-control-group-background);color:var(--vui-select-control-group-color);font:inherit;text-align:start;cursor:pointer;&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--vui-select-control-group-background:var(--global-disabled-background);--vui-select-control-group-border-color:#0000;--vui-select-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2)}.viraui__select-module__SelectPopup_UzGXL{--vui-select-list-border-radius:var(--radius-medium);--vui-select-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__select-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__select-list-appear-offset)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__select-list-appear-offset) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__select-list-appear-offset) * -1) 0}&[data-side=none]{transition:none;scale:1;translate:0;opacity:1}}.viraui__select-module__ScrollArrow_kHlEi{position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--base-1);border:1px solid var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--base-1) l a b/80%);backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px))}}.viraui__select-module__ScrollButton_sHBOa{pointer-events:none}.viraui__select-module__ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--vui-select-list-border-radius) var(--vui-select-list-border-radius) 0 0}.viraui__select-module__ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--vui-select-list-border-radius) var(--vui-select-list-border-radius)}.viraui__select-module__List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);scroll-padding-block:var(--vui-select-list-padding);overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.viraui__select-module__Indicator_YNUuz{min-inline-size:var(--space-medium);min-block-size:var(--space-medium);inline-size:fit-content;block-size:fit-content;color:var(--global-foreground);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}}@layer viraui.overrides{.viraui__select-module__Value_uWHPX{flex:1 1 auto;min-inline-size:0;overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.viraui__select-module__Option_KgYqz{cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-selected]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-select-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-select-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-start{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-trigger-padding-inline-end{syntax:"<length>";inherits:true;initial-value:0}@property --vui-select-list-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-select-list-padding{syntax:"<length>";inherits:true;initial-value:0}@property --__select-list-appear-offset{syntax:"<length>";inherits:false;initial-value:8px}.viraui__select-module__Select_eXv4Y{--vui-select-input-height:var(--space-2x-large);--vui-select-control-group-background:var(--base-1);--vui-select-control-group-color:var(--global-foreground);--vui-select-control-group-border-color:var(--global-contrast);--vui-select-control-group-border-radius:var(--radius-medium);--vui-select-trigger-padding-inline-start:calc(var(--space-small) + var(--space-x-small));--vui-select-trigger-padding-inline-end:var(--space-x-small);--vui-field-label-padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2);max-block-size:min-content;z-index:0;&:has([required]) .viraui__select-module__Label_-Y1fR{&:after{content:" ＊";color:var(--highlight-red)}&:dir(rtl){&:after{content:none}&:before{content:"＊ ";color:var(--highlight-red)}}}&[data-invalid]>.viraui__select-module__Trigger_-wBsg:not(:disabled):not([data-disabled]){--vui-select-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}}.viraui__select-module__Trigger_-wBsg{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-select-input-height);padding-inline:var(--vui-select-trigger-padding-inline-start) var(--vui-select-trigger-padding-inline-end);border:1px solid var(--vui-select-control-group-border-color);border-radius:var(--vui-select-control-group-border-radius);background:var(--vui-select-control-group-background);color:var(--vui-select-control-group-color);font:inherit;text-align:start;cursor:pointer;transition:background var(--duration-instant) var(--easing-standard);&:not([data-disabled],:disabled):hover{--vui-select-control-group-background:var(--base-2)}&[data-popup-open]{outline:none}&:disabled,&[data-disabled]{--vui-select-control-group-background:var(--global-disabled-background);--vui-select-control-group-border-color:#0000;--vui-select-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__select-module__Icon_EOwki{font-size:var(--font-scale-body-small);pointer-events:none}.viraui__select-module__Description_OmwmV{padding-inline:calc((var(--vui-select-control-group-border-radius) + 0px) / 2)}.viraui__select-module__SelectPopup_UzGXL{--vui-select-list-border-radius:var(--radius-medium);--vui-select-list-padding:var(--space-x-small);box-sizing:border-box;min-inline-size:var(--anchor-width);overflow:visible;color:var(--global-foreground);outline:none;position:relative;transform-origin:var(--transform-origin);transition:opacity var(--duration-instant) var(--easing-entrance),scale var(--duration-instant) var(--easing-entrance),translate var(--duration-instant) var(--easing-entrance);&[data-ending-style],&[data-starting-style]{opacity:0;scale:.96}&[data-side=bottom][data-ending-style],&[data-side=bottom][data-starting-style]{translate:0 calc(var(--__select-list-appear-offset) * -1)}&[data-side=top][data-ending-style],&[data-side=top][data-starting-style]{translate:0 var(--__select-list-appear-offset)}&[data-side=inline-start][data-ending-style],&[data-side=inline-start][data-starting-style],&[data-side=left][data-ending-style],&[data-side=left][data-starting-style]{translate:var(--__select-list-appear-offset) 0}&[data-side=inline-end][data-ending-style],&[data-side=inline-end][data-starting-style],&[data-side=right][data-ending-style],&[data-side=right][data-starting-style]{translate:calc(var(--__select-list-appear-offset) * -1) 0}&[data-side=none]{transition:none;scale:1;translate:0;opacity:1}}.viraui__select-module__ScrollArrow_kHlEi{position:absolute;inset-inline:0;z-index:1;inline-size:100%;block-size:var(--space-large);cursor:default;background:var(--base-1);border:1px solid var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--base-1) l a b/80%);backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px))}}.viraui__select-module__ScrollButton_sHBOa{pointer-events:none}.viraui__select-module__ScrollArrowUp_DGXS-{inset-block-start:0;border-radius:var(--vui-select-list-border-radius) var(--vui-select-list-border-radius) 0 0}.viraui__select-module__ScrollArrowDown_vhJy0{inset-block-end:0;border-radius:0 0 var(--vui-select-list-border-radius) var(--vui-select-list-border-radius)}.viraui__select-module__List_jdUWx{box-sizing:border-box;inline-size:100%;max-block-size:var(--available-height);scroll-padding-block:var(--vui-select-list-padding);overscroll-behavior:contain;&:focus,&:focus-visible{outline:none}}.viraui__select-module__Indicator_YNUuz{min-inline-size:var(--space-medium);min-block-size:var(--space-medium);inline-size:fit-content;block-size:fit-content;color:var(--global-foreground);opacity:0;transition:opacity var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);&[data-selected]{opacity:1}}}@layer viraui.overrides{.viraui__select-module__Value_uWHPX{flex:1 1 auto;min-inline-size:0;overflow:hidden;display:block;text-overflow:ellipsis;&[data-placeholder]{color:var(--global-disabled-foreground)}}.viraui__select-module__Option_KgYqz{cursor:pointer;&:focus{outline:none}&:focus-visible{outline:none;box-shadow:none}&:not([data-disabled]):hover,&:not([data-disabled])[data-highlighted]{background:var(--global-contrast);@container root not style(--effect-vibrancy: initial){background:oklab(from var(--global-contrast) l a b/12%)}}&:not([data-disabled],:hover)[data-selected]{background:light-dark(oklab(from var(--global-contrast) l a b/8%),oklab(from var(--global-contrast) l a b/5%))}&[data-disabled]{color:var(--global-disabled-foreground);cursor:not-allowed}}}
package/dist/components/skeleton/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { Skeleton } from './skeleton';
2
2
  export type { SkeletonProps } from './skeleton';
3
+ export type { SkeletonOverlayProps } from './skeleton-overlay';
package/dist/components/skeleton/skeleton-overlay.d.ts ADDED
@@ -0,0 +1,37 @@
1
+ import { ThemeTypes } from '@viraui/foundation/vira/types';
2
+ import type * as React from 'react';
3
+ /**
4
+ * Public Skeleton.Overlay props.
5
+ *
6
+ * Zero-layout-shift shimmer wrapper sized by hidden children. Includes standard `div`
7
+ * pass-through props plus Vira-owned shimmer controls.
8
+ *
9
+ * @default Native div pass-through props keep React defaults.
10
+ */
11
+ export type SkeletonOverlayProps = React.ComponentPropsWithRef<'div'> & {
12
+ /**
13
+ * Supplies placeholder content whose layout and dimensions define the skeleton bounding box.
14
+ *
15
+ * @default No default; consumer must provide children.
16
+ */
17
+ children: React.ReactNode;
18
+ /**
19
+ * Enables or disables the shimmer animation.
20
+ *
21
+ * @default true
22
+ */
23
+ animate?: boolean;
24
+ /**
25
+ * Sets the corner radius from the Vira radius token scale.
26
+ *
27
+ * @default 'small'
28
+ */
29
+ radius?: ThemeTypes['radius'];
30
+ /**
31
+ * Sets the shimmer sweep duration from the Vira duration token scale.
32
+ *
33
+ * @default 'slow'
34
+ */
35
+ duration?: ThemeTypes['duration'];
36
+ };
37
+ export declare const SkeletonOverlay: React.FC<SkeletonOverlayProps>;
package/dist/components/skeleton/skeleton-overlay.js ADDED
@@ -0,0 +1,27 @@
1
+ import { clsx } from "../../core/clsx.js";
2
+ import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
3
+ import skeleton_module_default from "./skeleton.module.js";
4
+ import { jsx } from "react/jsx-runtime";
5
+ //#region src/components/skeleton/skeleton-overlay.tsx
6
+ var SkeletonOverlay = ({ animate = true, radius, children, className, duration = "slow", ref, style, ...otherProps }) => {
7
+ const dynamicStyle = {
8
+ ...radius != null && { "--vui-skeleton-border-radius": resolveThemeValue(radius, "radius", "var(--radius-small)") },
9
+ ...duration != null && { "--vui-skeleton-duration": resolveThemeValue(duration, "duration", "var(--duration-slow)") },
10
+ ...style
11
+ };
12
+ return /* @__PURE__ */ jsx("div", {
13
+ ...otherProps,
14
+ ref,
15
+ "aria-hidden": "true",
16
+ className: clsx(skeleton_module_default.Overlay, className),
17
+ "data-animate": animate ? "true" : "false",
18
+ style: dynamicStyle,
19
+ children: /* @__PURE__ */ jsx("div", {
20
+ "aria-hidden": "true",
21
+ className: skeleton_module_default.OverlayMeasure,
22
+ children
23
+ })
24
+ });
25
+ };
26
+ //#endregion
27
+ export { SkeletonOverlay };
package/dist/components/skeleton/skeleton.css CHANGED
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-skeleton-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-skeleton-inline-size{syntax:"*";inherits:false;initial-value:auto}@property --vui-skeleton-block-size{syntax:"*";inherits:false;initial-value:auto}@property --vui-skeleton-min-inline-size{syntax:"*";inherits:false;initial-value:none}@property --vui-skeleton-min-block-size{syntax:"*";inherits:false;initial-value:none}@property --vui-skeleton-background{syntax:"<color>";inherits:false;initial-value:#0000}.viraui__skeleton-module__Skeleton_pn7Xk{--vui-skeleton-background:var(--global-contrast);--vui-skeleton-border-radius:var(--radius-small);--vui-skeleton-min-inline-size:var(--space-x-large);--vui-skeleton-min-block-size:var(--space-medium);display:inline-block;box-sizing:border-box;inline-size:var(--vui-skeleton-inline-size);block-size:var(--vui-skeleton-block-size);min-inline-size:var(--vui-skeleton-min-inline-size);min-block-size:var(--vui-skeleton-min-block-size);max-inline-size:100%;background:var(--vui-skeleton-background);border-radius:var(--vui-skeleton-border-radius);vertical-align:middle;animation:viraui__skeleton-module__skeleton-fade_XHkG4 var(--duration-slow) var(--easing-standard) infinite alternate}@keyframes viraui__skeleton-module__skeleton-fade_XHkG4{0%{opacity:.52}to{opacity:1}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-skeleton-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-skeleton-inline-size{syntax:"*";inherits:false;initial-value:auto}@property --vui-skeleton-block-size{syntax:"*";inherits:false;initial-value:auto}@property --vui-skeleton-min-inline-size{syntax:"*";inherits:false;initial-value:none}@property --vui-skeleton-min-block-size{syntax:"*";inherits:false;initial-value:none}@property --vui-skeleton-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-skeleton-duration{syntax:"<time>";inherits:false;initial-value:0s}@property --vui-skeleton-wipe{syntax:"<percentage>";inherits:true;initial-value:-100%}.viraui__skeleton-module__Overlay_sZSQe,.viraui__skeleton-module__Skeleton_pn7Xk{--vui-skeleton-background:var(--global-contrast);--vui-skeleton-duration:var(--duration-slow);--vui-skeleton-border-radius:var(--radius-small);box-sizing:border-box;overflow:hidden;background-color:var(--vui-skeleton-background);opacity:1;border-radius:var(--vui-skeleton-border-radius);animation:viraui__skeleton-module__skeleton-fade_XHkG4 var(--vui-skeleton-duration) var(--easing-standard) infinite alternate;&[data-animate=false]{animation:none;opacity:1}@media (prefers-reduced-motion:reduce){animation:none;opacity:1}}.viraui__skeleton-module__Skeleton_pn7Xk{--vui-skeleton-min-inline-size:var(--space-x-large);--vui-skeleton-min-block-size:var(--space-medium);display:inline-block;inline-size:var(--vui-skeleton-inline-size);block-size:var(--vui-skeleton-block-size);min-inline-size:var(--vui-skeleton-min-inline-size);min-block-size:var(--vui-skeleton-min-block-size);max-inline-size:100%;vertical-align:middle}.viraui__skeleton-module__Overlay_sZSQe{display:grid}.viraui__skeleton-module__OverlayMeasure_1zcKX{display:contents}:where(.viraui__skeleton-module__OverlayMeasure_1zcKX>*){visibility:hidden;grid-area:1/1;min-inline-size:0}@keyframes viraui__skeleton-module__skeleton-fade_XHkG4{0%{opacity:.52}to{opacity:1}}::view-transition-group(skeleton-overlay){border-radius:var(--radius-x-large);overflow:hidden}::view-transition-image-pair(skeleton-overlay){mix-blend-mode:normal}::view-transition-old(skeleton-overlay){z-index:2;mask-image:linear-gradient(to right,#000 var(--vui-skeleton-wipe),#0000 calc(var(--vui-skeleton-wipe) + 100%));animation:viraui__skeleton-module__vui-skeleton-wipe-out_0-qrj .6s ease-in-out forwards;@media (prefers-reduced-motion:reduce){animation:none}}::view-transition-new(skeleton-overlay){animation:none}@keyframes viraui__skeleton-module__vui-skeleton-wipe-out_0-qrj{0%{--vui-skeleton-wipe:100%}to{--vui-skeleton-wipe:-100%}}}
package/dist/components/skeleton/skeleton.d.ts CHANGED
@@ -1,14 +1,15 @@
1
1
  import { ThemeTypes } from '@viraui/foundation/vira/types';
2
+ import { SkeletonOverlayProps } from './skeleton-overlay';
2
3
  import type * as React from 'react';
3
4
  /**
4
5
  * Public Skeleton props.
5
6
  *
6
- * Includes standard `span` attributes such as `id`, `title`, ARIA props, and event handlers,
7
- * plus Vira-owned sizing and radius controls.
7
+ * GPU shimmer block primitive. Includes standard `div` pass-through props such as `id`, `title`,
8
+ * data attributes, and event handlers, plus Vira-owned sizing and shimmer controls.
8
9
  *
9
- * @default Native span pass-through props keep React defaults.
10
+ * @default Native div pass-through props keep React defaults.
10
11
  */
11
- export type SkeletonProps = React.ComponentPropsWithoutRef<'span'> & {
12
+ export type SkeletonProps = React.ComponentPropsWithoutRef<'div'> & {
12
13
  /**
13
14
  * Sets the skeleton inline size using any valid CSS size string.
14
15
  *
@@ -33,17 +34,33 @@ export type SkeletonProps = React.ComponentPropsWithoutRef<'span'> & {
33
34
  * @default The CSS minimum block size is `1rem`.
34
35
  */
35
36
  minHeight?: string;
37
+ /**
38
+ * Enables or disables the shimmer animation.
39
+ *
40
+ * @default true
41
+ */
42
+ animate?: boolean;
36
43
  /**
37
44
  * Sets the corner radius from the Vira radius token scale.
38
45
  *
39
46
  * @default 'small'
40
47
  */
41
48
  radius?: ThemeTypes['radius'];
49
+ /**
50
+ * Sets the shimmer sweep duration from the Vira duration token scale.
51
+ *
52
+ * @default 'slow'
53
+ */
54
+ duration?: ThemeTypes['duration'];
42
55
  /**
43
56
  * Ref forwarded to the rendered skeleton root element.
44
57
  *
45
58
  * @default No ref is attached.
46
59
  */
47
- ref?: React.Ref<HTMLSpanElement>;
60
+ ref?: React.Ref<HTMLDivElement>;
61
+ };
62
+ export type { SkeletonOverlayProps };
63
+ type SkeletonComponent = React.FC<SkeletonProps> & {
64
+ Overlay: React.FC<SkeletonOverlayProps>;
48
65
  };
49
- export declare const Skeleton: React.FC<SkeletonProps>;
66
+ export declare const Skeleton: SkeletonComponent;
package/dist/components/skeleton/skeleton.guide.json CHANGED
@@ -1,28 +1,43 @@
1
1
  {
2
2
  "name": "Skeleton",
3
- "structure": "<Skeleton />",
4
- "summary": "Decorative loading placeholder sized by props, not children.",
3
+ "structure": "<Skeleton />\n<Skeleton.Overlay>…</Skeleton.Overlay>",
4
+ "summary": "Decorative opacity pulse block sized by props, or Overlay sized by hidden child content.",
5
5
  "whenToUse": [
6
- "Placeholder blocks while content loads",
7
- "Fixed-dimension shimmer regions in cards or lists",
8
- "Avatar loading placeholder composition"
6
+ "Fixed-dimension pulse blocks while content loads",
7
+ "Avatar or media placeholders with explicit width and height",
8
+ "Skeleton.Overlay when placeholder layout should match incoming typography without layout shift",
9
+ "View-transition wipe reveal for `Skeleton.Overlay`, with `viewTransitionName: 'skeleton-overlay'` on the wrapper around skeleton+loaded content (prefer CSS class, not inline style)"
9
10
  ],
10
11
  "whenNotToUse": [
11
- "Deriving layout from children content",
12
+ "Inline text shimmer effects (use Shimmer)",
12
13
  "Standalone accessible loading status without a surrounding aria-busy region"
13
14
  ],
14
15
  "accessibility": [
15
- "Skeleton is decorative (aria-hidden) — announce loading on the surrounding region with aria-busy or live text",
16
+ "Skeleton and Skeleton.Overlay are decorative (aria-hidden) — announce loading on the surrounding region with aria-busy or live text",
17
+ "Overlay children stay aria-hidden; the parent loading region owns busy state",
16
18
  "Do not put aria-busy on Skeleton itself",
17
- "Replace skeleton with real content as soon as data is ready"
19
+ "Replace skeleton with real content as soon as data is ready",
20
+ "prefers-reduced-motion disables the pulse animation and keeps a static surface"
18
21
  ],
19
22
  "antiPatterns": [
20
- "Using children to derive skeleton dimensions",
21
- "Putting aria-busy on Skeleton instead of the surrounding loading region"
23
+ "Using Skeleton.Overlay without real content structure to size against",
24
+ "Putting aria-busy on Skeleton instead of the surrounding loading region",
25
+ "Expecting view-transition wipe without wrapper `viewTransitionName: 'skeleton-overlay'` (prefer CSS class, not inline style)"
22
26
  ],
23
- "related": ["Avatar"],
27
+ "related": ["Avatar", "Shimmer"],
24
28
  "properties": {
25
29
  "react": {
30
+ "animate": {
31
+ "description": "Enables the opacity pulse animation."
32
+ },
33
+ "radius": {
34
+ "description": "Sets the corner radius from the Vira radius token scale.",
35
+ "refCss": "border-radius"
36
+ },
37
+ "duration": {
38
+ "description": "Sets the pulse duration from the Vira duration token scale.",
39
+ "refCss": "duration"
40
+ },
26
41
  "height": {
27
42
  "description": "Sets the skeleton block size using any valid CSS size string."
28
43
  },
@@ -32,8 +47,22 @@
32
47
  "minWidth": {
33
48
  "description": "Sets the skeleton minimum inline size using any valid CSS size string."
34
49
  },
35
- "radius": {
36
- "description": "Sets the corner radius from the Vira radius token scale."
50
+ "Overlay.animate": {
51
+ "description": "Enables the opacity pulse animation on the overlay root."
52
+ },
53
+ "Overlay.radius": {
54
+ "description": "Sets the overlay corner radius from the Vira radius token scale.",
55
+ "refCss": "border-radius"
56
+ },
57
+ "Overlay.children": {
58
+ "description": "Content whose layout and dimensions define the overlay bounding box."
59
+ },
60
+ "Overlay.duration": {
61
+ "description": "Sets the pulse duration from the Vira duration token scale.",
62
+ "refCss": "duration"
63
+ },
64
+ "Overlay.ref": {
65
+ "description": "Ref forwarded to the rendered overlay root element."
37
66
  },
38
67
  "ref": {
39
68
  "description": "Ref forwarded to the rendered skeleton root element."
@@ -52,6 +81,9 @@
52
81
  "border-radius": {
53
82
  "description": "Skeleton corner radius."
54
83
  },
84
+ "duration": {
85
+ "description": "Pulse duration."
86
+ },
55
87
  "inline-size": {
56
88
  "description": "Skeleton inline size."
57
89
  },
package/dist/components/skeleton/skeleton.js CHANGED
@@ -2,24 +2,28 @@ import './skeleton.css';
2
2
  import { clsx } from "../../core/clsx.js";
3
3
  import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
4
4
  import skeleton_module_default from "./skeleton.module.js";
5
+ import { SkeletonOverlay } from "./skeleton-overlay.js";
5
6
  import { jsx } from "react/jsx-runtime";
6
7
  //#region src/components/skeleton/skeleton.tsx
7
- var Skeleton = ({ className, height, minHeight, minWidth, radius, ref, style, width, ...otherProps }) => {
8
+ var SkeletonBlock = ({ animate = true, radius, className, duration = "slow", height, minHeight, minWidth, ref, style, width, ...otherProps }) => {
8
9
  const dynamicStyle = {
9
10
  ...radius != null && { "--vui-skeleton-border-radius": resolveThemeValue(radius, "radius", "var(--radius-small)") },
11
+ ...duration != null && { "--vui-skeleton-duration": resolveThemeValue(duration, "duration", "var(--duration-slow)") },
10
12
  ...width && { "--vui-skeleton-inline-size": width },
11
13
  ...height && { "--vui-skeleton-block-size": height },
12
14
  ...minWidth && { "--vui-skeleton-min-inline-size": minWidth },
13
15
  ...minHeight && { "--vui-skeleton-min-block-size": minHeight },
14
16
  ...style
15
17
  };
16
- return /* @__PURE__ */ jsx("span", {
18
+ return /* @__PURE__ */ jsx("div", {
17
19
  ...otherProps,
18
20
  ref,
19
21
  "aria-hidden": "true",
20
22
  className: clsx(skeleton_module_default.Skeleton, className),
23
+ "data-animate": animate ? "true" : "false",
21
24
  style: dynamicStyle
22
25
  });
23
26
  };
27
+ var Skeleton = Object.assign(SkeletonBlock, { Overlay: SkeletonOverlay });
24
28
  //#endregion
25
29
  export { Skeleton };
package/dist/components/skeleton/skeleton.module.js CHANGED
@@ -1,8 +1,13 @@
1
1
  //#region src/components/skeleton/skeleton.module.css
2
2
  var Skeleton = "viraui__skeleton-module__Skeleton_pn7Xk";
3
+ var Overlay = "viraui__skeleton-module__Overlay_sZSQe";
4
+ var OverlayMeasure = "viraui__skeleton-module__OverlayMeasure_1zcKX";
3
5
  var skeleton_module_default = {
4
6
  Skeleton,
5
- "skeleton-fade": "viraui__skeleton-module__skeleton-fade_XHkG4"
7
+ Overlay,
8
+ "skeleton-fade": "viraui__skeleton-module__skeleton-fade_XHkG4",
9
+ OverlayMeasure,
10
+ "vui-skeleton-wipe-out": "viraui__skeleton-module__vui-skeleton-wipe-out_0-qrj"
6
11
  };
7
12
  //#endregion
8
- export { Skeleton, skeleton_module_default as default };
13
+ export { Overlay, OverlayMeasure, Skeleton, skeleton_module_default as default };
package/dist/core/theme/resolve-theme-value.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- type ThemeKey = 'radius' | 'space';
1
+ type ThemeKey = 'duration' | 'radius' | 'space';
2
2
  type ThemeValue = string;
3
3
  export declare const resolveThemeValue: <TKey extends ThemeKey, TValue extends string, TFallback>(key: TValue | null | undefined | 0, themeKey: TKey, fallbackValue: TFallback) => ThemeValue | TFallback;
4
4
  export {};
package/dist/preflight-surface.json CHANGED
@@ -20,7 +20,7 @@
20
20
  {
21
21
  "id": "elevations",
22
22
  "file": "elevations.css",
23
- "purpose": "Resting and hover box-shadow elevation stacks plus unlayered box-shadow transitions."
23
+ "purpose": "Theme-gated resting and hover box-shadow elevation stacks plus unlayered box-shadow transitions."
24
24
  },
25
25
  {
26
26
  "id": "layout",
@@ -69,36 +69,45 @@
69
69
  "module": "elevations",
70
70
  "values": ["0", "1", "2", "3", "4"],
71
71
  "presence": "value required",
72
- "effect": "Applies resting box-shadow stack for the chosen elevation level.",
72
+ "effect": "When the active theme sets --effect-shadows, applies resting box-shadow stack for the chosen elevation level.",
73
73
  "whenToUse": [
74
74
  "Static surfaces such as cards, panels, and popovers",
75
75
  "Direct DOM usage without the Elevator component"
76
76
  ],
77
- "whenNotToUse": ["When Elevator or getElevationProps already sets elevation hooks on the target element"],
78
- "related": ["Elevator", "Surface", "getElevationProps"]
77
+ "whenNotToUse": [
78
+ "When Elevator or getElevationProps already sets elevation hooks on the target element",
79
+ "When the theme sets --effect-shadows: initial (attr is a no-op for box-shadow)"
80
+ ],
81
+ "related": ["Elevator", "Surface", "getElevationProps", "--effect-shadows"]
79
82
  },
80
83
  {
81
84
  "name": "data-elevation-hover",
82
85
  "module": "elevations",
83
86
  "values": ["0", "1", "2", "3", "4"],
84
87
  "presence": "optional value",
85
- "effect": "Applies a different elevation level on :hover than the resting data-elevation value.",
88
+ "effect": "When the active theme sets --effect-shadows, applies a different elevation level on :hover than the resting data-elevation value.",
86
89
  "whenToUse": [
87
90
  "Interactive surfaces that should lift on hover",
88
91
  "Pair with data-elevation for resting and hover shadow levels"
89
92
  ],
90
- "whenNotToUse": ["When hover elevation is not desired; omit the attribute entirely"],
91
- "related": ["Elevator", "getElevationProps"]
93
+ "whenNotToUse": [
94
+ "When hover elevation is not desired; omit the attribute entirely",
95
+ "When the theme sets --effect-shadows: initial (attr is a no-op for box-shadow)"
96
+ ],
97
+ "related": ["Elevator", "getElevationProps", "--effect-shadows"]
92
98
  },
93
99
  {
94
100
  "name": "data-elevation-direction",
95
101
  "module": "elevations",
96
102
  "values": ["bottom", "top", "left", "right"],
97
103
  "presence": "optional; defaults to bottom when data-elevation is present",
98
- "effect": "Casts the shadow downward, upward, to the left, or to the right.",
104
+ "effect": "When the active theme sets --effect-shadows, casts the shadow downward, upward, to the left, or to the right.",
99
105
  "whenToUse": ["Side drawers, top bars, or lateral panels where shadow direction matters"],
100
- "whenNotToUse": ["When default bottom cast is sufficient"],
101
- "related": ["Elevator", "getElevationProps"]
106
+ "whenNotToUse": [
107
+ "When default bottom cast is sufficient",
108
+ "When the theme sets --effect-shadows: initial (attr is a no-op for box-shadow)"
109
+ ],
110
+ "related": ["Elevator", "getElevationProps", "--effect-shadows"]
102
111
  },
103
112
  {
104
113
  "name": "data-grow",
@@ -199,6 +208,7 @@
199
208
  "Fighting data-mode color-scheme rules without documenting a deliberate override",
200
209
  "Applying data-no-link-style to prose links that should use the default interactive underline treatment",
201
210
  "Inventing backdrop-filter CSS instead of data-vibrant when vibrancy is desired",
211
+ "Inventing box-shadow CSS instead of data-elevation when theme-gated shadows are desired",
202
212
  "Shipping a new consumer-facing data-* without updating preflight-surface.json and viraui-design/custom-attributes.md"
203
213
  ],
204
214
  "discovery": {
package/dist/preflight.css CHANGED
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.preflight{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-mode{syntax:"<color>";initial-value:#000;inherits:true}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b/0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-mode:contrast-color(var(--global-background));font-size:var(--font-root-size);box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);@container root not style(--effect-corner-shape: initial){corner-shape:var(--corner-shape-squircle)}@media (prefers-reduced-motion:reduce){animation:none!important;transition:none!important}}:focus-visible{outline:var(--outline);outline-offset:var(--outline-offset)}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),system-ui,sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums;@container root not style(--effect-holofoil: initial){&:after{content:"";position:fixed;inset:0;z-index:999;background-color:#99ffd8;pointer-events:none;mix-blend-mode:multiply;contain:strict;isolation:isolate;opacity:30%;background-image:radial-gradient(at 79% 56%,#70ade6 0,#0000 50%),radial-gradient(at 61% 80%,#ee909e 0,#0000 50%),radial-gradient(at 0 63%,#fdbc68 0,#0000 50%),radial-gradient(at 6% 50%,#e5cb8a 0,#0000 50%),radial-gradient(at 23% 10%,#e5db8f 0,#0000 50%),radial-gradient(at 36% 91%,#a0eea8 0,#0000 50%),radial-gradient(at 2% 80%,#e3a47d 0,#0000 50%);@container root style(--is-light-mode: white){mix-blend-mode:color;opacity:15%}}}}::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{display:inline-flex;vertical-align:middle;&:not([fill]){fill:currentcolor}}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size: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 :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklch(0% 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}}@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),#0000 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-hover="2"]:hover,[data-elevation-hover="3"]:hover,[data-elevation-hover="4"]:hover,[data-elevation="1"],[data-elevation="2"],[data-elevation="3"],[data-elevation="4"]{box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) var(--shadow-blur-1) oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) var(--shadow-blur-2) oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) var(--shadow-blur-3) oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) var(--shadow-blur-4) oklab(from var(--shadow-color) l a b/.01),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;--shadow-blur-1:1px;--shadow-blur-2:2px;--shadow-blur-3:2px;--shadow-blur-4:3px}[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;--shadow-blur-1:3px;--shadow-blur-2:5px;--shadow-blur-3:6px;--shadow-blur-4:8px}[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]){--shadow-blur-3:7px}[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]){--shadow-blur-3:6px}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:4px;--shadow-blur-2:7px;--shadow-blur-3:10px;--shadow-blur-4:12px}[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;--shadow-blur-1:5px;--shadow-blur-2:10px;--shadow-blur-3:13px;--shadow-blur-4:15px}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:8px;--shadow-blur-2:14px;--shadow-blur-3:20px;--shadow-blur-4:23px}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;--shadow-blur-2:15px}[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;--shadow-blur-2:15px}[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}}@layer viraui.preflight{[data-grow=true]{--vira-flex-grow:1;flex-grow:1}[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=true]{--vira-flex-shrink:1;flex-shrink:1}[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/12%);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{font-size:1em;font-family:var(--font-family-mono);&:not(:where(pre &)){background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em}}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-mode=dark]{color:var(--global-foreground);color-scheme:dark}[data-mode=light]{color:var(--global-foreground);color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{color:var(--global-foreground);@container root style(--is-light-mode: black){color-scheme:dark}@container root style(--is-light-mode: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--effect-vibrancy: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-mode: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.preflight{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-mode{syntax:"<color>";initial-value:#000;inherits:true}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b/0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-mode:contrast-color(var(--global-background));font-size:var(--font-root-size);box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);@container root not style(--effect-corner-shape: initial){corner-shape:var(--corner-shape)}@media (prefers-reduced-motion:reduce){animation:none!important;transition:none!important}}:focus-visible{outline:var(--outline);outline-offset:var(--outline-offset)}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),system-ui,sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums;@container root not style(--effect-holofoil: initial){&:after{content:"";position:fixed;inset:0;z-index:999;background-color:#99ffd8;pointer-events:none;mix-blend-mode:multiply;contain:strict;isolation:isolate;opacity:25%;background-image:radial-gradient(at 79% 56%,#70ade6 0,#0000 50%),radial-gradient(at 61% 80%,#ee909e 0,#0000 50%),radial-gradient(at 0 63%,#fdbc68 0,#0000 50%),radial-gradient(at 6% 50%,#e5cb8a 0,#0000 50%),radial-gradient(at 23% 10%,#e5db8f 0,#0000 50%),radial-gradient(at 36% 91%,#a0eea8 0,#0000 50%),radial-gradient(at 2% 80%,#e3a47d 0,#0000 50%);@container root style(--is-light-mode: white){mix-blend-mode:color;opacity:15%}}}}::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{display:inline-flex;vertical-align:middle;&:not([fill]){fill:currentcolor}}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size: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 :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}}@layer viraui.preflight{@container root not style(--effect-shadows: initial){[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklch(0% 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}[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),#0000 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-hover="2"]:hover,[data-elevation-hover="3"]:hover,[data-elevation-hover="4"]:hover,[data-elevation="1"],[data-elevation="2"],[data-elevation="3"],[data-elevation="4"]{box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) var(--shadow-blur-1) oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) var(--shadow-blur-2) oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) var(--shadow-blur-3) oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) var(--shadow-blur-4) oklab(from var(--shadow-color) l a b/.01),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;--shadow-blur-1:1px;--shadow-blur-2:2px;--shadow-blur-3:2px;--shadow-blur-4:3px}[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;--shadow-blur-1:3px;--shadow-blur-2:5px;--shadow-blur-3:6px;--shadow-blur-4:8px}[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]){--shadow-blur-3:7px}[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]){--shadow-blur-3:6px}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:4px;--shadow-blur-2:7px;--shadow-blur-3:10px;--shadow-blur-4:12px}[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;--shadow-blur-1:5px;--shadow-blur-2:10px;--shadow-blur-3:13px;--shadow-blur-4:15px}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:8px;--shadow-blur-2:14px;--shadow-blur-3:20px;--shadow-blur-4:23px}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;--shadow-blur-2:15px}[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;--shadow-blur-2:15px}[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}}}@layer viraui.preflight{[data-grow=true]{--vira-flex-grow:1;flex-grow:1}[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=true]{--vira-flex-shrink:1;flex-shrink:1}[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/12%);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{font-size:1em;font-family:var(--font-family-mono);&:not(:where(pre &)){background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em}}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-mode=dark]{color:var(--global-foreground);color-scheme:dark}[data-mode=light]{color:var(--global-foreground);color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{color:var(--global-foreground);@container root style(--is-light-mode: black){color-scheme:dark}@container root style(--is-light-mode: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--effect-vibrancy: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-mode: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}
package/dist/theme-surface.json CHANGED
@@ -13,8 +13,8 @@
13
13
  },
14
14
  {
15
15
  "id": "effects",
16
- "pattern": "--effect-vibrancy | --effect-corner-shape | --effect-holofoil",
17
- "purpose": "Optional effect toggles; empty/unset = on, initial = off. Brand holofoil defaults to initial (off). When on, preflight paints a fixed body::after foil overlay."
16
+ "pattern": "--effect-vibrancy | --effect-corner-shape | --effect-holofoil | --effect-shadows",
17
+ "purpose": "Optional effect toggles; empty/unset = on, initial = off. Brand holofoil defaults to initial (off); vibrancy, corner-shape, and shadows default empty (on). Holofoil on paints a fixed body::after foil overlay; shadows off disables preflight data-elevation box-shadow stacks."
18
18
  },
19
19
  {
20
20
  "id": "vibrancy",
@@ -28,8 +28,8 @@
28
28
  },
29
29
  {
30
30
  "id": "radius",
31
- "pattern": "--radius-*",
32
- "purpose": "Semantic radius scale for component chrome."
31
+ "pattern": "--radius-* | --corner-shape",
32
+ "purpose": "Semantic radius scale plus corner-shape value for component chrome."
33
33
  },
34
34
  {
35
35
  "id": "space",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@viraui/react",
3
- "version": "2026.1.4",
3
+ "version": "2026.1.6",
4
4
  "private": false,
5
5
  "files": [
6
6
  "dist"
@@ -35,7 +35,7 @@
35
35
  "unplugin-dts": "1.0.3",
36
36
  "vite": "8.1.4",
37
37
  "vite-plugin-static-copy": "4.1.1",
38
- "@viraui/foundation": "2026.1.4",
38
+ "@viraui/foundation": "2026.1.6",
39
39
  "@viraui/icons": "2026.0.1",
40
40
  "@viraui/postcss-config": "2026.0.0",
41
41
  "@viraui/tsconfig": "2026.0.0"