@viraui/react 1.0.12 → 1.0.14

package/dist/components/select/select.module.js

@@ -10,10 +10,8 @@ var ScrollButton = "viraui__select-module__ScrollButton_sHBOa";
 var ScrollArrowUp = "viraui__select-module__ScrollArrowUp_DGXS-";
 var ScrollArrowDown = "viraui__select-module__ScrollArrowDown_vhJy0";
 var List = "viraui__select-module__List_jdUWx";
-var OptionText = "viraui__select-module__OptionText_UynBD";
 var Indicator = "viraui__select-module__Indicator_YNUuz";
 var Group = "viraui__select-module__Group_xzkuA";
-var Separator = "viraui__select-module__Separator_Q-ri9";
 var Value = "viraui__select-module__Value_uWHPX";
 var Option = "viraui__select-module__Option_KgYqz";
 var select_module_default = {
@@ -28,12 +26,10 @@ var select_module_default = {
 	ScrollArrowUp,
 	ScrollArrowDown,
 	List,
-	OptionText,
 	Indicator,
 	Group,
-	Separator,
 	Value,
 	Option
 };
 //#endregion
-export { Description, Group, Icon, Indicator, Label, List, Option, OptionText, ScrollArrow, ScrollArrowDown, ScrollArrowUp, ScrollButton, Select, SelectPopup, Separator, Trigger, Value, select_module_default as default };
+export { Description, Group, Icon, Indicator, Label, List, Option, ScrollArrow, ScrollArrowDown, ScrollArrowUp, ScrollButton, Select, SelectPopup, Trigger, Value, select_module_default as default };

package/dist/components/separator/separator.guide.json

@@ -21,5 +21,32 @@
     "Using Select.Separator for general layout dividers",
     "Replacing Surface borders with Separator for container chrome"
   ],
-  "related": ["Stack", "Surface", "Select"]
+  "related": ["Stack", "Surface", "Select"],
+  "properties": {
+    "react": {
+      "hPadding": {
+        "description": "Sets inline padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple."
+      },
+      "orientation": {
+        "description": "Sets the separator line direction."
+      },
+      "ref": {
+        "description": "Ref forwarded to the rendered line root element."
+      },
+      "render": {
+        "description": "Replaces the default `hr` line root using Base UI render semantics."
+      },
+      "size": {
+        "description": "Sets the line thickness preset."
+      },
+      "vPadding": {
+        "description": "Sets block padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple."
+      }
+    },
+    "css": {
+      "size": {
+        "description": "Separator line thickness."
+      }
+    }
+  }
 }

package/dist/components/shimmer/shimmer.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-shimmer-duration{syntax:"<time>";inherits:false;initial-value:0s}@property --vui-shimmer-spread{syntax:"<length>";inherits:false;initial-value:0}@property --vui-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@property --vui-shimmer-highlight{syntax:"<color>";inherits:false;initial-value:#0000}.viraui__shimmer-module__Shimmer_1k-ZM{--vui-shimmer-duration:var(--duration-slowest);--vui-shimmer-spread:calc(3ch + var(--space-2x-large));--shimmer-base:currentcolor;--vui-shimmer-highlight:oklch(from var(--shimmer-base) min(calc(l + 0.35),1) c h);background-image:linear-gradient(calc(90deg + var(--vui-shimmer-angle)),var(--shimmer-base) calc(50% - var(--vui-shimmer-spread)),color-mix(in oklch,var(--vui-shimmer-highlight),var(--shimmer-base) 50%) calc(50% - var(--vui-shimmer-spread) * .5),var(--vui-shimmer-highlight) 50%,color-mix(in oklch,var(--vui-shimmer-highlight),var(--shimmer-base) 50%) calc(50% + var(--vui-shimmer-spread) * .5),var(--shimmer-base) calc(50% + var(--vui-shimmer-spread)));background-repeat:no-repeat;background-size:calc(200% + var(--vui-shimmer-spread) * 2) 100%;background-position:0 0;background-clip:text;-webkit-text-fill-color:#0000;animation:viraui__shimmer-module__shimmer-slide_V1znC var(--vui-shimmer-duration) linear infinite;&::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));-webkit-text-fill-color:contrast-color(var(--global-primary));background-image:none;background-clip:initial;text-shadow:none}@media (prefers-reduced-motion:reduce){animation:none;background-image:none;-webkit-text-fill-color:currentcolor}}@keyframes viraui__shimmer-module__shimmer-slide_V1znC{0%{background-position:0 0}to{background-position:100% 0}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-shimmer-duration{syntax:"<time>";inherits:false;initial-value:0s}@property --vui-shimmer-spread{syntax:"<length>";inherits:false;initial-value:0}@property --vui-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@property --vui-shimmer-highlight{syntax:"<color>";inherits:false;initial-value:#0000}@property --__shimmer-base{syntax:"<color>";inherits:false;initial-value:currentcolor}.viraui__shimmer-module__Shimmer_1k-ZM{--vui-shimmer-duration:var(--duration-slowest);--vui-shimmer-spread:calc(3ch + var(--space-2x-large));--vui-shimmer-highlight:oklch(from var(--__shimmer-base) min(calc(l + 0.35),1) c h);background-image:linear-gradient(calc(90deg + var(--vui-shimmer-angle)),var(--__shimmer-base) calc(50% - var(--vui-shimmer-spread)),color-mix(in oklch,var(--vui-shimmer-highlight),var(--__shimmer-base) 50%) calc(50% - var(--vui-shimmer-spread) * .5),var(--vui-shimmer-highlight) 50%,color-mix(in oklch,var(--vui-shimmer-highlight),var(--__shimmer-base) 50%) calc(50% + var(--vui-shimmer-spread) * .5),var(--__shimmer-base) calc(50% + var(--vui-shimmer-spread)));background-repeat:no-repeat;background-size:calc(200% + var(--vui-shimmer-spread) * 2) 100%;background-position:0 0;background-clip:text;-webkit-text-fill-color:#0000;animation:viraui__shimmer-module__shimmer-slide_V1znC var(--vui-shimmer-duration) linear infinite;&::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));-webkit-text-fill-color:contrast-color(var(--global-primary));background-image:none;background-clip:initial;text-shadow:none}@media (prefers-reduced-motion:reduce){animation:none;background-image:none;-webkit-text-fill-color:currentcolor}}@keyframes viraui__shimmer-module__shimmer-slide_V1znC{0%{background-position:0 0}to{background-position:100% 0}}}

package/dist/components/shimmer/shimmer.guide.json

@@ -25,39 +25,42 @@
   "related": ["Text", "Title", "Skeleton"],
   "properties": {
     "react": {
+      "angle": {
+        "description": "Sets the shimmer gradient angle offset using any valid CSS angle string.",
+        "refCss": "angle"
+      },
       "duration": {
         "description": "Sets the shimmer sweep duration using any valid CSS time string.",
         "refCss": "duration"
       },
+      "highlightColor": {
+        "description": "Overrides the shimmer highlight color when relative base lightness tuning is not used.",
+        "refCss": "highlight"
+      },
+      "ref": {
+        "description": "Ref forwarded to the rendered shimmer root element."
+      },
       "spread": {
         "description": "Sets the shimmer highlight spread using any valid CSS length string.",
         "refCss": "spread"
-      },
-      "angle": {
-        "description": "Sets the shimmer gradient angle offset using any valid CSS angle string.",
-        "refCss": "angle"
-      },
-      "highlightColor": {
-        "description": "Overrides the shimmer highlight color.",
-        "refCss": "highlight"
       }
     },
     "css": {
-      "duration": {
-        "description": "Shimmer animation duration.",
-        "refReact": "duration"
-      },
-      "spread": {
-        "description": "Shimmer highlight spread width.",
-        "refReact": "spread"
-      },
       "angle": {
         "description": "Shimmer gradient angle offset.",
         "refReact": "angle"
       },
+      "duration": {
+        "description": "Shimmer animation duration.",
+        "refReact": "duration"
+      },
       "highlight": {
         "description": "Shimmer highlight color.",
         "refReact": "highlightColor"
+      },
+      "spread": {
+        "description": "Shimmer highlight spread width.",
+        "refReact": "spread"
       }
     }
   }

package/dist/components/skeleton/skeleton.guide.json

@@ -23,50 +23,43 @@
   "related": ["Avatar"],
   "properties": {
     "react": {
-      "radius": {
-        "description": "Sets the corner radius from the Vira radius token scale.",
-        "refCss": "border-radius"
-      },
-      "width": {
-        "description": "Sets the skeleton inline size.",
-        "refCss": "inline-size"
-      },
       "height": {
-        "description": "Sets the skeleton block size.",
-        "refCss": "block-size"
+        "description": "Sets the skeleton block size using any valid CSS size string."
+      },
+      "minHeight": {
+        "description": "Sets the skeleton minimum block size using any valid CSS size string."
       },
       "minWidth": {
-        "description": "Sets the skeleton minimum inline size.",
-        "refCss": "min-inline-size"
+        "description": "Sets the skeleton minimum inline size using any valid CSS size string."
       },
-      "minHeight": {
-        "description": "Sets the skeleton minimum block size.",
-        "refCss": "min-block-size"
+      "radius": {
+        "description": "Sets the corner radius from the Vira radius token scale."
+      },
+      "ref": {
+        "description": "Ref forwarded to the rendered skeleton root element."
+      },
+      "width": {
+        "description": "Sets the skeleton inline size using any valid CSS size string."
       }
     },
     "css": {
-      "border-radius": {
-        "description": "Skeleton corner radius.",
-        "refReact": "radius"
-      },
-      "inline-size": {
-        "description": "Skeleton inline size.",
-        "refReact": "width"
+      "background": {
+        "description": "Skeleton placeholder background color."
       },
       "block-size": {
-        "description": "Skeleton block size.",
-        "refReact": "height"
+        "description": "Skeleton block size."
       },
-      "min-inline-size": {
-        "description": "Skeleton minimum inline size.",
-        "refReact": "minWidth"
+      "border-radius": {
+        "description": "Skeleton corner radius."
+      },
+      "inline-size": {
+        "description": "Skeleton inline size."
       },
       "min-block-size": {
-        "description": "Skeleton minimum block size.",
-        "refReact": "minHeight"
+        "description": "Skeleton minimum block size."
       },
-      "background": {
-        "description": "Skeleton placeholder background color."
+      "min-inline-size": {
+        "description": "Skeleton minimum inline size."
       }
     }
   }

package/dist/components/slider/slider.guide.json

@@ -22,21 +22,41 @@
   ],
   "related": ["Textfield", "Stack", "Text"],
   "properties": {
-    "css": {
-      "track-size": {
-        "description": "Slider track thickness."
+    "react": {
+      "description": {
+        "description": "Helper copy rendered with `Field.Description` and `Text` while the field is valid."
       },
-      "thumb-size": {
-        "description": "Slider thumb size."
+      "error": {
+        "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`."
       },
-      "track-background": {
-        "description": "Slider track background color."
+      "label": {
+        "description": "Visible label rendered with shared internal `FieldLabel`."
+      },
+      "required": {
+        "description": "Marks the slider as required and shows a required indicator on the label."
       },
+      "showValue": {
+        "description": "Renders the formatted current value via `Slider.Value` and `Text`."
+      },
+      "thumbAriaLabel": {
+        "description": "Accessible name for the thumb when `label` is omitted. Pass a string to name the first thumb (single-thumb slider, or the minimum thumb on a range). Pass a two-element tuple to name each range thumb in order; on a single-thumb slider only the first tuple value is applied."
+      }
+    },
+    "css": {
       "progress-background": {
         "description": "Slider filled progress color."
       },
       "thumb-background": {
         "description": "Slider thumb fill color."
+      },
+      "thumb-size": {
+        "description": "Slider thumb size."
+      },
+      "track-background": {
+        "description": "Slider track background color."
+      },
+      "track-size": {
+        "description": "Slider track thickness."
       }
     }
   }

package/dist/components/spinner/spinner.guide.json

@@ -23,15 +23,16 @@
   "related": ["Button", "IconButton"],
   "properties": {
     "react": {
+      "color": {
+        "description": "Overrides the spinner fill color."
+      },
       "size": {
-        "description": "Sets the rendered spinner size.",
-        "refCss": "size"
+        "description": "Sets the rendered spinner size."
       }
     },
     "css": {
       "size": {
-        "description": "Spinner glyph size on the root.",
-        "refReact": "size"
+        "description": "Spinner glyph size on the root."
       }
     }
   }

package/dist/components/stack/stack.guide.json

@@ -24,77 +24,79 @@
   "related": ["Surface", "Text", "Button"],
   "properties": {
     "react": {
-      "rowGap": {
-        "description": "Sets row gap using a Vira space token.",
-        "refCss": "row-gap"
-      },
       "columnGap": {
-        "description": "Sets column gap using a Vira space token.",
-        "refCss": "column-gap"
+        "description": "Sets the gap between flex columns using the Vira space token scale."
       },
-      "hAlign": {
-        "description": "Sets main-axis alignment for column layouts and cross-axis for row layouts.",
-        "refCss": "h-align"
+      "direction": {
+        "description": "Renders children across rows or columns using the chosen flex direction."
       },
-      "vAlign": {
-        "description": "Sets cross-axis alignment for column layouts and main-axis for row layouts.",
-        "refCss": "v-align"
+      "fillChildren": {
+        "description": "Makes direct children grow to fill the available space within the stack."
+      },
+      "hAlign": {
+        "description": "Aligns content on the horizontal axis from the consumer point of view."
       },
       "hPadding": {
-        "description": "Sets inline padding using one token or a [start, end] tuple."
+        "description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."
       },
-      "vPadding": {
-        "description": "Sets block padding using one token or a [start, end] tuple."
+      "inline": {
+        "description": "Displays the stack as `inline-flex` instead of `flex`."
       },
       "maxWidth": {
-        "description": "Constrains max inline size of the stack root.",
-        "refCss": "max-width"
+        "description": "Applies a maximum width value to the stack root."
       },
       "minWidth": {
-        "description": "Constrains min inline size of the stack root.",
-        "refCss": "min-width"
+        "description": "Applies a minimum width value to the stack root."
+      },
+      "ref": {
+        "description": "Ref forwarded to the rendered stack root element."
+      },
+      "render": {
+        "description": "Replaces the default `div` root using Base UI render semantics."
+      },
+      "rowGap": {
+        "description": "Sets the gap between flex rows using the Vira space token scale."
+      },
+      "vAlign": {
+        "description": "Aligns content on the vertical axis from the consumer point of view."
+      },
+      "vPadding": {
+        "description": "Sets block padding using one token for both sides or a `[start, end]` tuple."
+      },
+      "wrap": {
+        "description": "Allows direct children to wrap onto additional lines when space is constrained."
       }
     },
     "css": {
-      "row-gap": {
-        "description": "Flex row gap on the root.",
-        "refReact": "rowGap"
-      },
       "column-gap": {
-        "description": "Flex column gap on the root.",
-        "refReact": "columnGap"
+        "description": "Flex column gap on the root."
       },
       "h-align": {
-        "description": "Logical horizontal flex alignment hook.",
-        "refReact": "hAlign"
+        "description": "Logical horizontal flex alignment hook."
       },
-      "v-align": {
-        "description": "Logical vertical flex alignment hook.",
-        "refReact": "vAlign"
+      "max-width": {
+        "description": "Max inline size of the stack root."
       },
-      "padding-inline-start": {
-        "description": "Inline-start padding when padding is enabled.",
-        "refReact": "hPadding"
+      "min-width": {
+        "description": "Min inline size of the stack root."
       },
-      "padding-inline-end": {
-        "description": "Inline-end padding when padding is enabled.",
-        "refReact": "hPadding"
+      "padding-block-end": {
+        "description": "Block-end padding when padding is enabled."
       },
       "padding-block-start": {
-        "description": "Block-start padding when padding is enabled.",
-        "refReact": "vPadding"
+        "description": "Block-start padding when padding is enabled."
       },
-      "padding-block-end": {
-        "description": "Block-end padding when padding is enabled.",
-        "refReact": "vPadding"
+      "padding-inline-end": {
+        "description": "Inline-end padding when padding is enabled."
       },
-      "max-width": {
-        "description": "Max inline size of the stack root.",
-        "refReact": "maxWidth"
+      "padding-inline-start": {
+        "description": "Inline-start padding when padding is enabled."
       },
-      "min-width": {
-        "description": "Min inline size of the stack root.",
-        "refReact": "minWidth"
+      "row-gap": {
+        "description": "Flex row gap on the root."
+      },
+      "v-align": {
+        "description": "Logical vertical flex alignment hook."
       }
     }
   }

package/dist/components/static-noise/static-noise.guide.json

@@ -13,7 +13,7 @@
     "Large numbers of simultaneous full-viewport overlays on the same page"
   ],
   "accessibility": [
-    "StaticNoise is decorative — the root renders with aria-hidden by default",
+    "StaticNoise is decorative — the root hardcodes `aria-hidden=\"true\"` (not overridable via props)",
     "Parent surface or region must expose any meaningful label or busy state",
     "Consumer owns position, inset, z-index, and sizing for the overlay placement"
   ],
@@ -22,5 +22,21 @@
     "Using StaticNoise as the only loading announcement for a page",
     "Embedding layout positioning rules inside the component stylesheet"
   ],
-  "related": ["Surface", "Skeleton"]
+  "related": ["Surface", "Skeleton"],
+  "properties": {
+    "react": {
+      "animate": {
+        "description": "Animates the internal turbulence filter by cycling `feTurbulence` seed values."
+      },
+      "baseFrequency": {
+        "description": "Sets the SVG turbulence `baseFrequency` for the internal noise filter."
+      },
+      "mixBlendMode": {
+        "description": "Sets the rendered overlay mix blend mode."
+      },
+      "opacity": {
+        "description": "Sets the rendered overlay opacity."
+      }
+    }
+  }
 }

package/dist/components/surface/surface.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-surface-background{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-background-hover{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --vui-surface-overflow{syntax:"<custom-ident>";inherits:false;initial-value:visible}@property --vui-surface-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}.viraui__surface-module__Surface_slEYq{--vui-surface-border-radius-top-left:var(--vui-surface-border-radius);--vui-surface-border-radius-top-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-left:var(--vui-surface-border-radius);--vui-surface-background-hover:var(--vui-surface-background);position:relative;overflow:var(--vui-surface-overflow);box-sizing:border-box;background:var(--vui-surface-background);border-radius:var(--vui-surface-border-radius-top-left) var(--vui-surface-border-radius-top-right) var(--vui-surface-border-radius-bottom-right) var(--vui-surface-border-radius-bottom-left);border:0;@container root not style(--vibrancy-enable: initial){&[data-vibrant]{background:oklab(from var(--vui-surface-background) l a b/80%)}}&[data-surface-radius=auto]{--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}&[data-surface-has-padding=true]{padding:var(--vui-surface-padding-block-start) var(--vui-surface-padding-inline-end) var(--vui-surface-padding-block-end) var(--vui-surface-padding-inline-start)}&[data-surface-border]{border-style:var(--vui-surface-border-style);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--vui-surface-background-hover)}}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-surface-background{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-background-hover{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --vui-surface-overflow{syntax:"<custom-ident>";inherits:false;initial-value:visible}@property --vui-surface-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}.viraui__surface-module__Surface_slEYq{--vui-surface-border-radius-top-left:var(--vui-surface-border-radius);--vui-surface-border-radius-top-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-left:var(--vui-surface-border-radius);--vui-surface-background-hover:var(--vui-surface-background);position:relative;overflow:var(--vui-surface-overflow);box-sizing:border-box;background:var(--vui-surface-background);border-radius:var(--vui-surface-border-radius-top-left) var(--vui-surface-border-radius-top-right) var(--vui-surface-border-radius-bottom-right) var(--vui-surface-border-radius-bottom-left);border:0;@container root not style(--vibrancy-enable: initial){&[data-vibrant]{background:oklab(from var(--vui-surface-background) l a b/80%)}}&[data-surface-has-padding=true]{padding:var(--vui-surface-padding-block-start) var(--vui-surface-padding-inline-end) var(--vui-surface-padding-block-end) var(--vui-surface-padding-inline-start)}&[data-surface-border]{border-style:var(--vui-surface-border-style);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--vui-surface-background-hover)}}}}

package/dist/components/surface/surface.guide.json

@@ -33,85 +33,78 @@
   "related": ["Elevator", "Stack"],
   "properties": {
     "react": {
+      "border": {
+        "description": "Applies the shared contrast border on the chosen side or axis. Omit for no border."
+      },
+      "borderStyle": {
+        "description": "Sets the CSS border style when `border` is set."
+      },
       "color": {
-        "description": "Sets the resting background using a base ramp layer or literal CSS color.",
-        "refCss": "background"
+        "description": "Sets the resting background using a base ramp layer (`1`–`3`) or a literal CSS color value."
       },
       "hoverColor": {
-        "description": "Sets the hover background on hover-capable pointers.",
-        "refCss": "background-hover"
+        "description": "Sets the hover background on hover-capable pointers using a base ramp layer (`1`–`3`) or literal CSS value."
       },
-      "borderStyle": {
-        "description": "Sets the CSS border style when border is set.",
-        "refCss": "border-style"
+      "hPadding": {
+        "description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."
       },
       "overflow": {
-        "description": "Sets root overflow through the surface overflow custom property.",
+        "description": "Sets root overflow through the `--vui-surface-overflow` custom property.",
         "refCss": "overflow"
       },
       "radius": {
-        "description": "Sets corner radius from tokens, a per-corner tuple, or auto for concentric radii.",
-        "refCss": "border-radius"
+        "description": "Sets corner radius from the Vira radius token scale, a per-corner `[top-left, top-right, bottom-right, bottom-left]` tuple (`0` for square corners), or `auto` for concentric radii from the nearest ancestor Surface."
       },
-      "hPadding": {
-        "description": "Sets inline padding using one token or a [start, end] tuple."
+      "ref": {
+        "description": "Ref forwarded to the rendered surface root element."
+      },
+      "render": {
+        "description": "Replaces the default `div` root using Base UI render semantics."
       },
       "vPadding": {
-        "description": "Sets block padding using one token or a [start, end] tuple."
+        "description": "Sets block padding using one token for both sides or a `[start, end]` tuple."
       }
     },
     "css": {
       "background": {
-        "description": "Resting surface background on the root.",
-        "refReact": "color"
+        "description": "Resting surface background on the root."
       },
       "background-hover": {
-        "description": "Hover surface background on the root.",
-        "refReact": "hoverColor"
+        "description": "Hover surface background on the root."
       },
-      "border-style": {
-        "description": "Border style when border is enabled.",
-        "refReact": "borderStyle"
+      "border-radius": {
+        "description": "Uniform corner radius when radius is a single token."
       },
-      "overflow": {
-        "description": "Root overflow behavior.",
-        "refReact": "overflow"
+      "border-radius-bottom-left": {
+        "description": "Bottom-left corner radius; radius tuple or auto resolves per corner."
       },
-      "border-radius": {
-        "description": "Uniform corner radius when radius is a single token.",
-        "refReact": "radius"
+      "border-radius-bottom-right": {
+        "description": "Bottom-right corner radius; radius tuple or auto resolves per corner."
       },
       "border-radius-top-left": {
-        "description": "Top-left corner radius; radius tuple or auto resolves per corner.",
-        "refReact": "radius"
+        "description": "Top-left corner radius; radius tuple or auto resolves per corner."
       },
       "border-radius-top-right": {
-        "description": "Top-right corner radius; radius tuple or auto resolves per corner.",
-        "refReact": "radius"
+        "description": "Top-right corner radius; radius tuple or auto resolves per corner."
       },
-      "border-radius-bottom-right": {
-        "description": "Bottom-right corner radius; radius tuple or auto resolves per corner.",
-        "refReact": "radius"
-      },
-      "border-radius-bottom-left": {
-        "description": "Bottom-left corner radius; radius tuple or auto resolves per corner.",
-        "refReact": "radius"
+      "border-style": {
+        "description": "Border style when border is enabled."
       },
-      "padding-inline-start": {
-        "description": "Inline-start padding when padding is enabled.",
-        "refReact": "hPadding"
+      "overflow": {
+        "description": "Root overflow behavior.",
+        "refReact": "overflow"
       },
-      "padding-inline-end": {
-        "description": "Inline-end padding when padding is enabled.",
-        "refReact": "hPadding"
+      "padding-block-end": {
+        "description": "Block-end padding when padding is enabled."
       },
       "padding-block-start": {
-        "description": "Block-start padding when padding is enabled.",
-        "refReact": "vPadding"
+        "description": "Block-start padding when padding is enabled."
       },
-      "padding-block-end": {
-        "description": "Block-end padding when padding is enabled.",
-        "refReact": "vPadding"
+      "padding-inline-end": {
+        "description": "Inline-end padding when padding is enabled."
+      },
+      "padding-inline-start": {
+        "description": "Inline-start padding when padding is enabled."
       }
     }
   }

package/dist/components/switch/switch.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-switch-track-block-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-switch-track-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-switch-track-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-switch-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-switch-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-switch-thumb-inset{syntax:"<length>";inherits:true;initial-value:0}.viraui__switch-module__Switch_L86y7{&:has([required]) .viraui__switch-module__Label_9R-rv:after{content:" ＊";color:var(--highlight-red)}}.viraui__switch-module__SwitchRoot_Zv9An{--vui-switch-track-block-size:var(--space-large);--vui-switch-track-radius:var(--radius-small);--vui-switch-track-background:var(--global-contrast);--vui-switch-thumb-background:var(--base-1);--vui-switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--vui-switch-thumb-inset:var(--space-2x-small);position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--vui-switch-thumb-size) * 2) + var(--vui-switch-thumb-inset) * 2);block-size:var(--vui-switch-track-block-size);background:var(--vui-switch-track-background);border-radius:var(--vui-switch-track-radius);&[data-size=small]{--vui-switch-track-radius:var(--radius-x-small);--vui-switch-track-block-size:var(--space-medium);--vui-switch-thumb-size:calc(var(--space-medium) - var(--space-x-small))}&[data-checked]:not([data-disabled]){--vui-switch-track-background:var(--global-primary);--vui-switch-thumb-background:contrast-color(var(--global-primary))}&[data-invalid]:not([data-disabled]),.viraui__switch-module__Switch_L86y7[data-invalid]>&:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.viraui__switch-module__Switch_L86y7[data-disabled]>&{--vui-switch-track-background:var(--global-disabled-background);--vui-switch-thumb-background:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__switch-module__Thumb_ldwJw{--switch-thumb-radius:calc(var(--vui-switch-track-radius) - var(--vui-switch-thumb-inset));position:absolute;inset-block:var(--vui-switch-thumb-inset);inset-inline-start:var(--vui-switch-thumb-inset);background:var(--vui-switch-thumb-background);inline-size:var(--vui-switch-thumb-size);block-size:var(--vui-switch-thumb-size);border-radius:var(--switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);box-shadow:0 0 1px 1px var(--global-contrast);.viraui__switch-module__SwitchRoot_Zv9An[data-checked]>&{translate:100% 0;box-shadow:none}.viraui__switch-module__SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-switch-track-block-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-switch-track-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}@property --vui-switch-track-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-switch-thumb-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-switch-thumb-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-switch-thumb-inset{syntax:"<length>";inherits:true;initial-value:0}@property --__switch-thumb-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__switch-module__Switch_L86y7{&:has([required]) .viraui__switch-module__Label_9R-rv:after{content:" ＊";color:var(--highlight-red)}}.viraui__switch-module__SwitchRoot_Zv9An{--vui-switch-track-block-size:var(--space-large);--vui-switch-track-radius:var(--radius-small);--vui-switch-track-background:var(--global-contrast);--vui-switch-thumb-background:var(--base-1);--vui-switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--vui-switch-thumb-inset:var(--space-2x-small);position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--vui-switch-thumb-size) * 2) + var(--vui-switch-thumb-inset) * 2);block-size:var(--vui-switch-track-block-size);background:var(--vui-switch-track-background);border-radius:var(--vui-switch-track-radius);&[data-size=small]{--vui-switch-track-radius:var(--radius-x-small);--vui-switch-track-block-size:var(--space-medium);--vui-switch-thumb-size:calc(var(--space-medium) - var(--space-x-small))}&[data-checked]:not([data-disabled]){--vui-switch-track-background:var(--global-primary);--vui-switch-thumb-background:contrast-color(var(--global-primary))}&[data-invalid]:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled]{--vui-switch-track-background:var(--global-disabled-background);--vui-switch-thumb-background:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__switch-module__Thumb_ldwJw{--__switch-thumb-radius:calc(var(--vui-switch-track-radius) - var(--vui-switch-thumb-inset));position:absolute;inset-block:var(--vui-switch-thumb-inset);inset-inline-start:var(--vui-switch-thumb-inset);background:var(--vui-switch-thumb-background);inline-size:var(--vui-switch-thumb-size);block-size:var(--vui-switch-thumb-size);border-radius:var(--__switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);box-shadow:0 0 1px 1px var(--global-contrast);.viraui__switch-module__SwitchRoot_Zv9An[data-checked]>&{translate:100% 0;box-shadow:none}.viraui__switch-module__SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}}