@viraui/react 2026.0.28 → 2026.0.30
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/accordion/accordion.css +1 -1
- package/dist/components/chip/chip.css +1 -1
- package/dist/components/chip/chip.js +5 -2
- package/dist/components/glow/glow.css +1 -1
- package/dist/components/glow/glow.guide.json +2 -1
- package/dist/components/icon-button/icon-button.guide.json +2 -1
- package/dist/components/slider/slider.css +1 -1
- package/dist/components/toggle-button/toggle-button.guide.json +2 -1
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-accordion-island-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-accordion-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__accordion-module__Accordion_wFOlN{--vui-accordion-island-gap:var(--space-medium);--vui-accordion-radius:var(--radius-medium);inline-size:100%;&:dir(rtl) .viraui__accordion-module__Trigger_4HzIb[data-stack-direction=row-reverse]{direction:ltr;flex-direction:row}}.viraui__accordion-module__Trigger_4HzIb{inline-size:100%;border:0;background:#0000;cursor:pointer;text-align:start;color:inherit;&:focus-visible{outline-offset:-4px}&[data-disabled]{cursor:not-allowed;opacity:.5}.viraui__accordion-module__Item_66o2x[data-use-surface=true] &{&:focus-visible{border-radius:var(--radius-large);outline-offset:-4px}}}.viraui__accordion-module__IconSlot_AVQq3{position:relative;flex-shrink:0;inline-size:1rem;block-size:1rem}.viraui__accordion-module__Icon_qdu2v{position:absolute;inset:0;display:grid;place-items:center;transition:opacity var(--duration-fast) var(--easing-standard),rotate var(--duration-fast) var(--easing-standard);&:first-of-type{opacity:1;rotate:0deg}&:last-of-type{opacity:0;rotate:-90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:first-of-type{opacity:0;rotate:90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:last-of-type{opacity:1;rotate:0deg}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__accordion-module__Panel_U1Ofk{block-size:var(--accordion-panel-height);overflow:hidden;transition:block-size var(--duration-fast) var(--easing-standard);&[data-ending-style],&[data-starting-style]{block-size:0}@media (prefers-reduced-motion:reduce){transition:none}}}@layer viraui.overrides{.viraui__accordion-module__Item_66o2x{inline-size:100%;transition:margin var(--duration-fast) var(--easing-standard),
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-accordion-island-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-accordion-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__accordion-module__Accordion_wFOlN{--vui-accordion-island-gap:var(--space-medium);--vui-accordion-radius:var(--radius-medium);inline-size:100%;&:dir(rtl) .viraui__accordion-module__Trigger_4HzIb[data-stack-direction=row-reverse]{direction:ltr;flex-direction:row}}.viraui__accordion-module__Trigger_4HzIb{inline-size:100%;border:0;background:#0000;cursor:pointer;text-align:start;color:inherit;&:focus-visible{outline-offset:-4px}&[data-disabled]{cursor:not-allowed;opacity:.5}.viraui__accordion-module__Item_66o2x[data-use-surface=true] &{&:focus-visible{border-radius:var(--radius-large);outline-offset:-4px}}}.viraui__accordion-module__IconSlot_AVQq3{position:relative;flex-shrink:0;inline-size:1rem;block-size:1rem}.viraui__accordion-module__Icon_qdu2v{position:absolute;inset:0;display:grid;place-items:center;transition:opacity var(--duration-fast) var(--easing-standard),rotate var(--duration-fast) var(--easing-standard);&:first-of-type{opacity:1;rotate:0deg}&:last-of-type{opacity:0;rotate:-90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:first-of-type{opacity:0;rotate:90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:last-of-type{opacity:1;rotate:0deg}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__accordion-module__Panel_U1Ofk{block-size:var(--accordion-panel-height);overflow:hidden;transition:block-size var(--duration-fast) var(--easing-standard);&[data-ending-style],&[data-starting-style]{block-size:0}@media (prefers-reduced-motion:reduce){transition:none}}}@layer viraui.overrides{.viraui__accordion-module__Item_66o2x{inline-size:100%;transition:margin var(--duration-fast) var(--easing-standard),border-radius var(--duration-fast) var(--easing-standard);&[data-use-surface=true]{--vui-surface-border-radius-top-left:0;--vui-surface-border-radius-top-right:0;--vui-surface-border-radius-bottom-right:0;--vui-surface-border-radius-bottom-left:0;&:not([data-open]){--vui-surface-background:#0000}&:not([data-open])+&:not([data-open]),&[data-open]+&[data-open]{border-top-width:0}&:first-child,&:not([data-open])+&[data-open],&[data-open]+&:not([data-open]){--vui-surface-border-radius-top-left:var(--vui-accordion-radius);--vui-surface-border-radius-top-right:var(--vui-accordion-radius)}&:last-child,&:not([data-open]):has(+&[data-open]),&[data-open]:has(+&:not([data-open])){--vui-surface-border-radius-bottom-left:var(--vui-accordion-radius);--vui-surface-border-radius-bottom-right:var(--vui-accordion-radius)}&:not(:last-child):not([data-open]):has(+&[data-open]),&:not(:last-child)[data-open]:has(+&:not([data-open])){margin-block-end:var(--vui-accordion-island-gap)}}.viraui__accordion-module__Accordion_wFOlN[data-islands=false] &[data-use-surface=true]{&:not(:first-child){border-top-width:0}&:not([data-open])+&[data-open],&[data-open]+&:not([data-open]){--vui-surface-border-radius-top-left:0;--vui-surface-border-radius-top-right:0}&:not([data-open]):has(+&[data-open]),&[data-open]:has(+&:not([data-open])){--vui-surface-border-radius-bottom-left:0;--vui-surface-border-radius-bottom-right:0}&:not(:last-child):not([data-open]):has(+&[data-open]),&:not(:last-child)[data-open]:has(+&:not([data-open])){margin-block-end:0}}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-chip-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-chip-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-chip-color-bg-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:15%}@property --vui-chip-color-border-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:0}.viraui__chip-module__Chip_2D18T{--vui-chip-background:var(--global-primary);--vui-chip-color:contrast-color(var(--global-primary));--vui-chip-height:var(--space-x-large);--vui-chip-icon-size:0.9em;block-size:var(--vui-chip-height);border:1px solid var(--vui-chip-border-color);border-radius:var(--radius-infinite);background:var(--vui-chip-background);color:var(--vui-chip-color);font-size:var(--font-scale-body-small);font-variation-settings:"wght" 400;text-decoration:none;white-space:nowrap;overflow:hidden;@container root style(--is-light-mode: black){--vui-chip-color-bg-opacity:10%}&[data-variant=secondary]{--vui-chip-background:var(--global-contrast);--vui-chip-color:var(--base-6)}&[data-variant=outline]{--vui-chip-background:#0000;--vui-chip-border-color:oklab(from var(--global-contrast) l a b/0.2);--vui-chip-color:var(--base-6)}&[data-variant=gray]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-gray)}&[data-variant=slate]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-slate)}&[data-variant=yellow]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-yellow)}&[data-variant=green]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-green)}&[data-variant=blue]{--vui-chip-color:var(--highlight-blue)}&[data-variant=blue],&[data-variant=red]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity))}&[data-variant=red]{--vui-chip-color:var(--highlight-red)}&[data-variant=cyan]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-cyan)}&[data-variant=purple]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-purple)}&[data-variant=indigo]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-indigo)}&[data-variant=acid]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-acid)}&[data-variant=salmon]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-salmon)}&[data-variant=magenta]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-magenta)}}.viraui__chip-module__Content_7mLuL{min-block-size:100
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-chip-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-chip-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-chip-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-chip-color-bg-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:15%}@property --vui-chip-color-border-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:0}.viraui__chip-module__Chip_2D18T{--vui-chip-background:var(--global-primary);--vui-chip-color:contrast-color(var(--global-primary));--vui-chip-height:var(--space-x-large);--vui-chip-icon-size:0.9em;block-size:var(--vui-chip-height);border:1px solid var(--vui-chip-border-color);border-radius:var(--radius-infinite);background:var(--vui-chip-background);color:var(--vui-chip-color);font-size:var(--font-scale-body-small);font-variation-settings:"wght" 400;text-decoration:none;white-space:nowrap;overflow:hidden;@container root style(--is-light-mode: black){--vui-chip-color-bg-opacity:10%}&[data-variant=secondary]{--vui-chip-background:var(--global-contrast);--vui-chip-color:var(--base-6)}&[data-variant=outline]{--vui-chip-background:#0000;--vui-chip-border-color:oklab(from var(--global-contrast) l a b/0.2);--vui-chip-color:var(--base-6)}&[data-variant=gray]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-gray)}&[data-variant=slate]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-slate)}&[data-variant=yellow]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-yellow)}&[data-variant=green]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-green)}&[data-variant=blue]{--vui-chip-color:var(--highlight-blue)}&[data-variant=blue],&[data-variant=red]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity))}&[data-variant=red]{--vui-chip-color:var(--highlight-red)}&[data-variant=cyan]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-cyan)}&[data-variant=purple]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-purple)}&[data-variant=indigo]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-indigo)}&[data-variant=acid]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-acid)}&[data-variant=salmon]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-salmon)}&[data-variant=magenta]{--vui-chip-background:oklab(from currentColor l a b/var(--vui-chip-color-bg-opacity));--vui-chip-border-color:oklab(from currentColor l a b/var(--vui-chip-color-border-opacity));--vui-chip-color:var(--highlight-magenta)}}.viraui__chip-module__Content_7mLuL{min-block-size:100%;padding-inline:var(--space-small);.viraui__chip-module__Chip_2D18T[data-addon-position=start] &{padding-inline-start:var(--space-small);padding-inline-end:calc(var(--space-small) + var(--space-2x-small))}.viraui__chip-module__Chip_2D18T[data-addon-position=end] &{padding-inline-start:calc(var(--space-small) + var(--space-2x-small));padding-inline-end:var(--space-small)}}.viraui__chip-module__IconSlot_9N5vD{display:inline-grid;place-items:center;>svg{inline-size:var(--vui-chip-icon-size);block-size:var(--vui-chip-icon-size)}}.viraui__chip-module__Label_Hdx7l{display:inline-block;overflow:hidden;text-overflow:ellipsis}}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import './chip.css';
|
|
2
2
|
import { clsx } from "../../core/clsx.js";
|
|
3
|
+
import { Text } from "../text/text.js";
|
|
3
4
|
import { Stack } from "../stack/stack.js";
|
|
4
5
|
import chip_module_default from "./chip.module.js";
|
|
5
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -11,7 +12,6 @@ var Chip = ({ addon, addonPosition = "start", children, className, ref, render,
|
|
|
11
12
|
inline: true,
|
|
12
13
|
direction: addonPosition === "start" ? "row" : "row-reverse",
|
|
13
14
|
vAlign: "center",
|
|
14
|
-
hPadding: "small",
|
|
15
15
|
columnGap: "x-small",
|
|
16
16
|
className: chip_module_default.Content,
|
|
17
17
|
children: [addon && /* @__PURE__ */ jsx("span", {
|
|
@@ -19,8 +19,10 @@ var Chip = ({ addon, addonPosition = "start", children, className, ref, render,
|
|
|
19
19
|
className: chip_module_default.IconSlot,
|
|
20
20
|
"data-shrink": "false",
|
|
21
21
|
children: addon
|
|
22
|
-
}), /* @__PURE__ */ jsx(
|
|
22
|
+
}), /* @__PURE__ */ jsx(Text, {
|
|
23
23
|
className: chip_module_default.Label,
|
|
24
|
+
trim: false,
|
|
25
|
+
lineHeight: "x-small",
|
|
24
26
|
children
|
|
25
27
|
})]
|
|
26
28
|
});
|
|
@@ -34,6 +36,7 @@ var Chip = ({ addon, addonPosition = "start", children, className, ref, render,
|
|
|
34
36
|
"data-shrink": "false",
|
|
35
37
|
children: content,
|
|
36
38
|
className: clsx(chip_module_default.Chip, className),
|
|
39
|
+
"data-addon-position": addon ? addonPosition : void 0,
|
|
37
40
|
"data-has-icon": addon ? "true" : void 0,
|
|
38
41
|
"data-variant": variant
|
|
39
42
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-glow-starting-angle{syntax:"<number>";inherits:
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-glow-starting-angle{syntax:"<number>";inherits:true;initial-value:0}@property --vui-glow-angle-lag{syntax:"<time>";inherits:true;initial-value:80ms}@property --vui-glow-auto-rotate-speed{syntax:"<time>";inherits:true;initial-value:4s}@property --vui-glow-active-opacity{syntax:"<number>";inherits:true;initial-value:0}@property --vui-glow-spread{syntax:"<number>";inherits:true;initial-value:250}@property --vui-glow-border-width{syntax:"<length>";inherits:true;initial-value:2px}@property --vui-glow-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-glow-border-offset{syntax:"<length>";inherits:true;initial-value:5px}@property --vui-glow-color{syntax:"*";inherits:true;initial-value:#0000}@property --__glow-radius-tl{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-tr{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-br{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --__glow-radius-bl{syntax:"<length-percentage>";inherits:true;initial-value:0}@keyframes viraui__glow-module__vui-glow-auto-rotate_Zh-hL{0%{--vui-glow-starting-angle:0}to{--vui-glow-starting-angle:360}}.viraui__glow-module__Glow_7394e{--vui-glow-border-color:var(--global-contrast);--vui-glow-color:conic-gradient(from 180deg at 50% 70%,#0000,var(--global-primary),#0000);--__glow-radius-tl:var(--vui-surface-border-radius-top-left);--__glow-radius-tr:var(--vui-surface-border-radius-top-right);--__glow-radius-br:var(--vui-surface-border-radius-bottom-right);--__glow-radius-bl:var(--vui-surface-border-radius-bottom-left);position:relative;z-index:0;transition:--vui-glow-starting-angle var(--vui-glow-angle-lag) ease-out;&[data-glow-fit-content=true]{max-width:fit-content}&[data-glow-rainbow=true]{--vui-glow-color:conic-gradient(from 180deg at 50% 50%,var(--highlight-cyan),var(--highlight-blue),var(--highlight-green),var(--highlight-purple),var(--highlight-red),var(--highlight-indigo),var(--highlight-yellow),var(--highlight-salmon),var(--highlight-magenta),var(--highlight-cyan))}&[data-glow-auto-rotate=true]{--vui-glow-active-opacity:1;transition:none;animation:viraui__glow-module__vui-glow-auto-rotate_Zh-hL var(--vui-glow-auto-rotate-speed) linear infinite;@media (prefers-reduced-motion:reduce){animation:none}}&>*{--vui-glow-starting-angle:initial;--vui-glow-active-opacity:initial}&:after,&:before{content:"";position:absolute;z-index:1;pointer-events:none;inset:calc(var(--vui-glow-border-offset) * -1);opacity:var(--vui-glow-active-opacity);border:var(--vui-glow-border-width) solid #0000;border-radius:calc(var(--vui-glow-border-offset) + var(--__glow-radius-tl)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-tr)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-br)) calc(var(--vui-glow-border-offset) + var(--__glow-radius-bl));transition:opacity 1s;@media (prefers-reduced-motion:reduce){display:none}}&:not([data-glow-auto-rotate=true]){&:after,&:before{@media (hover:none),(pointer:coarse){display:none}}}&:before{background:var(--vui-glow-border-color);mask:linear-gradient(#0000,#0000),conic-gradient(from calc(((var(--vui-glow-starting-angle) + (var(--vui-glow-spread) * .25)) - (var(--vui-glow-spread) * 1.5)) * 1deg),oklch(100% 0 0deg/15%) 0deg,#fff,oklch(100% 0 0deg/15%) calc(var(--vui-glow-spread) * 2.5deg));mask-clip:padding-box,border-box;mask-composite:intersect}&:after{background:var(--vui-glow-color);filter:brightness(1.5);mask:linear-gradient(#0000,#0000),conic-gradient(from calc(((var(--vui-glow-starting-angle) + (var(--vui-glow-spread) * .25)) - (var(--vui-glow-spread) * .5)) * 1deg),#0000 0deg,#fff,#0000 calc(var(--vui-glow-spread) * .5deg));mask-clip:padding-box,border-box;mask-composite:intersect;background-size:calc(100% + var(--vui-glow-border-width) * 2) calc(100% + var(--vui-glow-border-width) * 2);background-position:calc(var(--vui-glow-border-width) * -1) calc(var(--vui-glow-border-width) * -1)}&[data-glow-global=true]:after{background-attachment:fixed}}}
|
|
@@ -22,7 +22,8 @@
|
|
|
22
22
|
"Relying on Glow for keyboard focus visibility",
|
|
23
23
|
"Treating Glow as the visual card (color/padding) instead of composing Surface children",
|
|
24
24
|
"Setting overflow:hidden on an ancestor Surface when outer glow must remain visible",
|
|
25
|
-
"Expecting soft bloom Light layer — Glow is border-ring only"
|
|
25
|
+
"Expecting soft bloom Light layer — Glow is border-ring only",
|
|
26
|
+
"Use many glows and auto rotate on the same page. It's cpu intensive"
|
|
26
27
|
],
|
|
27
28
|
"related": ["Surface", "Shimmer", "ProgressiveBlur"],
|
|
28
29
|
"properties": {
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
"whenNotToUse": [
|
|
11
11
|
"Actions that need visible text — use Button",
|
|
12
12
|
"Missing both aria-label and aria-labelledby",
|
|
13
|
-
"Navigation or non-button semantics — use IconButtonLink"
|
|
13
|
+
"Navigation or non-button semantics — use IconButtonLink",
|
|
14
|
+
"Temporally swap icons after user interactions with temporal pressed state, like copy feedback. Use ToggleButton instead"
|
|
14
15
|
],
|
|
15
16
|
"accessibility": [
|
|
16
17
|
"Provide aria-label or aria-labelledby on every IconButton — icon alone is not a name",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-slider-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-progress-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__slider-module__Slider_vDNlm{--vui-slider-track-size:var(--space-
|
|
1
|
+
@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-slider-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-thumb-spacer{syntax:"<length>";inherits:true;initial-value:0}@property --__slider-indicator-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-slider-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-progress-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-slider-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__slider-module__Slider_vDNlm{--vui-slider-track-size:var(--space-large);--vui-slider-thumb-size:var(--space-2x-small);--vui-slider-track-background:var(--global-contrast);--vui-slider-progress-background:var(--global-foreground);--vui-slider-thumb-background:var(--global-background);--__slider-thumb-spacer:12px;inline-size:100%;block-size:100%;max-block-size:min-content;min-inline-size:0;min-block-size:0;&:has([required]) .viraui__slider-module__Label_eQQHf:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]{--vui-slider-progress-background:var(--highlight-red)}&:has(.viraui__slider-module__SliderRoot_4JScw[data-disabled]),&[data-disabled]{--vui-slider-track-background:var(--global-disabled-background);--vui-slider-progress-background:var(--global-disabled-foreground);--vui-slider-thumb-background:var(--global-background);cursor:not-allowed}}.viraui__slider-module__SliderRoot_4JScw{inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0}.viraui__slider-module__SliderHeader_gOy9k{inline-size:100%;min-inline-size:0}.viraui__slider-module__Value_FaY9i{flex-shrink:0}.viraui__slider-module__SliderControl_FQd5-{position:relative;flex:1 1 auto;-webkit-user-select:none;user-select:none;touch-action:none;inline-size:100%;block-size:var(--vui-slider-track-size);min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{inline-size:var(--vui-slider-track-size);block-size:100%;>.viraui__slider-module__Track_wvLEH{inline-size:var(--vui-slider-track-size);block-size:100%}}}.viraui__slider-module__Track_wvLEH{position:relative;overflow:hidden;inline-size:100%;block-size:var(--vui-slider-track-size);background:var(--vui-slider-track-background);border-radius:var(--radius-small)}.viraui__slider-module__Indicator_y3JyJ{--__slider-indicator-gap:calc(var(--__slider-thumb-spacer) / 2);background:var(--vui-slider-progress-background);box-sizing:initial;position:relative;padding-inline-end:var(--__slider-indicator-gap);&[data-orientation=vertical]{padding-inline-end:0;padding-block-start:var(--__slider-indicator-gap)}.viraui__slider-module__Track_wvLEH:has(.viraui__slider-module__Thumb_S-uLF~.viraui__slider-module__Thumb_S-uLF) &{margin-inline-start:calc(var(--__slider-indicator-gap) * -1);padding-inline-end:calc(var(--__slider-indicator-gap) * 2);&[data-orientation=vertical]{margin-inline-start:0;padding-inline-end:0;margin-block-end:calc(var(--__slider-indicator-gap) * -1);padding-block-start:calc(var(--__slider-indicator-gap) * 2)}}}.viraui__slider-module__Thumb_S-uLF{box-sizing:border-box;inline-size:var(--__slider-thumb-spacer);block-size:calc(100% - max(8px, var(--radius-small)));appearance:none;&:after{content:"";position:absolute;inset-block:0;inset-inline-start:50%;translate:-50% 0;box-sizing:border-box;inline-size:var(--vui-slider-thumb-size);block-size:100%;background:var(--vui-slider-thumb-background);border-radius:var(--radius-infinite)}&[data-orientation=vertical]{inline-size:calc(100% - 8px);block-size:var(--__slider-thumb-spacer);&:after{inset-inline:0;inset-block-start:50%;inset-block-end:auto;translate:0 -50%;inline-size:100%;block-size:var(--vui-slider-thumb-size)}}&:not(:disabled,[data-disabled]){cursor:grab}&:not(:disabled,[data-disabled]):active,&:not(:disabled,[data-disabled]):has(>input:active),&:not(:disabled,[data-disabled])[data-dragging]:has(>input:focus){cursor:grabbing}&:has(>input:focus-visible):after{outline:var(--outline);outline-offset:var(--outline-offset)}>input:focus-visible{outline:none}}}
|
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
"whenToUse": [
|
|
7
7
|
"Toolbar pin, favorite, or mute toggles identified only by icon",
|
|
8
8
|
"Compact on/off controls that share IconButton size, variant, and loading model",
|
|
9
|
-
"Two-state actions where pressed state should swap the visible glyph"
|
|
9
|
+
"Two-state actions where pressed state should swap the visible glyph",
|
|
10
|
+
"Temporally swap icons after user interactions with temporal pressed state, like copy feedback."
|
|
10
11
|
],
|
|
11
12
|
"whenNotToUse": [
|
|
12
13
|
"Settings-style on/off fields — use Switch",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viraui/react",
|
|
3
|
-
"version": "2026.0.
|
|
3
|
+
"version": "2026.0.30",
|
|
4
4
|
"private": false,
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -35,10 +35,10 @@
|
|
|
35
35
|
"unplugin-dts": "1.0.3",
|
|
36
36
|
"vite": "8.1.4",
|
|
37
37
|
"vite-plugin-static-copy": "4.1.1",
|
|
38
|
-
"@viraui/foundation": "2026.0.
|
|
39
|
-
"@viraui/icons": "2026.0.0",
|
|
38
|
+
"@viraui/foundation": "2026.0.30",
|
|
40
39
|
"@viraui/postcss-config": "2026.0.0",
|
|
41
|
-
"@viraui/tsconfig": "2026.0.0"
|
|
40
|
+
"@viraui/tsconfig": "2026.0.0",
|
|
41
|
+
"@viraui/icons": "2026.0.1"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"@base-ui/react": ">=1.6.0",
|