@viraui/react 1.0.13 → 1.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (140) hide show
  1. package/dist/catalog.json +10 -4
  2. package/dist/components/accordion/accordion.css +1 -1
  3. package/dist/components/accordion/accordion.guide.json +26 -0
  4. package/dist/components/annotate/annotate.css +1 -1
  5. package/dist/components/annotate/annotate.guide.json +46 -57
  6. package/dist/components/avatar/avatar.css +1 -1
  7. package/dist/components/avatar/avatar.guide.json +22 -10
  8. package/dist/components/avatar/avatar.js +0 -2
  9. package/dist/components/avatar-group/avatar-group.css +1 -7
  10. package/dist/components/avatar-group/avatar-group.guide.json +23 -16
  11. package/dist/components/badge/badge.css +1 -1
  12. package/dist/components/badge/badge.d.ts +1 -1
  13. package/dist/components/badge/badge.guide.json +17 -13
  14. package/dist/components/badge/badge.js +1 -1
  15. package/dist/components/basic-input/basic-input.css +1 -1
  16. package/dist/components/basic-input/field-label.css +1 -1
  17. package/dist/components/basic-input/field-label.js +2 -0
  18. package/dist/components/bleed/bleed.guide.json +9 -6
  19. package/dist/components/button/button-chrome.d.ts +3 -1
  20. package/dist/components/button/button-chrome.js +3 -2
  21. package/dist/components/button/button-link.guide.json +55 -1
  22. package/dist/components/button/button-link.js +1 -0
  23. package/dist/components/button/button.css +1 -1
  24. package/dist/components/button/button.guide.json +27 -7
  25. package/dist/components/button/button.js +1 -0
  26. package/dist/components/checkbox/checkbox.css +1 -1
  27. package/dist/components/checkbox/checkbox.guide.json +40 -1
  28. package/dist/components/checkbox/checkbox.js +2 -2
  29. package/dist/components/checkbox/checkbox.module.js +1 -3
  30. package/dist/components/chip/chip.css +1 -1
  31. package/dist/components/chip/chip.guide.json +23 -6
  32. package/dist/components/chip/chip.js +1 -0
  33. package/dist/components/clamp-text/clamp-text.css +1 -1
  34. package/dist/components/clamp-text/clamp-text.guide.json +9 -0
  35. package/dist/components/dialog/dialog-sheet.js +1 -1
  36. package/dist/components/dialog/dialog.css +1 -1
  37. package/dist/components/dialog/dialog.guide.json +24 -0
  38. package/dist/components/dialog/dialog.module.js +1 -3
  39. package/dist/components/elevator/elevator.guide.json +23 -1
  40. package/dist/components/fieldset/fieldset.guide.json +16 -3
  41. package/dist/components/fieldset/fieldset.js +6 -6
  42. package/dist/components/fit-text/fit-text.css +1 -1
  43. package/dist/components/fit-text/fit-text.guide.json +2 -4
  44. package/dist/components/icon-button/icon-button-link.guide.json +52 -1
  45. package/dist/components/icon-button/icon-button-link.js +2 -2
  46. package/dist/components/icon-button/icon-button.d.ts +1 -1
  47. package/dist/components/icon-button/icon-button.guide.json +48 -3
  48. package/dist/components/icon-button/icon-button.js +2 -2
  49. package/dist/components/index.d.ts +1 -0
  50. package/dist/components/linear-progress/linear-progress.guide.json +16 -5
  51. package/dist/components/linear-progress/linear-progress.js +0 -1
  52. package/dist/components/masonry/masonry.d.ts +1 -1
  53. package/dist/components/masonry/masonry.guide.json +11 -9
  54. package/dist/components/menu/index.d.ts +11 -0
  55. package/dist/components/menu/menu-checkbox-item.d.ts +42 -0
  56. package/dist/components/menu/menu-checkbox-item.js +28 -0
  57. package/dist/components/menu/menu-group.d.ts +12 -0
  58. package/dist/components/menu/menu-group.js +36 -0
  59. package/dist/components/menu/menu-indicator-slot.d.ts +15 -0
  60. package/dist/components/menu/menu-indicator-slot.js +52 -0
  61. package/dist/components/menu/menu-item-row.d.ts +18 -0
  62. package/dist/components/menu/menu-item-row.js +47 -0
  63. package/dist/components/menu/menu-item.d.ts +36 -0
  64. package/dist/components/menu/menu-item.js +23 -0
  65. package/dist/components/menu/menu-link-item.d.ts +36 -0
  66. package/dist/components/menu/menu-link-item.js +26 -0
  67. package/dist/components/menu/menu-popup.d.ts +17 -0
  68. package/dist/components/menu/menu-popup.js +28 -0
  69. package/dist/components/menu/menu-radio-group.d.ts +16 -0
  70. package/dist/components/menu/menu-radio-group.js +36 -0
  71. package/dist/components/menu/menu-radio-item.d.ts +42 -0
  72. package/dist/components/menu/menu-radio-item.js +28 -0
  73. package/dist/components/menu/menu-separator.d.ts +9 -0
  74. package/dist/components/menu/menu-separator.js +15 -0
  75. package/dist/components/menu/menu-submenu-trigger.d.ts +29 -0
  76. package/dist/components/menu/menu-submenu-trigger.js +26 -0
  77. package/dist/components/menu/menu.css +1 -0
  78. package/dist/components/menu/menu.d.ts +58 -0
  79. package/dist/components/menu/menu.guide.json +101 -0
  80. package/dist/components/menu/menu.js +36 -0
  81. package/dist/components/menu/menu.module.js +13 -0
  82. package/dist/components/meter/meter.guide.json +15 -4
  83. package/dist/components/meter/meter.js +0 -1
  84. package/dist/components/popover/popover-sheet.js +1 -1
  85. package/dist/components/popover/popover.guide.json +25 -1
  86. package/dist/components/progressive-blur/progressive-blur.css +1 -1
  87. package/dist/components/progressive-blur/progressive-blur.guide.json +14 -4
  88. package/dist/components/progressive-blur/progressive-blur.js +2 -2
  89. package/dist/components/radio/radio.css +1 -1
  90. package/dist/components/radio/radio.guide.json +34 -1
  91. package/dist/components/radio/radio.js +28 -31
  92. package/dist/components/select/select-group.js +1 -1
  93. package/dist/components/select/select-option.d.ts +1 -1
  94. package/dist/components/select/select-option.js +2 -5
  95. package/dist/components/select/select-separator.js +7 -4
  96. package/dist/components/select/select.css +1 -1
  97. package/dist/components/select/select.guide.json +49 -8
  98. package/dist/components/select/select.js +1 -1
  99. package/dist/components/select/select.module.js +1 -5
  100. package/dist/components/separator/separator.guide.json +28 -1
  101. package/dist/components/shimmer/shimmer.css +1 -1
  102. package/dist/components/shimmer/shimmer.guide.json +19 -16
  103. package/dist/components/skeleton/skeleton.guide.json +24 -31
  104. package/dist/components/slider/slider.guide.json +27 -7
  105. package/dist/components/spinner/spinner.guide.json +5 -4
  106. package/dist/components/stack/stack.guide.json +49 -47
  107. package/dist/components/static-noise/static-noise.guide.json +18 -2
  108. package/dist/components/surface/surface.css +1 -1
  109. package/dist/components/surface/surface.guide.json +41 -48
  110. package/dist/components/switch/switch.css +1 -1
  111. package/dist/components/switch/switch.guide.json +25 -10
  112. package/dist/components/tabs/tabs.guide.json +11 -0
  113. package/dist/components/text/text.css +1 -1
  114. package/dist/components/text/text.guide.json +67 -76
  115. package/dist/components/textarea/textarea.css +1 -1
  116. package/dist/components/textarea/textarea.d.ts +4 -3
  117. package/dist/components/textarea/textarea.guide.json +19 -7
  118. package/dist/components/textfield/textfield.css +1 -1
  119. package/dist/components/textfield/textfield.guide.json +22 -7
  120. package/dist/components/title/title.css +1 -1
  121. package/dist/components/title/title.guide.json +62 -72
  122. package/dist/components/title/title.js +0 -1
  123. package/dist/components/toast/toast.css +1 -1
  124. package/dist/components/toast/toast.guide.json +32 -1
  125. package/dist/components/toggle-button/toggle-button.css +1 -0
  126. package/dist/components/toggle-button/toggle-button.d.ts +7 -0
  127. package/dist/components/toggle-button/toggle-button.guide.json +29 -2
  128. package/dist/components/toggle-button/toggle-button.js +18 -3
  129. package/dist/components/toggle-button/toggle-button.module.js +9 -0
  130. package/dist/components/toggle-group/toggle-group.d.ts +2 -1
  131. package/dist/components/toggle-group/toggle-group.guide.json +2 -3
  132. package/dist/components/tooltip/tooltip.guide.json +8 -1
  133. package/dist/components/typewriter/typewriter.css +1 -1
  134. package/dist/components/typewriter/typewriter.guide.json +27 -5
  135. package/dist/index.js +12 -2
  136. package/dist/internal/chrome-icons/chrome-icons.d.ts +2 -0
  137. package/dist/internal/chrome-icons/chrome-icons.js +7 -1
  138. package/dist/preflight-surface.json +1 -1
  139. package/dist/preflight.css +1 -1
  140. package/package.json +3 -3
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textarea-min-block-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textarea-padding-block{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textarea-input-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textarea-module__Textarea_mtOUG{--vui-textarea-min-block-size:calc(var(--space-x-large) * 2);--vui-textarea-padding-block:var(--space-small);--vui-textarea-input-border-radius:var(--radius-small);--vui-field-label-padding-inline:calc(var(--vui-textarea-input-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textarea-module__Label_5dOso:after{content:" *";color:var(--highlight-red)}}.viraui__textarea-module__Description_er3zI{padding-inline:calc(var(--vui-textarea-input-border-radius) / 2)}}@layer viraui.overrides{.viraui__textarea-module__CustomBasicInput_Ce7yA{--vui-basic-input-border-radius:var(--vui-textarea-input-border-radius);border:1px solid var(--global-contrast);min-block-size:var(--vui-textarea-min-block-size);padding-block:var(--vui-textarea-padding-block);line-height:1.4;resize:none;&[data-resize=vertical]{resize:vertical}&[data-resize=both]{resize:both}&[data-invalid]{border-color:var(--highlight-red)}&:disabled,&[data-disabled]{border-color:#0000}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textarea-min-block-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textarea-padding-block{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textarea-input-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textarea-module__Textarea_mtOUG{--vui-textarea-min-block-size:calc(var(--space-x-large) * 2);--vui-textarea-padding-block:var(--space-small);--vui-textarea-input-border-radius:var(--radius-small);--vui-field-label-padding-inline:calc(var(--vui-textarea-input-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textarea-module__Label_5dOso:after{content:" *";color:var(--highlight-red)}}.viraui__textarea-module__Description_er3zI{padding-inline:var(--vui-field-label-padding-inline)}}@layer viraui.overrides{.viraui__textarea-module__CustomBasicInput_Ce7yA{--vui-basic-input-border-radius:var(--vui-textarea-input-border-radius);border:1px solid var(--global-contrast);min-block-size:var(--vui-textarea-min-block-size);padding-block:var(--vui-textarea-padding-block);line-height:1.4;resize:none;&[data-resize=vertical]{resize:vertical}&[data-resize=horizontal]{resize:horizontal}&[data-resize=both]{resize:both}&[data-resize=block]{resize:block}&[data-resize=inline]{resize:inline}&[data-invalid]{border-color:var(--highlight-red)}&:disabled,&[data-disabled]{border-color:#0000}}}
@@ -32,12 +32,13 @@ export type TextareaProps = React.ComponentPropsWithRef<'textarea'> & Omit<Field
32
32
  */
33
33
  error?: React.ReactNode;
34
34
  /**
35
- * Resize behavior for the control. Omitted disables resize; `"vertical"` allows vertical resize;
36
- * `"both"` allows horizontal and vertical resize.
35
+ * Native CSS `resize` for the control, serialized to `data-resize`. Omitted keeps resize disabled
36
+ * (`none`); accepts any valid `CSSProperties['resize']` value such as `"vertical"`, `"horizontal"`,
37
+ * or `"both"`.
37
38
  *
38
39
  * @default undefined (no resize)
39
40
  */
40
- resize?: 'vertical' | 'both';
41
+ resize?: React.CSSProperties['resize'];
41
42
  /**
42
43
  * When `true`, sets `field-sizing: content` so the control grows with its value.
43
44
  * Still respects `min-block-size` and `resize`. Omitted / `false` keeps the browser fixed default.
@@ -4,7 +4,7 @@
4
4
  "summary": "Multi-line field control with shared field copy, optional resize, and optional content sizing.",
5
5
  "whenToUse": [
6
6
  "Multi-line text entry with label, description, and error",
7
- "Controlled vertical or bidirectional resize",
7
+ "Optional native CSS resize (vertical, horizontal, both, and other valid resize values)",
8
8
  "Content-sized growth via fitContent",
9
9
  "Native textarea attributes through the field control",
10
10
  "One or more Textareas inside Fieldset when they belong to a labeled form section with other fields"
@@ -23,19 +23,31 @@
23
23
  "related": ["Fieldset", "Textfield", "Text"],
24
24
  "properties": {
25
25
  "react": {
26
+ "description": {
27
+ "description": "Helper copy rendered with `Field.Description` and `Text` while the field is valid."
28
+ },
29
+ "error": {
30
+ "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while the field is invalid. Validation messages from `validate` are shown by `Field.Error` even when this prop is omitted."
31
+ },
26
32
  "fitContent": {
27
- "description": "When true, sets field-sizing: content so the control grows with its value while still respecting min-block-size and resize. Omitted or false keeps the browser fixed default."
33
+ "description": "When `true`, sets `field-sizing: content` so the control grows with its value. Still respects `min-block-size` and `resize`. Omitted / `false` keeps the browser fixed default."
34
+ },
35
+ "label": {
36
+ "description": "Visible label rendered with shared internal `FieldLabel`."
37
+ },
38
+ "resize": {
39
+ "description": "Native CSS `resize` for the control, serialized to `data-resize`. Omitted keeps resize disabled (`none`); accepts any valid `CSSProperties['resize']` value such as `\"vertical\"`, `\"horizontal\"`, or `\"both\"`."
28
40
  }
29
41
  },
30
42
  "css": {
43
+ "input-border-radius": {
44
+ "description": "Corner radius for the BasicInput textarea control (also drives field label/description inline padding)."
45
+ },
31
46
  "min-block-size": {
32
- "description": "Minimum block size of the textarea field root."
47
+ "description": "Minimum block size of the BasicInput textarea control."
33
48
  },
34
49
  "padding-block": {
35
- "description": "Block padding applied through the textarea root."
36
- },
37
- "input-border-radius": {
38
- "description": "Corner radius for the textarea control group."
50
+ "description": "Block padding on the BasicInput textarea control."
39
51
  }
40
52
  }
41
53
  }
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textfield-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textfield-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textfield-module__Textfield_o-70A{--vui-textfield-input-height:var(--space-x-large);--vui-textfield-control-group-background:var(--base-1);--vui-textfield-control-group-color:var(--global-foreground);--vui-textfield-control-group-border-color:var(--global-contrast);--vui-textfield-control-group-border-radius:var(--radius-medium);--vui-field-label-padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textfield-module__Label_5rjr0:after{content:" *";color:var(--highlight-red)}}.viraui__textfield-module__ControlGroup_2W-OC{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-textfield-input-height);background:var(--vui-textfield-control-group-background);border:1px solid var(--vui-textfield-control-group-border-color);border-radius:var(--vui-textfield-control-group-border-radius);&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:focus-visible),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-invalid]){--vui-textfield-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:disabled),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-disabled]){--vui-textfield-control-group-background:var(--global-disabled-background);--vui-textfield-control-group-border-color:#0000;box-shadow:none;cursor:not-allowed}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=start])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-start:var(--space-x-small)}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=end])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-end:var(--space-x-small)}}.viraui__textfield-module__Addon_kK1ef{min-inline-size:var(--space-x-large)}.viraui__textfield-module__Description_8Qxot{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}}@layer viraui.overrides{.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;min-inline-size:0;block-size:100%;line-height:1.2;border:none;background:#0000;box-shadow:none;border-radius:inherit;&:focus-visible{outline:none}&:disabled{cursor:not-allowed}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-textfield-input-height{syntax:"<length>";inherits:true;initial-value:0}@property --vui-textfield-control-group-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-textfield-control-group-border-radius{syntax:"<length-percentage>";inherits:true;initial-value:0}.viraui__textfield-module__Textfield_o-70A{--vui-textfield-input-height:var(--space-x-large);--vui-textfield-control-group-background:var(--base-1);--vui-textfield-control-group-color:var(--global-foreground);--vui-textfield-control-group-border-color:var(--global-contrast);--vui-textfield-control-group-border-radius:var(--radius-medium);--vui-field-label-padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textfield-module__Label_5rjr0:after{content:" *";color:var(--highlight-red)}}.viraui__textfield-module__ControlGroup_2W-OC{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-textfield-input-height);background:var(--vui-textfield-control-group-background);color:var(--vui-textfield-control-group-color);border:1px solid var(--vui-textfield-control-group-border-color);border-radius:var(--vui-textfield-control-group-border-radius);&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:focus-visible),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-invalid]){--vui-textfield-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:disabled),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-disabled]){--vui-textfield-control-group-background:var(--global-disabled-background);--vui-textfield-control-group-border-color:#0000;--vui-textfield-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=start])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-start:var(--space-x-small)}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=end])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-end:var(--space-x-small)}}.viraui__textfield-module__Addon_kK1ef{min-inline-size:var(--space-x-large)}.viraui__textfield-module__Description_8Qxot{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}}@layer viraui.overrides{.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;block-size:100%;line-height:1.2;background:#0000;box-shadow:none;border-radius:inherit;&:focus-visible{outline:none}}}
@@ -26,25 +26,40 @@
26
26
  "related": ["Fieldset", "Textarea", "Select", "Text"],
27
27
  "properties": {
28
28
  "react": {
29
+ "description": {
30
+ "description": "Helper copy rendered with `Field.Description` and `Text` while the field is valid."
31
+ },
32
+ "endAddon": {
33
+ "description": "Trailing decoration (icon, button). Buttons must use `type=\"button\"`."
34
+ },
35
+ "error": {
36
+ "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while the field is invalid. Validation messages from `validate` are shown by `Field.Error` even when this prop is omitted."
37
+ },
29
38
  "fitContent": {
30
- "description": "When true, sets field-sizing: content so the control grows inline with its value; block chrome stays the fixed textfield input height. Omitted or false keeps the browser fixed default."
39
+ "description": "When `true`, sets `field-sizing: content` so the control grows inline with its value. Block chrome stays `var(--vui-textfield-input-height)`. Omitted / `false` keeps the browser fixed default."
40
+ },
41
+ "label": {
42
+ "description": "Visible label rendered with shared internal `FieldLabel`."
43
+ },
44
+ "startAddon": {
45
+ "description": "Leading decoration (prefix text, icon). Not a second field control."
31
46
  }
32
47
  },
33
48
  "css": {
34
- "input-height": {
35
- "description": "Textfield control group block size."
36
- },
37
49
  "control-group-background": {
38
50
  "description": "Textfield control group background."
39
51
  },
40
- "control-group-color": {
41
- "description": "Textfield control group foreground color."
42
- },
43
52
  "control-group-border-color": {
44
53
  "description": "Textfield control group border color."
45
54
  },
46
55
  "control-group-border-radius": {
47
56
  "description": "Textfield control group corner radius."
57
+ },
58
+ "control-group-color": {
59
+ "description": "Textfield control group foreground color."
60
+ },
61
+ "input-height": {
62
+ "description": "Textfield control group block size."
48
63
  }
49
64
  }
50
65
  }
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:none}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:none}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:-.03em}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}.viraui__title-module__Title_CXMUX{--title-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--vui-title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1));--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-standard);margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--vui-title-letter-spacing);text-align:var(--vui-title-align);white-space:var(--vui-title-white-space);word-break:break-word;font-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-title-font-weight),"wdth" var(--vui-title-font-width),"opsz" var(--vui-title-font-opsz);text-box:var(--vui-title-trim) var(--vui-title-trim-type);display:inline-flex;&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--vui-title-padding-block-start) var(--vui-title-padding-inline-end) var(--vui-title-padding-block-end) var(--vui-title-padding-inline-start)}&[data-title-size=display]{--vui-title-font-size:clamp(var(--font-scale-h1),calc(var(--font-scale-h1) + 4.643cqi - 0.9286rem),var(--font-scale-display))}&[data-title-size="1"]{--vui-title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1))}&[data-title-size="2"]{--vui-title-font-size:clamp(var(--font-scale-h3),calc(var(--title-medium) * pow(var(--font-heading-typescale), 4)),var(--font-scale-h2))}&[data-title-size="3"]{--vui-title-font-size:clamp(var(--font-scale-h4),calc(var(--title-medium) * pow(var(--font-heading-typescale), 3)),var(--font-scale-h3))}&[data-title-size="4"]{--vui-title-font-size:clamp(var(--font-scale-h5),calc(var(--title-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-h4))}&[data-title-size="5"]{--vui-title-font-size:clamp(var(--font-scale-h6),calc(var(--title-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-h5));--vui-title-letter-spacing:-0.02em}&[data-title-size="6"]{--vui-title-font-size:clamp(var(--font-scale-body-medium),var(--title-medium),var(--font-scale-h6));--vui-title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--vui-title-literal-color)}&[data-title-line-height=none]{--vui-title-line-height:0}&[data-title-line-height=x-small]{--vui-title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--vui-title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--vui-title-line-height:var(--font-leading-large)}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:-.03em}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --__title-medium{syntax:"*";inherits:false;initial-value:0}.viraui__title-module__Title_CXMUX{--__title-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--vui-title-font-size:clamp(var(--font-scale-h2),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1));--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-standard);margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--vui-title-letter-spacing);text-align:var(--vui-title-align);white-space:var(--vui-title-white-space);word-break:break-word;font-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-title-font-weight),"wdth" var(--vui-title-font-width),"opsz" var(--vui-title-font-opsz);text-box:var(--vui-title-trim) var(--vui-title-trim-type);display:inline-flex;&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--vui-title-padding-block-start) var(--vui-title-padding-inline-end) var(--vui-title-padding-block-end) var(--vui-title-padding-inline-start)}&[data-title-size=display]{--vui-title-font-size:clamp(var(--font-scale-h1),calc(var(--font-scale-h1) + 4.643cqi - 0.9286rem),var(--font-scale-display))}&[data-title-size="2"]{--vui-title-font-size:clamp(var(--font-scale-h3),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 4)),var(--font-scale-h2))}&[data-title-size="3"]{--vui-title-font-size:clamp(var(--font-scale-h4),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 3)),var(--font-scale-h3))}&[data-title-size="4"]{--vui-title-font-size:clamp(var(--font-scale-h5),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-h4))}&[data-title-size="5"]{--vui-title-font-size:clamp(var(--font-scale-h6),calc(var(--__title-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-h5));--vui-title-letter-spacing:-0.02em}&[data-title-size="6"]{--vui-title-font-size:clamp(var(--font-scale-body-medium),var(--__title-medium),var(--font-scale-h6));--vui-title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--vui-title-literal-color)}&[data-title-line-height=none]{--vui-title-line-height:0}&[data-title-line-height=x-small]{--vui-title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--vui-title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--vui-title-line-height:var(--font-leading-large)}}}
@@ -27,51 +27,54 @@
27
27
  "description": "Aligns text using logical alignment values.",
28
28
  "refCss": "align"
29
29
  },
30
- "maxWidth": {
31
- "description": "Constrains the maximum inline size of the rendered title block.",
32
- "refCss": "max-width"
30
+ "balanced": {
31
+ "description": "Enables balanced wrapping for block-like titles."
33
32
  },
34
33
  "color": {
35
- "description": "Applies a literal color escape hatch when semantic tone is not used.",
36
- "refCss": "literal-color"
34
+ "description": "Applies a literal color escape hatch."
37
35
  },
38
- "whiteSpace": {
39
- "description": "Controls white-space preservation and wrapping behavior.",
40
- "refCss": "white-space"
36
+ "fontWidth": {
37
+ "description": "Overrides font width as a percentage (100 = normal); maps to `font-stretch` and `wdth`."
41
38
  },
42
- "weight": {
43
- "description": "Numeric font weight; maps to font-weight and the wght variation axis.",
44
- "refCss": "font-weight"
39
+ "hPadding": {
40
+ "description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."
45
41
  },
46
- "fontWidth": {
47
- "description": "Font width as a percentage (100 = normal); maps to font-stretch and the wdth variation axis.",
48
- "refCss": "font-width"
42
+ "lineHeight": {
43
+ "description": "Controls line height through foundation leading tokens."
44
+ },
45
+ "maxWidth": {
46
+ "description": "Constrains the maximum inline size of the rendered text block."
49
47
  },
50
48
  "opticalSize": {
51
- "description": "Optical size axis override (variable fonts); static fonts keep font-optical-sizing: auto.",
52
- "refCss": "font-opsz"
49
+ "description": "Overrides the optical size (`opsz`) axis on variable fonts; static fonts keep `font-optical-sizing: auto`."
50
+ },
51
+ "ref": {
52
+ "description": "Ref forwarded to the rendered title root element."
53
+ },
54
+ "render": {
55
+ "description": "Replaces the default `span` root using Base UI render semantics. Pair this with `size` for most headings so DOM semantics and visual preset stay intentionally aligned."
56
+ },
57
+ "selection": {
58
+ "description": "Enables text selection on the rendered copy."
59
+ },
60
+ "size": {
61
+ "description": "Selects a heading or display typography preset from the active theme scale. This controls only the visual preset. Semantic heading choice remains owned by `render`, because `Title` keeps a `span` root unless `render` replaces it."
53
62
  },
54
63
  "trim": {
55
- "description": "Trims text box whitespace at the chosen edge.",
64
+ "description": "Trims text box whitespace at the chosen edge when the browser supports `text-box`.",
56
65
  "refCss": "trim"
57
66
  },
58
67
  "trimType": {
59
- "description": "Selects the text-box trim basis when trim is active.",
60
- "refCss": "trim-type"
61
- },
62
- "hPadding": {
63
- "description": "Sets inline padding using one token or a [start, end] tuple."
68
+ "description": "Selects the `text-box` trim basis when `trim` is active."
64
69
  },
65
70
  "vPadding": {
66
- "description": "Sets block padding using one token or a [start, end] tuple."
71
+ "description": "Sets block padding using one token for both sides or a `[start, end]` tuple."
67
72
  },
68
- "size": {
69
- "description": "Selects the visual heading appearance preset; does not change semantic heading level.",
70
- "refCss": "font-size"
73
+ "weight": {
74
+ "description": "Overrides the size preset weight (`font-weight` + `wght` axis)."
71
75
  },
72
- "lineHeight": {
73
- "description": "Controls line height through foundation leading tokens.",
74
- "refCss": "line-height"
76
+ "whiteSpace": {
77
+ "description": "Controls white-space preservation and wrapping behavior."
75
78
  }
76
79
  },
77
80
  "css": {
@@ -79,67 +82,54 @@
79
82
  "description": "Title alignment on the root.",
80
83
  "refReact": "align"
81
84
  },
82
- "max-width": {
83
- "description": "Max inline size of the title root.",
84
- "refReact": "maxWidth"
85
+ "font-family": {
86
+ "description": "Heading font family on the root."
85
87
  },
86
- "literal-color": {
87
- "description": "Literal color override on the root.",
88
- "refReact": "color"
88
+ "font-opsz": {
89
+ "description": "Optical size axis on the root (variable fonts)."
89
90
  },
90
- "white-space": {
91
- "description": "White-space behavior on the root.",
92
- "refReact": "whiteSpace"
91
+ "font-size": {
92
+ "description": "Heading font size; size prop presets via data attributes."
93
93
  },
94
94
  "font-weight": {
95
- "description": "Font weight on the root.",
96
- "refReact": "weight"
95
+ "description": "Font weight on the root."
97
96
  },
98
97
  "font-width": {
99
- "description": "Font width percentage on the root (font-stretch + wdth).",
100
- "refReact": "fontWidth"
98
+ "description": "Font width percentage on the root (font-stretch + wdth)."
101
99
  },
102
- "font-opsz": {
103
- "description": "Optical size axis on the root (variable fonts).",
104
- "refReact": "opticalSize"
100
+ "letter-spacing": {
101
+ "description": "Heading letter spacing; size presets adjust this."
105
102
  },
106
- "trim": {
107
- "description": "Text-box trim mode on the root.",
108
- "refReact": "trim"
103
+ "line-height": {
104
+ "description": "Line height; lineHeight prop presets via data attributes."
109
105
  },
110
- "trim-type": {
111
- "description": "Text-box trim basis on the root.",
112
- "refReact": "trimType"
106
+ "literal-color": {
107
+ "description": "Literal color override on the root."
113
108
  },
114
- "padding-inline-start": {
115
- "description": "Inline-start padding when padding is enabled.",
116
- "refReact": "hPadding"
109
+ "max-width": {
110
+ "description": "Max inline size of the title root."
117
111
  },
118
- "padding-inline-end": {
119
- "description": "Inline-end padding when padding is enabled.",
120
- "refReact": "hPadding"
112
+ "padding-block-end": {
113
+ "description": "Block-end padding when padding is enabled."
121
114
  },
122
115
  "padding-block-start": {
123
- "description": "Block-start padding when padding is enabled.",
124
- "refReact": "vPadding"
116
+ "description": "Block-start padding when padding is enabled."
125
117
  },
126
- "padding-block-end": {
127
- "description": "Block-end padding when padding is enabled.",
128
- "refReact": "vPadding"
118
+ "padding-inline-end": {
119
+ "description": "Inline-end padding when padding is enabled."
129
120
  },
130
- "font-size": {
131
- "description": "Heading font size; size prop presets via data attributes.",
132
- "refReact": "size"
121
+ "padding-inline-start": {
122
+ "description": "Inline-start padding when padding is enabled."
133
123
  },
134
- "line-height": {
135
- "description": "Line height; lineHeight prop presets via data attributes.",
136
- "refReact": "lineHeight"
124
+ "trim": {
125
+ "description": "Text-box trim mode on the root.",
126
+ "refReact": "trim"
137
127
  },
138
- "letter-spacing": {
139
- "description": "Heading letter spacing; size presets adjust this."
128
+ "trim-type": {
129
+ "description": "Text-box trim basis on the root."
140
130
  },
141
- "font-family": {
142
- "description": "Heading font family on the root."
131
+ "white-space": {
132
+ "description": "White-space behavior on the root."
143
133
  }
144
134
  }
145
135
  }
@@ -27,7 +27,6 @@ var Title = ({ align = "start", balanced = false, selection = true, className, c
27
27
  props: {
28
28
  ...otherProps,
29
29
  "data-title-size": size,
30
- "data-title-weight": weight !== void 0 ? "custom" : "preset",
31
30
  "data-title-line-height": lineHeight,
32
31
  "data-title-balanced": balanced ? "true" : "false",
33
32
  "data-title-selection": selection ? "true" : "false",
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{.viraui__toast-module__Viewport_oSF5e{position:fixed;z-index:4;pointer-events:none;outline:0;inline-size:min(24rem,calc(100vw - 2 * var(--space-medium)));&[data-position=bottom-right]{inset-block-end:var(--space-medium);inset-inline-end:var(--space-medium)}&[data-position=bottom-left]{inset-block-end:var(--space-medium);inset-inline-start:var(--space-medium)}&[data-position=bottom-center]{inset-block-end:var(--space-medium);inset-inline:0;margin-inline:auto}&[data-position=top-right]{inset-block-start:var(--space-medium);inset-inline-end:var(--space-medium)}&[data-position=top-left]{inset-block-start:var(--space-medium);inset-inline-start:var(--space-medium)}&[data-position=top-center]{inset-block-start:var(--space-medium);inset-inline:0;margin-inline:auto}&[data-position=anchored]{inset:0;inline-size:auto}&>*{pointer-events:auto}}.viraui__toast-module__Content_5ODZr{overflow:hidden;transition:opacity .25s ease;&[data-behind]{opacity:0}&[data-expanded]{opacity:1}@media (prefers-reduced-motion:reduce){transition:none}}}@layer viraui.overrides{.viraui__toast-module__Banner_QkOlo{--gap:var(--space-small);--peek:var(--space-small);--scale:calc(max(0, 1 - (var(--toast-index, 0) * 0.1)));--shrink:calc(1 - var(--scale));--stack-height:var(--toast-frontmost-height,var(--toast-height,0px));--offset-y:calc(var(--toast-offset-y, 0px) * -1 + (var(--toast-index, 0) * var(--gap) * -1) + var(--toast-swipe-movement-y, 0px));position:absolute;inset-inline-end:0;inset-block-end:0;z-index:calc(1000 - var(--toast-index, 0));inline-size:100%;min-inline-size:16rem;will-change:transform,opacity;block-size:var(--toast-frontmost-height,var(--toast-height,auto));transform-origin:bottom center;transform:scale(var(--scale)) translateX(var(--toast-swipe-movement-x,0)) translateY(calc(var(--toast-swipe-movement-y, 0px) - (var(--toast-index, 0) * var(--peek)) - (var(--shrink) * var(--stack-height))));transition:transform var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);-webkit-user-select:none;user-select:none;&[data-swiping]{transition:none}&[data-expanded]{transform:scale(1) translateX(var(--toast-swipe-movement-x,0)) translateY(var(--offset-y));block-size:var(--toast-height,auto)}&[data-starting-style]{transform:scale(1) translateY(150%)}&[data-ending-style]{opacity:0;transform:scale(1) translateY(150%);&[data-swipe-direction=up]{transform:scale(1) translateY(calc(var(--toast-swipe-movement-y, 0px) - 150%))}&[data-swipe-direction=down]{transform:scale(1) translateY(calc(var(--toast-swipe-movement-y, 0px) + 150%))}&[data-swipe-direction=left]{transform:scale(1) translateX(calc(var(--toast-swipe-movement-x, 0px) - 150%)) translateY(var(--offset-y))}&[data-swipe-direction=right]{transform:scale(1) translateX(calc(var(--toast-swipe-movement-x, 0px) + 150%)) translateY(var(--offset-y))}}&[data-limited]{opacity:0}&:after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:0;inline-size:100%;block-size:calc(var(--gap) + 1px)}@media (prefers-reduced-motion:reduce){transition:none}}:is(.viraui__toast-module__Viewport_oSF5e[data-position=bottom-left],.viraui__toast-module__Viewport_oSF5e[data-position=top-left]) .viraui__toast-module__Banner_QkOlo{inset-inline-end:auto;inset-inline-start:0}:is(.viraui__toast-module__Viewport_oSF5e[data-position=bottom-center],.viraui__toast-module__Viewport_oSF5e[data-position=top-center]) .viraui__toast-module__Banner_QkOlo{inset-inline:0;margin-inline:auto}.viraui__toast-module__Viewport_oSF5e[data-position^=top-] .viraui__toast-module__Banner_QkOlo{inset-block-end:auto;inset-block-start:0;transform-origin:top center;--offset-y:calc(var(--toast-offset-y, 0px) + (var(--toast-index, 0) * var(--gap)) + var(--toast-swipe-movement-y, 0px));transform:scale(var(--scale)) translateX(var(--toast-swipe-movement-x,0)) translateY(calc(var(--toast-swipe-movement-y, 0px) + (var(--toast-index, 0) * var(--peek)) + (var(--shrink) * var(--stack-height))));&:after{inset-block-start:auto;inset-block-end:100%}&[data-expanded]{transform:scale(1) translateX(var(--toast-swipe-movement-x,0)) translateY(var(--offset-y))}&[data-ending-style]:not([data-swipe-direction]),&[data-starting-style]{transform:scale(1) translateY(-150%)}}.viraui__toast-module__Viewport_oSF5e[data-position=anchored] .viraui__toast-module__Banner_QkOlo{position:static;z-index:auto;min-inline-size:auto;block-size:auto;transform:none;&:after{content:none}transition:transform var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);&[data-ending-style],&[data-starting-style]{opacity:0;transform:scale(1) translateY(var(--space-2x-small))}&[data-expanded]{transform:none}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__toast-gap{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-peek{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-scale{syntax:"<number>";inherits:false;initial-value:1}@property --__toast-shrink{syntax:"<number>";inherits:false;initial-value:0}@property --__toast-stack-height{syntax:"<length>";inherits:false;initial-value:0}@property --__toast-offset-y{syntax:"<length>";inherits:false;initial-value:0}.viraui__toast-module__Viewport_oSF5e{position:fixed;z-index:4;pointer-events:none;outline:0;inline-size:min(24rem,calc(100vw - 2 * var(--space-medium)));&[data-position=bottom-right]{inset-block-end:var(--space-medium);inset-inline-end:var(--space-medium)}&[data-position=bottom-left]{inset-block-end:var(--space-medium);inset-inline-start:var(--space-medium)}&[data-position=bottom-center]{inset-block-end:var(--space-medium);inset-inline:0;margin-inline:auto}&[data-position=top-right]{inset-block-start:var(--space-medium);inset-inline-end:var(--space-medium)}&[data-position=top-left]{inset-block-start:var(--space-medium);inset-inline-start:var(--space-medium)}&[data-position=top-center]{inset-block-start:var(--space-medium);inset-inline:0;margin-inline:auto}&[data-position=anchored]{inset:0;inline-size:auto}&>*{pointer-events:auto}}.viraui__toast-module__Content_5ODZr{overflow:hidden;transition:opacity .25s ease;&[data-behind]{opacity:0}&[data-expanded]{opacity:1}@media (prefers-reduced-motion:reduce){transition:none}}}@layer viraui.overrides{.viraui__toast-module__Banner_QkOlo{--__toast-gap:var(--space-small);--__toast-peek:var(--space-small);--__toast-scale:calc(max(0, 1 - (var(--toast-index, 0) * 0.1)));--__toast-shrink:calc(1 - var(--__toast-scale));--__toast-stack-height:var(--toast-frontmost-height,var(--toast-height,0px));--__toast-offset-y:calc(var(--toast-offset-y, 0px) * -1 + (var(--toast-index, 0) * var(--__toast-gap) * -1) + var(--toast-swipe-movement-y, 0px));position:absolute;inset-inline-end:0;inset-block-end:0;z-index:calc(1000 - var(--toast-index, 0));inline-size:100%;min-inline-size:16rem;will-change:transform,opacity;block-size:var(--toast-frontmost-height,var(--toast-height,auto));transform-origin:bottom center;transform:scale(var(--__toast-scale)) translateX(var(--toast-swipe-movement-x,0)) translateY(calc(var(--toast-swipe-movement-y, 0px) - (var(--toast-index, 0) * var(--__toast-peek)) - (var(--__toast-shrink) * var(--__toast-stack-height))));transition:transform var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);-webkit-user-select:none;user-select:none;&[data-swiping]{transition:none}&[data-expanded]{transform:scale(1) translateX(var(--toast-swipe-movement-x,0)) translateY(var(--__toast-offset-y));block-size:var(--toast-height,auto)}&[data-starting-style]{transform:scale(1) translateY(150%)}&[data-ending-style]{opacity:0;transform:scale(1) translateY(150%);&[data-swipe-direction=up]{transform:scale(1) translateY(calc(var(--toast-swipe-movement-y, 0px) - 150%))}&[data-swipe-direction=down]{transform:scale(1) translateY(calc(var(--toast-swipe-movement-y, 0px) + 150%))}&[data-swipe-direction=left]{transform:scale(1) translateX(calc(var(--toast-swipe-movement-x, 0px) - 150%)) translateY(var(--__toast-offset-y))}&[data-swipe-direction=right]{transform:scale(1) translateX(calc(var(--toast-swipe-movement-x, 0px) + 150%)) translateY(var(--__toast-offset-y))}}&[data-limited]{opacity:0}&:after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:0;inline-size:100%;block-size:calc(var(--__toast-gap) + 1px)}@media (prefers-reduced-motion:reduce){transition:none}}:is(.viraui__toast-module__Viewport_oSF5e[data-position=bottom-left],.viraui__toast-module__Viewport_oSF5e[data-position=top-left]) .viraui__toast-module__Banner_QkOlo{inset-inline-end:auto;inset-inline-start:0}:is(.viraui__toast-module__Viewport_oSF5e[data-position=bottom-center],.viraui__toast-module__Viewport_oSF5e[data-position=top-center]) .viraui__toast-module__Banner_QkOlo{inset-inline:0;margin-inline:auto}.viraui__toast-module__Viewport_oSF5e[data-position^=top-] .viraui__toast-module__Banner_QkOlo{inset-block-end:auto;inset-block-start:0;transform-origin:top center;--__toast-offset-y:calc(var(--toast-offset-y, 0px) + (var(--toast-index, 0) * var(--__toast-gap)) + var(--toast-swipe-movement-y, 0px));transform:scale(var(--__toast-scale)) translateX(var(--toast-swipe-movement-x,0)) translateY(calc(var(--toast-swipe-movement-y, 0px) + (var(--toast-index, 0) * var(--__toast-peek)) + (var(--__toast-shrink) * var(--__toast-stack-height))));&:after{inset-block-start:auto;inset-block-end:100%}&[data-expanded]{transform:scale(1) translateX(var(--toast-swipe-movement-x,0)) translateY(var(--__toast-offset-y))}&[data-ending-style]:not([data-swipe-direction]),&[data-starting-style]{transform:scale(1) translateY(-150%)}}.viraui__toast-module__Viewport_oSF5e[data-position=anchored] .viraui__toast-module__Banner_QkOlo{position:static;z-index:auto;min-inline-size:auto;block-size:auto;transform:none;&:after{content:none}transition:transform var(--duration-slow) var(--easing-elastic),opacity var(--duration-slow) var(--easing-elastic);&[data-ending-style],&[data-starting-style]{opacity:0;transform:scale(1) translateY(var(--space-2x-small))}&[data-expanded]{transform:none}}}
@@ -23,5 +23,36 @@
23
23
  "Stacking many simultaneous toasts without a clear limit",
24
24
  "Using toasts for critical validation errors that block task completion"
25
25
  ],
26
- "related": ["Button", "Surface", "Stack", "Dialog"]
26
+ "related": ["Button", "Surface", "Stack", "Dialog"],
27
+ "properties": {
28
+ "react": {
29
+ "Banner.children": {
30
+ "description": "Optional action buttons. Accepts a single `Toast.Action` or an array of them."
31
+ },
32
+ "Banner.className": {
33
+ "description": "Class name forwarded to the toast root."
34
+ },
35
+ "Banner.description": {
36
+ "description": "Supporting copy below the title."
37
+ },
38
+ "Banner.dismissable": {
39
+ "description": "Whether to render the dismiss control."
40
+ },
41
+ "Banner.dismissLabel": {
42
+ "description": "Label for the dismiss control."
43
+ },
44
+ "Banner.onDismiss": {
45
+ "description": "Called when the dismiss control is activated, before Base UI closes the toast."
46
+ },
47
+ "Banner.title": {
48
+ "description": "Heading above the description. Falls back to `toast.title` from `toastManager.add`."
49
+ },
50
+ "Banner.toast": {
51
+ "description": "Toast instance from `useToastManager().toasts` or `createToastManager()`."
52
+ },
53
+ "Viewport.position": {
54
+ "description": "Controls viewport placement and stacking layout hooks."
55
+ }
56
+ }
57
+ }
27
58
  }
@@ -0,0 +1 @@
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{.viraui__toggle-button-module__IconSlot_8nRbU{position:relative;display:block;flex-shrink:0;inline-size:var(--vui-button-icon-size);block-size:var(--vui-button-icon-size);&[data-pressed]{.viraui__toggle-button-module__Icon_Y1ESH:first-of-type{opacity:0;rotate:30deg}.viraui__toggle-button-module__Icon_Y1ESH:last-of-type{opacity:1;rotate:0deg}}&[data-interpolate=true] .viraui__toggle-button-module__Icon_Y1ESH{transition:opacity var(--duration-fast) var(--easing-standard),rotate var(--duration-fast) var(--easing-standard);@media (prefers-reduced-motion:reduce){transition:none}}}.viraui__toggle-button-module__Icon_Y1ESH{position:absolute;inset:0;display:grid;place-items:center;&>svg{block-size:var(--vui-button-icon-size);inline-size:var(--vui-button-icon-size);flex-shrink:0}&:first-of-type{opacity:1;rotate:0deg}&:last-of-type{opacity:0;rotate:-30deg}}}
@@ -35,5 +35,12 @@ export type ToggleButtonProps = Omit<IconButtonProps, 'icon' | 'render' | 'varia
35
35
  * @default When omitted, `variant` is used in both states.
36
36
  */
37
37
  pressedVariant?: ButtonProps['variant'];
38
+ /**
39
+ * When `pressedIcon` is set, crossfade and rotate between resting and pressed icons
40
+ * (`data-interpolate="true"`). When `false`, swap instantly with no transition.
41
+ *
42
+ * @default false
43
+ */
44
+ interpolateIcons?: boolean;
38
45
  };
39
46
  export declare const ToggleButton: React.FC<ToggleButtonProps>;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ToggleButton",
3
3
  "structure": "<ToggleButton restingIcon={<Plus />} aria-label=\"Pin\" />",
4
- "summary": "Icon-only two-state toggle that swaps resting and optional pressed icons on Base UI Toggle state.",
4
+ "summary": "Icon-only two-state toggle that swaps resting and optional pressed icons on Base UI Toggle state; `interpolateIcons` (default false) opt-in crossfade + light rotate between dual icons.",
5
5
  "whenToUse": [
6
6
  "Toolbar pin, favorite, or mute toggles identified only by icon",
7
7
  "Compact on/off controls that share IconButton size, variant, and loading model",
@@ -22,5 +22,32 @@
22
22
  "Passing icon or render — ToggleButton owns icon swap and Toggle render wiring"
23
23
  ],
24
24
  "related": ["IconButton", "Button", "Switch", "ToggleGroup"],
25
- "properties": {}
25
+ "properties": {
26
+ "react": {
27
+ "interpolateIcons": {
28
+ "description": "When `pressedIcon` is set, crossfade and rotate between resting and pressed icons (`data-interpolate=\"true\"`). When `false`, swap instantly with no transition."
29
+ },
30
+ "loading": {
31
+ "description": "Shows a centered spinner overlay while preserving the original content width."
32
+ },
33
+ "pill": {
34
+ "description": "Applies a fully rounded pill shape to the button."
35
+ },
36
+ "pressedIcon": {
37
+ "description": "Icon shown while the toggle is pressed."
38
+ },
39
+ "pressedVariant": {
40
+ "description": "Visual variant while the toggle is pressed."
41
+ },
42
+ "restingIcon": {
43
+ "description": "Icon shown while the toggle is not pressed."
44
+ },
45
+ "size": {
46
+ "description": "Controls the visual button size."
47
+ },
48
+ "variant": {
49
+ "description": "Visual variant while the toggle is not pressed."
50
+ }
51
+ }
52
+ }
26
53
  }
@@ -1,8 +1,10 @@
1
+ import './toggle-button.css';
1
2
  import { IconButton } from "../icon-button/icon-button.js";
2
- import { jsx } from "react/jsx-runtime";
3
+ import toggle_button_module_default from "./toggle-button.module.js";
4
+ import { jsx, jsxs } from "react/jsx-runtime";
3
5
  import { Toggle } from "@base-ui/react/toggle";
4
6
  //#region src/components/toggle-button/toggle-button.tsx
5
- var ToggleButton = ({ restingIcon, pressedIcon, variant = "flat", pressedVariant, pressed, defaultPressed, onPressedChange, value, disabled, ref, ...otherProps }) => /* @__PURE__ */ jsx(Toggle, {
7
+ var ToggleButton = ({ restingIcon, pressedIcon, variant = "flat", pressedVariant, interpolateIcons = false, pressed, defaultPressed, onPressedChange, value, disabled, ref, ...otherProps }) => /* @__PURE__ */ jsx(Toggle, {
6
8
  ref,
7
9
  value,
8
10
  pressed,
@@ -12,12 +14,25 @@ var ToggleButton = ({ restingIcon, pressedIcon, variant = "flat", pressedVariant
12
14
  nativeButton: true,
13
15
  render: (toggleProps, state) => {
14
16
  const { "aria-label": _toggleAriaLabel, "aria-labelledby": _toggleAriaLabelledBy, ...restToggleProps } = toggleProps;
17
+ const icon = pressedIcon != null ? /* @__PURE__ */ jsxs("span", {
18
+ "aria-hidden": true,
19
+ className: toggle_button_module_default.IconSlot,
20
+ "data-interpolate": interpolateIcons ? "true" : "false",
21
+ ...state.pressed && { "data-pressed": "" },
22
+ children: [/* @__PURE__ */ jsx("span", {
23
+ className: toggle_button_module_default.Icon,
24
+ children: restingIcon
25
+ }), /* @__PURE__ */ jsx("span", {
26
+ className: toggle_button_module_default.Icon,
27
+ children: pressedIcon
28
+ })]
29
+ }) : restingIcon;
15
30
  return /* @__PURE__ */ jsx(IconButton, {
16
31
  ...otherProps,
17
32
  ...restToggleProps,
18
33
  disabled,
19
34
  variant: state.pressed ? pressedVariant ?? variant : variant,
20
- icon: state.pressed ? pressedIcon ?? restingIcon : restingIcon
35
+ icon
21
36
  });
22
37
  }
23
38
  });
@@ -0,0 +1,9 @@
1
+ //#region src/components/toggle-button/toggle-button.module.css
2
+ var IconSlot = "viraui__toggle-button-module__IconSlot_8nRbU";
3
+ var Icon = "viraui__toggle-button-module__Icon_Y1ESH";
4
+ var toggle_button_module_default = {
5
+ IconSlot,
6
+ Icon
7
+ };
8
+ //#endregion
9
+ export { Icon, IconSlot, toggle_button_module_default as default };
@@ -2,7 +2,8 @@ import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group
2
2
  /**
3
3
  * Public ToggleGroup props.
4
4
  *
5
- * Thin wrapper around Base UI `ToggleGroup` with default toolbar spacing.
5
+ * Thin wrapper around Base UI `ToggleGroup` with default `Stack` direction
6
+ * (`row` / `column` from `orientation`) and zero gap — consumers own spacing.
6
7
  * Compose `ToggleButton` children each with `value` and an accessible name.
7
8
  *
8
9
  * @default Base UI pass-through props keep upstream defaults.
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ToggleGroup",
3
3
  "structure": "<ToggleGroup>\n <ToggleButton restingIcon={<Plus />} aria-label=\"List\" value=\"list\" />\n</ToggleGroup>",
4
- "summary": "Toolbar toggle set with shared selection state and default Stack spacing on Base UI ToggleGroup.",
4
+ "summary": "Toolbar toggle set with shared selection state; Stack direction follows orientation with zero default gap.",
5
5
  "whenToUse": [
6
6
  "Segmented icon toolbars such as text alignment or formatting controls",
7
7
  "Single- or multi-select pressed states across related ToggleButton items",
@@ -22,6 +22,5 @@
22
22
  "Using Switch for icon-only toolbar toggle sets",
23
23
  "Embedding Surface chrome in the component — wrap demos or app chrome at the consumer"
24
24
  ],
25
- "related": ["ToggleButton", "IconButton", "Tabs"],
26
- "properties": {}
25
+ "related": ["ToggleButton", "IconButton", "Tabs"]
27
26
  }
@@ -22,5 +22,12 @@
22
22
  "Expecting `Tooltip.Arrow` (it is intentionally not exported or rendered)",
23
23
  "Using tooltip for modal or focus-trapped tasks"
24
24
  ],
25
- "related": ["Surface", "Button", "IconButton", "Stack", "Popover", "Icon"]
25
+ "related": ["Surface", "Button", "IconButton", "Stack", "Popover", "Icon"],
26
+ "properties": {
27
+ "css": {
28
+ "content-fade-duration": {
29
+ "description": "content fade duration custom property on the component root."
30
+ }
31
+ }
32
+ }
26
33
  }
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-typewriter-caret-color{syntax:"<color>";inherits:true;initial-value:currentcolor}.viraui__typewriter-module__Typewriter_R3sbb{display:inline;position:relative;isolation:isolate}.viraui__typewriter-module__Display_-IGJh{display:inline;white-space:pre-wrap}.viraui__typewriter-module__Display_-IGJh[data-preserve-space]{display:inline-grid}.viraui__typewriter-module__Display_-IGJh[data-preserve-space]>:is(.viraui__typewriter-module__Ghost_R-Yy-,.viraui__typewriter-module__Typed_00NZ8){grid-area:1/1}.viraui__typewriter-module__Caret_96Yfs{display:inline-block;vertical-align:initial;color:var(--vui-typewriter-caret-color);animation:viraui__typewriter-module__typewriter-caret-blink_yLCpV 1.1s step-start infinite;@media (prefers-reduced-motion:reduce){animation:none}&[data-type=block]{inline-size:.55em;block-size:.95em;margin-inline-start:.04em;background-color:var(--vui-typewriter-caret-color);transform:translateY(.08em)}&[data-type=pipe]:before{content:"|"}&[data-type=underscore]:before{content:"_"}}.viraui__typewriter-module__Ghost_R-Yy-{visibility:hidden;-webkit-user-select:none;user-select:none}.viraui__typewriter-module__Typed_00NZ8{display:inline}.viraui__typewriter-module__A11y_B-rjF{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;pointer-events:none}@keyframes viraui__typewriter-module__typewriter-caret-blink_yLCpV{50%{opacity:0}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-typewriter-caret-color{syntax:"<color>";inherits:true;initial-value:currentcolor}.viraui__typewriter-module__Typewriter_R3sbb{position:relative;isolation:isolate}.viraui__typewriter-module__Display_-IGJh{white-space:pre-wrap;&[data-preserve-space]{display:inline-grid;&>.viraui__typewriter-module__Ghost_R-Yy-,&>.viraui__typewriter-module__Typed_00NZ8{grid-area:1/1}}}.viraui__typewriter-module__Caret_96Yfs{display:inline-block;vertical-align:initial;color:var(--vui-typewriter-caret-color);animation:viraui__typewriter-module__typewriter-caret-blink_yLCpV 1.1s step-start infinite;@media (prefers-reduced-motion:reduce){animation:none}&[data-type=block]{inline-size:.55em;block-size:.95em;margin-inline-start:.04em;background-color:var(--vui-typewriter-caret-color);transform:translateY(.08em)}&[data-type=pipe]:before{content:"|"}&[data-type=underscore]:before{content:"_"}}.viraui__typewriter-module__Ghost_R-Yy-{visibility:hidden;-webkit-user-select:none;user-select:none}.viraui__typewriter-module__Typed_00NZ8{display:inline}.viraui__typewriter-module__A11y_B-rjF{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;pointer-events:none}@keyframes viraui__typewriter-module__typewriter-caret-blink_yLCpV{50%{opacity:0}}}