@viraui/react 2026.2.11 → 2026.2.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/components/button/button.css +1 -1
  2. package/dist/components/separator/separator.css +1 -1
  3. package/dist/components/separator/separator.d.ts +10 -3
  4. package/dist/components/separator/separator.guide.json +7 -0
  5. package/dist/components/separator/separator.js +3 -2
  6. package/dist/components/text/text.css +2 -2
  7. package/dist/components/text/text.d.ts +12 -0
  8. package/dist/components/text/text.guide.json +16 -0
  9. package/dist/components/text/text.js +3 -1
  10. package/dist/components/title/title.css +4 -4
  11. package/dist/components/title/title.d.ts +14 -0
  12. package/dist/components/title/title.guide.json +14 -1
  13. package/dist/components/title/title.js +5 -1
  14. package/dist/consumption.json +2 -1
  15. package/package.json +6 -6
package/dist/components/button/button.css CHANGED
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2x-large);--vui-button-padding-inline:calc(var(--space-small) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-medium);max-block-size:min-content;-webkit-user-select:none;user-select:none;margin:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:var(--vui-button-height);block-size:var(--vui-button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-medium);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{border-radius:var(--radius-infinite)}&[data-size=large]{--vui-button-height:calc(var(--space-2x-large) + var(--space-x-small));--vui-button-padding-inline:calc(var(--space-medium) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-radius:var(--radius-medium)}&[data-size=small]{--vui-button-height:var(--space-x-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-x-small);--vui-button-icon-size:1em;--vui-button-radius:var(--radius-small);gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-6);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b / calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b / 0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--base-5);background-clip:unset;&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b / 12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b / 30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-variant=flat]:is(:disabled,[aria-disabled=true]),&[data-variant=flat]:is(:disabled,[aria-disabled=true]):active,&[data-variant=flat]:is(:disabled,[aria-disabled=true]):hover{--vui-button-background:#0000}&[data-loading=true][data-disabled]{pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:var(--vui-button-icon-size);inline-size:var(--vui-button-icon-size);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-button-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-button-height{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-padding-block{syntax:"<length>";inherits:false;initial-value:0}@property --vui-button-spinner-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-button-icon-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-button-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}.viraui__button-module__Button_oPhrP{--vui-button-background:var(--global-primary);--vui-button-color:var(--base-1);--vui-button-height:var(--space-2x-large);--vui-button-padding-inline:calc(var(--space-small) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-spinner-color:currentColor;--vui-button-radius:var(--radius-medium);max-block-size:min-content;-webkit-user-select:none;user-select:none;margin:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:fit-content;min-block-size:var(--vui-button-height);block-size:var(--vui-button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--vui-button-padding-block) var(--vui-button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid #0000;background:var(--vui-button-background);color:var(--vui-button-color);font-size:var(--font-scale-body-medium);border-radius:var(--vui-button-radius);transition:translate var(--easing-elastic) var(--duration-instant);will-change:translate;&:not(:disabled){background-clip:padding-box}&:not(:disabled,[aria-disabled=true]):active{translate:0 1px}&[data-pill=true]{border-radius:var(--radius-infinite)}&[data-size=large]{--vui-button-height:calc(var(--space-2x-large) + var(--space-x-small));--vui-button-padding-inline:calc(var(--space-medium) + var(--space-2x-small));--vui-button-padding-block:var(--space-small);--vui-button-icon-size:1.125em;--vui-button-radius:var(--radius-medium)}&[data-size=small]{--vui-button-height:var(--space-x-large);--vui-button-padding-inline:var(--space-small);--vui-button-padding-block:var(--space-x-small);--vui-button-icon-size:1em;--vui-button-radius:var(--radius-small);gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--vui-button-background:var(--global-primary);--vui-button-color:contrast-color(var(--global-primary));&:hover{--vui-button-background:oklab(from var(--global-primary) calc(l + 0.05) a b)}}&[data-variant=secondary]{--vui-button-background:var(--global-contrast);--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:oklab(from var(--global-contrast) l a b / calc(alpha + 0.03))}@container root style(--is-light-mode: black){--vui-button-background:oklab(from var(--global-contrast) l a b / 0.1)}}&[data-variant=flat]{--vui-button-background:#0000;--vui-button-color:var(--global-foreground);background-clip:unset;&:hover{--vui-button-background:var(--global-contrast);--vui-button-color:var(--base-7)}}&[data-variant=destructive]{--vui-button-background:oklab(from var(--highlight-red) l a b / 12%);--vui-button-color:var(--highlight-red);outline-color:var(--highlight-red);&:hover{--vui-button-background:oklab(from var(--highlight-red) l a b / 30%)}}&[data-addon-position=start]{flex-direction:row;padding-inline-end:calc(var(--vui-button-padding-inline) * 1.2)}&[data-addon-position=end]{flex-direction:row-reverse;padding-inline-start:calc(var(--vui-button-padding-inline) * 1.2)}&[data-icon-only=true]{gap:0;padding-block:var(--vui-button-padding-block);padding-inline:var(--vui-button-padding-block);inline-size:var(--vui-button-height);min-inline-size:var(--vui-button-height);max-inline-size:var(--vui-button-height);aspect-ratio:1/1}&:disabled,&:disabled:active,&:disabled:hover,&[aria-disabled=true],&[aria-disabled=true]:active,&[aria-disabled=true]:hover{--vui-button-background:var(--global-disabled-background);--vui-button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none;translate:0}&[data-variant=flat]:is(:disabled,[aria-disabled=true]),&[data-variant=flat]:is(:disabled,[aria-disabled=true]):active,&[data-variant=flat]:is(:disabled,[aria-disabled=true]):hover{--vui-button-background:#0000}&[data-loading=true][data-disabled]{pointer-events:none;border:0;box-shadow:none;--vui-button-color:var(--base-7)}}.viraui__button-module__Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:var(--vui-button-icon-size);inline-size:var(--vui-button-icon-size);flex-shrink:0}}.viraui__button-module__SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;color:var(--vui-button-spinner-color)}}
package/dist/components/separator/separator.css CHANGED
@@ -1 +1 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-separator-size{syntax:"<length>";inherits:false;initial-value:1px}.viraui__separator-module__Line_xXOe9{border:0;margin:0;background:var(--global-contrast);&[data-separator-orientation=horizontal]{inline-size:100%;block-size:var(--vui-separator-size)}&[data-separator-orientation=vertical]{inline-size:var(--vui-separator-size);block-size:100%}}}
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-separator-size{syntax:"<length>";inherits:false;initial-value:1px}@property --vui-separator-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}.viraui__separator-module__Line_xXOe9{border:0;margin:0;&[data-separator-orientation=horizontal]{inline-size:100%;block-size:1px;border-block-end:var(--vui-separator-size) var(--vui-separator-border-style) oklab(from var(--global-muted) l a b/30%)}&[data-separator-orientation=vertical]{inline-size:1px;border-inline-end:var(--vui-separator-size) var(--vui-separator-border-style) oklab(from var(--global-muted) l a b/30%);block-size:100%}}}
package/dist/components/separator/separator.d.ts CHANGED
@@ -6,12 +6,13 @@ type SeparatorSize = 'small' | 'medium' | 'large';
6
6
  /**
7
7
  * Public Separator props.
8
8
  *
9
- * Includes standard `hr` attributes such as `id`, `title`, and event handlers,
9
+ * Includes standard wrapper (`div` / Stack) attributes such as `id`, `data-grow`, and event handlers on the outer Stack,
10
10
  * plus Vira-owned orientation, line thickness, Stack padding, and Base UI `render` support for replacing the line root.
11
+ * `className`, `style`, and `ref` apply to the line root only.
11
12
  *
12
- * @default Native hr pass-through props keep React defaults.
13
+ * @default Native pass-through props keep React defaults on the wrapper unless noted above.
13
14
  */
14
- export type SeparatorProps = Omit<React.ComponentPropsWithoutRef<'hr'>, 'size'> & {
15
+ export type SeparatorProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> & {
15
16
  /**
16
17
  * Replaces the default `hr` line root using Base UI render semantics.
17
18
  *
@@ -48,6 +49,12 @@ export type SeparatorProps = Omit<React.ComponentPropsWithoutRef<'hr'>, 'size'>
48
49
  * @default 'small'
49
50
  */
50
51
  size?: SeparatorSize;
52
+ /**
53
+ * Sets the separator line border style through `--vui-separator-border-style`.
54
+ *
55
+ * @default 'solid'
56
+ */
57
+ borderStyle?: React.CSSProperties['borderStyle'];
51
58
  };
52
59
  export declare const Separator: React.FC<SeparatorProps>;
53
60
  export {};
package/dist/components/separator/separator.guide.json CHANGED
@@ -23,6 +23,10 @@
23
23
  "related": ["Stack", "Surface", "Select"],
24
24
  "properties": {
25
25
  "react": {
26
+ "borderStyle": {
27
+ "description": "Sets the separator line border style through `--vui-separator-border-style`.",
28
+ "refCss": "border-style"
29
+ },
26
30
  "hPadding": {
27
31
  "description": "Sets inline padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple."
28
32
  },
@@ -43,6 +47,9 @@
43
47
  }
44
48
  },
45
49
  "css": {
50
+ "border-style": {
51
+ "description": "Separator line border style."
52
+ },
46
53
  "size": {
47
54
  "description": "Separator line thickness."
48
55
  }
package/dist/components/separator/separator.js CHANGED
@@ -10,9 +10,10 @@ var separatorSizeValues = {
10
10
  medium: 2,
11
11
  large: 3
12
12
  };
13
- var Separator = ({ className, hPadding, orientation = "horizontal", ref, render, size = "small", style, vPadding, ...otherProps }) => {
13
+ var Separator = ({ borderStyle = "solid", className, hPadding, orientation = "horizontal", ref, render, size = "small", style, vPadding, ...otherProps }) => {
14
14
  const dynamicStyle = {
15
15
  "--vui-separator-size": `${separatorSizeValues[size]}px`,
16
+ "--vui-separator-border-style": borderStyle,
16
17
  ...style
17
18
  };
18
19
  const line = useRender({
@@ -20,13 +21,13 @@ var Separator = ({ className, hPadding, orientation = "horizontal", ref, render,
20
21
  render,
21
22
  ref,
22
23
  props: {
23
- ...otherProps,
24
24
  "data-separator-orientation": orientation,
25
25
  className: clsx(separator_module_default.Line, className),
26
26
  style: dynamicStyle
27
27
  }
28
28
  });
29
29
  return /* @__PURE__ */ jsx(Stack, {
30
+ ...otherProps,
30
31
  direction: orientation === "vertical" ? "row" : "column",
31
32
  hPadding,
32
33
  vAlign: orientation === "vertical" ? "stretch" : "initial",
package/dist/components/text/text.css CHANGED
@@ -1,8 +1,8 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-text-align{syntax:"*";inherits:false;initial-value:start}@property --vui-text-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-text-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-text-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-text-font-weight{syntax:"<number>";inherits:false;initial-value:400}@property --vui-text-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-text-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-text-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-text-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-text-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-text-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --vui-text-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --__text-medium{syntax:"*";inherits:false;initial-value:0}.viraui__text-module__Text_bS8kv{--__text-medium:clamp(
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-text-align{syntax:"*";inherits:false;initial-value:start}@property --vui-text-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-text-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-text-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-text-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-text-text-transform{syntax:"none | capitalize | uppercase | lowercase";inherits:false;initial-value:none}@property --vui-text-font-weight{syntax:"<number>";inherits:false;initial-value:400}@property --vui-text-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-text-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-text-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-text-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-text-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-text-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-text-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --vui-text-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --__text-medium{syntax:"*";inherits:false;initial-value:0}.viraui__text-module__Text_bS8kv{--__text-medium:clamp(
2
2
  var(--font-scale-body-medium),
3
3
  calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),
4
4
  calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3)
5
- );--vui-text-font-family:var(--font-family-body);--vui-text-font-size:clamp(var(--font-scale-body-small), var(--__text-medium), var(--font-scale-body-medium));--vui-text-line-height:var(--font-leading-standard);margin:0;max-inline-size:var(--vui-text-max-width);font-family:var(--vui-text-font-family);font-size:var(--vui-text-font-size);line-height:var(--vui-text-line-height);text-align:var(--vui-text-align);white-space:var(--vui-text-white-space);word-break:break-word;font-weight:var(--vui-text-font-weight);font-stretch:calc(var(--vui-text-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-text-font-weight),"wdth" var(--vui-text-font-width),"opsz" var(--vui-text-font-opsz);text-box:var(--vui-text-trim) var(--vui-text-trim-type);&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--vui-text-padding-block-start) var(--vui-text-padding-inline-end) var(--vui-text-padding-block-end) var(--vui-text-padding-inline-start)}&[data-text-family=mono]{--vui-text-font-family:var(--font-family-mono)}&[data-text-size=x-large]{--vui-text-font-size:clamp(
5
+ );--vui-text-font-family:var(--font-family-body);--vui-text-font-size:clamp(var(--font-scale-body-small), var(--__text-medium), var(--font-scale-body-medium));--vui-text-line-height:var(--font-leading-standard);margin:0;max-inline-size:var(--vui-text-max-width);font-family:var(--vui-text-font-family);font-size:var(--vui-text-font-size);line-height:var(--vui-text-line-height);text-align:var(--vui-text-align);letter-spacing:var(--vui-text-letter-spacing);text-transform:var(--vui-text-text-transform);white-space:var(--vui-text-white-space);word-break:break-word;font-weight:var(--vui-text-font-weight);font-stretch:calc(var(--vui-text-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-text-font-weight),"wdth" var(--vui-text-font-width),"opsz" var(--vui-text-font-opsz);text-box:var(--vui-text-trim) var(--vui-text-trim-type);&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--vui-text-padding-block-start) var(--vui-text-padding-inline-end) var(--vui-text-padding-block-end) var(--vui-text-padding-inline-start)}&[data-text-family=mono]{--vui-text-font-family:var(--font-family-mono)}&[data-text-size=x-large]{--vui-text-font-size:clamp(
6
6
  var(--font-scale-body-large),
7
7
  calc(var(--__text-medium) * pow(var(--font-heading-typescale), 2)),
8
8
  var(--font-scale-body-x-large)
package/dist/components/text/text.d.ts CHANGED
@@ -78,6 +78,18 @@ export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
78
78
  * @default 'normal'
79
79
  */
80
80
  whiteSpace?: React.CSSProperties['whiteSpace'];
81
+ /**
82
+ * Sets letter spacing on the rendered copy.
83
+ *
84
+ * @default No letter-spacing override.
85
+ */
86
+ tracking?: React.CSSProperties['letterSpacing'];
87
+ /**
88
+ * Applies a text-transform on the rendered copy.
89
+ *
90
+ * @default No text-transform override.
91
+ */
92
+ transform?: React.CSSProperties['textTransform'];
81
93
  /**
82
94
  * Enables balanced wrapping for block-like copy.
83
95
  *
package/dist/components/text/text.guide.json CHANGED
@@ -63,6 +63,14 @@
63
63
  "tone": {
64
64
  "description": "Sets the semantic text color role when no literal `color` override is used."
65
65
  },
66
+ "tracking": {
67
+ "description": "Sets letter spacing on the rendered copy.",
68
+ "refCss": "letter-spacing"
69
+ },
70
+ "transform": {
71
+ "description": "Applies a text-transform on the rendered copy.",
72
+ "refCss": "text-transform"
73
+ },
66
74
  "trim": {
67
75
  "description": "Trims text box whitespace at the chosen edge when the browser supports `text-box`. Pass `false` to disable text-box trim.",
68
76
  "refCss": "trim"
@@ -103,6 +111,10 @@
103
111
  "line-height": {
104
112
  "description": "Line height; lineHeight prop presets via data attributes."
105
113
  },
114
+ "letter-spacing": {
115
+ "description": "Letter spacing on the root.",
116
+ "refReact": "tracking"
117
+ },
106
118
  "literal-color": {
107
119
  "description": "Literal color override on the root."
108
120
  },
@@ -128,6 +140,10 @@
128
140
  "trim-type": {
129
141
  "description": "Text-box trim basis on the root."
130
142
  },
143
+ "text-transform": {
144
+ "description": "Text transform on the root.",
145
+ "refReact": "transform"
146
+ },
131
147
  "white-space": {
132
148
  "description": "White-space behavior on the root."
133
149
  }
package/dist/components/text/text.js CHANGED
@@ -4,13 +4,15 @@ import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
4
4
  import text_module_default from "./text.module.js";
5
5
  import { useRender } from "@base-ui/react/use-render";
6
6
  //#region src/components/text/text.tsx
7
- var Text = ({ align = "start", balanced = false, selection = true, className, color, family = "body", fontWidth, hPadding, lineHeight = "standard", maxWidth, opticalSize, ref, render, size = "medium", style, tone, trim = "both", trimType = "cap alphabetic", vPadding, weight = "regular", whiteSpace = "normal", ...otherProps }) => {
7
+ var Text = ({ align = "start", balanced = false, selection = true, className, color, family = "body", fontWidth, hPadding, lineHeight = "standard", maxWidth, opticalSize, ref, render, size = "medium", style, tone, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight = "regular", whiteSpace = "normal", ...otherProps }) => {
8
8
  const hasPadding = Boolean(hPadding || vPadding);
9
9
  const dynamicStyle = {
10
10
  "--vui-text-align": align,
11
11
  "--vui-text-max-width": maxWidth ?? "none",
12
12
  "--vui-text-literal-color": color,
13
13
  "--vui-text-white-space": whiteSpace,
14
+ "--vui-text-letter-spacing": tracking,
15
+ "--vui-text-text-transform": transform,
14
16
  "--vui-text-trim": trim ? `trim-${trim}` : "none",
15
17
  "--vui-text-trim-type": trim ? trimType : "auto",
16
18
  ...typeof weight === "number" && { "--vui-text-font-weight": weight },
package/dist/components/title/title.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --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(
1
+ @layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:trim-both}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:cap alphabetic}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --__title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:normal}@property --vui-title-text-transform{syntax:"none | capitalize | uppercase | lowercase";inherits:false;initial-value:none}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}@property --__title-medium{syntax:"*";inherits:false;initial-value:0}.viraui__title-module__Title_CXMUX{--__title-medium:clamp(
2
2
  var(--font-scale-body-medium),
3
3
  calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),
4
4
  calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3)
@@ -6,7 +6,7 @@
6
6
  calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 5)),
7
7
  calc(var(--__title-medium) * pow(var(--font-heading-typescale), 5)),
8
8
  calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6))
9
- );--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-standard);--vui-title-letter-spacing:-0.03em;margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--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(
9
+ );--vui-title-font-family:var(--font-family-heading);--vui-title-line-height:var(--font-leading-standard);--__title-letter-spacing:-0.03em;margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--__title-letter-spacing);text-transform:var(--vui-title-text-transform);text-align:var(--vui-title-align);white-space:var(--vui-title-white-space);word-break:break-word;font-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-title-font-weight),"wdth" var(--vui-title-font-width),"opsz" var(--vui-title-font-opsz);text-box:var(--vui-title-trim) var(--vui-title-trim-type);display:inline-flex;&[data-title-has-tracking=true]{letter-spacing:var(--vui-title-letter-spacing)}&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--vui-title-padding-block-start) var(--vui-title-padding-inline-end) var(--vui-title-padding-block-end) var(--vui-title-padding-inline-start)}&[data-title-size=display]{--vui-title-font-size:clamp(
10
10
  calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6)),
11
11
  calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 6) + 4.643cqi - 0.9286rem),
12
12
  var(--font-scale-display)
@@ -26,8 +26,8 @@
26
26
  calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 1)),
27
27
  calc(var(--__title-medium) * pow(var(--font-heading-typescale), 1)),
28
28
  calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 2))
29
- );--vui-title-letter-spacing:-0.02em}&[data-title-size="6"]{--vui-title-font-size:clamp(
29
+ );--__title-letter-spacing:-0.02em}&[data-title-size="6"]{--vui-title-font-size:clamp(
30
30
  var(--font-scale-body-medium),
31
31
  var(--__title-medium),
32
32
  calc(var(--font-scale-body-medium) * pow(var(--font-heading-typescale), 1))
33
- );--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)}}}
33
+ );--__title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--vui-title-literal-color)}&[data-title-line-height=none]{--vui-title-line-height:0}&[data-title-line-height=x-small]{--vui-title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--vui-title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--vui-title-line-height:var(--font-leading-large)}}}
package/dist/components/title/title.d.ts CHANGED
@@ -71,6 +71,20 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
71
71
  * @default 'normal'
72
72
  */
73
73
  whiteSpace?: React.CSSProperties['whiteSpace'];
74
+ /**
75
+ * Sets letter spacing on the rendered copy.
76
+ *
77
+ * Overrides size preset letter-spacing when set.
78
+ *
79
+ * @default No letter-spacing override.
80
+ */
81
+ tracking?: React.CSSProperties['letterSpacing'];
82
+ /**
83
+ * Applies a text-transform on the rendered copy.
84
+ *
85
+ * @default No text-transform override.
86
+ */
87
+ transform?: React.CSSProperties['textTransform'];
74
88
  /**
75
89
  * Enables balanced wrapping for block-like titles.
76
90
  *
package/dist/components/title/title.guide.json CHANGED
@@ -60,6 +60,14 @@
60
60
  "size": {
61
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."
62
62
  },
63
+ "tracking": {
64
+ "description": "Sets letter spacing on the rendered copy. Overrides size preset letter-spacing when set.",
65
+ "refCss": "letter-spacing"
66
+ },
67
+ "transform": {
68
+ "description": "Applies a text-transform on the rendered copy.",
69
+ "refCss": "text-transform"
70
+ },
63
71
  "trim": {
64
72
  "description": "Trims text box whitespace at the chosen edge when the browser supports `text-box`. Pass `false` to disable text-box trim.",
65
73
  "refCss": "trim"
@@ -98,7 +106,8 @@
98
106
  "description": "Font width percentage on the root (font-stretch + wdth)."
99
107
  },
100
108
  "letter-spacing": {
101
- "description": "Heading letter spacing; size presets adjust this."
109
+ "description": "Public letter spacing from the `tracking` prop when set.",
110
+ "refReact": "tracking"
102
111
  },
103
112
  "line-height": {
104
113
  "description": "Line height; lineHeight prop presets via data attributes."
@@ -128,6 +137,10 @@
128
137
  "trim-type": {
129
138
  "description": "Text-box trim basis on the root."
130
139
  },
140
+ "text-transform": {
141
+ "description": "Text transform on the root.",
142
+ "refReact": "transform"
143
+ },
131
144
  "white-space": {
132
145
  "description": "White-space behavior on the root."
133
146
  }
package/dist/components/title/title.js CHANGED
@@ -4,13 +4,16 @@ import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
4
4
  import title_module_default from "./title.module.js";
5
5
  import { useRender } from "@base-ui/react/use-render";
6
6
  //#region src/components/title/title.tsx
7
- var Title = ({ align = "start", balanced = false, selection = true, className, color, fontWidth, hPadding, size = "1", lineHeight = "standard", maxWidth, opticalSize, ref, render, style, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", ...otherProps }) => {
7
+ var Title = ({ align = "start", balanced = false, selection = true, className, color, fontWidth, hPadding, size = "1", lineHeight = "standard", maxWidth, opticalSize, ref, render, style, tracking, transform, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", ...otherProps }) => {
8
8
  const hasPadding = Boolean(hPadding || vPadding);
9
+ const hasTracking = tracking !== void 0;
9
10
  const dynamicStyle = {
10
11
  "--vui-title-align": align,
11
12
  "--vui-title-max-width": maxWidth ?? "none",
12
13
  "--vui-title-literal-color": color,
13
14
  "--vui-title-white-space": whiteSpace,
15
+ ...hasTracking && { "--vui-title-letter-spacing": tracking },
16
+ "--vui-title-text-transform": transform,
14
17
  "--vui-title-trim": trim ? `trim-${trim}` : "none",
15
18
  "--vui-title-trim-type": trim ? trimType : "auto",
16
19
  ...typeof weight === "number" && { "--vui-title-font-weight": weight },
@@ -32,6 +35,7 @@ var Title = ({ align = "start", balanced = false, selection = true, className, c
32
35
  "data-title-selection": selection ? "true" : "false",
33
36
  "data-title-has-padding": hasPadding ? "true" : "false",
34
37
  "data-title-has-literal-color": color ? "true" : "false",
38
+ "data-title-has-tracking": hasTracking ? "true" : "false",
35
39
  className: clsx(title_module_default.Title, className),
36
40
  style: dynamicStyle
37
41
  }
package/dist/consumption.json CHANGED
@@ -7,7 +7,8 @@
7
7
  "@base-ui/react": "Peer dependency for wrapped primitives."
8
8
  },
9
9
  "optionalPackages": {
10
- "@viraui/foundation": "Preset Vira brand theme CSS, ThemeTypes, and JSON only."
10
+ "@viraui/foundation": "Preset Vira brand theme CSS, ThemeTypes, and JSON only.",
11
+ "@viraui/icons": "Optional Vira content glyphs (@viraui/icons/react). Icon slots accept any ReactNode (lucide-react, other libraries, custom SVG). Chrome defaults are inlined in @viraui/react."
11
12
  },
12
13
  "importOrder": [
13
14
  "Compatible theme CSS (preset @viraui/foundation/vira.css, custom theme CSS, or future theme-builder export)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@viraui/react",
3
- "version": "2026.2.11",
3
+ "version": "2026.2.13",
4
4
  "private": false,
5
5
  "files": [
6
6
  "dist"
@@ -28,17 +28,17 @@
28
28
  },
29
29
  "devDependencies": {
30
30
  "@base-ui/react": ">=1.7.0",
31
+ "@viraui/foundation": "2026.2.13",
32
+ "@viraui/icons": "2026.0.2",
33
+ "@viraui/postcss-config": "2026.0.0",
34
+ "@viraui/tsconfig": "2026.0.0",
31
35
  "postcss": "8.5.26",
32
36
  "postcss-cli": "11.0.1",
33
37
  "react": ">=19.2.8",
34
38
  "react-dom": ">=19.2.8",
35
39
  "unplugin-dts": "1.0.3",
36
40
  "vite": "8.2.2",
37
- "vite-plugin-static-copy": "4.1.1",
38
- "@viraui/foundation": "2026.2.11",
39
- "@viraui/icons": "2026.0.2",
40
- "@viraui/postcss-config": "2026.0.0",
41
- "@viraui/tsconfig": "2026.0.0"
41
+ "vite-plugin-static-copy": "4.1.1"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "@base-ui/react": ">=1.6.0",