@viraui/react 2026.3.3 → 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 (15) hide show
  1. package/dist/components/accordion/accordion-item.js +1 -1
  2. package/dist/components/beam/beam.css +1 -1
  3. package/dist/components/button/button.css +1 -1
  4. package/dist/components/checkbox/checkbox.js +1 -8
  5. package/dist/components/chip/chip.css +1 -1
  6. package/dist/components/glow/glow.css +1 -1
  7. package/dist/components/menu/menu-indicator-slot.js +2 -2
  8. package/dist/components/select/select-option.js +1 -1
  9. package/dist/components/select/select.js +1 -1
  10. package/dist/components/text/text.css +5 -17
  11. package/dist/components/text/text.d.ts +4 -1
  12. package/dist/components/text/text.guide.json +2 -2
  13. package/dist/components/title/title.css +5 -33
  14. package/dist/internal/chrome-icons/chrome-icons.d.ts +1 -1
  15. package/package.json +2 -2
package/dist/components/accordion/accordion-item.js CHANGED
@@ -9,7 +9,7 @@ import { Surface } from "../surface/surface.js";
9
9
  import { Accordion } from "@base-ui/react/accordion";
10
10
  import { jsx, jsxs } from "react/jsx-runtime";
11
11
  //#region src/components/accordion/accordion-item.tsx
12
- 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 }) => {
13
13
  const iconAtStart = iconPosition === "start";
14
14
  const dynamicStyle = {
15
15
  ...radius != null && {
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: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-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;--__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}}
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/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/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/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.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/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/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/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@viraui/react",
3
- "version": "2026.3.3",
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.3",
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",