@viraui/react 2026.3.2 → 2026.3.4

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 (33) hide show
  1. package/dist/components/accordion/accordion-item.js +6 -2
  2. package/dist/components/avatar/avatar.css +1 -1
  3. package/dist/components/avatar-group/avatar-group.css +1 -1
  4. package/dist/components/badge/badge.css +1 -1
  5. package/dist/components/beam/beam.css +1 -1
  6. package/dist/components/button/button.css +1 -1
  7. package/dist/components/checkbox/checkbox.js +1 -8
  8. package/dist/components/chip/chip.css +1 -1
  9. package/dist/components/dialog/dialog.css +1 -1
  10. package/dist/components/glow/glow.css +1 -1
  11. package/dist/components/linear-progress/linear-progress.css +1 -1
  12. package/dist/components/menu/menu-indicator-slot.js +2 -2
  13. package/dist/components/meter/meter.css +1 -1
  14. package/dist/components/radio/radio.css +1 -1
  15. package/dist/components/select/select-option.js +1 -1
  16. package/dist/components/select/select.css +1 -1
  17. package/dist/components/select/select.js +1 -1
  18. package/dist/components/skeleton/skeleton-overlay.js +5 -1
  19. package/dist/components/skeleton/skeleton.js +5 -1
  20. package/dist/components/slider/slider.css +1 -1
  21. package/dist/components/surface/surface-radius-context.js +18 -11
  22. package/dist/components/text/text.css +5 -17
  23. package/dist/components/text/text.d.ts +4 -1
  24. package/dist/components/text/text.guide.json +2 -2
  25. package/dist/components/textfield/textfield.css +1 -1
  26. package/dist/components/title/title.css +5 -33
  27. package/dist/core/theme/infinite-radius-style.d.ts +6 -0
  28. package/dist/core/theme/infinite-radius-style.js +13 -0
  29. package/dist/internal/chrome-icons/chrome-icons.d.ts +1 -1
  30. package/dist/preflight-surface.json +8 -1
  31. package/dist/preflight.css +1 -1
  32. package/dist/theme-surface.json +1 -1
  33. package/package.json +2 -2
package/dist/components/accordion/accordion-item.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { clsx } from "../../core/clsx.js";
2
+ import { infiniteCornerShapeStyle } from "../../core/theme/infinite-radius-style.js";
2
3
  import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
3
4
  import { ChromeMinus, ChromePlus } from "../../internal/chrome-icons/chrome-icons.js";
4
5
  import accordion_module_default from "./accordion.module.js";
@@ -8,10 +9,13 @@ import { Surface } from "../surface/surface.js";
8
9
  import { Accordion } from "@base-ui/react/accordion";
9
10
  import { jsx, jsxs } from "react/jsx-runtime";
10
11
  //#region src/components/accordion/accordion-item.tsx
11
- var AccordionItemComponent = ({ border, children, className, color, iconClosed = /* @__PURE__ */ jsx(ChromePlus, { size: 16 }), iconOpen = /* @__PURE__ */ jsx(ChromeMinus, { size: 16 }), iconPosition = "end", radius, style, trigger, useSurface = true, ...otherProps }) => {
12
+ var AccordionItemComponent = ({ border, children, className, color, iconClosed = /* @__PURE__ */ jsx(ChromePlus, { size: "1rem" }), iconOpen = /* @__PURE__ */ jsx(ChromeMinus, { size: "1rem" }), iconPosition = "end", radius, style, trigger, useSurface = true, ...otherProps }) => {
12
13
  const iconAtStart = iconPosition === "start";
13
14
  const dynamicStyle = {
14
- ...radius != null && { "--vui-accordion-radius": resolveThemeValue(radius, "radius", "var(--radius-medium)") },
15
+ ...radius != null && {
16
+ "--vui-accordion-radius": resolveThemeValue(radius, "radius", "var(--radius-medium)"),
17
+ ...infiniteCornerShapeStyle(radius)
18
+ },
15
19
  ...style
16
20
  };
17
21
  const triggerIcon = /* @__PURE__ */ jsxs("span", {
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__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:round(to-zero,var(--vui-avatar-size),2px);block-size:round(to-zero,var(--vui-avatar-size),2px);min-inline-size:round(to-zero,var(--vui-avatar-size),2px);min-block-size:round(to-zero,var(--vui-avatar-size),2px);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-group/avatar-group.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-avatar-group-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-overlap-distance{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-gap-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-item-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__avatar-group-hole-half{syntax:"<length>";inherits:false;initial-value:0}@property --__avatar-group-hole-r{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-cx{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-cy{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-corner-tl{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-tr{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-br{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-bl{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-inset{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-edge{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__avatar-group-module__AvatarGroup_zOrR-{--vui-avatar-group-size:var(--space-2x-large);--vui-avatar-group-overlap-distance:var(--space-small);--vui-avatar-group-gap-size:var(--space-x-small);--vui-avatar-group-item-radius:var(--radius-medium);display:inline-flex;flex-wrap:nowrap;align-items:flex-start;min-inline-size:max-content;vertical-align:middle;&[data-direction=vertical]{flex-direction:column}&[data-size=x-small]{--vui-avatar-group-size:var(--space-large);--vui-avatar-group-overlap-distance:var(--space-small);--vui-avatar-group-gap-size:var(--space-2x-small);--vui-avatar-group-item-radius:var(--radius-small)}&[data-size=medium]{--vui-avatar-group-size:var(--space-wide);--vui-avatar-group-overlap-distance:var(--space-medium);--vui-avatar-group-gap-size:var(--space-x-small)}&[data-size=large]{--vui-avatar-group-size:var(--space-2x-wide);--vui-avatar-group-overlap-distance:var(--space-x-large);--vui-avatar-group-gap-size:var(--space-small);--vui-avatar-group-item-radius:var(--radius-large)}}.viraui__avatar-group-module__AvatarWrapper_0opqY{position:relative;display:inline-flex;flex:0 0 auto;inline-size:var(--vui-avatar-group-size);block-size:var(--vui-avatar-group-size);.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=horizontal] &:not(:first-child){margin-inline-start:calc(var(--vui-avatar-group-overlap-distance) * -1)}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:first-child){margin-block-start:calc(var(--vui-avatar-group-overlap-distance) * -1)}--__avatar-group-hole-half:calc((var(--vui-avatar-group-size) / 2) + var(--vui-avatar-group-gap-size));--__avatar-group-hole-r:calc(
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-avatar-group-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-overlap-distance{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-gap-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-avatar-group-item-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__avatar-group-hole-half{syntax:"<length>";inherits:false;initial-value:0}@property --__avatar-group-hole-r{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-cx{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-cy{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-corner-tl{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-tr{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-br{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-bl{syntax:"*";inherits:false;initial-value:none}@property --__avatar-group-hole-corner-inset{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --__avatar-group-hole-edge{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__avatar-group-module__AvatarGroup_zOrR-{--vui-avatar-group-size:var(--space-2x-large);--vui-avatar-group-overlap-distance:var(--space-small);--vui-avatar-group-gap-size:var(--space-x-small);--vui-avatar-group-item-radius:var(--radius-medium);display:inline-flex;flex-wrap:nowrap;align-items:flex-start;min-inline-size:max-content;vertical-align:middle;&[data-direction=vertical]{flex-direction:column}&[data-size=x-small]{--vui-avatar-group-size:var(--space-large);--vui-avatar-group-overlap-distance:var(--space-small);--vui-avatar-group-gap-size:var(--space-2x-small);--vui-avatar-group-item-radius:var(--radius-small)}&[data-size=medium]{--vui-avatar-group-size:var(--space-wide);--vui-avatar-group-overlap-distance:var(--space-medium);--vui-avatar-group-gap-size:var(--space-x-small)}&[data-size=large]{--vui-avatar-group-size:var(--space-2x-wide);--vui-avatar-group-overlap-distance:var(--space-x-large);--vui-avatar-group-gap-size:var(--space-small);--vui-avatar-group-item-radius:var(--radius-large)}}.viraui__avatar-group-module__AvatarWrapper_0opqY{position:relative;display:inline-flex;flex:0 0 auto;inline-size:round(to-zero,var(--vui-avatar-group-size),2px);block-size:round(to-zero,var(--vui-avatar-group-size),2px);.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=horizontal] &:not(:first-child){margin-inline-start:calc(var(--vui-avatar-group-overlap-distance) * -1)}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:first-child){margin-block-start:calc(var(--vui-avatar-group-overlap-distance) * -1)}--__avatar-group-hole-half:calc((var(--vui-avatar-group-size) / 2) + var(--vui-avatar-group-gap-size));--__avatar-group-hole-r:calc(
2
2
  min(var(--vui-avatar-group-item-radius), var(--vui-avatar-group-size) / 2) + var(--vui-avatar-group-gap-size)
3
3
  );.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(ltr)[data-direction=horizontal] &:not(:last-child){--__avatar-group-hole-cx:calc(
4
4
  100% + (var(--vui-avatar-group-size) / 2) - var(--vui-avatar-group-overlap-distance)
package/dist/components/badge/badge.css CHANGED
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-badge-size{syntax:"<length>";inherits:true;initial-value:.5rem}@property --vui-badge-color{syntax:"<color>";inherits:true;initial-value:#292929}@property --vui-badge-position-x{syntax:"<length-percentage>";inherits:true;initial-value:100%}@property --vui-badge-position-y{syntax:"<length-percentage>";inherits:true;initial-value:0%}@property --__badge-gap{syntax:"<length>";inherits:true;initial-value:0}@property --__badge-mask-size{syntax:"<length>";inherits:true;initial-value:0}@property --__badge-hole-progress{syntax:"<number>";inherits:true;initial-value:0}@property --__badge-motion-delay{syntax:"<time>";inherits:true;initial-value:.16s}.viraui__badge-module__Badge_lJqlY{--vui-badge-color:var(--global-primary);--__badge-gap:calc(var(--vui-badge-size) * 0.25);--__badge-mask-size:calc(var(--vui-badge-size) / 2 + var(--__badge-gap));position:relative;display:inline-flex;&[data-position=top-end]{--vui-badge-position-x:100%;--vui-badge-position-y:0%}&[data-position=top-start]{--vui-badge-position-x:0%;--vui-badge-position-y:0%}&[data-position=bottom-end]{--vui-badge-position-x:100%;--vui-badge-position-y:100%}&[data-position=bottom-start]{--vui-badge-position-x:0%;--vui-badge-position-y:100%}&>*{outline-offset:-4px}&[data-show=true]{&:after{content:"";width:var(--vui-badge-size);aspect-ratio:1;display:block;border-radius:100000px;corner-shape:unset;background:var(--vui-badge-color);position:absolute;left:calc(var(--vui-badge-position-x) - min(var(--vui-badge-position-x), var(--vui-badge-size)));top:calc(var(--vui-badge-position-y) - min(var(--vui-badge-position-y), var(--vui-badge-size)));pointer-events:none;transform-origin:center}&:not([data-exit]):after{transform:scale(0);animation:viraui__badge-module__badge-dot-in_SKMx8 var(--duration-fast) var(--easing-entrance) forwards;animation-delay:var(--__badge-motion-delay)}&[data-exit]:after{transform:scale(1);animation:viraui__badge-module__badge-dot-out_vWhcP var(--duration-fast) var(--easing-entrance) forwards}&>*{mask-image:radial-gradient(circle at calc(var(--vui-badge-position-x) - min(var(--vui-badge-position-x), var(--vui-badge-size)) + (var(--vui-badge-size) / 2)) calc(var(--vui-badge-position-y) - min(var(--vui-badge-position-y), var(--vui-badge-size)) + (var(--vui-badge-size) / 2)),#0000 0 calc(var(--__badge-mask-size) * var(--__badge-hole-progress)),red calc(var(--__badge-mask-size) * var(--__badge-hole-progress) + 1px))}&:not([data-exit])>*{animation:viraui__badge-module__badge-hole-in_71iZP var(--duration-fast) var(--easing-entrance) forwards}&[data-exit]>*{--__badge-hole-progress:1;animation:viraui__badge-module__badge-hole-out_JCHCf var(--duration-fast) var(--easing-entrance) forwards;animation-delay:var(--__badge-motion-delay)}@media (prefers-reduced-motion:reduce){&:after{transform:none}&>*{--__badge-hole-progress:1}&[data-exit]>*{--__badge-hole-progress:0}}}}@keyframes viraui__badge-module__badge-hole-in_71iZP{0%{--__badge-hole-progress:0}to{--__badge-hole-progress:1}}@keyframes viraui__badge-module__badge-hole-out_JCHCf{0%{--__badge-hole-progress:1}to{--__badge-hole-progress:0}}@keyframes viraui__badge-module__badge-dot-in_SKMx8{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes viraui__badge-module__badge-dot-out_vWhcP{0%{transform:scale(1)}to{transform:scale(0)}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-badge-size{syntax:"<length>";inherits:true;initial-value:.5rem}@property --vui-badge-color{syntax:"<color>";inherits:true;initial-value:#292929}@property --vui-badge-position-x{syntax:"<length-percentage>";inherits:true;initial-value:100%}@property --vui-badge-position-y{syntax:"<length-percentage>";inherits:true;initial-value:0%}@property --__badge-gap{syntax:"<length>";inherits:true;initial-value:0}@property --__badge-mask-size{syntax:"<length>";inherits:true;initial-value:0}@property --__badge-hole-progress{syntax:"<number>";inherits:true;initial-value:0}@property --__badge-motion-delay{syntax:"<time>";inherits:true;initial-value:.16s}.viraui__badge-module__Badge_lJqlY{--vui-badge-color:var(--global-primary);--__badge-gap:calc(var(--vui-badge-size) * 0.25);--__badge-mask-size:calc(var(--vui-badge-size) / 2 + var(--__badge-gap));position:relative;display:inline-flex;&[data-position=top-end]{--vui-badge-position-x:100%;--vui-badge-position-y:0%}&[data-position=top-start]{--vui-badge-position-x:0%;--vui-badge-position-y:0%}&[data-position=bottom-end]{--vui-badge-position-x:100%;--vui-badge-position-y:100%}&[data-position=bottom-start]{--vui-badge-position-x:0%;--vui-badge-position-y:100%}&>*{outline-offset:-4px}&[data-show=true]{&:after{--__corner-shape:round;content:"";width:var(--vui-badge-size);aspect-ratio:1;display:block;border-radius:100000px;background:var(--vui-badge-color);position:absolute;left:calc(var(--vui-badge-position-x) - min(var(--vui-badge-position-x), var(--vui-badge-size)));top:calc(var(--vui-badge-position-y) - min(var(--vui-badge-position-y), var(--vui-badge-size)));pointer-events:none;transform-origin:center}&:not([data-exit]):after{transform:scale(0);animation:viraui__badge-module__badge-dot-in_SKMx8 var(--duration-fast) var(--easing-entrance) forwards;animation-delay:var(--__badge-motion-delay)}&[data-exit]:after{transform:scale(1);animation:viraui__badge-module__badge-dot-out_vWhcP var(--duration-fast) var(--easing-entrance) forwards}&>*{mask-image:radial-gradient(circle at calc(var(--vui-badge-position-x) - min(var(--vui-badge-position-x), var(--vui-badge-size)) + (var(--vui-badge-size) / 2)) calc(var(--vui-badge-position-y) - min(var(--vui-badge-position-y), var(--vui-badge-size)) + (var(--vui-badge-size) / 2)),#0000 0 calc(var(--__badge-mask-size) * var(--__badge-hole-progress)),red calc(var(--__badge-mask-size) * var(--__badge-hole-progress) + 1px))}&:not([data-exit])>*{animation:viraui__badge-module__badge-hole-in_71iZP var(--duration-fast) var(--easing-entrance) forwards}&[data-exit]>*{--__badge-hole-progress:1;animation:viraui__badge-module__badge-hole-out_JCHCf var(--duration-fast) var(--easing-entrance) forwards;animation-delay:var(--__badge-motion-delay)}@media (prefers-reduced-motion:reduce){&:after{transform:none}&>*{--__badge-hole-progress:1}&[data-exit]>*{--__badge-hole-progress:0}}}}@keyframes viraui__badge-module__badge-hole-in_71iZP{0%{--__badge-hole-progress:0}to{--__badge-hole-progress:1}}@keyframes viraui__badge-module__badge-hole-out_JCHCf{0%{--__badge-hole-progress:1}to{--__badge-hole-progress:0}}@keyframes viraui__badge-module__badge-dot-in_SKMx8{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes viraui__badge-module__badge-dot-out_vWhcP{0%{transform:scale(1)}to{transform:scale(0)}}}
package/dist/components/beam/beam.css CHANGED
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-beam-angle{syntax:"<angle>";inherits:true;initial-value:0deg}@property --vui-beam-opacity{syntax:"<number>";inherits:true;initial-value:0}@property --vui-beam-hue{syntax:"<angle>";inherits:true;initial-value:0deg}@property --vui-beam-hue-base{syntax:"<angle>";inherits:true;initial-value:0deg}@property --vui-beam-hue-range{syntax:"<angle>";inherits:true;initial-value:30deg}@property --vui-beam-duration{syntax:"<time>";inherits:true;initial-value:1.96s}@property --vui-beam-strength{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-brightness{syntax:"<number>";inherits:true;initial-value:1.3}@property --vui-beam-saturation{syntax:"<number>";inherits:true;initial-value:1.2}@property --vui-beam-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-beam-stroke-opacity{syntax:"<number>";inherits:true;initial-value:.26}@property --vui-beam-inner-opacity{syntax:"<number>";inherits:true;initial-value:.42}@property --vui-beam-bloom-opacity{syntax:"<number>";inherits:true;initial-value:.24}@property --vui-beam-core-blur{syntax:"<length>";inherits:true;initial-value:3px}@property --vui-beam-bloom-blur{syntax:"<length>";inherits:true;initial-value:22.5px}@property --vui-beam-pulse-glow-sx{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-pulse-glow-sy{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-pulse-glow-boost{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-x{syntax:"<number>";inherits:true;initial-value:0}@property --vui-beam-w{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-h{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-spike{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-spike2{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-edge{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bw1{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bh1{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bw2{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bh2{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bw3{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bh3{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bgh{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bop-tl{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bop-tr{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bop-bl{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bop-br{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bx1{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-by1{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-bx2{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-by2{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-bx3{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-by3{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-radius-tl{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__beam-radius-tr{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__beam-radius-br{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__beam-radius-bl{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__beam-c1{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c2{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c3{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c4{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c5{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c6{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c7{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c8{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c9{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c10{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c11{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c12{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__beam-module__Beam_xT5Pt{--__beam-radius-tl:var(--vui-surface-border-radius-top-left);--__beam-radius-tr:var(--vui-surface-border-radius-top-right);--__beam-radius-br:var(--vui-surface-border-radius-bottom-right);--__beam-radius-bl:var(--vui-surface-border-radius-bottom-left);--vui-beam-color:var(--global-primary);--__beam-c1:var(--vui-beam-color);--__beam-c2:var(--vui-beam-color);--__beam-c3:var(--vui-beam-color);--__beam-c4:var(--vui-beam-color);--__beam-c5:var(--vui-beam-color);--__beam-c6:var(--vui-beam-color);--__beam-c7:var(--vui-beam-color);--__beam-c8:var(--vui-beam-color);--__beam-c9:var(--vui-beam-color);--__beam-c10:var(--vui-beam-color);--__beam-c11:var(--vui-beam-color);--__beam-c12:var(--vui-beam-color);position:relative;z-index:0;&[data-paused],&[data-paused] [data-beam-bloom],&[data-paused]:after,&[data-paused]:before{animation-play-state:paused!important}&[data-beam-fit-content=true]{max-width:fit-content}&[data-beam-color=colorful]{--__beam-c1:#ff3264;--__beam-c2:#288cff;--__beam-c3:#32c850;--__beam-c4:#1eb9aa;--__beam-c5:#6446ff;--__beam-c6:#ff7828;--__beam-c7:#f032b4;--__beam-c8:#b428f0;--__beam-c9:#ff3c50;--__beam-c10:#ff3c50;--__beam-c11:#28beb4;--__beam-c12:#28beb4fa}&[data-beam-static-colors=true]{--vui-beam-hue-range:0deg}&[data-beam-static-colors=true] [data-beam-bloom],&[data-beam-static-colors=true]:after,&[data-beam-static-colors=true]:before{animation-name:none;filter:brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}@media (prefers-reduced-motion:reduce){&[data-animate],&[data-fading]{animation:none!important}& [data-beam-bloom],&:after,&:before{animation:none!important;filter:none!important}&[data-animate]:after,&[data-animate]:before{opacity:calc(.35 * var(--vui-beam-strength))}}&[data-beam-variant=border]{&[data-beam-size=medium]{border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);overflow:hidden;&[data-animate]{animation:viraui__beam-module__vui-beam-spin_PCRBV var(--vui-beam-duration) linear infinite,viraui__beam-module__vui-beam-fade-in_-pZOw .6s ease forwards}&[data-fading]{animation:viraui__beam-module__vui-beam-spin_PCRBV var(--vui-beam-duration) linear infinite,viraui__beam-module__vui-beam-fade-out_ITNKo .5s ease forwards}[data-beam-bloom]{display:none;position:absolute;inset:0;border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));background:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 58%,#ffffff08 62%,#ffffff14 65%,#fff3 67%,#ffffff73 69%,#ffffffd9 70%,#ffffffd9 70.5%,#ffffff73 71.5%,#fff3 73%,#ffffff14 75%,#ffffff08 78%,#0000 82%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:1px;filter:blur(8px) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation));pointer-events:none;z-index:3;opacity:0}&:is([data-animate],[data-fading]){&:after{border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));padding:1px;background:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 54%,#ffffff1a 57%,#ffffff4d 60%,#fff9 63%,#ffffffbf 66%,#fff9 69%,#ffffff4d 72%,#ffffff1a 75%,#0000 78%,#0000 100%),radial-gradient(ellipse 70px 40px at 33% -7.4%,var(--__beam-c1),#0000),radial-gradient(ellipse 60px 35px at 12% -5%,var(--__beam-c2),#0000),radial-gradient(ellipse 40px 70px at 2.1% 68.3%,var(--__beam-c3),#0000),radial-gradient(ellipse 20px 35px at 2.1% 68.3%,var(--__beam-c4),#0000),radial-gradient(ellipse 180px 32px at 74.4% 100%,var(--__beam-c5),#0000),radial-gradient(ellipse 85px 26px at 55% 100%,var(--__beam-c2),#0000),radial-gradient(ellipse 74px 32px at 93.9% 0,var(--__beam-c6),#0000),radial-gradient(ellipse 26px 42px at 100% 27.1%,var(--__beam-c7),#0000),radial-gradient(ellipse 52px 48px at 100% 27.1%,var(--__beam-c8),#0000);mask:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 30%,#ffffff1a 36%,#ffffff59 44%,#fff 52%,#fff 80%,#ffffff59 86%,#ffffff1a 92%,#0000 95%,#0000 100%),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:intersect,exclude;z-index:2;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-stroke-opacity) * var(--vui-beam-strength))}&:after,&:before{content:"";position:absolute;inset:0;pointer-events:none;animation:viraui__beam-module__vui-beam-hue-shift_9CzG5 12s ease-in-out infinite}&:before{border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);background:radial-gradient(ellipse 63px 36px at 33% -7.4%,oklab(from var(--__beam-c1) l a b/.45),#0000),radial-gradient(ellipse 54px 32px at 12% -5%,oklab(from var(--__beam-c2) l a b/.45),#0000),radial-gradient(ellipse 36px 63px at 2.1% 68.3%,oklab(from var(--__beam-c3) l a b/.45),#0000),radial-gradient(ellipse 18px 32px at 2.1% 68.3%,oklab(from var(--__beam-c4) l a b/.45),#0000),radial-gradient(ellipse 162px 29px at 74.4% 100%,oklab(from var(--__beam-c5) l a b/.45),#0000),radial-gradient(ellipse 77px 23px at 55% 100%,oklab(from var(--__beam-c2) l a b/.45),#0000),radial-gradient(ellipse 67px 29px at 93.9% 0,oklab(from var(--__beam-c6) l a b/.45),#0000),radial-gradient(ellipse 23px 38px at 100% 27.1%,oklab(from var(--__beam-c7) l a b/.45),#0000),radial-gradient(ellipse 47px 43px at 100% 27.1%,oklab(from var(--__beam-c8) l a b/.45),#0000);box-shadow:inset 0 0 9px 1px #ffffff45;mask-image:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 30%,#ffffff1a 36%,#ffffff59 44%,#fff 52%,#fff 80%,#ffffff59 86%,#ffffff1a 92%,#0000 95%,#0000 100%),linear-gradient(#fff,#0000 28px,#0000 calc(100% - 28px),#fff),linear-gradient(to right,#fff,#0000 28px,#0000 calc(100% - 28px),#fff);mask-composite:intersect,add;z-index:1;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-inner-opacity) * var(--vui-beam-strength))}[data-beam-bloom]{display:block;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-bloom-opacity) * var(--vui-beam-strength))}}}&[data-beam-size=small]{--vui-beam-stroke-opacity:0.46;--vui-beam-inner-opacity:0.24;--vui-beam-bloom-opacity:0.38;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);overflow:hidden;&[data-animate]{animation:viraui__beam-module__vui-beam-spin_PCRBV var(--vui-beam-duration) linear infinite,viraui__beam-module__vui-beam-fade-in_-pZOw .6s ease forwards}&[data-fading]{animation:viraui__beam-module__vui-beam-spin_PCRBV var(--vui-beam-duration) linear infinite,viraui__beam-module__vui-beam-fade-out_ITNKo .5s ease forwards}[data-beam-bloom]{display:none;position:absolute;inset:0;border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));background:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 58%,#ffffff08 62%,#ffffff14 65%,#fff3 67%,#ffffff73 69%,#ffffffd9 70%,#ffffffd9 70.5%,#ffffff73 71.5%,#fff3 73%,#ffffff14 75%,#ffffff08 78%,#0000 82%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:1px;filter:blur(8px) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation));pointer-events:none;z-index:3;opacity:0}&:is([data-animate],[data-fading]){&:after{border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));padding:1px;background:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 54%,#ffffff1a 57%,#ffffff4d 60%,#fff9 63%,#ffffffbf 66%,#fff9 69%,#ffffff4d 72%,#ffffff1a 75%,#0000 78%,#0000 100%),radial-gradient(ellipse 9px 18px at 2% 68%,var(--__beam-c3),#0000),radial-gradient(ellipse 4px 8px at 2% 68%,var(--__beam-c4),#0000),radial-gradient(ellipse 59px 9px at 72% -3%,var(--__beam-c6),#0000),radial-gradient(ellipse 42px 7px at 74% 100%,var(--__beam-c5),#0000),radial-gradient(ellipse 10px 17px at 100% 27%,var(--__beam-c7),#0000),radial-gradient(ellipse 10px 18px at 100% 27%,var(--__beam-c8),#0000),radial-gradient(ellipse 5px 10px at 100% 27%,var(--__beam-c2),#0000),radial-gradient(ellipse 11px 12px at 100% 27%,var(--__beam-c1),#0000);mask:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 30%,#ffffff1a 36%,#ffffff59 44%,#fff 52%,#fff 80%,#ffffff59 86%,#ffffff1a 92%,#0000 95%,#0000 100%),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:intersect,exclude;z-index:2;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-stroke-opacity) * var(--vui-beam-strength))}&:after,&:before{content:"";position:absolute;inset:0;pointer-events:none;animation:viraui__beam-module__vui-beam-hue-shift_9CzG5 12s ease-in-out infinite}&:before{border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);background:radial-gradient(ellipse 9px 18px at 2% 68%,oklab(from var(--__beam-c3) l a b/.5),#0000),radial-gradient(ellipse 4px 8px at 2% 68%,oklab(from var(--__beam-c4) l a b/.45),#0000),radial-gradient(ellipse 59px 9px at 72% -3%,oklab(from var(--__beam-c6) l a b/.35),#0000),radial-gradient(ellipse 42px 7px at 74% 100%,oklab(from var(--__beam-c5) l a b/.35),#0000),radial-gradient(ellipse 10px 17px at 100% 27%,oklab(from var(--__beam-c7) l a b/.3),#0000),radial-gradient(ellipse 10px 18px at 100% 27%,oklab(from var(--__beam-c8) l a b/.4),#0000),radial-gradient(ellipse 5px 10px at 100% 27%,oklab(from var(--__beam-c2) l a b/.3),#0000),radial-gradient(ellipse 11px 12px at 100% 27%,oklab(from var(--__beam-c1) l a b/.3),#0000);box-shadow:inset 0 0 5px 1px #ffffff45;mask-image:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 22%,#ffffff1f 28%,#fff6 36%,#fff 46%,#fff 82%,#fff6 88%,#ffffff1f 94%,#0000 97%,#0000 100%);mask-composite:add;z-index:1;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-inner-opacity) * var(--vui-beam-strength))}[data-beam-bloom]{display:block;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-bloom-opacity) * var(--vui-beam-strength))}}}}&[data-beam-variant=line]{--vui-beam-stroke-opacity:1.14;--vui-beam-inner-opacity:0.7;--vui-beam-bloom-opacity:0.8;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);overflow:hidden;&[data-animate]{animation:viraui__beam-module__beam-travel_FuPkI var(--vui-beam-duration) linear infinite,viraui__beam-module__beam-edge-fade_PXYJA var(--vui-beam-duration) linear infinite,viraui__beam-module__beam-breathe_3BBMd 4s ease-in-out infinite,viraui__beam-module__beam-spike_1iIfV 4.1s ease-in-out infinite,viraui__beam-module__beam-spike2_d1gJy 5.3s ease-in-out infinite,viraui__beam-module__vui-beam-fade-in_-pZOw .6s ease forwards}&[data-fading]{animation:viraui__beam-module__beam-travel_FuPkI var(--vui-beam-duration) linear infinite,viraui__beam-module__beam-edge-fade_PXYJA var(--vui-beam-duration) linear infinite,viraui__beam-module__beam-breathe_3BBMd 4s ease-in-out infinite,viraui__beam-module__beam-spike_1iIfV 4.1s ease-in-out infinite,viraui__beam-module__beam-spike2_d1gJy 5.3s ease-in-out infinite,viraui__beam-module__vui-beam-fade-out_ITNKo .5s ease forwards}[data-beam-bloom]{display:none;position:absolute;inset:0;border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));clip-path:inset(0 round var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl));padding:0;mask:radial-gradient(ellipse calc(84px * var(--vui-beam-w)) calc(110px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) 100%,#fff 0,#ffffff80 35%,#0000 100%);mask-composite:add;background:radial-gradient(ellipse calc(.8px * var(--vui-beam-spike)) calc(92px * var(--vui-beam-h)) at 8% calc(100% - 2px),var(--__beam-c9),var(--__beam-c9) 30%,#0000 88%),radial-gradient(ellipse calc(10px * var(--vui-beam-spike2)) calc(35px * var(--vui-beam-h)) at 22% calc(100% - 4px),color-mix(in srgb,var(--__beam-c12) 98%,#0000),color-mix(in srgb,var(--__beam-c12) 49%,#0000) 50%,#0000 95%),radial-gradient(ellipse calc(2px * (2 - var(--vui-beam-spike))) calc(72px * var(--vui-beam-h)) at 36% calc(100% - 3px),var(--__beam-c5),color-mix(in srgb,var(--__beam-c5) 100%,#0000) 40%,#0000 90%),radial-gradient(ellipse calc(14px * var(--vui-beam-spike2)) calc(28px * var(--vui-beam-h)) at 50% calc(100% - 2px),#ffaa2896,#ffaa284a 55%,#0000 96%),radial-gradient(ellipse calc(1.2px * (2 - var(--vui-beam-spike2))) calc(85px * var(--vui-beam-h)) at 64% calc(100% - 4px),var(--__beam-c3),color-mix(in srgb,var(--__beam-c3) 100%,#0000) 35%,#0000 89%),radial-gradient(ellipse calc(7px * var(--vui-beam-spike)) calc(45px * var(--vui-beam-h)) at 78% calc(100% - 2px),color-mix(in srgb,var(--__beam-c8) 91%,#0000),color-mix(in srgb,var(--__beam-c8) 45%,#0000) 48%,#0000 94%),radial-gradient(ellipse calc(.6px * (2 - var(--vui-beam-spike))) calc(60px * var(--vui-beam-h)) at 92% calc(100% - 3px),var(--__beam-c2),color-mix(in srgb,var(--__beam-c2) 100%,#0000) 42%,#0000 91%),radial-gradient(ellipse calc(21px * var(--vui-beam-spike)) calc(15px * var(--vui-beam-spike2)) at calc(var(--vui-beam-x) * 100%) calc(100% + 1px),#fff 0,#ffffffe6 20%,#ffffff80 50%,#0000 100%),radial-gradient(ellipse calc(42px * var(--vui-beam-w)) calc(40px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) 100%,#ffffff4d 0,#ffffff1f 25%,#ffffff08 55%,#0000 80%);pointer-events:none;z-index:3;opacity:0}&:is([data-animate],[data-fading]){&:after{border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));padding:1px;background:radial-gradient(ellipse calc(24px * var(--vui-beam-w)) calc(28px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) calc(100% + 2px),#ffffff61 0,#ffffff1f 30%,#0000 65%),radial-gradient(ellipse calc(36px * var(--vui-beam-w)) calc(36px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) calc(100% + 2px),var(--__beam-c1),#0000),radial-gradient(ellipse calc(30px * var(--vui-beam-w)) calc(32px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 39px) calc(100%),var(--__beam-c4),#0000),radial-gradient(ellipse calc(33px * var(--vui-beam-w)) calc(28px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 36px) calc(100% + 2px),var(--__beam-c3),#0000),radial-gradient(ellipse calc(29px * var(--vui-beam-w)) calc(34px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 54px) calc(100%),var(--__beam-c8),#0000),radial-gradient(ellipse calc(27px * var(--vui-beam-w)) calc(30px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 51px) calc(100% - 1px),var(--__beam-c6),#0000),radial-gradient(ellipse calc(36px * var(--vui-beam-w)) calc(24px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 21px) calc(100% + 1px),var(--__beam-c5),#0000),radial-gradient(ellipse calc(30px * var(--vui-beam-w)) calc(22px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 21px) calc(100%),var(--__beam-c2),#0000),radial-gradient(ellipse calc(25px * var(--vui-beam-w)) calc(28px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 66px) calc(100% + 1px),var(--__beam-c7),#0000),radial-gradient(ellipse calc(23px * var(--vui-beam-w)) calc(30px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 66px) calc(100% - 1px),var(--__beam-c4),#0000);mask:radial-gradient(ellipse calc(78px * var(--vui-beam-w)) calc(60px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) 100%,#fff 0,#ffffff80 45%,#0000 100%),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:intersect,exclude;z-index:2;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-edge) * var(--vui-beam-stroke-opacity) * var(--vui-beam-strength))}&:after,&:before{content:"";position:absolute;inset:0;clip-path:inset(0 round var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl));pointer-events:none;animation:viraui__beam-module__vui-beam-hue-shift_9CzG5 12s ease-in-out infinite}&:before{border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);background:radial-gradient(ellipse calc(33px * var(--vui-beam-w)) calc(30px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) calc(100%),color-mix(in srgb,var(--__beam-c1) 48%,#0000),#0000),radial-gradient(ellipse calc(24px * var(--vui-beam-w)) calc(26px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 39px) calc(100% - 3px),color-mix(in srgb,var(--__beam-c4) 42%,#0000),#0000),radial-gradient(ellipse calc(27px * var(--vui-beam-w)) calc(24px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 36px) calc(100%),color-mix(in srgb,var(--__beam-c3) 48%,#0000),#0000),radial-gradient(ellipse calc(23px * var(--vui-beam-w)) calc(28px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 54px) calc(100% - 2px),color-mix(in srgb,var(--__beam-c8) 42%,#0000),#0000),radial-gradient(ellipse calc(24px * var(--vui-beam-w)) calc(24px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 51px) calc(100% - 1px),color-mix(in srgb,var(--__beam-c6) 50%,#0000),#0000),radial-gradient(ellipse calc(30px * var(--vui-beam-w)) calc(20px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 21px) calc(100%),color-mix(in srgb,var(--__beam-c5) 45%,#0000),#0000),radial-gradient(ellipse calc(25px * var(--vui-beam-w)) calc(18px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 21px) calc(100% - 2px),color-mix(in srgb,var(--__beam-c2) 40%,#0000),#0000),radial-gradient(ellipse calc(21px * var(--vui-beam-w)) calc(24px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 66px) calc(100%),color-mix(in srgb,var(--__beam-c7) 45%,#0000),#0000),radial-gradient(ellipse calc(18px * var(--vui-beam-w)) calc(26px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 66px) calc(100% - 1px),color-mix(in srgb,var(--__beam-c4) 52%,#0000),#0000);box-shadow:inset 0 0 9px 1px #ffffff45;mask-image:radial-gradient(ellipse calc(78px * var(--vui-beam-w)) calc(60px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) 100%,#fff 0,#ffffff80 45%,#0000 100%),linear-gradient(#fff,#0000 28px,#0000 calc(100% - 28px),#fff),linear-gradient(to right,#fff,#0000 28px,#0000 calc(100% - 28px),#fff);mask-composite:intersect,add;z-index:1;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-edge) * var(--vui-beam-inner-opacity) * var(--vui-beam-strength))}[data-beam-bloom]{display:block;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-edge) * var(--vui-beam-bloom-opacity) * var(--vui-beam-strength));animation:viraui__beam-module__beam-hue-shift-bloom_Onfv- 8s ease-in-out infinite}}}&[data-beam-variant=pulse-inside]{--vui-beam-stroke-opacity:1.54;--vui-beam-inner-opacity:0.44;--vui-beam-bloom-opacity:0.66;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);overflow:hidden;isolation:isolate;&[data-animate]{animation:viraui__beam-module__vui-beam-fade-in_-pZOw .6s ease forwards}&[data-fading]{animation:viraui__beam-module__vui-beam-fade-out_ITNKo .5s ease forwards}[data-beam-bloom]{display:none;position:absolute;inset:0;border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));background:radial-gradient(ellipse 84px 48px at 33% -7.4%,oklab(from var(--__beam-c1) l a b/.76),#0000),radial-gradient(ellipse 72px 42px at 12% -5%,oklab(from var(--__beam-c2) l a b/.76),#0000),radial-gradient(ellipse 48px 84px at 2.1% 68.3%,oklab(from var(--__beam-c3) l a b/.76),#0000),radial-gradient(ellipse 216px 38px at 74.4% 100%,oklab(from var(--__beam-c5) l a b/.76),#0000),radial-gradient(ellipse 102px 31px at 55% 100%,oklab(from var(--__beam-c2) l a b/.76),#0000),radial-gradient(ellipse 89px 38px at 93.9% 0,oklab(from var(--__beam-c6) l a b/.76),#0000),radial-gradient(ellipse 62px 58px at 100% 27.1%,oklab(from var(--__beam-c8) l a b/.76),#0000);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:1px;pointer-events:none;z-index:3;opacity:0}&:is([data-animate],[data-fading]){&:after{border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));padding:1px;background:radial-gradient(ellipse calc(70px * var(--__beam-bw1)) calc(40px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(33% + var(--__beam-bx1)) calc(-7.4% + var(--__beam-by1)),oklab(from var(--__beam-c1) l a b/var(--__beam-bop-tl)),#0000),radial-gradient(ellipse calc(60px * var(--__beam-bw2)) calc(35px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(12% + var(--__beam-bx2)) calc(-5% + var(--__beam-by2)),oklab(from var(--__beam-c2) l a b/var(--__beam-bop-tl)),#0000),radial-gradient(ellipse calc(40px * var(--__beam-bw3)) calc(70px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(2.1% + var(--__beam-bx3)) calc(68.3% + var(--__beam-by3)),oklab(from var(--__beam-c3) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(20px * var(--__beam-bw1)) calc(35px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(2.1% + var(--__beam-bx1)) calc(68.3% + var(--__beam-by1)),oklab(from var(--__beam-c4) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(180px * var(--__beam-bw2)) calc(32px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(74.4% + var(--__beam-bx2)) calc(100% + var(--__beam-by2)),oklab(from var(--__beam-c5) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(85px * var(--__beam-bw3)) calc(26px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(55% + var(--__beam-bx3)) calc(100% + var(--__beam-by3)),oklab(from var(--__beam-c2) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(74px * var(--__beam-bw1)) calc(32px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(93.9% + var(--__beam-bx1)) calc(0% + var(--__beam-by1)),oklab(from var(--__beam-c6) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(26px * var(--__beam-bw2)) calc(42px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(100% + var(--__beam-bx2)) calc(27.1% + var(--__beam-by2)),oklab(from var(--__beam-c7) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(52px * var(--__beam-bw3)) calc(48px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(100% + var(--__beam-bx3)) calc(27.1% + var(--__beam-by3)),oklab(from var(--__beam-c8) l a b/var(--__beam-bop-tr)),#0000);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;z-index:2;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-stroke-opacity) * var(--vui-beam-strength))}&:after,&:before{content:"";position:absolute;inset:0;pointer-events:none;filter:hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue))) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&:before{border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);background:radial-gradient(ellipse calc(65px * var(--__beam-bw1)) calc(35px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(33% + var(--__beam-bx1)) calc(-7.4% + var(--__beam-by1)),oklab(from var(--__beam-c1) l a b/var(--__beam-bop-tl)),#0000),radial-gradient(ellipse calc(55px * var(--__beam-bw2)) calc(30px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(12% + var(--__beam-bx2)) calc(-5% + var(--__beam-by2)),oklab(from var(--__beam-c2) l a b/var(--__beam-bop-tl)),#0000),radial-gradient(ellipse calc(35px * var(--__beam-bw3)) calc(65px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(2.1% + var(--__beam-bx3)) calc(68.3% + var(--__beam-by3)),oklab(from var(--__beam-c3) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(15px * var(--__beam-bw1)) calc(30px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(2.1% + var(--__beam-bx1)) calc(68.3% + var(--__beam-by1)),oklab(from var(--__beam-c4) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(173px * var(--__beam-bw2)) calc(28px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(74.4% + var(--__beam-bx2)) calc(100% + var(--__beam-by2)),oklab(from var(--__beam-c5) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(80px * var(--__beam-bw3)) calc(22px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(55% + var(--__beam-bx3)) calc(100% + var(--__beam-by3)),oklab(from var(--__beam-c2) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(69px * var(--__beam-bw1)) calc(28px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(93.9% + var(--__beam-bx1)) calc(0% + var(--__beam-by1)),oklab(from var(--__beam-c6) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(22px * var(--__beam-bw2)) calc(38px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(100% + var(--__beam-bx2)) calc(27.1% + var(--__beam-by2)),oklab(from var(--__beam-c7) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(47px * var(--__beam-bw3)) calc(44px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(100% + var(--__beam-bx3)) calc(27.1% + var(--__beam-by3)),oklab(from var(--__beam-c8) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse 60px 60px at 0 0,rgba(255,255,255,calc(.18 * var(--__beam-bop-tl))),#0000 70%),radial-gradient(ellipse 60px 60px at 100% 0,rgba(255,255,255,calc(.18 * var(--__beam-bop-tr))),#0000 70%),radial-gradient(ellipse 60px 60px at 0 100%,rgba(255,255,255,calc(.18 * var(--__beam-bop-bl))),#0000 70%),radial-gradient(ellipse 60px 60px at 100% 100%,rgba(255,255,255,calc(.18 * var(--__beam-bop-br))),#0000 70%);mask-image:linear-gradient(#fff,#0000 28px,#0000 calc(100% - 28px),#fff),linear-gradient(90deg,#fff,#0000 28px,#0000 calc(100% - 28px),#fff);mask-composite:add;z-index:1;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-inner-opacity) * var(--vui-beam-strength))}[data-beam-bloom]{display:block;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-bloom-opacity) * var(--vui-beam-strength));filter:blur(8px) hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue))) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}}@media (prefers-reduced-motion:reduce){&:is([data-animate],[data-fading]),&:is([data-animate],[data-fading]) [data-beam-bloom],&:is([data-animate],[data-fading]):after,&:is([data-animate],[data-fading]):before{animation:none!important}}}&[data-beam-variant=pulse-outside]{--vui-beam-stroke-opacity:0.94;--vui-beam-inner-opacity:0.34;--vui-beam-bloom-opacity:0.3;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);overflow:visible;isolation:isolate;&>:not([data-beam-bloom]){position:relative;z-index:1}&[data-animate]{animation:viraui__beam-module__vui-beam-fade-in_-pZOw .6s ease forwards}&[data-fading]{animation:viraui__beam-module__vui-beam-fade-out_ITNKo .5s ease forwards}[data-beam-bloom]{display:none;position:absolute;inset:-30px;z-index:-1;border-radius:calc(var(--__beam-radius-tl) + 30px) calc(var(--__beam-radius-tr) + 30px) calc(var(--__beam-radius-br) + 30px) calc(var(--__beam-radius-bl) + 30px);background:radial-gradient(ellipse calc(110px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(30px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 27% 3%,color-mix(in srgb,var(--__beam-c1) 77%,#0000),#0000),radial-gradient(ellipse calc(100px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(20px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 73% 1%,color-mix(in srgb,var(--__beam-c6) 77%,#0000),#0000),radial-gradient(ellipse calc(26px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(62px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 100% 33%,color-mix(in srgb,var(--__beam-c7) 77%,#0000),#0000),radial-gradient(ellipse calc(30px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(56px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 101% 72%,color-mix(in srgb,var(--__beam-c8) 77%,#0000),#0000),radial-gradient(ellipse calc(120px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(22px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 67% 99%,color-mix(in srgb,var(--__beam-c5) 77%,#0000),#0000),radial-gradient(ellipse calc(88px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(32px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 24% 99%,color-mix(in srgb,var(--__beam-c2) 77%,#0000),#0000),radial-gradient(ellipse calc(28px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(58px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 0 60%,color-mix(in srgb,var(--__beam-c3) 77%,#0000),#0000);transform:scale(.95,.9);pointer-events:none;opacity:0}&:is([data-animate],[data-fading]){&:after{inset:0;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);padding:1px;clip-path:inset(0 round var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl));mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;z-index:2;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-stroke-opacity) * var(--vui-beam-strength));filter:hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue))) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&:after,&:before{content:"";position:absolute;background:radial-gradient(ellipse calc(80px * var(--__beam-bw1) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(19px * var(--__beam-bh1) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(27% + var(--__beam-bx1)) calc(0% + var(--__beam-by1)),oklab(from var(--__beam-c1) l a b/var(--__beam-bop-tl)),#0000),radial-gradient(ellipse calc(74px * var(--__beam-bw2) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(11px * var(--__beam-bh2) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(73% + var(--__beam-bx2)) calc(-1% + var(--__beam-by2)),oklab(from var(--__beam-c6) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(15px * var(--__beam-bw3) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(44px * var(--__beam-bh3) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(100% + var(--__beam-bx3)) calc(33% + var(--__beam-by3)),oklab(from var(--__beam-c7) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(19px * var(--__beam-bw1) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(38px * var(--__beam-bh1) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(101% + var(--__beam-bx1)) calc(72% + var(--__beam-by1)),oklab(from var(--__beam-c8) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(84px * var(--__beam-bw2) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(13px * var(--__beam-bh2) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(67% + var(--__beam-bx2)) calc(100% + var(--__beam-by2)),oklab(from var(--__beam-c5) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(60px * var(--__beam-bw3) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(21px * var(--__beam-bh3) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(24% + var(--__beam-bx3)) calc(101% + var(--__beam-by3)),oklab(from var(--__beam-c2) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(17px * var(--__beam-bw1) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(40px * var(--__beam-bh1) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(0% + var(--__beam-bx1)) calc(60% + var(--__beam-by1)),oklab(from var(--__beam-c3) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(13px * var(--__beam-bw2) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(32px * var(--__beam-bh2) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(-1% + var(--__beam-bx2)) calc(28% + var(--__beam-by2)),oklab(from var(--__beam-c4) l a b/var(--__beam-bop-tl)),#0000);pointer-events:none}&:before{inset:-10px;z-index:-1;border-radius:calc(var(--__beam-radius-tl) + 10px) calc(var(--__beam-radius-tr) + 10px) calc(var(--__beam-radius-br) + 10px) calc(var(--__beam-radius-bl) + 10px);transform:scale(.95,.9);opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-inner-opacity) * var(--vui-beam-strength));filter:blur(var(--vui-beam-core-blur,3px)) hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue))) brightness(var(--vui-beam-brightness,1.3)) saturate(var(--vui-beam-saturation,1.2))}[data-beam-bloom]{display:block;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-bloom-opacity) * var(--vui-beam-strength));filter:blur(var(--vui-beam-bloom-blur,22.5px)) hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue))) brightness(var(--vui-beam-brightness,1.3)) saturate(var(--vui-beam-saturation,1.2))}}@media (prefers-reduced-motion:reduce){&:is([data-animate],[data-fading]),&:is([data-animate],[data-fading]) [data-beam-bloom],&:is([data-animate],[data-fading]):after,&:is([data-animate],[data-fading]):before{animation:none!important}}}&[data-beam-static-colors=true]:is([data-animate],[data-fading]):after,&[data-beam-static-colors=true]:is([data-animate],[data-fading]):before{animation-name:none;filter:brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&[data-beam-static-colors=true]:is([data-animate],[data-fading]) [data-beam-bloom]{animation-name:none;filter:blur(8px) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&[data-beam-variant=pulse-outside][data-beam-static-colors=true]:is([data-animate],[data-fading]):before{filter:blur(var(--vui-beam-core-blur,3px)) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&[data-beam-variant=pulse-outside][data-beam-static-colors=true]:is([data-animate],[data-fading]) [data-beam-bloom]{filter:blur(var(--vui-beam-bloom-blur,22.5px)) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&[data-beam-variant=pulse-inside][data-beam-static-colors=true]:is([data-animate],[data-fading]):after,&[data-beam-variant=pulse-inside][data-beam-static-colors=true]:is([data-animate],[data-fading]):before{filter:brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&[data-beam-variant=pulse-inside][data-beam-static-colors=true]:is([data-animate],[data-fading]) [data-beam-bloom]{filter:blur(8px) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}}.viraui__beam-module__Bloom_XrnlV{pointer-events:none}@keyframes viraui__beam-module__vui-beam-spin_PCRBV{to{--vui-beam-angle:360deg}}@keyframes viraui__beam-module__vui-beam-fade-in_-pZOw{to{--vui-beam-opacity:1}}@keyframes viraui__beam-module__vui-beam-fade-out_ITNKo{0%{--vui-beam-opacity:1}to{--vui-beam-opacity:0}}@keyframes viraui__beam-module__vui-beam-hue-shift_9CzG5{0%,to{filter:hue-rotate(calc(var(--vui-beam-hue-base, 0deg) - var(--vui-beam-hue-range))) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}50%{filter:hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue-range))) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}}@keyframes viraui__beam-module__beam-travel_FuPkI{0%{--vui-beam-x:0.06;--vui-beam-w:0.5}10%{--vui-beam-x:0.15;--vui-beam-w:0.8}20%{--vui-beam-x:0.25;--vui-beam-w:1.1}30%{--vui-beam-x:0.35;--vui-beam-w:1.3}40%{--vui-beam-x:0.44;--vui-beam-w:1.45}50%{--vui-beam-x:0.5;--vui-beam-w:1.5}60%{--vui-beam-x:0.56;--vui-beam-w:1.45}70%{--vui-beam-x:0.65;--vui-beam-w:1.3}80%{--vui-beam-x:0.75;--vui-beam-w:1.1}90%{--vui-beam-x:0.85;--vui-beam-w:0.8}to{--vui-beam-x:0.94;--vui-beam-w:0.5}}@keyframes viraui__beam-module__beam-edge-fade_PXYJA{0%,12.5%,87.5%,to{--vui-beam-edge:0}32.5%,67.5%{--vui-beam-edge:1}}@keyframes viraui__beam-module__beam-breathe_3BBMd{0%,to{--vui-beam-h:0.8}25%{--vui-beam-h:1.25}55%{--vui-beam-h:0.85}80%{--vui-beam-h:1.3}}@keyframes viraui__beam-module__beam-spike_1iIfV{0%,to{--vui-beam-spike:0.8}25%{--vui-beam-spike:1.3}50%{--vui-beam-spike:0.9}75%{--vui-beam-spike:1.4}}@keyframes viraui__beam-module__beam-spike2_d1gJy{0%,to{--vui-beam-spike2:1.2}25%{--vui-beam-spike2:0.7}50%{--vui-beam-spike2:1.4}75%{--vui-beam-spike2:0.8}}@keyframes viraui__beam-module__beam-hue-shift-bloom_Onfv-{0%,to{filter:blur(8px) hue-rotate(calc(var(--vui-beam-hue-base, 0deg) - 40deg)) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}50%{filter:blur(8px) hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + 40deg)) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-beam-angle{syntax:"<angle>";inherits:true;initial-value:0deg}@property --vui-beam-opacity{syntax:"<number>";inherits:true;initial-value:0}@property --vui-beam-hue{syntax:"<angle>";inherits:true;initial-value:0deg}@property --vui-beam-hue-base{syntax:"<angle>";inherits:true;initial-value:0deg}@property --vui-beam-hue-range{syntax:"<angle>";inherits:true;initial-value:30deg}@property --vui-beam-duration{syntax:"<time>";inherits:true;initial-value:1.96s}@property --vui-beam-strength{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-brightness{syntax:"<number>";inherits:true;initial-value:1.3}@property --vui-beam-saturation{syntax:"<number>";inherits:true;initial-value:1.2}@property --vui-beam-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-beam-stroke-opacity{syntax:"<number>";inherits:true;initial-value:.26}@property --vui-beam-inner-opacity{syntax:"<number>";inherits:true;initial-value:.42}@property --vui-beam-bloom-opacity{syntax:"<number>";inherits:true;initial-value:.24}@property --vui-beam-core-blur{syntax:"<length>";inherits:true;initial-value:3px}@property --vui-beam-bloom-blur{syntax:"<length>";inherits:true;initial-value:22.5px}@property --vui-beam-pulse-glow-sx{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-pulse-glow-sy{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-pulse-glow-boost{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-x{syntax:"<number>";inherits:true;initial-value:0}@property --vui-beam-w{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-h{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-spike{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-spike2{syntax:"<number>";inherits:true;initial-value:1}@property --vui-beam-edge{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bw1{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bh1{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bw2{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bh2{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bw3{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bh3{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bgh{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bop-tl{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bop-tr{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bop-bl{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bop-br{syntax:"<number>";inherits:true;initial-value:1}@property --__beam-bx1{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-by1{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-bx2{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-by2{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-bx3{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-by3{syntax:"<length>";inherits:true;initial-value:0}@property --__beam-radius-tl{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__beam-radius-tr{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__beam-radius-br{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__beam-radius-bl{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__beam-c1{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c2{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c3{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c4{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c5{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c6{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c7{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c8{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c9{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c10{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c11{syntax:"<color>";inherits:true;initial-value:#0000}@property --__beam-c12{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__beam-module__Beam_xT5Pt{--__beam-radius-tl:var(--vui-surface-border-radius-top-left);--__beam-radius-tr:var(--vui-surface-border-radius-top-right);--__beam-radius-br:var(--vui-surface-border-radius-bottom-right);--__beam-radius-bl:var(--vui-surface-border-radius-bottom-left);--vui-beam-color:var(--global-primary);--__beam-c1:var(--vui-beam-color);--__beam-c2:var(--vui-beam-color);--__beam-c3:var(--vui-beam-color);--__beam-c4:var(--vui-beam-color);--__beam-c5:var(--vui-beam-color);--__beam-c6:var(--vui-beam-color);--__beam-c7:var(--vui-beam-color);--__beam-c8:var(--vui-beam-color);--__beam-c9:var(--vui-beam-color);--__beam-c10:var(--vui-beam-color);--__beam-c11:var(--vui-beam-color);--__beam-c12:var(--vui-beam-color);& [data-beam-bloom],&:after,&:before{@container style(--__corner-shape: round){--__corner-shape:round}}position:relative;z-index:0;&[data-paused],&[data-paused] [data-beam-bloom],&[data-paused]:after,&[data-paused]:before{animation-play-state:paused!important}&[data-beam-fit-content=true]{max-width:fit-content}&[data-beam-color=colorful]{--__beam-c1:#ff3264;--__beam-c2:#288cff;--__beam-c3:#32c850;--__beam-c4:#1eb9aa;--__beam-c5:#6446ff;--__beam-c6:#ff7828;--__beam-c7:#f032b4;--__beam-c8:#b428f0;--__beam-c9:#ff3c50;--__beam-c10:#ff3c50;--__beam-c11:#28beb4;--__beam-c12:#28beb4fa}&[data-beam-static-colors=true]{--vui-beam-hue-range:0deg}&[data-beam-static-colors=true] [data-beam-bloom],&[data-beam-static-colors=true]:after,&[data-beam-static-colors=true]:before{animation-name:none;filter:brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}@media (prefers-reduced-motion:reduce){&[data-animate],&[data-fading]{animation:none!important}& [data-beam-bloom],&:after,&:before{animation:none!important;filter:none!important}&[data-animate]:after,&[data-animate]:before{opacity:calc(.35 * var(--vui-beam-strength))}}&[data-beam-variant=border]{&[data-beam-size=medium]{border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);overflow:hidden;&[data-animate]{animation:viraui__beam-module__vui-beam-spin_PCRBV var(--vui-beam-duration) linear infinite,viraui__beam-module__vui-beam-fade-in_-pZOw .6s ease forwards}&[data-fading]{animation:viraui__beam-module__vui-beam-spin_PCRBV var(--vui-beam-duration) linear infinite,viraui__beam-module__vui-beam-fade-out_ITNKo .5s ease forwards}[data-beam-bloom]{display:none;position:absolute;inset:0;border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));background:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 58%,#ffffff08 62%,#ffffff14 65%,#fff3 67%,#ffffff73 69%,#ffffffd9 70%,#ffffffd9 70.5%,#ffffff73 71.5%,#fff3 73%,#ffffff14 75%,#ffffff08 78%,#0000 82%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:1px;filter:blur(8px) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation));pointer-events:none;z-index:3;opacity:0}&:is([data-animate],[data-fading]){&:after{border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));padding:1px;background:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 54%,#ffffff1a 57%,#ffffff4d 60%,#fff9 63%,#ffffffbf 66%,#fff9 69%,#ffffff4d 72%,#ffffff1a 75%,#0000 78%,#0000 100%),radial-gradient(ellipse 70px 40px at 33% -7.4%,var(--__beam-c1),#0000),radial-gradient(ellipse 60px 35px at 12% -5%,var(--__beam-c2),#0000),radial-gradient(ellipse 40px 70px at 2.1% 68.3%,var(--__beam-c3),#0000),radial-gradient(ellipse 20px 35px at 2.1% 68.3%,var(--__beam-c4),#0000),radial-gradient(ellipse 180px 32px at 74.4% 100%,var(--__beam-c5),#0000),radial-gradient(ellipse 85px 26px at 55% 100%,var(--__beam-c2),#0000),radial-gradient(ellipse 74px 32px at 93.9% 0,var(--__beam-c6),#0000),radial-gradient(ellipse 26px 42px at 100% 27.1%,var(--__beam-c7),#0000),radial-gradient(ellipse 52px 48px at 100% 27.1%,var(--__beam-c8),#0000);mask:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 30%,#ffffff1a 36%,#ffffff59 44%,#fff 52%,#fff 80%,#ffffff59 86%,#ffffff1a 92%,#0000 95%,#0000 100%),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:intersect,exclude;z-index:2;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-stroke-opacity) * var(--vui-beam-strength))}&:after,&:before{content:"";position:absolute;inset:0;pointer-events:none;animation:viraui__beam-module__vui-beam-hue-shift_9CzG5 12s ease-in-out infinite}&:before{border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);background:radial-gradient(ellipse 63px 36px at 33% -7.4%,oklab(from var(--__beam-c1) l a b/.45),#0000),radial-gradient(ellipse 54px 32px at 12% -5%,oklab(from var(--__beam-c2) l a b/.45),#0000),radial-gradient(ellipse 36px 63px at 2.1% 68.3%,oklab(from var(--__beam-c3) l a b/.45),#0000),radial-gradient(ellipse 18px 32px at 2.1% 68.3%,oklab(from var(--__beam-c4) l a b/.45),#0000),radial-gradient(ellipse 162px 29px at 74.4% 100%,oklab(from var(--__beam-c5) l a b/.45),#0000),radial-gradient(ellipse 77px 23px at 55% 100%,oklab(from var(--__beam-c2) l a b/.45),#0000),radial-gradient(ellipse 67px 29px at 93.9% 0,oklab(from var(--__beam-c6) l a b/.45),#0000),radial-gradient(ellipse 23px 38px at 100% 27.1%,oklab(from var(--__beam-c7) l a b/.45),#0000),radial-gradient(ellipse 47px 43px at 100% 27.1%,oklab(from var(--__beam-c8) l a b/.45),#0000);box-shadow:inset 0 0 9px 1px #ffffff45;mask-image:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 30%,#ffffff1a 36%,#ffffff59 44%,#fff 52%,#fff 80%,#ffffff59 86%,#ffffff1a 92%,#0000 95%,#0000 100%),linear-gradient(#fff,#0000 28px,#0000 calc(100% - 28px),#fff),linear-gradient(to right,#fff,#0000 28px,#0000 calc(100% - 28px),#fff);mask-composite:intersect,add;z-index:1;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-inner-opacity) * var(--vui-beam-strength))}[data-beam-bloom]{display:block;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-bloom-opacity) * var(--vui-beam-strength))}}}&[data-beam-size=small]{--vui-beam-stroke-opacity:0.46;--vui-beam-inner-opacity:0.24;--vui-beam-bloom-opacity:0.38;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);overflow:hidden;&[data-animate]{animation:viraui__beam-module__vui-beam-spin_PCRBV var(--vui-beam-duration) linear infinite,viraui__beam-module__vui-beam-fade-in_-pZOw .6s ease forwards}&[data-fading]{animation:viraui__beam-module__vui-beam-spin_PCRBV var(--vui-beam-duration) linear infinite,viraui__beam-module__vui-beam-fade-out_ITNKo .5s ease forwards}[data-beam-bloom]{display:none;position:absolute;inset:0;border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));background:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 58%,#ffffff08 62%,#ffffff14 65%,#fff3 67%,#ffffff73 69%,#ffffffd9 70%,#ffffffd9 70.5%,#ffffff73 71.5%,#fff3 73%,#ffffff14 75%,#ffffff08 78%,#0000 82%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:1px;filter:blur(8px) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation));pointer-events:none;z-index:3;opacity:0}&:is([data-animate],[data-fading]){&:after{border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));padding:1px;background:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 54%,#ffffff1a 57%,#ffffff4d 60%,#fff9 63%,#ffffffbf 66%,#fff9 69%,#ffffff4d 72%,#ffffff1a 75%,#0000 78%,#0000 100%),radial-gradient(ellipse 9px 18px at 2% 68%,var(--__beam-c3),#0000),radial-gradient(ellipse 4px 8px at 2% 68%,var(--__beam-c4),#0000),radial-gradient(ellipse 59px 9px at 72% -3%,var(--__beam-c6),#0000),radial-gradient(ellipse 42px 7px at 74% 100%,var(--__beam-c5),#0000),radial-gradient(ellipse 10px 17px at 100% 27%,var(--__beam-c7),#0000),radial-gradient(ellipse 10px 18px at 100% 27%,var(--__beam-c8),#0000),radial-gradient(ellipse 5px 10px at 100% 27%,var(--__beam-c2),#0000),radial-gradient(ellipse 11px 12px at 100% 27%,var(--__beam-c1),#0000);mask:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 30%,#ffffff1a 36%,#ffffff59 44%,#fff 52%,#fff 80%,#ffffff59 86%,#ffffff1a 92%,#0000 95%,#0000 100%),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:intersect,exclude;z-index:2;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-stroke-opacity) * var(--vui-beam-strength))}&:after,&:before{content:"";position:absolute;inset:0;pointer-events:none;animation:viraui__beam-module__vui-beam-hue-shift_9CzG5 12s ease-in-out infinite}&:before{border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);background:radial-gradient(ellipse 9px 18px at 2% 68%,oklab(from var(--__beam-c3) l a b/.5),#0000),radial-gradient(ellipse 4px 8px at 2% 68%,oklab(from var(--__beam-c4) l a b/.45),#0000),radial-gradient(ellipse 59px 9px at 72% -3%,oklab(from var(--__beam-c6) l a b/.35),#0000),radial-gradient(ellipse 42px 7px at 74% 100%,oklab(from var(--__beam-c5) l a b/.35),#0000),radial-gradient(ellipse 10px 17px at 100% 27%,oklab(from var(--__beam-c7) l a b/.3),#0000),radial-gradient(ellipse 10px 18px at 100% 27%,oklab(from var(--__beam-c8) l a b/.4),#0000),radial-gradient(ellipse 5px 10px at 100% 27%,oklab(from var(--__beam-c2) l a b/.3),#0000),radial-gradient(ellipse 11px 12px at 100% 27%,oklab(from var(--__beam-c1) l a b/.3),#0000);box-shadow:inset 0 0 5px 1px #ffffff45;mask-image:conic-gradient(from var(--vui-beam-angle),#0000 0,#0000 22%,#ffffff1f 28%,#fff6 36%,#fff 46%,#fff 82%,#fff6 88%,#ffffff1f 94%,#0000 97%,#0000 100%);mask-composite:add;z-index:1;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-inner-opacity) * var(--vui-beam-strength))}[data-beam-bloom]{display:block;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-bloom-opacity) * var(--vui-beam-strength))}}}}&[data-beam-variant=line]{--vui-beam-stroke-opacity:1.14;--vui-beam-inner-opacity:0.7;--vui-beam-bloom-opacity:0.8;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);overflow:hidden;&[data-animate]{animation:viraui__beam-module__beam-travel_FuPkI var(--vui-beam-duration) linear infinite,viraui__beam-module__beam-edge-fade_PXYJA var(--vui-beam-duration) linear infinite,viraui__beam-module__beam-breathe_3BBMd 4s ease-in-out infinite,viraui__beam-module__beam-spike_1iIfV 4.1s ease-in-out infinite,viraui__beam-module__beam-spike2_d1gJy 5.3s ease-in-out infinite,viraui__beam-module__vui-beam-fade-in_-pZOw .6s ease forwards}&[data-fading]{animation:viraui__beam-module__beam-travel_FuPkI var(--vui-beam-duration) linear infinite,viraui__beam-module__beam-edge-fade_PXYJA var(--vui-beam-duration) linear infinite,viraui__beam-module__beam-breathe_3BBMd 4s ease-in-out infinite,viraui__beam-module__beam-spike_1iIfV 4.1s ease-in-out infinite,viraui__beam-module__beam-spike2_d1gJy 5.3s ease-in-out infinite,viraui__beam-module__vui-beam-fade-out_ITNKo .5s ease forwards}[data-beam-bloom]{display:none;position:absolute;inset:0;border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));overflow:hidden;padding:0;mask:radial-gradient(ellipse calc(84px * var(--vui-beam-w)) calc(110px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) 100%,#fff 0,#ffffff80 35%,#0000 100%);mask-composite:add;background:radial-gradient(ellipse calc(.8px * var(--vui-beam-spike)) calc(92px * var(--vui-beam-h)) at 8% calc(100% - 2px),var(--__beam-c9),var(--__beam-c9) 30%,#0000 88%),radial-gradient(ellipse calc(10px * var(--vui-beam-spike2)) calc(35px * var(--vui-beam-h)) at 22% calc(100% - 4px),color-mix(in srgb,var(--__beam-c12) 98%,#0000),color-mix(in srgb,var(--__beam-c12) 49%,#0000) 50%,#0000 95%),radial-gradient(ellipse calc(2px * (2 - var(--vui-beam-spike))) calc(72px * var(--vui-beam-h)) at 36% calc(100% - 3px),var(--__beam-c5),color-mix(in srgb,var(--__beam-c5) 100%,#0000) 40%,#0000 90%),radial-gradient(ellipse calc(14px * var(--vui-beam-spike2)) calc(28px * var(--vui-beam-h)) at 50% calc(100% - 2px),#ffaa2896,#ffaa284a 55%,#0000 96%),radial-gradient(ellipse calc(1.2px * (2 - var(--vui-beam-spike2))) calc(85px * var(--vui-beam-h)) at 64% calc(100% - 4px),var(--__beam-c3),color-mix(in srgb,var(--__beam-c3) 100%,#0000) 35%,#0000 89%),radial-gradient(ellipse calc(7px * var(--vui-beam-spike)) calc(45px * var(--vui-beam-h)) at 78% calc(100% - 2px),color-mix(in srgb,var(--__beam-c8) 91%,#0000),color-mix(in srgb,var(--__beam-c8) 45%,#0000) 48%,#0000 94%),radial-gradient(ellipse calc(.6px * (2 - var(--vui-beam-spike))) calc(60px * var(--vui-beam-h)) at 92% calc(100% - 3px),var(--__beam-c2),color-mix(in srgb,var(--__beam-c2) 100%,#0000) 42%,#0000 91%),radial-gradient(ellipse calc(21px * var(--vui-beam-spike)) calc(15px * var(--vui-beam-spike2)) at calc(var(--vui-beam-x) * 100%) calc(100% + 1px),#fff 0,#ffffffe6 20%,#ffffff80 50%,#0000 100%),radial-gradient(ellipse calc(42px * var(--vui-beam-w)) calc(40px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) 100%,#ffffff4d 0,#ffffff1f 25%,#ffffff08 55%,#0000 80%);pointer-events:none;z-index:3;opacity:0}&:is([data-animate],[data-fading]){&:after{border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));padding:1px;background:radial-gradient(ellipse calc(24px * var(--vui-beam-w)) calc(28px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) calc(100% + 2px),#ffffff61 0,#ffffff1f 30%,#0000 65%),radial-gradient(ellipse calc(36px * var(--vui-beam-w)) calc(36px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) calc(100% + 2px),var(--__beam-c1),#0000),radial-gradient(ellipse calc(30px * var(--vui-beam-w)) calc(32px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 39px) calc(100%),var(--__beam-c4),#0000),radial-gradient(ellipse calc(33px * var(--vui-beam-w)) calc(28px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 36px) calc(100% + 2px),var(--__beam-c3),#0000),radial-gradient(ellipse calc(29px * var(--vui-beam-w)) calc(34px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 54px) calc(100%),var(--__beam-c8),#0000),radial-gradient(ellipse calc(27px * var(--vui-beam-w)) calc(30px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 51px) calc(100% - 1px),var(--__beam-c6),#0000),radial-gradient(ellipse calc(36px * var(--vui-beam-w)) calc(24px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 21px) calc(100% + 1px),var(--__beam-c5),#0000),radial-gradient(ellipse calc(30px * var(--vui-beam-w)) calc(22px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 21px) calc(100%),var(--__beam-c2),#0000),radial-gradient(ellipse calc(25px * var(--vui-beam-w)) calc(28px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 66px) calc(100% + 1px),var(--__beam-c7),#0000),radial-gradient(ellipse calc(23px * var(--vui-beam-w)) calc(30px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 66px) calc(100% - 1px),var(--__beam-c4),#0000);mask:radial-gradient(ellipse calc(78px * var(--vui-beam-w)) calc(60px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) 100%,#fff 0,#ffffff80 45%,#0000 100%),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:intersect,exclude;z-index:2;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-edge) * var(--vui-beam-stroke-opacity) * var(--vui-beam-strength))}&:after,&:before{content:"";position:absolute;inset:0;overflow:hidden;pointer-events:none;animation:viraui__beam-module__vui-beam-hue-shift_9CzG5 12s ease-in-out infinite}&:before{border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);background:radial-gradient(ellipse calc(33px * var(--vui-beam-w)) calc(30px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) calc(100%),color-mix(in srgb,var(--__beam-c1) 48%,#0000),#0000),radial-gradient(ellipse calc(24px * var(--vui-beam-w)) calc(26px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 39px) calc(100% - 3px),color-mix(in srgb,var(--__beam-c4) 42%,#0000),#0000),radial-gradient(ellipse calc(27px * var(--vui-beam-w)) calc(24px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 36px) calc(100%),color-mix(in srgb,var(--__beam-c3) 48%,#0000),#0000),radial-gradient(ellipse calc(23px * var(--vui-beam-w)) calc(28px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 54px) calc(100% - 2px),color-mix(in srgb,var(--__beam-c8) 42%,#0000),#0000),radial-gradient(ellipse calc(24px * var(--vui-beam-w)) calc(24px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 51px) calc(100% - 1px),color-mix(in srgb,var(--__beam-c6) 50%,#0000),#0000),radial-gradient(ellipse calc(30px * var(--vui-beam-w)) calc(20px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 21px) calc(100%),color-mix(in srgb,var(--__beam-c5) 45%,#0000),#0000),radial-gradient(ellipse calc(25px * var(--vui-beam-w)) calc(18px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 21px) calc(100% - 2px),color-mix(in srgb,var(--__beam-c2) 40%,#0000),#0000),radial-gradient(ellipse calc(21px * var(--vui-beam-w)) calc(24px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% + 66px) calc(100%),color-mix(in srgb,var(--__beam-c7) 45%,#0000),#0000),radial-gradient(ellipse calc(18px * var(--vui-beam-w)) calc(26px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100% - 66px) calc(100% - 1px),color-mix(in srgb,var(--__beam-c4) 52%,#0000),#0000);box-shadow:inset 0 0 9px 1px #ffffff45;mask-image:radial-gradient(ellipse calc(78px * var(--vui-beam-w)) calc(60px * var(--vui-beam-h)) at calc(var(--vui-beam-x) * 100%) 100%,#fff 0,#ffffff80 45%,#0000 100%),linear-gradient(#fff,#0000 28px,#0000 calc(100% - 28px),#fff),linear-gradient(to right,#fff,#0000 28px,#0000 calc(100% - 28px),#fff);mask-composite:intersect,add;z-index:1;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-edge) * var(--vui-beam-inner-opacity) * var(--vui-beam-strength))}[data-beam-bloom]{display:block;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-edge) * var(--vui-beam-bloom-opacity) * var(--vui-beam-strength));animation:viraui__beam-module__beam-hue-shift-bloom_Onfv- 8s ease-in-out infinite}}}&[data-beam-variant=pulse-inside]{--vui-beam-stroke-opacity:1.54;--vui-beam-inner-opacity:0.44;--vui-beam-bloom-opacity:0.66;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);overflow:hidden;isolation:isolate;&[data-animate]{animation:viraui__beam-module__vui-beam-fade-in_-pZOw .6s ease forwards}&[data-fading]{animation:viraui__beam-module__vui-beam-fade-out_ITNKo .5s ease forwards}[data-beam-bloom]{display:none;position:absolute;inset:0;border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));background:radial-gradient(ellipse 84px 48px at 33% -7.4%,oklab(from var(--__beam-c1) l a b/.76),#0000),radial-gradient(ellipse 72px 42px at 12% -5%,oklab(from var(--__beam-c2) l a b/.76),#0000),radial-gradient(ellipse 48px 84px at 2.1% 68.3%,oklab(from var(--__beam-c3) l a b/.76),#0000),radial-gradient(ellipse 216px 38px at 74.4% 100%,oklab(from var(--__beam-c5) l a b/.76),#0000),radial-gradient(ellipse 102px 31px at 55% 100%,oklab(from var(--__beam-c2) l a b/.76),#0000),radial-gradient(ellipse 89px 38px at 93.9% 0,oklab(from var(--__beam-c6) l a b/.76),#0000),radial-gradient(ellipse 62px 58px at 100% 27.1%,oklab(from var(--__beam-c8) l a b/.76),#0000);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:1px;pointer-events:none;z-index:3;opacity:0}&:is([data-animate],[data-fading]){&:after{border-radius:max(0px,calc(var(--__beam-radius-tl) - 1px)) max(0px,calc(var(--__beam-radius-tr) - 1px)) max(0px,calc(var(--__beam-radius-br) - 1px)) max(0px,calc(var(--__beam-radius-bl) - 1px));padding:1px;background:radial-gradient(ellipse calc(70px * var(--__beam-bw1)) calc(40px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(33% + var(--__beam-bx1)) calc(-7.4% + var(--__beam-by1)),oklab(from var(--__beam-c1) l a b/var(--__beam-bop-tl)),#0000),radial-gradient(ellipse calc(60px * var(--__beam-bw2)) calc(35px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(12% + var(--__beam-bx2)) calc(-5% + var(--__beam-by2)),oklab(from var(--__beam-c2) l a b/var(--__beam-bop-tl)),#0000),radial-gradient(ellipse calc(40px * var(--__beam-bw3)) calc(70px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(2.1% + var(--__beam-bx3)) calc(68.3% + var(--__beam-by3)),oklab(from var(--__beam-c3) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(20px * var(--__beam-bw1)) calc(35px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(2.1% + var(--__beam-bx1)) calc(68.3% + var(--__beam-by1)),oklab(from var(--__beam-c4) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(180px * var(--__beam-bw2)) calc(32px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(74.4% + var(--__beam-bx2)) calc(100% + var(--__beam-by2)),oklab(from var(--__beam-c5) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(85px * var(--__beam-bw3)) calc(26px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(55% + var(--__beam-bx3)) calc(100% + var(--__beam-by3)),oklab(from var(--__beam-c2) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(74px * var(--__beam-bw1)) calc(32px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(93.9% + var(--__beam-bx1)) calc(0% + var(--__beam-by1)),oklab(from var(--__beam-c6) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(26px * var(--__beam-bw2)) calc(42px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(100% + var(--__beam-bx2)) calc(27.1% + var(--__beam-by2)),oklab(from var(--__beam-c7) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(52px * var(--__beam-bw3)) calc(48px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(100% + var(--__beam-bx3)) calc(27.1% + var(--__beam-by3)),oklab(from var(--__beam-c8) l a b/var(--__beam-bop-tr)),#0000);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;z-index:2;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-stroke-opacity) * var(--vui-beam-strength))}&:after,&:before{content:"";position:absolute;inset:0;pointer-events:none;filter:hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue))) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&:before{border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);background:radial-gradient(ellipse calc(65px * var(--__beam-bw1)) calc(35px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(33% + var(--__beam-bx1)) calc(-7.4% + var(--__beam-by1)),oklab(from var(--__beam-c1) l a b/var(--__beam-bop-tl)),#0000),radial-gradient(ellipse calc(55px * var(--__beam-bw2)) calc(30px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(12% + var(--__beam-bx2)) calc(-5% + var(--__beam-by2)),oklab(from var(--__beam-c2) l a b/var(--__beam-bop-tl)),#0000),radial-gradient(ellipse calc(35px * var(--__beam-bw3)) calc(65px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(2.1% + var(--__beam-bx3)) calc(68.3% + var(--__beam-by3)),oklab(from var(--__beam-c3) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(15px * var(--__beam-bw1)) calc(30px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(2.1% + var(--__beam-bx1)) calc(68.3% + var(--__beam-by1)),oklab(from var(--__beam-c4) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(173px * var(--__beam-bw2)) calc(28px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(74.4% + var(--__beam-bx2)) calc(100% + var(--__beam-by2)),oklab(from var(--__beam-c5) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(80px * var(--__beam-bw3)) calc(22px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(55% + var(--__beam-bx3)) calc(100% + var(--__beam-by3)),oklab(from var(--__beam-c2) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(69px * var(--__beam-bw1)) calc(28px * var(--__beam-bh1) * var(--__beam-bgh)) at calc(93.9% + var(--__beam-bx1)) calc(0% + var(--__beam-by1)),oklab(from var(--__beam-c6) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(22px * var(--__beam-bw2)) calc(38px * var(--__beam-bh2) * var(--__beam-bgh)) at calc(100% + var(--__beam-bx2)) calc(27.1% + var(--__beam-by2)),oklab(from var(--__beam-c7) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(47px * var(--__beam-bw3)) calc(44px * var(--__beam-bh3) * var(--__beam-bgh)) at calc(100% + var(--__beam-bx3)) calc(27.1% + var(--__beam-by3)),oklab(from var(--__beam-c8) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse 60px 60px at 0 0,rgba(255,255,255,calc(.18 * var(--__beam-bop-tl))),#0000 70%),radial-gradient(ellipse 60px 60px at 100% 0,rgba(255,255,255,calc(.18 * var(--__beam-bop-tr))),#0000 70%),radial-gradient(ellipse 60px 60px at 0 100%,rgba(255,255,255,calc(.18 * var(--__beam-bop-bl))),#0000 70%),radial-gradient(ellipse 60px 60px at 100% 100%,rgba(255,255,255,calc(.18 * var(--__beam-bop-br))),#0000 70%);mask-image:linear-gradient(#fff,#0000 28px,#0000 calc(100% - 28px),#fff),linear-gradient(90deg,#fff,#0000 28px,#0000 calc(100% - 28px),#fff);mask-composite:add;z-index:1;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-inner-opacity) * var(--vui-beam-strength))}[data-beam-bloom]{display:block;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-bloom-opacity) * var(--vui-beam-strength));filter:blur(8px) hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue))) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}}@media (prefers-reduced-motion:reduce){&:is([data-animate],[data-fading]),&:is([data-animate],[data-fading]) [data-beam-bloom],&:is([data-animate],[data-fading]):after,&:is([data-animate],[data-fading]):before{animation:none!important}}}&[data-beam-variant=pulse-outside]{--vui-beam-stroke-opacity:0.94;--vui-beam-inner-opacity:0.34;--vui-beam-bloom-opacity:0.3;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);overflow:visible;isolation:isolate;&>:not([data-beam-bloom]){position:relative;z-index:1}&[data-animate]{animation:viraui__beam-module__vui-beam-fade-in_-pZOw .6s ease forwards}&[data-fading]{animation:viraui__beam-module__vui-beam-fade-out_ITNKo .5s ease forwards}[data-beam-bloom]{display:none;position:absolute;inset:-30px;z-index:-1;border-radius:calc(var(--__beam-radius-tl) + 30px) calc(var(--__beam-radius-tr) + 30px) calc(var(--__beam-radius-br) + 30px) calc(var(--__beam-radius-bl) + 30px);background:radial-gradient(ellipse calc(110px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(30px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 27% 3%,color-mix(in srgb,var(--__beam-c1) 77%,#0000),#0000),radial-gradient(ellipse calc(100px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(20px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 73% 1%,color-mix(in srgb,var(--__beam-c6) 77%,#0000),#0000),radial-gradient(ellipse calc(26px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(62px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 100% 33%,color-mix(in srgb,var(--__beam-c7) 77%,#0000),#0000),radial-gradient(ellipse calc(30px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(56px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 101% 72%,color-mix(in srgb,var(--__beam-c8) 77%,#0000),#0000),radial-gradient(ellipse calc(120px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(22px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 67% 99%,color-mix(in srgb,var(--__beam-c5) 77%,#0000),#0000),radial-gradient(ellipse calc(88px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(32px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 24% 99%,color-mix(in srgb,var(--__beam-c2) 77%,#0000),#0000),radial-gradient(ellipse calc(28px * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(58px * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at 0 60%,color-mix(in srgb,var(--__beam-c3) 77%,#0000),#0000);transform:scale(.95,.9);pointer-events:none;opacity:0}&:is([data-animate],[data-fading]){&:after{inset:0;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);overflow:hidden;padding:1px;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;z-index:2;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-stroke-opacity) * var(--vui-beam-strength));filter:hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue))) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&:after,&:before{content:"";position:absolute;background:radial-gradient(ellipse calc(80px * var(--__beam-bw1) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(19px * var(--__beam-bh1) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(27% + var(--__beam-bx1)) calc(0% + var(--__beam-by1)),oklab(from var(--__beam-c1) l a b/var(--__beam-bop-tl)),#0000),radial-gradient(ellipse calc(74px * var(--__beam-bw2) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(11px * var(--__beam-bh2) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(73% + var(--__beam-bx2)) calc(-1% + var(--__beam-by2)),oklab(from var(--__beam-c6) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(15px * var(--__beam-bw3) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(44px * var(--__beam-bh3) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(100% + var(--__beam-bx3)) calc(33% + var(--__beam-by3)),oklab(from var(--__beam-c7) l a b/var(--__beam-bop-tr)),#0000),radial-gradient(ellipse calc(19px * var(--__beam-bw1) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(38px * var(--__beam-bh1) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(101% + var(--__beam-bx1)) calc(72% + var(--__beam-by1)),oklab(from var(--__beam-c8) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(84px * var(--__beam-bw2) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(13px * var(--__beam-bh2) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(67% + var(--__beam-bx2)) calc(100% + var(--__beam-by2)),oklab(from var(--__beam-c5) l a b/var(--__beam-bop-br)),#0000),radial-gradient(ellipse calc(60px * var(--__beam-bw3) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(21px * var(--__beam-bh3) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(24% + var(--__beam-bx3)) calc(101% + var(--__beam-by3)),oklab(from var(--__beam-c2) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(17px * var(--__beam-bw1) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(40px * var(--__beam-bh1) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(0% + var(--__beam-bx1)) calc(60% + var(--__beam-by1)),oklab(from var(--__beam-c3) l a b/var(--__beam-bop-bl)),#0000),radial-gradient(ellipse calc(13px * var(--__beam-bw2) * var(--vui-beam-pulse-glow-sx, 1) * var(--vui-beam-pulse-glow-boost, 1)) calc(32px * var(--__beam-bh2) * var(--__beam-bgh) * var(--vui-beam-pulse-glow-sy, 1) * var(--vui-beam-pulse-glow-boost, 1)) at calc(-1% + var(--__beam-bx2)) calc(28% + var(--__beam-by2)),oklab(from var(--__beam-c4) l a b/var(--__beam-bop-tl)),#0000);pointer-events:none}&:before{inset:-10px;z-index:-1;border-radius:calc(var(--__beam-radius-tl) + 10px) calc(var(--__beam-radius-tr) + 10px) calc(var(--__beam-radius-br) + 10px) calc(var(--__beam-radius-bl) + 10px);transform:scale(.95,.9);opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-inner-opacity) * var(--vui-beam-strength));filter:blur(var(--vui-beam-core-blur,3px)) hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue))) brightness(var(--vui-beam-brightness,1.3)) saturate(var(--vui-beam-saturation,1.2))}[data-beam-bloom]{display:block;opacity:calc(var(--vui-beam-opacity) * var(--vui-beam-bloom-opacity) * var(--vui-beam-strength));filter:blur(var(--vui-beam-bloom-blur,22.5px)) hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue))) brightness(var(--vui-beam-brightness,1.3)) saturate(var(--vui-beam-saturation,1.2))}}@media (prefers-reduced-motion:reduce){&:is([data-animate],[data-fading]),&:is([data-animate],[data-fading]) [data-beam-bloom],&:is([data-animate],[data-fading]):after,&:is([data-animate],[data-fading]):before{animation:none!important}}}&[data-beam-static-colors=true]:is([data-animate],[data-fading]):after,&[data-beam-static-colors=true]:is([data-animate],[data-fading]):before{animation-name:none;filter:brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&[data-beam-static-colors=true]:is([data-animate],[data-fading]) [data-beam-bloom]{animation-name:none;filter:blur(8px) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&[data-beam-variant=pulse-outside][data-beam-static-colors=true]:is([data-animate],[data-fading]):before{filter:blur(var(--vui-beam-core-blur,3px)) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&[data-beam-variant=pulse-outside][data-beam-static-colors=true]:is([data-animate],[data-fading]) [data-beam-bloom]{filter:blur(var(--vui-beam-bloom-blur,22.5px)) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&[data-beam-variant=pulse-inside][data-beam-static-colors=true]:is([data-animate],[data-fading]):after,&[data-beam-variant=pulse-inside][data-beam-static-colors=true]:is([data-animate],[data-fading]):before{filter:brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}&[data-beam-variant=pulse-inside][data-beam-static-colors=true]:is([data-animate],[data-fading]) [data-beam-bloom]{filter:blur(8px) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}}.viraui__beam-module__Bloom_XrnlV{pointer-events:none}@keyframes viraui__beam-module__vui-beam-spin_PCRBV{to{--vui-beam-angle:360deg}}@keyframes viraui__beam-module__vui-beam-fade-in_-pZOw{to{--vui-beam-opacity:1}}@keyframes viraui__beam-module__vui-beam-fade-out_ITNKo{0%{--vui-beam-opacity:1}to{--vui-beam-opacity:0}}@keyframes viraui__beam-module__vui-beam-hue-shift_9CzG5{0%,to{filter:hue-rotate(calc(var(--vui-beam-hue-base, 0deg) - var(--vui-beam-hue-range))) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}50%{filter:hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + var(--vui-beam-hue-range))) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}}@keyframes viraui__beam-module__beam-travel_FuPkI{0%{--vui-beam-x:0.06;--vui-beam-w:0.5}10%{--vui-beam-x:0.15;--vui-beam-w:0.8}20%{--vui-beam-x:0.25;--vui-beam-w:1.1}30%{--vui-beam-x:0.35;--vui-beam-w:1.3}40%{--vui-beam-x:0.44;--vui-beam-w:1.45}50%{--vui-beam-x:0.5;--vui-beam-w:1.5}60%{--vui-beam-x:0.56;--vui-beam-w:1.45}70%{--vui-beam-x:0.65;--vui-beam-w:1.3}80%{--vui-beam-x:0.75;--vui-beam-w:1.1}90%{--vui-beam-x:0.85;--vui-beam-w:0.8}to{--vui-beam-x:0.94;--vui-beam-w:0.5}}@keyframes viraui__beam-module__beam-edge-fade_PXYJA{0%,12.5%,87.5%,to{--vui-beam-edge:0}32.5%,67.5%{--vui-beam-edge:1}}@keyframes viraui__beam-module__beam-breathe_3BBMd{0%,to{--vui-beam-h:0.8}25%{--vui-beam-h:1.25}55%{--vui-beam-h:0.85}80%{--vui-beam-h:1.3}}@keyframes viraui__beam-module__beam-spike_1iIfV{0%,to{--vui-beam-spike:0.8}25%{--vui-beam-spike:1.3}50%{--vui-beam-spike:0.9}75%{--vui-beam-spike:1.4}}@keyframes viraui__beam-module__beam-spike2_d1gJy{0%,to{--vui-beam-spike2:1.2}25%{--vui-beam-spike2:0.7}50%{--vui-beam-spike2:1.4}75%{--vui-beam-spike2:0.8}}@keyframes viraui__beam-module__beam-hue-shift-bloom_Onfv-{0%,to{filter:blur(8px) hue-rotate(calc(var(--vui-beam-hue-base, 0deg) - 40deg)) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}50%{filter:blur(8px) hue-rotate(calc(var(--vui-beam-hue-base, 0deg) + 40deg)) brightness(var(--vui-beam-brightness)) saturate(var(--vui-beam-saturation))}}}
package/dist/components/button/button.css CHANGED
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2x-large);--vui-button-padding-inline:calc(var(--space-small) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-medium);max-block-size:min-content;-webkit-user-select:none;user-select:none;margin-block:0;margin-inline:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:var(--vui-button-height);block-size:var(--vui-button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-medium);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{border-radius:var(--radius-infinite)}&[data-size=large]{--vui-button-height:calc(var(--space-2x-large) + var(--space-x-small));--vui-button-padding-inline:calc(var(--space-medium) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-radius:var(--radius-medium)}&[data-size=small]{--vui-button-height:var(--space-x-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-x-small);--vui-button-icon-size:1em;--vui-button-radius:var(--radius-small);gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b / calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b / 0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b / 12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b / 30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-variant=flat]:is(:disabled,[aria-disabled=true]),&[data-variant=flat]:is(:disabled,[aria-disabled=true]):active,&[data-variant=flat]:is(:disabled,[aria-disabled=true]):hover{--vui-button-background:#0000}&[data-loading=true]:is(:disabled,[data-disabled],[aria-disabled=true]){pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:var(--vui-button-icon-size);inline-size:var(--vui-button-icon-size);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2x-large);--vui-button-padding-inline:calc(var(--space-small) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:calc(var(--vui-button-height) / 1.8);--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-medium);max-block-size:min-content;-webkit-user-select:none;user-select:none;margin-block:0;margin-inline:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:round(to-zero,var(--vui-button-height),2px);block-size:round(to-zero,var(--vui-button-height),2px);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-medium);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{--__corner-shape:round;border-radius:var(--radius-infinite)}&[data-size=large]{--vui-button-height:calc(var(--space-2x-large) + var(--space-x-small));--vui-button-padding-inline:calc(var(--space-medium) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-radius:var(--radius-medium)}&[data-size=small]{--vui-button-height:var(--space-x-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-x-small);--vui-button-radius:var(--radius-small);gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b / calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b / 0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b / 12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b / 30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-variant=flat]:is(:disabled,[aria-disabled=true]),&[data-variant=flat]:is(:disabled,[aria-disabled=true]):active,&[data-variant=flat]:is(:disabled,[aria-disabled=true]):hover{--vui-button-background:#0000}&[data-loading=true]:is(:disabled,[data-disabled],[aria-disabled=true]){pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:var(--vui-button-icon-size);inline-size:var(--vui-button-icon-size);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}
package/dist/components/checkbox/checkbox.js CHANGED
@@ -11,7 +11,6 @@ import { Checkbox } from "@base-ui/react/checkbox";
11
11
  //#region src/components/checkbox/checkbox.tsx
12
12
  var Checkbox$1 = ({ className, description, disabled, error, label, ref, size = "small", vPadding, hPadding, value, ...checkboxRootProps }) => {
13
13
  const hasTextDescription = Boolean(description || error);
14
- const iconSize = size === "small" ? 12 : 16;
15
14
  return /* @__PURE__ */ jsx(Field.Item, {
16
15
  className: checkbox_module_default.Checkbox,
17
16
  children: /* @__PURE__ */ jsx(Field.Label, {
@@ -31,13 +30,7 @@ var Checkbox$1 = ({ className, description, disabled, error, label, ref, size =
31
30
  value,
32
31
  children: /* @__PURE__ */ jsxs(Checkbox.Indicator, {
33
32
  className: checkbox_module_default.Indicator,
34
- children: [/* @__PURE__ */ jsx(ChromeCheck, {
35
- className: checkbox_module_default.CheckIcon,
36
- size: iconSize
37
- }), /* @__PURE__ */ jsx(ChromeMinus, {
38
- className: checkbox_module_default.MinusIcon,
39
- size: iconSize
40
- })]
33
+ children: [/* @__PURE__ */ jsx(ChromeCheck, { className: checkbox_module_default.CheckIcon }), /* @__PURE__ */ jsx(ChromeMinus, { className: checkbox_module_default.MinusIcon })]
41
34
  })
42
35
  }), label || description || error ? /* @__PURE__ */ jsxs(Stack, {
43
36
  rowGap: "small",
package/dist/components/chip/chip.css CHANGED
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-chip-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-chip-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-chip-color-bg-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:15%}@property --vui-chip-color-border-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:0}.viraui__chip-module__Chip_2D18T{--vui-chip-background:var(--global-primary);--vui-chip-color:contrast-color(var(--global-primary));--vui-chip-height:var(--space-large);--vui-chip-icon-size:0.9em;block-size:var(--vui-chip-height);border:1px solid var(--vui-chip-border-color);border-radius:var(--radius-infinite);background:var(--vui-chip-background);color:var(--vui-chip-color);font-size:var(--font-scale-body-small);font-variation-settings:"wght" 400;text-decoration:none;white-space:nowrap;overflow:hidden;max-inline-size:max-content;min-inline-size:max-content;@container root style(--is-light-mode: black){--vui-chip-color-bg-opacity:10%}&[data-variant=secondary]{--vui-chip-background:var(--global-contrast);--vui-chip-color:var(--base-6)}&[data-variant=outline]{--vui-chip-background:#0000;--vui-chip-border-color:oklab(from var(--global-contrast) l a b / 0.2);--vui-chip-color:var(--base-6)}&[data-variant=gray]{--vui-chip-color:var(--highlight-gray)}&[data-variant=gray],&[data-variant=slate]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=slate]{--vui-chip-color:var(--highlight-slate)}&[data-variant=yellow]{--vui-chip-color:var(--highlight-yellow)}&[data-variant=green],&[data-variant=yellow]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=green]{--vui-chip-color:var(--highlight-green)}&[data-variant=blue]{--vui-chip-color:var(--highlight-blue)}&[data-variant=blue],&[data-variant=red]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=red]{--vui-chip-color:var(--highlight-red)}&[data-variant=cyan]{--vui-chip-color:var(--highlight-cyan)}&[data-variant=cyan],&[data-variant=purple]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=purple]{--vui-chip-color:var(--highlight-purple)}&[data-variant=indigo]{--vui-chip-color:var(--highlight-indigo)}&[data-variant=acid],&[data-variant=indigo]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=acid]{--vui-chip-color:var(--highlight-acid)}&[data-variant=salmon]{--vui-chip-color:var(--highlight-salmon)}&[data-variant=magenta],&[data-variant=salmon]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=magenta]{--vui-chip-color:var(--highlight-magenta)}}.viraui__chip-module__Content_7mLuL{min-block-size:100%;padding-inline:var(--space-small);.viraui__chip-module__Chip_2D18T[data-addon-position=start] &{padding-inline-start:var(--space-small);padding-inline-end:calc(var(--space-small) + var(--space-2x-small))}.viraui__chip-module__Chip_2D18T[data-addon-position=end] &{padding-inline-start:calc(var(--space-small) + var(--space-2x-small));padding-inline-end:var(--space-small)}}.viraui__chip-module__IconSlot_9N5vD{display:inline-grid;place-items:center;>svg{inline-size:var(--vui-chip-icon-size);block-size:var(--vui-chip-icon-size)}}.viraui__chip-module__Label_Hdx7l{display:inline-block;overflow:hidden;text-overflow:ellipsis}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-chip-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-chip-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-chip-color-bg-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:15%}@property --vui-chip-color-border-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:0}.viraui__chip-module__Chip_2D18T{--vui-chip-background:var(--global-primary);--vui-chip-color:contrast-color(var(--global-primary));--vui-chip-height:var(--space-large);--vui-chip-icon-size:calc(var(--vui-chip-height) / 1.8);--__corner-shape:round;block-size:round(to-zero,var(--vui-chip-height),2px);border:1px solid var(--vui-chip-border-color);border-radius:var(--radius-infinite);background:var(--vui-chip-background);color:var(--vui-chip-color);font-size:var(--font-scale-body-small);font-variation-settings:"wght" 400;text-decoration:none;white-space:nowrap;overflow:hidden;max-inline-size:max-content;min-inline-size:max-content;@container root style(--is-light-mode: black){--vui-chip-color-bg-opacity:10%}&[data-variant=secondary]{--vui-chip-background:var(--global-contrast);--vui-chip-color:var(--base-6)}&[data-variant=outline]{--vui-chip-background:#0000;--vui-chip-border-color:oklab(from var(--global-contrast) l a b / 0.2);--vui-chip-color:var(--base-6)}&[data-variant=gray]{--vui-chip-color:var(--highlight-gray)}&[data-variant=gray],&[data-variant=slate]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=slate]{--vui-chip-color:var(--highlight-slate)}&[data-variant=yellow]{--vui-chip-color:var(--highlight-yellow)}&[data-variant=green],&[data-variant=yellow]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=green]{--vui-chip-color:var(--highlight-green)}&[data-variant=blue]{--vui-chip-color:var(--highlight-blue)}&[data-variant=blue],&[data-variant=red]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=red]{--vui-chip-color:var(--highlight-red)}&[data-variant=cyan]{--vui-chip-color:var(--highlight-cyan)}&[data-variant=cyan],&[data-variant=purple]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=purple]{--vui-chip-color:var(--highlight-purple)}&[data-variant=indigo]{--vui-chip-color:var(--highlight-indigo)}&[data-variant=acid],&[data-variant=indigo]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=acid]{--vui-chip-color:var(--highlight-acid)}&[data-variant=salmon]{--vui-chip-color:var(--highlight-salmon)}&[data-variant=magenta],&[data-variant=salmon]{--vui-chip-background:oklab(from currentColor l a b / var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b / var(--vui-chip-color-border-opacity))}&[data-variant=magenta]{--vui-chip-color:var(--highlight-magenta)}}.viraui__chip-module__Content_7mLuL{min-block-size:100%;padding-inline:var(--space-small);.viraui__chip-module__Chip_2D18T[data-addon-position=start] &{padding-inline-start:var(--space-small);padding-inline-end:calc(var(--space-small) + var(--space-2x-small))}.viraui__chip-module__Chip_2D18T[data-addon-position=end] &{padding-inline-start:calc(var(--space-small) + var(--space-2x-small));padding-inline-end:var(--space-small)}}.viraui__chip-module__IconSlot_9N5vD{display:inline-grid;place-items:center;>svg{inline-size:var(--vui-chip-icon-size);block-size:var(--vui-chip-icon-size)}}.viraui__chip-module__Label_Hdx7l{display:inline-block;overflow:hidden;text-overflow:ellipsis}}
package/dist/components/dialog/dialog.css CHANGED
@@ -11,4 +11,4 @@
11
11
  );--__dialog-translate-y:calc(
12
12
  var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px) - var(--__dialog-stack-peek-offset) -
13
13
  var(--__dialog-stack-shrink) * var(--__dialog-stack-height)
14
- );max-block-size:var(--vui-dialog-max-block-size,97dvh);outline:none;pointer-events:auto;touch-action:none;height:var(--drawer-height,auto);transform-origin:50% calc(100% - var(--__dialog-bleed));transition:opacity var(--duration-fast) var(--easing-entrance),transform var(--duration-fast) var(--easing-entrance),height var(--duration-fast) var(--easing-entrance);transform:translateY(var(--__dialog-translate-y)) scale(var(--__dialog-stack-scale));&[data-nested-drawer-open]{height:calc(var(--__dialog-stack-height) + var(--__dialog-bleed))}&[data-starting-style]{opacity:0;transform:translateY(100%)}&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength, 1) * var(--duration-fast))}&[data-ending-style][data-swipe-direction=down]{transform:translateY(100%)}&[data-nested-drawer-swiping]:not([data-ending-style]),&[data-swiping]:not([data-ending-style]){transition-duration:0s}@media (prefers-reduced-motion:reduce){&[data-ending-style][data-swipe-direction=down],&[data-starting-style]{opacity:1;transform:translateY(0)}}}.viraui__dialog-module__HandleShape_mEg8R{inline-size:var(--space-x-small);block-size:var(--space-x-small);background-color:oklab(from var(--global-contrast) l a b/.3);border-radius:var(--radius-infinite)}.viraui__dialog-module__Header_WnBly{touch-action:none;-webkit-user-select:none;user-select:none}.viraui__dialog-module__Body_9-UgN{min-block-size:0}.viraui__dialog-module__Content_r8lJc{min-block-size:0;overflow:auto;overscroll-behavior:contain;touch-action:auto;padding-block-end:calc(env(safe-area-inset-bottom) + var(--space-medium));transition:opacity var(--duration-fast) var(--easing-standard),overflow 0s allow-discrete var(--duration-fast);.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open] &{opacity:0;overflow:hidden;transition:opacity var(--duration-fast) var(--easing-standard),overflow 0s allow-discrete}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open][data-nested-drawer-swiping] &{opacity:1;overflow:hidden}}.viraui__dialog-module__IndentBackground_OEfbh{position:absolute;inset:0}.viraui__dialog-module__Indent_qfiNW{--__dialog-indent-radius:calc(1rem * (1 - var(--drawer-swipe-progress)));--__dialog-indent-transition:calc(1 - clamp(0, calc(var(--drawer-swipe-progress) * 100000), 1));transition:transform var(--duration-normal) var(--easing-entrance),border-radius var(--duration-fast) var(--easing-entrance);transition-duration:calc(var(--duration-normal) * var(--__dialog-indent-transition)),calc(var(--duration-fast) * var(--__dialog-indent-transition));transform-origin:center top;will-change:transform;&[data-active]{transform:scale(calc(.98 + (.02 * var(--drawer-swipe-progress)))) translateY(calc(.5rem * (1 - var(--drawer-swipe-progress))));border-top-left-radius:var(--__dialog-indent-radius);border-top-right-radius:var(--__dialog-indent-radius)}}}@layer viraui.overrides{.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open]{overflow:hidden}.viraui__dialog-module__CloseButton_U-B1r.viraui__dialog-module__CloseButton_U-B1r{position:absolute;top:1rem;right:1rem}}
14
+ );max-block-size:var(--vui-dialog-max-block-size,97dvh);outline:none;pointer-events:auto;touch-action:none;height:var(--drawer-height,auto);transform-origin:50% calc(100% - var(--__dialog-bleed));transition:opacity var(--duration-fast) var(--easing-entrance),transform var(--duration-fast) var(--easing-entrance),height var(--duration-fast) var(--easing-entrance);transform:translateY(var(--__dialog-translate-y)) scale(var(--__dialog-stack-scale));&[data-nested-drawer-open]{height:calc(var(--__dialog-stack-height) + var(--__dialog-bleed))}&[data-starting-style]{opacity:0;transform:translateY(100%)}&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength, 1) * var(--duration-fast))}&[data-ending-style][data-swipe-direction=down]{transform:translateY(100%)}&[data-nested-drawer-swiping]:not([data-ending-style]),&[data-swiping]:not([data-ending-style]){transition-duration:0s}@media (prefers-reduced-motion:reduce){&[data-ending-style][data-swipe-direction=down],&[data-starting-style]{opacity:1;transform:translateY(0)}}}.viraui__dialog-module__HandleShape_mEg8R{--__corner-shape:round;inline-size:var(--space-x-small);block-size:var(--space-x-small);background-color:oklab(from var(--global-contrast) l a b/.3);border-radius:var(--radius-infinite)}.viraui__dialog-module__Header_WnBly{touch-action:none;-webkit-user-select:none;user-select:none}.viraui__dialog-module__Body_9-UgN{min-block-size:0}.viraui__dialog-module__Content_r8lJc{min-block-size:0;overflow:auto;overscroll-behavior:contain;touch-action:auto;padding-block-end:calc(env(safe-area-inset-bottom) + var(--space-medium));transition:opacity var(--duration-fast) var(--easing-standard),overflow 0s allow-discrete var(--duration-fast);.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open] &{opacity:0;overflow:hidden;transition:opacity var(--duration-fast) var(--easing-standard),overflow 0s allow-discrete}.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open][data-nested-drawer-swiping] &{opacity:1;overflow:hidden}}.viraui__dialog-module__IndentBackground_OEfbh{position:absolute;inset:0}.viraui__dialog-module__Indent_qfiNW{--__dialog-indent-radius:calc(1rem * (1 - var(--drawer-swipe-progress)));--__dialog-indent-transition:calc(1 - clamp(0, calc(var(--drawer-swipe-progress) * 100000), 1));transition:transform var(--duration-normal) var(--easing-entrance),border-radius var(--duration-fast) var(--easing-entrance);transition-duration:calc(var(--duration-normal) * var(--__dialog-indent-transition)),calc(var(--duration-fast) * var(--__dialog-indent-transition));transform-origin:center top;will-change:transform;&[data-active]{transform:scale(calc(.98 + (.02 * var(--drawer-swipe-progress)))) translateY(calc(.5rem * (1 - var(--drawer-swipe-progress))));border-top-left-radius:var(--__dialog-indent-radius);border-top-right-radius:var(--__dialog-indent-radius)}}}@layer viraui.overrides{.viraui__dialog-module__Popup_5qIyj[data-nested-drawer-open]{overflow:hidden}.viraui__dialog-module__CloseButton_U-B1r.viraui__dialog-module__CloseButton_U-B1r{position:absolute;top:1rem;right:1rem}}
package/dist/components/glow/glow.css CHANGED
@@ -10,4 +10,4 @@
10
10
  var(--highlight-salmon),
11
11
  var(--highlight-magenta),
12
12
  var(--highlight-cyan)
13
- )}&>*{--vui-glow-starting-angle:initial;--vui-glow-active-opacity:initial}&:after,&:before{content:"";position:absolute;z-index:1;pointer-events:none;inset:calc(var(--vui-glow-border-offset) * -1);opacity:var(--vui-glow-active-opacity);border:var(--vui-glow-border-width) solid #0000;border-radius:calc(var(--vui-glow-border-offset) + var(--__glow-radius-tl)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-tr)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-br)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-bl));transition:opacity 1s;@media (prefers-reduced-motion:reduce){display:none}@media (hover:none),(pointer:coarse){display:none}}&:before{background:var(--vui-glow-border-color);mask:linear-gradient(#0000,#0000),conic-gradient(from calc(((var(--vui-glow-starting-angle) + (var(--vui-glow-spread) * .25)) - (var(--vui-glow-spread) * 1.5)) * 1deg),oklch(100% 0 0deg/15%) 0deg,#fff,oklch(100% 0 0deg/15%) calc(var(--vui-glow-spread) * 2.5deg));mask-clip:padding-box,border-box;mask-composite:intersect}&:after{background:var(--vui-glow-color);filter:brightness(1.5);mask:linear-gradient(#0000,#0000),conic-gradient(from calc(((var(--vui-glow-starting-angle) + (var(--vui-glow-spread) * .25)) - (var(--vui-glow-spread) * .5)) * 1deg),#0000 0deg,#fff,#0000 calc(var(--vui-glow-spread) * .5deg));mask-clip:padding-box,border-box;mask-composite:intersect;background-size:calc(100% + var(--vui-glow-border-width) * 2) calc(100% + var(--vui-glow-border-width) * 2);background-position:calc(var(--vui-glow-border-width) * -1) calc(var(--vui-glow-border-width) * -1)}&[data-glow-global=true]:after{background-attachment:fixed}}}
13
+ )}&>*{--vui-glow-starting-angle:initial;--vui-glow-active-opacity:initial}&:after,&:before{@container style(--__corner-shape: round){--__corner-shape:round}content:"";position:absolute;z-index:1;pointer-events:none;inset:calc(var(--vui-glow-border-offset) * -1);opacity:var(--vui-glow-active-opacity);border:var(--vui-glow-border-width) solid #0000;border-radius:calc(var(--vui-glow-border-offset) + var(--__glow-radius-tl)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-tr)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-br)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-bl));transition:opacity 1s;@media (prefers-reduced-motion:reduce){display:none}@media (hover:none),(pointer:coarse){display:none}}&:before{background:var(--vui-glow-border-color);mask:linear-gradient(#0000,#0000),conic-gradient(from calc(((var(--vui-glow-starting-angle) + (var(--vui-glow-spread) * .25)) - (var(--vui-glow-spread) * 1.5)) * 1deg),oklch(100% 0 0deg/15%) 0deg,#fff,oklch(100% 0 0deg/15%) calc(var(--vui-glow-spread) * 2.5deg));mask-clip:padding-box,border-box;mask-composite:intersect}&:after{background:var(--vui-glow-color);filter:brightness(1.5);mask:linear-gradient(#0000,#0000),conic-gradient(from calc(((var(--vui-glow-starting-angle) + (var(--vui-glow-spread) * .25)) - (var(--vui-glow-spread) * .5)) * 1deg),#0000 0deg,#fff,#0000 calc(var(--vui-glow-spread) * .5deg));mask-clip:padding-box,border-box;mask-composite:intersect;background-size:calc(100% + var(--vui-glow-border-width) * 2) calc(100% + var(--vui-glow-border-width) * 2);background-position:calc(var(--vui-glow-border-width) * -1) calc(var(--vui-glow-border-width) * -1)}&[data-glow-global=true]:after{background-attachment:fixed}}}
package/dist/components/linear-progress/linear-progress.css CHANGED
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-linear-progress-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-linear-progress-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-linear-progress-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__linear-progress-module__LinearProgress_-KN0j{--vui-linear-progress-track-size:var(--space-x-small);--vui-linear-progress-track-background:var(--global-contrast);--vui-linear-progress-indicator-color:var(--global-primary);& .viraui__linear-progress-module__Track_qUz8P{position:relative;overflow:hidden;block-size:var(--vui-linear-progress-track-size);background:var(--vui-linear-progress-track-background);border-radius:var(--radius-infinite)}& .viraui__linear-progress-module__Indicator_maaZF{block-size:100%;background:var(--vui-linear-progress-indicator-color);border-radius:inherit;&[data-indeterminate]{position:absolute;inset:0;inline-size:100%;background:#0000;&:before{position:absolute;inset-block:0;inline-size:40%;background:var(--vui-linear-progress-indicator-color);border-radius:inherit;animation:viraui__linear-progress-module__linear-progress-indeterminate_g0cSO 1.4s var(--easing-standard) infinite;content:""}}}}@keyframes viraui__linear-progress-module__linear-progress-indeterminate_g0cSO{0%{transform:translateX(-120%)}to{transform:translateX(260%)}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-linear-progress-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-linear-progress-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-linear-progress-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__linear-progress-module__LinearProgress_-KN0j{--vui-linear-progress-track-size:var(--space-x-small);--vui-linear-progress-track-background:var(--global-contrast);--vui-linear-progress-indicator-color:var(--global-primary);& .viraui__linear-progress-module__Track_qUz8P{--__corner-shape:round;position:relative;overflow:hidden;block-size:round(to-zero,var(--vui-linear-progress-track-size),2px);background:var(--vui-linear-progress-track-background);border-radius:var(--radius-infinite)}& .viraui__linear-progress-module__Indicator_maaZF{block-size:100%;background:var(--vui-linear-progress-indicator-color);border-radius:inherit;&[data-indeterminate]{position:absolute;inset:0;inline-size:100%;background:#0000;&:before{position:absolute;inset-block:0;inline-size:40%;background:var(--vui-linear-progress-indicator-color);border-radius:inherit;animation:viraui__linear-progress-module__linear-progress-indeterminate_g0cSO 1.4s var(--easing-standard) infinite;content:""}}}}@keyframes viraui__linear-progress-module__linear-progress-indeterminate_g0cSO{0%{transform:translateX(-120%)}to{transform:translateX(260%)}}}
package/dist/components/menu/menu-indicator-slot.js CHANGED
@@ -10,8 +10,8 @@ var indicatorStackRender = /* @__PURE__ */ jsx(Stack, {
10
10
  inline: true,
11
11
  vAlign: "center"
12
12
  });
13
- var checkIcon = /* @__PURE__ */ jsx(ChromeCheck, { size: 16 });
14
- var chevronIcon = /* @__PURE__ */ jsx(ChromeChevronEnd, { size: 16 });
13
+ var checkIcon = /* @__PURE__ */ jsx(ChromeCheck, { size: "0.8rem" });
14
+ var chevronIcon = /* @__PURE__ */ jsx(ChromeChevronEnd, { size: "0.8rem" });
15
15
  var indicatorSlotProps = {
16
16
  className: menu_module_default.Indicator,
17
17
  "data-grow": "false"
package/dist/components/meter/meter.css CHANGED
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-meter-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-meter-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-meter-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__meter-module__Meter_YRI7d{--vui-meter-track-size:var(--space-x-small);--vui-meter-track-background:var(--global-contrast);--vui-meter-indicator-color:var(--global-primary);& .viraui__meter-module__Track_uF9wy{position:relative;overflow:hidden;block-size:var(--vui-meter-track-size);background:var(--vui-meter-track-background);border-radius:var(--radius-infinite)}& .viraui__meter-module__Indicator_dNjqU{block-size:100%;background:var(--vui-meter-indicator-color);border-radius:inherit}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-meter-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-meter-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-meter-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__meter-module__Meter_YRI7d{--vui-meter-track-size:var(--space-x-small);--vui-meter-track-background:var(--global-contrast);--vui-meter-indicator-color:var(--global-primary);& .viraui__meter-module__Track_uF9wy{--__corner-shape:round;position:relative;overflow:hidden;block-size:round(to-zero,var(--vui-meter-track-size),2px);background:var(--vui-meter-track-background);border-radius:var(--radius-infinite)}& .viraui__meter-module__Indicator_dNjqU{block-size:100%;background:var(--vui-meter-indicator-color);border-radius:inherit}}}
package/dist/components/radio/radio.css CHANGED
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-radio-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --__radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --__radio-disk-size{syntax:"<length>";inherits:true;initial-value:0}.viraui__radio-module__Radio_54m33{max-block-size:min-content}.viraui__radio-module__RadioRoot_3uvvn{--vui-radio-size:var(--space-medium);--vui-radio-background:var(--global-contrast);--vui-radio-indicator-color:contrast-color(var(--global-primary));--__radio-size:round(nearest, var(--vui-radio-size), 2px);--__radio-disk-size:round(down, calc(var(--__radio-size) / 2), 2px);position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--vui-radio-border-color);inline-size:var(--__radio-size);block-size:var(--__radio-size);background:var(--vui-radio-background);border-radius:100000px;corner-shape:unset;&[data-size=medium]{--vui-radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-radio-background:var(--global-primary);--vui-radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-radio-border-color:var(--highlight-red);--vui-radio-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--vui-radio-background:var(--global-disabled-background);--vui-radio-border-color:#0000;--vui-radio-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__radio-module__Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--vui-radio-indicator-color)}.viraui__radio-module__Disk_pV-Q1{inline-size:var(--__radio-disk-size);block-size:var(--__radio-disk-size);border-radius:100000px;corner-shape:unset;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-radio-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-radio-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --__radio-size{syntax:"<length>";inherits:false;initial-value:0}@property --__radio-disk-size{syntax:"<length>";inherits:true;initial-value:0}.viraui__radio-module__Radio_54m33{max-block-size:min-content}.viraui__radio-module__RadioRoot_3uvvn{--vui-radio-size:var(--space-medium);--vui-radio-background:var(--global-contrast);--vui-radio-indicator-color:contrast-color(var(--global-primary));--__radio-size:round(nearest, var(--vui-radio-size), 2px);--__radio-disk-size:round(down, calc(var(--__radio-size) / 2), 2px);--__corner-shape:round;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--vui-radio-border-color);inline-size:var(--__radio-size);block-size:var(--__radio-size);background:var(--vui-radio-background);border-radius:100000px;&[data-size=medium]{--vui-radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-radio-background:var(--global-primary);--vui-radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-radio-border-color:var(--highlight-red);--vui-radio-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--vui-radio-background:var(--global-disabled-background);--vui-radio-border-color:#0000;--vui-radio-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__radio-module__Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--vui-radio-indicator-color)}.viraui__radio-module__Disk_pV-Q1{--__corner-shape:round;inline-size:var(--__radio-disk-size);block-size:var(--__radio-disk-size);border-radius:100000px;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}}
package/dist/components/select/select-option.js CHANGED
@@ -40,7 +40,7 @@ function SelectOption({ addon, addonAlign = "center", children, className, indic
40
40
  })]
41
41
  }), /* @__PURE__ */ jsx(SelectIndicatorSlot, {
42
42
  interactive: true,
43
- children: indicator ?? /* @__PURE__ */ jsx(ChromeCheck, { size: 16 })
43
+ children: indicator ?? /* @__PURE__ */ jsx(ChromeCheck, { size: "1rem" })
44
44
  })]
45
45
  })
46
46
  });
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%;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{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%;block-size:round(to-zero,var(--vui-select-input-height),2px);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{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/8%)}}&: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/select/select.js CHANGED
@@ -18,7 +18,7 @@ import { Field } from "@base-ui/react/field";
18
18
  import { useId } from "react";
19
19
  import { Select } from "@base-ui/react/select";
20
20
  //#region src/components/select/select.tsx
21
- function SelectRootComponent({ alignListWithTrigger = true, children, className, container, description, dirty, disabled, error, addon = /* @__PURE__ */ jsx(ChromeChevronExpandY, { size: 16 }), invalid, label, modal = false, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }) {
21
+ function SelectRootComponent({ alignListWithTrigger = true, children, className, container, description, dirty, disabled, error, addon = /* @__PURE__ */ jsx(ChromeChevronExpandY, { size: "1rem" }), invalid, label, modal = false, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }) {
22
22
  const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...restSelectProps } = selectRootProps;
23
23
  const fieldLabelId = useId();
24
24
  const listAccessibleNameProps = {};
package/dist/components/skeleton/skeleton-overlay.js CHANGED
@@ -1,11 +1,15 @@
1
1
  import { clsx } from "../../core/clsx.js";
2
+ import { infiniteCornerShapeStyle } from "../../core/theme/infinite-radius-style.js";
2
3
  import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
3
4
  import skeleton_module_default from "./skeleton.module.js";
4
5
  import { jsx } from "react/jsx-runtime";
5
6
  //#region src/components/skeleton/skeleton-overlay.tsx
6
7
  var SkeletonOverlay = ({ animate = true, radius, children, className, duration = "slow", ref, style, ...otherProps }) => {
7
8
  const dynamicStyle = {
8
- ...radius != null && { "--vui-skeleton-border-radius": resolveThemeValue(radius, "radius", "var(--radius-small)") },
9
+ ...radius != null && {
10
+ "--vui-skeleton-border-radius": resolveThemeValue(radius, "radius", "var(--radius-small)"),
11
+ ...infiniteCornerShapeStyle(radius)
12
+ },
9
13
  ...duration != null && { "--vui-skeleton-duration": resolveThemeValue(duration, "duration", "var(--duration-slow)") },
10
14
  ...style
11
15
  };
package/dist/components/skeleton/skeleton.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import './skeleton.css';
2
2
  import { clsx } from "../../core/clsx.js";
3
+ import { infiniteCornerShapeStyle } from "../../core/theme/infinite-radius-style.js";
3
4
  import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
4
5
  import skeleton_module_default from "./skeleton.module.js";
5
6
  import { SkeletonOverlay } from "./skeleton-overlay.js";
@@ -7,7 +8,10 @@ import { jsx } from "react/jsx-runtime";
7
8
  //#region src/components/skeleton/skeleton.tsx
8
9
  var SkeletonBlock = ({ animate = true, radius, className, duration = "slow", height, minHeight, minWidth, ref, style, width, ...otherProps }) => {
9
10
  const dynamicStyle = {
10
- ...radius != null && { "--vui-skeleton-border-radius": resolveThemeValue(radius, "radius", "var(--radius-small)") },
11
+ ...radius != null && {
12
+ "--vui-skeleton-border-radius": resolveThemeValue(radius, "radius", "var(--radius-small)"),
13
+ ...infiniteCornerShapeStyle(radius)
14
+ },
11
15
  ...duration != null && { "--vui-skeleton-duration": resolveThemeValue(duration, "duration", "var(--duration-slow)") },
12
16
  ...width && { "--vui-skeleton-inline-size": width },
13
17
  ...height && { "--vui-skeleton-block-size": height },
package/dist/components/slider/slider.css CHANGED
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-slider-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-thumb-spacer{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-indicator-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-progress-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__slider-module__Slider_vDNlm{--vui-slider-track-size:var(--space-medium);--vui-slider-thumb-size:var(--space-2x-small);--vui-slider-track-background:var(--global-contrast);--vui-slider-progress-background:var(--global-primary);--vui-slider-thumb-background:contrast-color(var(--global-primary));--__slider-thumb-spacer:0.75rem;inline-size:100%;block-size:100%;max-block-size:min-content;min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{max-block-size:none;max-inline-size:min-content}&:has([required]) .viraui__slider-module__Label_eQQHf:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]{--vui-slider-progress-background:var(--highlight-red)}&:has(.viraui__slider-module__SliderRoot_4JScw[data-disabled]),&[data-disabled]{--vui-slider-track-background:var(--global-disabled-background);--vui-slider-progress-background:var(--global-disabled-foreground);--vui-slider-thumb-background:var(--global-background);cursor:not-allowed}}.viraui__slider-module__SliderRoot_4JScw{inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0}.viraui__slider-module__SliderHeader_gOy9k{inline-size:100%;min-inline-size:0}.viraui__slider-module__Value_FaY9i{flex-shrink:0}.viraui__slider-module__SliderControl_FQd5-{position:relative;flex:1 1 auto;-webkit-user-select:none;user-select:none;touch-action:none;inline-size:100%;block-size:var(--vui-slider-track-size);min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{inline-size:var(--vui-slider-track-size);block-size:100%;>.viraui__slider-module__Track_wvLEH{inline-size:var(--vui-slider-track-size);block-size:100%}}}.viraui__slider-module__Track_wvLEH{position:relative;overflow:hidden;inline-size:100%;block-size:var(--vui-slider-track-size);background:var(--vui-slider-track-background);border-radius:var(--radius-x-small)}.viraui__slider-module__Indicator_y3JyJ{--__slider-indicator-gap:calc(var(--__slider-thumb-spacer) / 2);background:var(--vui-slider-progress-background);box-sizing:initial;position:relative;padding-inline-end:var(--__slider-indicator-gap);&[data-orientation=vertical]{padding-inline-end:0;padding-block-start:var(--__slider-indicator-gap)}.viraui__slider-module__Track_wvLEH:has(.viraui__slider-module__Thumb_S-uLF~.viraui__slider-module__Thumb_S-uLF) &{margin-inline-start:calc(var(--__slider-indicator-gap) * -1);padding-inline-end:calc(var(--__slider-indicator-gap) * 2);&[data-orientation=vertical]{margin-inline-start:0;padding-inline-end:0;margin-block-end:calc(var(--__slider-indicator-gap) * -1);padding-block-start:calc(var(--__slider-indicator-gap) * 2)}}}.viraui__slider-module__Thumb_S-uLF{box-sizing:border-box;inline-size:var(--__slider-thumb-spacer);block-size:50%;appearance:none;&:after{content:"";position:absolute;inset-block:0;inset-inline-start:50%;translate:-50% 0;box-sizing:border-box;inline-size:.125rem;block-size:100%;background:var(--vui-slider-thumb-background);border-radius:var(--radius-infinite)}&[data-orientation=vertical]{inline-size:calc(100% - 8px);block-size:var(--__slider-thumb-spacer);&:after{inset-inline:0;inset-block-start:50%;inset-block-end:auto;translate:0 -50%;inline-size:100%;block-size:var(--vui-slider-thumb-size)}}&:not(:disabled,[data-disabled]){cursor:grab}&:not(:disabled,[data-disabled]):active,&:not(:disabled,[data-disabled]):has(>input:active),&:not(:disabled,[data-disabled])[data-dragging]:has(>input:focus){cursor:grabbing}&:has(>input:focus-visible):after{outline:var(--outline);outline-offset:var(--outline-offset)}>input:focus-visible{outline:none}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-slider-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-thumb-spacer{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-indicator-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-progress-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__slider-module__Slider_vDNlm{--vui-slider-track-size:var(--space-medium);--vui-slider-thumb-size:var(--space-2x-small);--vui-slider-track-background:var(--global-contrast);--vui-slider-progress-background:var(--global-primary);--vui-slider-thumb-background:contrast-color(var(--global-primary));--__slider-thumb-spacer:0.75rem;inline-size:100%;block-size:100%;max-block-size:min-content;min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{max-block-size:none;max-inline-size:min-content}&:has([required]) .viraui__slider-module__Label_eQQHf:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]{--vui-slider-progress-background:var(--highlight-red)}&:has(.viraui__slider-module__SliderRoot_4JScw[data-disabled]),&[data-disabled]{--vui-slider-track-background:var(--global-disabled-background);--vui-slider-progress-background:var(--global-disabled-foreground);--vui-slider-thumb-background:var(--global-background);cursor:not-allowed}}.viraui__slider-module__SliderRoot_4JScw{inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0}.viraui__slider-module__SliderHeader_gOy9k{inline-size:100%;min-inline-size:0}.viraui__slider-module__Value_FaY9i{flex-shrink:0}.viraui__slider-module__SliderControl_FQd5-{position:relative;flex:1 1 auto;-webkit-user-select:none;user-select:none;touch-action:none;inline-size:100%;block-size:round(to-zero,var(--vui-slider-track-size),2px);min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{inline-size:var(--vui-slider-track-size);block-size:100%;>.viraui__slider-module__Track_wvLEH{inline-size:var(--vui-slider-track-size);block-size:100%}}}.viraui__slider-module__Track_wvLEH{position:relative;overflow:hidden;inline-size:100%;block-size:var(--vui-slider-track-size);background:var(--vui-slider-track-background);border-radius:var(--radius-x-small)}.viraui__slider-module__Indicator_y3JyJ{--__slider-indicator-gap:calc(var(--__slider-thumb-spacer) / 2);background:var(--vui-slider-progress-background);box-sizing:initial;position:relative;padding-inline-end:var(--__slider-indicator-gap);&[data-orientation=vertical]{padding-inline-end:0;padding-block-start:var(--__slider-indicator-gap)}.viraui__slider-module__Track_wvLEH:has(.viraui__slider-module__Thumb_S-uLF~.viraui__slider-module__Thumb_S-uLF) &{margin-inline-start:calc(var(--__slider-indicator-gap) * -1);padding-inline-end:calc(var(--__slider-indicator-gap) * 2);&[data-orientation=vertical]{margin-inline-start:0;padding-inline-end:0;margin-block-end:calc(var(--__slider-indicator-gap) * -1);padding-block-start:calc(var(--__slider-indicator-gap) * 2)}}}.viraui__slider-module__Thumb_S-uLF{box-sizing:border-box;inline-size:var(--__slider-thumb-spacer);block-size:50%;appearance:none;&:after{--__corner-shape:round;content:"";position:absolute;inset-block:0;inset-inline-start:50%;translate:-50% 0;box-sizing:border-box;inline-size:.125rem;block-size:100%;background:var(--vui-slider-thumb-background);border-radius:var(--radius-infinite)}&[data-orientation=vertical]{inline-size:calc(100% - 8px);block-size:var(--__slider-thumb-spacer);&:after{inset-inline:0;inset-block-start:50%;inset-block-end:auto;translate:0 -50%;inline-size:100%;block-size:var(--vui-slider-thumb-size)}}&:not(:disabled,[data-disabled]){cursor:grab}&:not(:disabled,[data-disabled]):active,&:not(:disabled,[data-disabled]):has(>input:active),&:not(:disabled,[data-disabled])[data-dragging]:has(>input:focus){cursor:grabbing}&:has(>input:focus-visible):after{outline:var(--outline);outline-offset:var(--outline-offset)}>input:focus-visible{outline:none}}}
package/dist/components/surface/surface-radius-context.js CHANGED
@@ -1,4 +1,5 @@
1
1
  "use client";
2
+ import { infiniteCornerShapeStyle } from "../../core/theme/infinite-radius-style.js";
2
3
  import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
3
4
  import { createContext, useContext } from "react";
4
5
  //#region src/components/surface/surface-radius-context.ts
@@ -56,25 +57,31 @@ var useSurfaceRadius = ({ defaults, hPadding, radius, style, vPadding }) => {
56
57
  const parentContext = useSurfaceRadiusContext() ?? resolveDefaultContext(defaults);
57
58
  const hasAutoRadius = radius === "auto";
58
59
  const hasPerCornerRadius = isPerCornerRadius(radius);
59
- const tokenRadius = toCssLength(getSurfaceStyleRadius(style) ?? (hasAutoRadius || hasPerCornerRadius ? void 0 : resolveRadiusToken(radius)));
60
+ const styleRadius = getSurfaceStyleRadius(style);
61
+ const tokenRadius = toCssLength(styleRadius ?? (hasAutoRadius || hasPerCornerRadius ? void 0 : resolveRadiusToken(radius)));
60
62
  let ownRadius;
61
63
  if (hasAutoRadius) ownRadius = resolveAutoRadiusCorners(parentContext);
62
64
  else if (hasPerCornerRadius) ownRadius = resolvePerCornerRadiusInput(radius);
63
65
  else ownRadius = resolveTokenRadiusCorners(tokenRadius);
64
66
  const [paddingInlineStart, paddingInlineEnd] = resolveAxisPaddingValues(hPadding);
65
67
  const [paddingBlockStart, paddingBlockEnd] = resolveAxisPaddingValues(vPadding);
68
+ const contextValue = {
69
+ radius: ownRadius,
70
+ padding: {
71
+ inlineStart: paddingInlineStart,
72
+ inlineEnd: paddingInlineEnd,
73
+ blockStart: paddingBlockStart,
74
+ blockEnd: paddingBlockEnd
75
+ }
76
+ };
77
+ const cornerShapeStyle = infiniteCornerShapeStyle(radius === "infinite" ? "infinite" : void 0, styleRadius, tokenRadius, ownRadius.topLeft, ownRadius.topRight, ownRadius.bottomRight, ownRadius.bottomLeft);
66
78
  return {
67
- contextValue: {
68
- radius: ownRadius,
69
- padding: {
70
- inlineStart: paddingInlineStart,
71
- inlineEnd: paddingInlineEnd,
72
- blockStart: paddingBlockStart,
73
- blockEnd: paddingBlockEnd
74
- }
75
- },
79
+ contextValue,
76
80
  hasAutoRadius,
77
- radiusStyle: hasAutoRadius || hasPerCornerRadius ? getSurfaceRadiusStyle(ownRadius) : { "--vui-surface-border-radius": tokenRadius }
81
+ radiusStyle: {
82
+ ...hasAutoRadius || hasPerCornerRadius ? getSurfaceRadiusStyle(ownRadius) : { "--vui-surface-border-radius": tokenRadius },
83
+ ...cornerShapeStyle
84
+ }
78
85
  };
79
86
  };
80
87
  //#endregion
package/dist/components/text/text.css CHANGED
@@ -1,17 +1,5 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-text-align{syntax:"*";inherits:false;initial-value:start}@property --vui-text-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-text-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-text-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-text-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-text-text-transform{syntax:"none | capitalize | uppercase | lowercase";inherits:false;initial-value:none}@property --vui-text-font-weight{syntax:"<number>";inherits:false;initial-value:400}@property --vui-text-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-text-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-text-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-text-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-text-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-text-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --vui-text-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --__text-medium{syntax:"*";inherits:false;initial-value:0}.viraui__text-module__Text_bS8kv{--__text-medium:clamp(
2
- var(--font-scale-body-medium),
3
- calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),
4
- calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3)
5
- );--vui-text-font-family:var(--font-family-body);--vui-text-font-size:clamp(var(--font-scale-body-small), var(--__text-medium), var(--font-scale-body-medium));--vui-text-line-height:var(--font-leading-standard);margin:0;max-inline-size:var(--vui-text-max-width);font-family:var(--vui-text-font-family);font-size:var(--vui-text-font-size);line-height:var(--vui-text-line-height);text-align:var(--vui-text-align);letter-spacing:var(--vui-text-letter-spacing);text-transform:var(--vui-text-text-transform);white-space:var(--vui-text-white-space);word-break:break-word;font-weight:var(--vui-text-font-weight);font-stretch:calc(var(--vui-text-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-text-font-weight),"wdth" var(--vui-text-font-width),"opsz" var(--vui-text-font-opsz);text-box:var(--vui-text-trim) var(--vui-text-trim-type);&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--vui-text-padding-block-start) var(--vui-text-padding-inline-end) var(--vui-text-padding-block-end) var(--vui-text-padding-inline-start)}&[data-text-family=mono]{--vui-text-font-family:var(--font-family-mono)}&[data-text-size=x-large]{--vui-text-font-size:clamp(
6
- var(--font-scale-body-large),
7
- calc(var(--__text-medium) * pow(var(--font-heading-typescale), 2)),
8
- var(--font-scale-body-x-large)
9
- )}&[data-text-size=large]{--vui-text-font-size:clamp(
10
- var(--font-scale-body-medium),
11
- calc(var(--__text-medium) * pow(var(--font-heading-typescale), 1)),
12
- var(--font-scale-body-large)
13
- )}&[data-text-size=small]{--vui-text-font-size:clamp(
14
- var(--font-scale-body-x-small),
15
- calc(var(--__text-medium) * pow(var(--font-heading-typescale), -0.1)),
16
- var(--font-scale-body-small)
17
- )}&[data-text-size=x-small]{--vui-text-font-size:var(--font-scale-body-x-small)}&[data-text-weight=light]{--vui-text-font-weight:200}&[data-text-weight=semibold]{--vui-text-font-weight:600}&[data-text-weight=bold]{--vui-text-font-weight:800}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--vui-text-literal-color)}&[data-text-line-height=none]{--vui-text-line-height:0}&[data-text-line-height=x-small]{--vui-text-line-height:var(--font-leading-x-small)}&[data-text-line-height=small]{--vui-text-line-height:var(--font-leading-small)}&[data-text-line-height=large]{--vui-text-line-height:var(--font-leading-large)}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-text-align{syntax:"*";inherits:false;initial-value:start}@property --vui-text-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-text-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-text-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-text-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-text-text-transform{syntax:"none | capitalize | uppercase | lowercase";inherits:false;initial-value:none}@property --vui-text-font-weight{syntax:"<number>";inherits:false;initial-value:400}@property --vui-text-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-text-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-text-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-text-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-text-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-text-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --vui-text-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --__text-fluid{syntax:"<number>";inherits:false;initial-value:0}@property --__text-size-min{syntax:"<length>";inherits:false;initial-value:1rem}@property --__text-size-max{syntax:"<length>";inherits:false;initial-value:1rem}.viraui__text-module__Text_bS8kv{--__text-fluid:calc((100cqi - 320px) / 1125px);--__text-size-min:var(--font-scale-body-small);--__text-size-max:var(--font-scale-body-medium);--vui-text-font-size:clamp(
2
+ var(--__text-size-min),
3
+ calc(var(--__text-size-min) + (var(--__text-size-max) - var(--__text-size-min)) * var(--__text-fluid)),
4
+ var(--__text-size-max)
5
+ );--vui-text-font-family:var(--font-family-body);--vui-text-line-height:var(--font-leading-standard);margin:0;max-inline-size:var(--vui-text-max-width);font-family:var(--vui-text-font-family);font-size:var(--vui-text-font-size);line-height:var(--vui-text-line-height);text-align:var(--vui-text-align);letter-spacing:var(--vui-text-letter-spacing);text-transform:var(--vui-text-text-transform);white-space:var(--vui-text-white-space);word-break:break-word;font-weight:var(--vui-text-font-weight);font-stretch:calc(var(--vui-text-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-text-font-weight),"wdth" var(--vui-text-font-width),"opsz" var(--vui-text-font-opsz);text-box:var(--vui-text-trim) var(--vui-text-trim-type);&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--vui-text-padding-block-start) var(--vui-text-padding-inline-end) var(--vui-text-padding-block-end) var(--vui-text-padding-inline-start)}&[data-text-family=mono]{--vui-text-font-family:var(--font-family-mono)}&[data-text-size=x-large]{--__text-size-min:var(--font-scale-body-large);--__text-size-max:var(--font-scale-body-x-large)}&[data-text-size=large]{--__text-size-min:var(--font-scale-body-medium);--__text-size-max:var(--font-scale-body-large)}&[data-text-size=small]{--__text-size-min:var(--font-scale-body-x-small);--__text-size-max:var(--font-scale-body-small)}&[data-text-size=x-small]{--vui-text-font-size:var(--font-scale-body-x-small)}&[data-text-weight=light]{--vui-text-font-weight:200}&[data-text-weight=semibold]{--vui-text-font-weight:600}&[data-text-weight=bold]{--vui-text-font-weight:800}&[data-text-tone=primary]{color:var(--global-primary)}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--vui-text-literal-color)}&[data-text-line-height=none]{--vui-text-line-height:0}&[data-text-line-height=x-small]{--vui-text-line-height:var(--font-leading-x-small)}&[data-text-line-height=small]{--vui-text-line-height:var(--font-leading-small)}&[data-text-line-height=large]{--vui-text-line-height:var(--font-leading-large)}}}
package/dist/components/text/text.d.ts CHANGED
@@ -44,10 +44,13 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
44
44
  weight?: 'light' | 'regular' | 'semibold' | 'bold' | number;
45
45
  /**
46
46
  * Sets the semantic text color role when no literal `color` override is used.
47
+ * `default` inherits; `primary` → `--global-primary`; `muted` → `--global-muted`;
48
+ * `interactive` → `--global-interactive-text`; `positive` / `informative` / `danger` / `warning`
49
+ * → `--highlight-green` / `--highlight-blue` / `--highlight-red` / `--highlight-yellow`.
47
50
  *
48
51
  * @default No semantic tone override.
49
52
  */
50
- tone?: 'default' | 'muted' | 'interactive' | 'positive' | 'informative' | 'danger' | 'warning';
53
+ tone?: 'default' | 'primary' | 'muted' | 'interactive' | 'positive' | 'informative' | 'danger' | 'warning';
51
54
  /**
52
55
  * Applies a literal color escape hatch when semantic `tone` is not used.
53
56
  *
package/dist/components/text/text.guide.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "structure": "<Text>…</Text>",
4
4
  "summary": "Theme-aware body-copy primitive with tone, family, and responsive body sizing.",
5
5
  "whenToUse": [
6
- "Body copy with semantic tone and token-backed typography",
6
+ "Body copy with semantic tone (including brand `primary`) and token-backed typography",
7
7
  "Helper, label, or inline copy inside other components",
8
8
  "Mono or body family text with fluid clamp sizing"
9
9
  ],
@@ -61,7 +61,7 @@
61
61
  "description": "Selects a semantic body typography size from the active theme scale."
62
62
  },
63
63
  "tone": {
64
- "description": "Sets the semantic text color role when no literal `color` override is used."
64
+ "description": "Sets the semantic text color role when no literal `color` override is used. `default` inherits; `primary` → `--global-primary`; `muted` → `--global-muted`; `interactive` → `--global-interactive-text`; `positive` / `informative` / `danger` / `warning` → `--highlight-green` / `--highlight-blue` / `--highlight-red` / `--highlight-yellow`."
65
65
  },
66
66
  "tracking": {
67
67
  "description": "Sets letter spacing on the rendered copy.",
package/dist/components/textfield/textfield.css CHANGED
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textfield-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textfield-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textfield-module__Textfield_o-70A{--vui-textfield-input-height:var(--space-2x-large);--vui-textfield-control-group-background:var(--base-1);--vui-textfield-control-group-color:var(--global-foreground);--vui-textfield-control-group-border-color:var(--global-contrast);--vui-textfield-control-group-border-radius:var(--radius-medium);--vui-field-label-padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2);max-block-size:min-content;&[data-fullwidth=true]{inline-size:100%}&:has([required]) .viraui__textfield-module__Label_5rjr0:after{content:" ＊";color:var(--highlight-red)}}.viraui__textfield-module__ControlGroup_2W-OC{box-sizing:border-box;inline-size:100%;block-size:var(--vui-textfield-input-height);background:var(--vui-textfield-control-group-background);color:var(--vui-textfield-control-group-color);border:1px solid var(--vui-textfield-control-group-border-color);border-radius:var(--vui-textfield-control-group-border-radius);&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:focus-visible),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-invalid][data-dirty]){--vui-textfield-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:disabled),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-disabled]){--vui-textfield-control-group-background:var(--global-disabled-background);--vui-textfield-control-group-border-color:#0000;--vui-textfield-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=start])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-start:var(--space-x-small)}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=end])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-end:var(--space-x-small)}}.viraui__textfield-module__Addon_kK1ef{min-inline-size:var(--space-x-large)}.viraui__textfield-module__Description_8Qxot{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}}@layer viraui.overrides{.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;block-size:100%;line-height:1.2;background:#0000;border-radius:inherit;&:not(:-webkit-autofill){box-shadow:none}&:focus-visible{outline:none}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textfield-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textfield-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textfield-module__Textfield_o-70A{--vui-textfield-input-height:var(--space-2x-large);--vui-textfield-control-group-background:var(--base-1);--vui-textfield-control-group-color:var(--global-foreground);--vui-textfield-control-group-border-color:var(--global-contrast);--vui-textfield-control-group-border-radius:var(--radius-medium);--vui-field-label-padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2);max-block-size:min-content;&[data-fullwidth=true]{inline-size:100%}&:has([required]) .viraui__textfield-module__Label_5rjr0:after{content:" ＊";color:var(--highlight-red)}}.viraui__textfield-module__ControlGroup_2W-OC{box-sizing:border-box;inline-size:100%;block-size:round(to-zero,var(--vui-textfield-input-height),2px);background:var(--vui-textfield-control-group-background);color:var(--vui-textfield-control-group-color);border:1px solid var(--vui-textfield-control-group-border-color);border-radius:var(--vui-textfield-control-group-border-radius);&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:focus-visible),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-invalid][data-dirty]){--vui-textfield-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:disabled),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-disabled]){--vui-textfield-control-group-background:var(--global-disabled-background);--vui-textfield-control-group-border-color:#0000;--vui-textfield-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=start])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-start:var(--space-x-small)}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=end])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-end:var(--space-x-small)}}.viraui__textfield-module__Addon_kK1ef{min-inline-size:var(--space-x-large)}.viraui__textfield-module__Description_8Qxot{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}}@layer viraui.overrides{.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;block-size:100%;line-height:1.2;background:#0000;border-radius:inherit;&:not(:-webkit-autofill){box-shadow:none}&:focus-visible{outline:none}}}
package/dist/components/title/title.css CHANGED
@@ -1,33 +1,5 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --__title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-title-text-transform{syntax:"none | capitalize | uppercase | lowercase";inherits:false;initial-value:none}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --__title-medium{syntax:"*";inherits:false;initial-value:0}.viraui__title-module__Title_CXMUX{--__title-medium:clamp(
2
- var(--font-scale-body-medium),
3
- calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),
4
- calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3)
5
- );--vui-title-font-size:clamp(
6
- calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 5)),
7
- calc(var(--__title-medium) * pow(var(--font-heading-typescale), 5)),
8
- calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6))
9
- );--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-standard);--__title-letter-spacing:-0.03em;margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--__title-letter-spacing);text-transform:var(--vui-title-text-transform);text-align:var(--vui-title-align);white-space:var(--vui-title-white-space);word-break:break-word;font-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-title-font-weight),"wdth" var(--vui-title-font-width),"opsz" var(--vui-title-font-opsz);text-box:var(--vui-title-trim) var(--vui-title-trim-type);display:inline-flex;&[data-title-has-tracking=true]{letter-spacing:var(--vui-title-letter-spacing)}&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--vui-title-padding-block-start) var(--vui-title-padding-inline-end) var(--vui-title-padding-block-end) var(--vui-title-padding-inline-start)}&[data-title-size=display]{--vui-title-font-size:clamp(
10
- calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6)),
11
- calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6) + 4.643cqi - 0.9286rem),
12
- var(--font-scale-display)
13
- )}&[data-title-size="2"]{--vui-title-font-size:clamp(
14
- calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 4)),
15
- calc(var(--__title-medium) * pow(var(--font-heading-typescale), 4)),
16
- calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 5))
17
- )}&[data-title-size="3"]{--vui-title-font-size:clamp(
18
- calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 3)),
19
- calc(var(--__title-medium) * pow(var(--font-heading-typescale), 3)),
20
- calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 4))
21
- )}&[data-title-size="4"]{--vui-title-font-size:clamp(
22
- calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 2)),
23
- calc(var(--__title-medium) * pow(var(--font-heading-typescale), 2)),
24
- calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 3))
25
- )}&[data-title-size="5"]{--vui-title-font-size:clamp(
26
- calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 1)),
27
- calc(var(--__title-medium) * pow(var(--font-heading-typescale), 1)),
28
- calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 2))
29
- );--__title-letter-spacing:-0.02em}&[data-title-size="6"]{--vui-title-font-size:clamp(
30
- var(--font-scale-body-medium),
31
- var(--__title-medium),
32
- calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 1))
33
- );--__title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--vui-title-literal-color)}&[data-title-line-height=none]{--vui-title-line-height:0}&[data-title-line-height=x-small]{--vui-title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--vui-title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--vui-title-line-height:var(--font-leading-large)}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --__title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-title-text-transform{syntax:"none | capitalize | uppercase | lowercase";inherits:false;initial-value:none}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --__title-fluid{syntax:"<number>";inherits:false;initial-value:0}@property --__title-size-min{syntax:"<length>";inherits:false;initial-value:1rem}@property --__title-size-max{syntax:"<length>";inherits:false;initial-value:1rem}.viraui__title-module__Title_CXMUX{--__title-fluid:calc((100cqi - 320px) / 1125px);--__title-size-min:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 5));--__title-size-max:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6));--vui-title-font-size:clamp(
2
+ var(--__title-size-min),
3
+ calc(var(--__title-size-min) + (var(--__title-size-max) - var(--__title-size-min)) * var(--__title-fluid)),
4
+ var(--__title-size-max)
5
+ );--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-standard);--__title-letter-spacing:-0.03em;margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--__title-letter-spacing);text-transform:var(--vui-title-text-transform);text-align:var(--vui-title-align);white-space:var(--vui-title-white-space);word-break:break-word;font-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-title-font-weight),"wdth" var(--vui-title-font-width),"opsz" var(--vui-title-font-opsz);text-box:var(--vui-title-trim) var(--vui-title-trim-type);display:inline-flex;&[data-title-has-tracking=true]{letter-spacing:var(--vui-title-letter-spacing)}&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--vui-title-padding-block-start) var(--vui-title-padding-inline-end) var(--vui-title-padding-block-end) var(--vui-title-padding-inline-start)}&[data-title-size=display]{--__title-size-min:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6));--__title-size-max:var(--font-scale-display)}&[data-title-size="2"]{--__title-size-min:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 4));--__title-size-max:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 5))}&[data-title-size="3"]{--__title-size-min:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 3));--__title-size-max:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 4))}&[data-title-size="4"]{--__title-size-min:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 2));--__title-size-max:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 3))}&[data-title-size="5"]{--__title-size-min:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 1));--__title-size-max:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 2));--__title-letter-spacing:-0.02em}&[data-title-size="6"]{--__title-size-min:var(--font-scale-body-medium);--__title-size-max:calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 1));--__title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--vui-title-literal-color)}&[data-title-line-height=none]{--vui-title-line-height:0}&[data-title-line-height=x-small]{--vui-title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--vui-title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--vui-title-line-height:var(--font-leading-large)}}}
package/dist/core/theme/infinite-radius-style.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export type InfiniteCornerShapeStyle = {
2
+ '--__corner-shape': 'round';
3
+ };
4
+ export declare const isInfiniteRadiusValue: (value: string | number | null | undefined) => boolean;
5
+ /** Sets `--__corner-shape: round` when any value is the infinite radius token or CSS. */
6
+ export declare const infiniteCornerShapeStyle: (...values: Array<string | number | null | undefined>) => InfiniteCornerShapeStyle | undefined;
package/dist/core/theme/infinite-radius-style.js ADDED
@@ -0,0 +1,13 @@
1
+ //#region src/core/theme/infinite-radius-style.ts
2
+ var INFINITE_RADIUS_MARKER = /(?:--radius-infinite|\b1e5px\b)/;
3
+ var isInfiniteRadiusValue = (value) => {
4
+ if (value === "infinite") return true;
5
+ if (typeof value !== "string" || value.length === 0) return false;
6
+ return INFINITE_RADIUS_MARKER.test(value);
7
+ };
8
+ /** Sets `--__corner-shape: round` when any value is the infinite radius token or CSS. */
9
+ var infiniteCornerShapeStyle = (...values) => {
10
+ if (values.some(isInfiniteRadiusValue)) return { "--__corner-shape": "round" };
11
+ };
12
+ //#endregion
13
+ export { infiniteCornerShapeStyle, isInfiniteRadiusValue };
package/dist/internal/chrome-icons/chrome-icons.d.ts CHANGED
@@ -7,7 +7,7 @@ import type * as React from 'react';
7
7
  */
8
8
  export type ChromeIconProps = {
9
9
  className?: string;
10
- size?: number;
10
+ size?: number | string;
11
11
  };
12
12
  export declare const ChromePlus: React.FC<ChromeIconProps>;
13
13
  export declare const ChromeMinus: React.FC<ChromeIconProps>;
package/dist/preflight-surface.json CHANGED
@@ -10,7 +10,7 @@
10
10
  {
11
11
  "id": "core",
12
12
  "file": "core.css",
13
- "purpose": "Root baseline including html font-size from --font-root-size, --is-light-mode registration, and global element defaults."
13
+ "purpose": "Root baseline including html font-size from --font-root-size, --is-light-mode registration, global element defaults, and corner-shape gate via var(--__corner-shape, var(--corner-shape))."
14
14
  },
15
15
  {
16
16
  "id": "typography",
@@ -207,6 +207,13 @@
207
207
  "setBy": "data-shrink=\"true\" or data-shrink=\"false\"; registered in global-properties.css",
208
208
  "default": "1 (initial-value); inherits: false",
209
209
  "purpose": "Local shrink signal for flex defaults; does not inherit so ancestor data-shrink cannot poison descendants."
210
+ },
211
+ {
212
+ "name": "--__corner-shape",
213
+ "module": "core",
214
+ "setBy": "ViraUI components on the same element as infinite / pill radius (CSS modules or React style); registered in global-properties.css",
215
+ "default": "guaranteed-invalid (no initial-value); inherits: false; preflight uses var(--__corner-shape, var(--corner-shape))",
216
+ "purpose": "Internal override for the preflight corner-shape gate so infinite radius keeps round pill arcs when --effect-corner-shape is on. Not a consumer data-* or public theme recipe. Consumers must disable corner-shape when using infinite radius."
210
217
  }
211
218
  ],
212
219
  "antiPatterns": [
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}@property --vira-flex-grow{syntax:"<number>";initial-value:1;inherits:false}@property --vira-flex-shrink{syntax:"<number>";initial-value:1;inherits:false}}@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;scroll-behavior:smooth;@media (prefers-reduced-motion:reduce){scroll-behavior:auto}}*,: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]{--is-light-mode:#fff;color:var(--global-foreground);color-scheme:dark}[data-mode=light]{--is-light-mode:#000;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}@property --vira-flex-grow{syntax:"<number>";initial-value:1;inherits:false}@property --vira-flex-shrink{syntax:"<number>";initial-value:1;inherits:false}@property --__corner-shape{syntax:"*";inherits:false}}@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;scroll-behavior:smooth;@media (prefers-reduced-motion:reduce){scroll-behavior:auto}}*,: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,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]{--is-light-mode:#fff;color:var(--global-foreground);color-scheme:dark}[data-mode=light]{--is-light-mode:#000;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
@@ -29,7 +29,7 @@
29
29
  {
30
30
  "id": "radius",
31
31
  "pattern": "--radius-* | --corner-shape",
32
- "purpose": "Semantic radius scale plus corner-shape value for component chrome."
32
+ "purpose": "Semantic radius scale plus corner-shape value for component chrome. Infinite/pill radius with --effect-corner-shape on can cap true pills; ViraUI sets internal --__corner-shape (preflight-owned, not a consumer data-*) beside infinite radius."
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.3.2",
3
+ "version": "2026.3.4",
4
4
  "private": false,
5
5
  "files": [
6
6
  "dist"
@@ -28,7 +28,7 @@
28
28
  },
29
29
  "devDependencies": {
30
30
  "@base-ui/react": ">=1.7.0",
31
- "@viraui/foundation": "2026.3.2",
31
+ "@viraui/foundation": "2026.3.4",
32
32
  "@viraui/icons": "2026.0.3",
33
33
  "@viraui/postcss-config": "2026.0.0",
34
34
  "@viraui/tsconfig": "2026.0.0",