@viraui/react 2026.2.2 → 2026.2.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.
- package/dist/components/annotate/annotate.css +1 -1
- package/dist/components/annotate/annotate.d.ts +2 -2
- package/dist/components/annotate/annotate.guide.json +4 -4
- package/dist/components/annotate/annotate.js +12 -6
- package/dist/components/annotate/annotate.module.js +4 -2
- package/dist/components/beam/beam.css +1 -1
- package/dist/components/chip/chip.js +1 -1
- package/dist/components/stack/stack.guide.json +2 -1
- package/dist/components/tabs/tabs-list.js +0 -1
- package/dist/preflight-surface.json +22 -15
- package/dist/preflight.css +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-annotate-color{syntax:"<color>";inherits:true;initial-value:#d16500}@property --vui-annotate-arrow-x{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-arrow-y{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-text-x{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-text-y{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-rotate{syntax:"<angle>";inherits:true;initial-value:-4deg}@property --vui-annotate-target-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-label-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-label-max-width{syntax:"<length>";inherits:true;initial-value:150px}@property --vui-annotate-z-index{syntax:"*";inherits:true;initial-value:auto}@property --vui-annotate-text-align{syntax:"*";inherits:true;initial-value:start}@property --__annotate-tail-x{syntax:"<length>";inherits:true;initial-value:23px}@property --__annotate-tail-y{syntax:"<length>";inherits:true;initial-value:4px}@property --__annotate-note-align-x{syntax:"<length-percentage>";inherits:true;initial-value:-50%}@property --__annotate-note-align-y{syntax:"<length-percentage>";inherits:true;initial-value:0%}@property --__annotate-arrow-mask{syntax:"*";inherits:true;initial-value:none}.viraui__annotate-module__Annotate_7C36U{--vui-annotate-color:var(--global-foreground);--vui-annotate-target-gap:var(--space-small);--vui-annotate-label-gap:var(--space-x-small);--__annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap));anchor-name:--vui-annotate-target;anchor-scope:--vui-annotate-target,--vui-annotate-arrow;display:inline-block;overflow:visible;border-radius:var(--radius-x-small)}.viraui__annotate-module__Arrow_T4B-6{position:absolute;z-index:var(--vui-annotate-z-index);position-anchor:--vui-annotate-target;anchor-name:--vui-annotate-arrow;width:46px;height:38px;transform:translate(var(--vui-annotate-arrow-x),var(--vui-annotate-arrow-y));transform-origin:50% 50%;mask:var(--__annotate-arrow-mask) center /contain no-repeat;background:var(--vui-annotate-color);pointer-events:none}.viraui__annotate-module__Note_8UW-R{position:absolute;z-index:var(--vui-annotate-z-index);position-anchor:--vui-annotate-arrow;left:calc(anchor(left) + var(--__annotate-tail-x));top:calc(anchor(top) + var(--__annotate-tail-y));width:max-content;max-width:var(--vui-annotate-label-max-width);transform:translate(calc(var(--__annotate-note-align-x) + var(--vui-annotate-text-x)),calc(var(--__annotate-note-align-y) + var(--vui-annotate-text-y))) rotate(var(--vui-annotate-rotate));font-family:Segoe Print,Chalkboard SE,Marker Felt,Dancing Script,sans-serif,system-ui;font-size:.95rem;line-height:1.05;color:var(--vui-annotate-color);text-align:var(--vui-annotate-text-align);white-space:normal;pointer-events:none}.viraui__annotate-module__Annotate_7C36U[data-mark=true]{background:oklab(from var(--vui-annotate-color) l a b/30%);box-shadow:-.3em 0 0 0 oklab(from var(--vui-annotate-color) l a b/30%),.3em 0 0 0 oklab(from var(--vui-annotate-color) l a b/30%)}.viraui__annotate-module__Annotate_7C36U[data-side=top]{--__annotate-tail-x:23px;--__annotate-tail-y:4px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M23%204c-1%209-1%2020%200%2031%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m17%2029%206%207%206-7%22%2F%3E%3C%2Fsvg%3E");position-area:block-start;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=top-start]{--__annotate-tail-x:6px;--__annotate-tail-y:6px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top-start] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M6%206c10%202%2022%2014%2034%2026%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m36%2022%204%2010-10-4%22%2F%3E%3C%2Fsvg%3E");position-area:block-start inline-start;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=top-end]{--__annotate-tail-x:40px;--__annotate-tail-y:6px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top-end] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M40%206C30%208%2018%2020%206%2032%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M10%2022%206%2032l10-4%22%2F%3E%3C%2Fsvg%3E");position-area:block-start inline-end;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom]{--__annotate-tail-x:23px;--__annotate-tail-y:35px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M23%2035c-1-9-1-20%200-31%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m17%2010%206-7%206%207%22%2F%3E%3C%2Fsvg%3E");position-area:block-end;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-start]{--__annotate-tail-x:6px;--__annotate-tail-y:32px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-start] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M6%2032c10-2%2022-14%2034-26%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m30%2010%2010-4-4%2010%22%2F%3E%3C%2Fsvg%3E");position-area:block-end inline-start;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-end]{--__annotate-tail-x:40px;--__annotate-tail-y:32px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-end] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M40%2032C30%2030%2018%2018%206%206%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M16%2010%206%206l4%2010%22%2F%3E%3C%2Fsvg%3E");position-area:block-end inline-end;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=start]{--__annotate-tail-x:4px;--__annotate-tail-y:19px;--__annotate-note-align-x:calc(-100% - var(--vui-annotate-label-gap));--__annotate-note-align-y:-50%}.viraui__annotate-module__Annotate_7C36U[data-side=start] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M4%2019c11-1%2027-1%2039%200%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m36%2013%207%206-7%206%22%2F%3E%3C%2Fsvg%3E");position-area:inline-start;margin-inline-end:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=end]{--__annotate-tail-x:43px;--__annotate-tail-y:19px;--__annotate-note-align-x:var(--vui-annotate-label-gap);--__annotate-note-align-y:-50%}.viraui__annotate-module__Annotate_7C36U[data-side=end] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M43%2019c-11-1-28-1-40%200%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m10%2013-7%206%207%206%22%2F%3E%3C%2Fsvg%3E");position-area:inline-end;margin-inline-start:var(--vui-annotate-target-gap)}}
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-annotate-color{syntax:"<color>";inherits:true;initial-value:#d16500}@property --vui-annotate-arrow-x{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-arrow-y{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-text-x{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-text-y{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-rotate{syntax:"<angle>";inherits:true;initial-value:-4deg}@property --vui-annotate-target-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-label-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-label-max-width{syntax:"<length>";inherits:true;initial-value:150px}@property --vui-annotate-z-index{syntax:"*";inherits:true;initial-value:auto}@property --vui-annotate-text-align{syntax:"*";inherits:true;initial-value:start}@property --__annotate-tail-x{syntax:"<length>";inherits:true;initial-value:23px}@property --__annotate-tail-y{syntax:"<length>";inherits:true;initial-value:4px}@property --__annotate-note-align-x{syntax:"<length-percentage>";inherits:true;initial-value:-50%}@property --__annotate-note-align-y{syntax:"<length-percentage>";inherits:true;initial-value:0%}@property --__annotate-arrow-mask{syntax:"*";inherits:true;initial-value:none}.viraui__annotate-module__Annotate_7C36U{--vui-annotate-color:var(--global-foreground);--vui-annotate-target-gap:var(--space-small);--vui-annotate-label-gap:var(--space-x-small);--__annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap));anchor-name:--vui-annotate-target;anchor-scope:--vui-annotate-target,--vui-annotate-arrow;display:inline-block;overflow:visible;border-radius:var(--radius-x-small)}.viraui__annotate-module__Arrow_T4B-6{position:absolute;z-index:var(--vui-annotate-z-index);position-anchor:--vui-annotate-target;anchor-name:--vui-annotate-arrow;width:46px;height:38px;margin-left:var(--vui-annotate-arrow-x);margin-top:var(--vui-annotate-arrow-y);transform-origin:50% 50%;mask:var(--__annotate-arrow-mask) center /contain no-repeat;background:var(--vui-annotate-color);pointer-events:none}.viraui__annotate-module__Note_8UW-R{position:absolute;z-index:var(--vui-annotate-z-index);position-anchor:--vui-annotate-arrow;left:calc(anchor(left) + var(--__annotate-tail-x));top:calc(anchor(top) + var(--__annotate-tail-y));width:max-content;max-width:var(--vui-annotate-label-max-width);transform:translate(var(--__annotate-note-align-x),var(--__annotate-note-align-y)) rotate(var(--vui-annotate-rotate));font-family:Segoe Print,Chalkboard SE,Marker Felt,Dancing Script,sans-serif,system-ui;font-size:.95rem;line-height:1.05;color:var(--vui-annotate-color);text-align:var(--vui-annotate-text-align);white-space:normal;pointer-events:none}.viraui__annotate-module__NoteNudge_uQbzg{display:block}.viraui__annotate-module__Annotate_7C36U[data-mark=true]{background:oklab(from var(--vui-annotate-color) l a b/30%);box-shadow:-.3em 0 0 0 oklab(from var(--vui-annotate-color) l a b/30%),.3em 0 0 0 oklab(from var(--vui-annotate-color) l a b/30%)}.viraui__annotate-module__Annotate_7C36U[data-side=top]{--__annotate-tail-x:23px;--__annotate-tail-y:4px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M23%204c-1%209-1%2020%200%2031%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m17%2029%206%207%206-7%22%2F%3E%3C%2Fsvg%3E");position-area:block-start;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=top-start]{--__annotate-tail-x:6px;--__annotate-tail-y:6px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top-start] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M6%206c10%202%2022%2014%2034%2026%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m36%2022%204%2010-10-4%22%2F%3E%3C%2Fsvg%3E");position-area:block-start inline-start;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=top-end]{--__annotate-tail-x:40px;--__annotate-tail-y:6px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top-end] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M40%206C30%208%2018%2020%206%2032%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M10%2022%206%2032l10-4%22%2F%3E%3C%2Fsvg%3E");position-area:block-start inline-end;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom]{--__annotate-tail-x:23px;--__annotate-tail-y:35px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M23%2035c-1-9-1-20%200-31%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m17%2010%206-7%206%207%22%2F%3E%3C%2Fsvg%3E");position-area:block-end;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-start]{--__annotate-tail-x:6px;--__annotate-tail-y:32px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-start] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M6%2032c10-2%2022-14%2034-26%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m30%2010%2010-4-4%2010%22%2F%3E%3C%2Fsvg%3E");position-area:block-end inline-start;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-end]{--__annotate-tail-x:40px;--__annotate-tail-y:32px;--__annotate-note-align-x:-50%;--__annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-end] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M40%2032C30%2030%2018%2018%206%206%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M16%2010%206%206l4%2010%22%2F%3E%3C%2Fsvg%3E");position-area:block-end inline-end;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=start]{--__annotate-tail-x:4px;--__annotate-tail-y:19px;--__annotate-note-align-x:calc(-100% - var(--vui-annotate-label-gap));--__annotate-note-align-y:-50%}.viraui__annotate-module__Annotate_7C36U[data-side=start] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M4%2019c11-1%2027-1%2039%200%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m36%2013%207%206-7%206%22%2F%3E%3C%2Fsvg%3E");position-area:inline-start;margin-inline-end:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=end]{--__annotate-tail-x:43px;--__annotate-tail-y:19px;--__annotate-note-align-x:var(--vui-annotate-label-gap);--__annotate-note-align-y:-50%}.viraui__annotate-module__Annotate_7C36U[data-side=end] .viraui__annotate-module__Arrow_T4B-6{--__annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2238%22%20viewBox%3D%220%200%2046%2038%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M43%2019c-11-1-28-1-40%200%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m10%2013-7%206%207%206%22%2F%3E%3C%2Fsvg%3E");position-area:inline-end;margin-inline-start:var(--vui-annotate-target-gap)}}
|
|
@@ -49,13 +49,13 @@ export type AnnotateProps = React.ComponentPropsWithRef<'span'> & {
|
|
|
49
49
|
*/
|
|
50
50
|
arrowOffsetY?: string;
|
|
51
51
|
/**
|
|
52
|
-
* Horizontal
|
|
52
|
+
* Horizontal nudge for the note via translateX on the inner nudge wrapper.
|
|
53
53
|
*
|
|
54
54
|
* @default `0px`
|
|
55
55
|
*/
|
|
56
56
|
textOffsetX?: string;
|
|
57
57
|
/**
|
|
58
|
-
* Vertical
|
|
58
|
+
* Vertical nudge for the note via translateY on the inner nudge wrapper.
|
|
59
59
|
*
|
|
60
60
|
* @default `0px`
|
|
61
61
|
*/
|
|
@@ -61,10 +61,10 @@
|
|
|
61
61
|
"description": "Text alignment for the note via `--vui-annotate-text-align`."
|
|
62
62
|
},
|
|
63
63
|
"textOffsetX": {
|
|
64
|
-
"description": "Horizontal
|
|
64
|
+
"description": "Horizontal nudge for the note part (translateX on the inner nudge wrapper)."
|
|
65
65
|
},
|
|
66
66
|
"textOffsetY": {
|
|
67
|
-
"description": "Vertical
|
|
67
|
+
"description": "Vertical nudge for the note part (translateY on the inner nudge wrapper)."
|
|
68
68
|
},
|
|
69
69
|
"zIndex": {
|
|
70
70
|
"description": "Stacking order for arrow and note via `--vui-annotate-z-index`. Same value on both parts."
|
|
@@ -97,10 +97,10 @@
|
|
|
97
97
|
"description": "Text alignment for the note. Defaults to start."
|
|
98
98
|
},
|
|
99
99
|
"text-x": {
|
|
100
|
-
"description": "
|
|
100
|
+
"description": "Legacy horizontal note offset custom property. Prefer textOffsetX from React."
|
|
101
101
|
},
|
|
102
102
|
"text-y": {
|
|
103
|
-
"description": "
|
|
103
|
+
"description": "Legacy vertical note offset custom property. Prefer textOffsetY from React."
|
|
104
104
|
},
|
|
105
105
|
"z-index": {
|
|
106
106
|
"description": "Stacking order for arrow and note. Defaults to auto."
|
|
@@ -6,10 +6,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
6
6
|
var Annotate = ({ arrowOffsetX, arrowOffsetY, children, className, color, labelGap, labelMaxWidth = "300px", mark = false, note, ref, rotate, side = "top", style, targetGap, textAlign, textOffsetX, textOffsetY, zIndex, ...otherProps }) => {
|
|
7
7
|
const dynamicStyle = {
|
|
8
8
|
...color && { "--vui-annotate-color": `var(--highlight-${color})` },
|
|
9
|
-
...arrowOffsetX && { "--vui-annotate-arrow-x": arrowOffsetX },
|
|
10
|
-
...arrowOffsetY && { "--vui-annotate-arrow-y": arrowOffsetY },
|
|
11
|
-
...textOffsetX && { "--vui-annotate-text-x": textOffsetX },
|
|
12
|
-
...textOffsetY && { "--vui-annotate-text-y": textOffsetY },
|
|
13
9
|
...rotate && { "--vui-annotate-rotate": rotate },
|
|
14
10
|
...targetGap && { "--vui-annotate-target-gap": targetGap },
|
|
15
11
|
...labelGap && { "--vui-annotate-label-gap": labelGap },
|
|
@@ -18,6 +14,11 @@ var Annotate = ({ arrowOffsetX, arrowOffsetY, children, className, color, labelG
|
|
|
18
14
|
...textAlign && { "--vui-annotate-text-align": textAlign },
|
|
19
15
|
...style
|
|
20
16
|
};
|
|
17
|
+
const noteStyle = textOffsetX || textOffsetY ? { transform: `translate(${textOffsetX ?? "0px"}, ${textOffsetY ?? "0px"})` } : void 0;
|
|
18
|
+
const arrowStyle = arrowOffsetX || arrowOffsetY ? {
|
|
19
|
+
...arrowOffsetX && { "--vui-annotate-arrow-x": arrowOffsetX },
|
|
20
|
+
...arrowOffsetY && { "--vui-annotate-arrow-y": arrowOffsetY }
|
|
21
|
+
} : void 0;
|
|
21
22
|
return /* @__PURE__ */ jsxs("span", {
|
|
22
23
|
...otherProps,
|
|
23
24
|
ref,
|
|
@@ -27,11 +28,16 @@ var Annotate = ({ arrowOffsetX, arrowOffsetY, children, className, color, labelG
|
|
|
27
28
|
style: dynamicStyle,
|
|
28
29
|
children: [children, note && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
|
|
29
30
|
"aria-hidden": true,
|
|
30
|
-
className: annotate_module_default.Arrow
|
|
31
|
+
className: annotate_module_default.Arrow,
|
|
32
|
+
style: arrowStyle
|
|
31
33
|
}), /* @__PURE__ */ jsx("span", {
|
|
32
34
|
"aria-hidden": true,
|
|
33
35
|
className: annotate_module_default.Note,
|
|
34
|
-
children:
|
|
36
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
37
|
+
className: annotate_module_default.NoteNudge,
|
|
38
|
+
style: noteStyle,
|
|
39
|
+
children: note
|
|
40
|
+
})
|
|
35
41
|
})] })]
|
|
36
42
|
});
|
|
37
43
|
};
|
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
var Annotate = "viraui__annotate-module__Annotate_7C36U";
|
|
3
3
|
var Arrow = "viraui__annotate-module__Arrow_T4B-6";
|
|
4
4
|
var Note = "viraui__annotate-module__Note_8UW-R";
|
|
5
|
+
var NoteNudge = "viraui__annotate-module__NoteNudge_uQbzg";
|
|
5
6
|
var annotate_module_default = {
|
|
6
7
|
Annotate,
|
|
7
8
|
Arrow,
|
|
8
|
-
Note
|
|
9
|
+
Note,
|
|
10
|
+
NoteNudge
|
|
9
11
|
};
|
|
10
12
|
//#endregion
|
|
11
|
-
export { Annotate, Arrow, Note, annotate_module_default as default };
|
|
13
|
+
export { Annotate, Arrow, Note, NoteNudge, annotate_module_default as default };
|
|
@@ -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));clip-path:inset(0 round var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl));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;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 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));clip-path:inset(0 round var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl));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;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 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:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);clip-path:inset(0 round var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl));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{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;border-radius:var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl);clip-path:inset(0 round var(--__beam-radius-tl) var(--__beam-radius-tr) var(--__beam-radius-br) var(--__beam-radius-bl));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{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);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))}}}
|
|
@@ -21,7 +21,7 @@ var Chip = ({ addon, addonPosition = "start", children, className, ref, render,
|
|
|
21
21
|
children: addon
|
|
22
22
|
}), /* @__PURE__ */ jsx(Text, {
|
|
23
23
|
className: chip_module_default.Label,
|
|
24
|
-
trim:
|
|
24
|
+
trim: false,
|
|
25
25
|
size: "small",
|
|
26
26
|
lineHeight: "x-small",
|
|
27
27
|
children
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
],
|
|
21
21
|
"antiPatterns": [
|
|
22
22
|
"Assuming Stack stretches direct children by default — pass `fillChildren` when children should grow along the flex main axis",
|
|
23
|
+
"Putting `data-grow=\"false\"` on an ancestor to control nested fillChildren — set it on the child that should not grow",
|
|
23
24
|
"Re-declaring primitive flex container rules in app CSS when Stack can own the layout",
|
|
24
25
|
"Using viewport media queries when @container stack queries against the rendered Stack inline-size would match the design intent"
|
|
25
26
|
],
|
|
@@ -36,7 +37,7 @@
|
|
|
36
37
|
"description": "Renders children across rows or columns using the chosen flex direction."
|
|
37
38
|
},
|
|
38
39
|
"fillChildren": {
|
|
39
|
-
"description": "Makes direct children grow to fill the available space within the stack. Default `false`; opt in when layout needs equal flex growth on direct children."
|
|
40
|
+
"description": "Makes direct children grow to fill the available space within the stack. Default `false`; opt in when layout needs equal flex growth on direct children. A child opts out with its own `data-grow=\"false\"`; ancestor `data-grow` does not inherit into nested stacks."
|
|
40
41
|
},
|
|
41
42
|
"hAlign": {
|
|
42
43
|
"description": "Aligns content on the horizontal axis from the consumer point of view."
|
|
@@ -114,26 +114,32 @@
|
|
|
114
114
|
"module": "layout",
|
|
115
115
|
"values": ["true", "false"],
|
|
116
116
|
"presence": "optional; omit for default flex growth",
|
|
117
|
-
"effect": "true sets --vira-flex-grow: 1 and flex-grow: 1; false sets --vira-flex-grow: 0 and flex-grow: 0.",
|
|
117
|
+
"effect": "Affects only the element: true sets --vira-flex-grow: 1 and flex-grow: 1; false sets --vira-flex-grow: 0 and flex-grow: 0. Custom props are registered inherits: false so ancestors do not poison nested Stack fillChildren.",
|
|
118
118
|
"whenToUse": [
|
|
119
|
-
"Force grow or opt out
|
|
119
|
+
"Force grow or opt out on a fillChildren direct child",
|
|
120
120
|
"Fixed-width icons, indicators, or trailing slots (false)"
|
|
121
121
|
],
|
|
122
|
-
"whenNotToUse": [
|
|
123
|
-
|
|
122
|
+
"whenNotToUse": [
|
|
123
|
+
"When default flex growth is already correct",
|
|
124
|
+
"Expecting ancestor data-grow to change nested fillChildren children"
|
|
125
|
+
],
|
|
126
|
+
"related": ["Stack", "--vira-flex-grow"]
|
|
124
127
|
},
|
|
125
128
|
{
|
|
126
129
|
"name": "data-shrink",
|
|
127
130
|
"module": "layout",
|
|
128
131
|
"values": ["true", "false"],
|
|
129
132
|
"presence": "optional; omit for default flex shrink",
|
|
130
|
-
"effect": "true sets --vira-flex-shrink: 1 and flex-shrink: 1; false sets --vira-flex-shrink: 0 and flex-shrink: 0.",
|
|
133
|
+
"effect": "Affects only the element: true sets --vira-flex-shrink: 1 and flex-shrink: 1; false sets --vira-flex-shrink: 0 and flex-shrink: 0. Custom props are registered inherits: false.",
|
|
131
134
|
"whenToUse": [
|
|
132
|
-
"Force shrink or resist shrink
|
|
135
|
+
"Force shrink or resist shrink on that flex item",
|
|
133
136
|
"Labels, icons, or controls that must keep intrinsic width (false)"
|
|
134
137
|
],
|
|
135
|
-
"whenNotToUse": [
|
|
136
|
-
|
|
138
|
+
"whenNotToUse": [
|
|
139
|
+
"When default flex shrink is already correct",
|
|
140
|
+
"Expecting ancestor data-shrink to change nested flex consumers"
|
|
141
|
+
],
|
|
142
|
+
"related": ["Stack", "--vira-flex-shrink"]
|
|
137
143
|
},
|
|
138
144
|
{
|
|
139
145
|
"name": "data-vibrant",
|
|
@@ -191,16 +197,16 @@
|
|
|
191
197
|
{
|
|
192
198
|
"name": "--vira-flex-grow",
|
|
193
199
|
"module": "layout",
|
|
194
|
-
"setBy": "data-grow=\"true\" or data-grow=\"false\"",
|
|
195
|
-
"default": "
|
|
196
|
-
"purpose": "
|
|
200
|
+
"setBy": "data-grow=\"true\" or data-grow=\"false\"; registered in global-properties.css",
|
|
201
|
+
"default": "1 (initial-value); inherits: false; Stack fillChildren uses var(--vira-flex-grow, 1)",
|
|
202
|
+
"purpose": "Local grow signal for Stack fillChildren / child flex defaults; does not inherit so ancestor data-grow cannot poison nested stacks."
|
|
197
203
|
},
|
|
198
204
|
{
|
|
199
205
|
"name": "--vira-flex-shrink",
|
|
200
206
|
"module": "layout",
|
|
201
|
-
"setBy": "data-shrink=\"true\" or data-shrink=\"false\"",
|
|
202
|
-
"default": "
|
|
203
|
-
"purpose": "
|
|
207
|
+
"setBy": "data-shrink=\"true\" or data-shrink=\"false\"; registered in global-properties.css",
|
|
208
|
+
"default": "1 (initial-value); inherits: false",
|
|
209
|
+
"purpose": "Local shrink signal for flex defaults; does not inherit so ancestor data-shrink cannot poison descendants."
|
|
204
210
|
}
|
|
205
211
|
],
|
|
206
212
|
"antiPatterns": [
|
|
@@ -209,7 +215,8 @@
|
|
|
209
215
|
"Applying data-no-link-style to prose links that should use the default interactive underline treatment",
|
|
210
216
|
"Inventing backdrop-filter CSS instead of data-vibrant when vibrancy is desired",
|
|
211
217
|
"Inventing box-shadow CSS instead of data-elevation when theme-gated shadows are desired",
|
|
212
|
-
"Shipping a new consumer-facing data-* without updating preflight-surface.json and viraui-design/custom-attributes.md"
|
|
218
|
+
"Shipping a new consumer-facing data-* without updating preflight-surface.json and viraui-design/custom-attributes.md",
|
|
219
|
+
"Relying on ancestor data-grow / data-shrink to control nested Stack fillChildren (props do not inherit)"
|
|
213
220
|
],
|
|
214
221
|
"discovery": {
|
|
215
222
|
"consumption": "@viraui/react/consumption.json",
|
package/dist/preflight.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.preflight{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-mode{syntax:"<color>";initial-value:#000;inherits:true}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b / 0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-mode:contrast-color(var(--global-background));font-size:var(--font-root-size);box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);@container root not style(--effect-corner-shape: initial){corner-shape:var(--corner-shape)}@media (prefers-reduced-motion:reduce){animation:none!important;transition:none!important}}:focus-visible{outline:var(--outline);outline-offset:var(--outline-offset)}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),system-ui,sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums;@container root not style(--effect-holofoil: initial){&:after{content:"";position:fixed;inset:0;z-index:999;background-color:#99ffd8;pointer-events:none;mix-blend-mode:multiply;contain:strict;isolation:isolate;opacity:25%;background-image:radial-gradient(at 79% 56%,#70ade6 0,#0000 50%),radial-gradient(at 61% 80%,#ee909e 0,#0000 50%),radial-gradient(at 0 63%,#fdbc68 0,#0000 50%),radial-gradient(at 6% 50%,#e5cb8a 0,#0000 50%),radial-gradient(at 23% 10%,#e5db8f 0,#0000 50%),radial-gradient(at 36% 91%,#a0eea8 0,#0000 50%),radial-gradient(at 2% 80%,#e3a47d 0,#0000 50%);@container root style(--is-light-mode: white){mix-blend-mode:color;opacity:15%}}}}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg{display:inline-flex;vertical-align:middle;&:not([fill]){fill:currentcolor}}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}}@layer viraui.preflight{@container root not style(--effect-shadows: initial){[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklch(0% 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),#0000 calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation-hover="2"]:hover,[data-elevation-hover="3"]:hover,[data-elevation-hover="4"]:hover,[data-elevation="1"],[data-elevation="2"],[data-elevation="3"],[data-elevation="4"]{box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) var(--shadow-blur-1) oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) var(--shadow-blur-2) oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) var(--shadow-blur-3) oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) var(--shadow-blur-4) oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:2px;--y3:4px;--y4:7px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:1px;--shadow-blur-2:2px;--shadow-blur-3:2px;--shadow-blur-4:3px}[data-elevation-hover="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:0px;--x2:2px;--x3:4px;--x4:7px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:1px;--y2:5px;--y3:11px;--y4:19px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:3px;--shadow-blur-2:5px;--shadow-blur-3:6px;--shadow-blur-4:8px}[data-elevation-hover="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]):hover,[data-elevation="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-blur-3:7px}[data-elevation-hover="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:1px;--x2:5px;--x3:11px;--x4:19px}[data-elevation-hover="2"]:where([data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=right]){--shadow-blur-3:6px}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:4px;--shadow-blur-2:7px;--shadow-blur-3:10px;--shadow-blur-4:12px}[data-elevation-hover="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:2px;--x2:7px;--x3:16px;--x4:29px}[data-elevation-hover="3"]:where([data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=right]){--x2:10px;--x3:22px;--x4:39px;--shadow-blur-1:5px;--shadow-blur-2:10px;--shadow-blur-3:13px;--shadow-blur-4:15px}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:8px;--shadow-blur-2:14px;--shadow-blur-3:20px;--shadow-blur-4:23px}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=left]):hover,[data-elevation="4"]:where([data-elevation-direction=left]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:15px;--x3:33px;--x4:58px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:14px;--x3:33px;--x4:58px}}}@layer viraui.preflight{[data-grow=true]{--vira-flex-grow:1;flex-grow:1}[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=true]{--vira-flex-shrink:1;flex-shrink:1}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/12%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{font-size:1em;font-family:var(--font-family-mono);&:not(:where(pre &)){background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em}}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-mode=dark]{color:var(--global-foreground);color-scheme:dark}[data-mode=light]{color:var(--global-foreground);color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{color:var(--global-foreground);@container root style(--is-light-mode: black){color-scheme:dark}@container root style(--is-light-mode: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--effect-vibrancy: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-mode: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.preflight{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-mode{syntax:"<color>";initial-value:#000;inherits:true}@property --vira-flex-grow{syntax:"<number>";initial-value:1;inherits:false}@property --vira-flex-shrink{syntax:"<number>";initial-value:1;inherits:false}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b / 0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-mode:contrast-color(var(--global-background));font-size:var(--font-root-size);box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);@container root not style(--effect-corner-shape: initial){corner-shape:var(--corner-shape)}@media (prefers-reduced-motion:reduce){animation:none!important;transition:none!important}}:focus-visible{outline:var(--outline);outline-offset:var(--outline-offset)}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),system-ui,sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums;@container root not style(--effect-holofoil: initial){&:after{content:"";position:fixed;inset:0;z-index:999;background-color:#99ffd8;pointer-events:none;mix-blend-mode:multiply;contain:strict;isolation:isolate;opacity:25%;background-image:radial-gradient(at 79% 56%,#70ade6 0,#0000 50%),radial-gradient(at 61% 80%,#ee909e 0,#0000 50%),radial-gradient(at 0 63%,#fdbc68 0,#0000 50%),radial-gradient(at 6% 50%,#e5cb8a 0,#0000 50%),radial-gradient(at 23% 10%,#e5db8f 0,#0000 50%),radial-gradient(at 36% 91%,#a0eea8 0,#0000 50%),radial-gradient(at 2% 80%,#e3a47d 0,#0000 50%);@container root style(--is-light-mode: white){mix-blend-mode:color;opacity:15%}}}}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg{display:inline-flex;vertical-align:middle;&:not([fill]){fill:currentcolor}}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}}@layer viraui.preflight{@container root not style(--effect-shadows: initial){[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklch(0% 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),#0000 calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation-hover="2"]:hover,[data-elevation-hover="3"]:hover,[data-elevation-hover="4"]:hover,[data-elevation="1"],[data-elevation="2"],[data-elevation="3"],[data-elevation="4"]{box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) var(--shadow-blur-1) oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) var(--shadow-blur-2) oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) var(--shadow-blur-3) oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) var(--shadow-blur-4) oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:2px;--y3:4px;--y4:7px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:1px;--shadow-blur-2:2px;--shadow-blur-3:2px;--shadow-blur-4:3px}[data-elevation-hover="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:0px;--x2:2px;--x3:4px;--x4:7px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:1px;--y2:5px;--y3:11px;--y4:19px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:3px;--shadow-blur-2:5px;--shadow-blur-3:6px;--shadow-blur-4:8px}[data-elevation-hover="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]):hover,[data-elevation="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-blur-3:7px}[data-elevation-hover="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:1px;--x2:5px;--x3:11px;--x4:19px}[data-elevation-hover="2"]:where([data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=right]){--shadow-blur-3:6px}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:4px;--shadow-blur-2:7px;--shadow-blur-3:10px;--shadow-blur-4:12px}[data-elevation-hover="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:2px;--x2:7px;--x3:16px;--x4:29px}[data-elevation-hover="3"]:where([data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=right]){--x2:10px;--x3:22px;--x4:39px;--shadow-blur-1:5px;--shadow-blur-2:10px;--shadow-blur-3:13px;--shadow-blur-4:15px}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:8px;--shadow-blur-2:14px;--shadow-blur-3:20px;--shadow-blur-4:23px}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=left]):hover,[data-elevation="4"]:where([data-elevation-direction=left]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:15px;--x3:33px;--x4:58px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:14px;--x3:33px;--x4:58px}}}@layer viraui.preflight{[data-grow=true]{--vira-flex-grow:1;flex-grow:1}[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=true]{--vira-flex-shrink:1;flex-shrink:1}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/12%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{font-size:1em;font-family:var(--font-family-mono);&:not(:where(pre &)){background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em}}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-mode=dark]{color:var(--global-foreground);color-scheme:dark}[data-mode=light]{color:var(--global-foreground);color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{color:var(--global-foreground);@container root style(--is-light-mode: black){color-scheme:dark}@container root style(--is-light-mode: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--effect-vibrancy: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-mode: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viraui/react",
|
|
3
|
-
"version": "2026.2.
|
|
3
|
+
"version": "2026.2.4",
|
|
4
4
|
"private": false,
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"unplugin-dts": "1.0.3",
|
|
36
36
|
"vite": "8.2.2",
|
|
37
37
|
"vite-plugin-static-copy": "4.1.1",
|
|
38
|
-
"@viraui/foundation": "2026.2.
|
|
38
|
+
"@viraui/foundation": "2026.2.4",
|
|
39
39
|
"@viraui/icons": "2026.0.2",
|
|
40
40
|
"@viraui/postcss-config": "2026.0.0",
|
|
41
41
|
"@viraui/tsconfig": "2026.0.0"
|