@viraui/react 0.0.25 → 0.0.27

package/dist/catalog.json

@@ -2,6 +2,12 @@
   "version": 1,
   "package": "@viraui/react",
   "components": [
+    {
+      "id": "accordion",
+      "name": "Accordion",
+      "summary": "Collapsible sections grouped into open/closed blocks with optional Surface wrapping, shared corner radius, and background on open items.",
+      "guidePath": "./components/accordion/accordion.guide.json"
+    },
     {
       "id": "avatar",
       "name": "Avatar",
@@ -14,24 +20,42 @@
       "summary": "Overlapping avatar stack with shared sizing, directional layout, and an optional overflow pill.",
       "guidePath": "./components/avatar-group/avatar-group.guide.json"
     },
+    {
+      "id": "bleed",
+      "name": "Bleed",
+      "summary": "Layout utility that pulls content past inline padding using negative margins or full viewport bleed.",
+      "guidePath": "./components/bleed/bleed.guide.json"
+    },
+    {
+      "id": "button",
+      "name": "Button",
+      "summary": "Primary action control with size, variant, optional addon, optional pill shape, and loading state.",
+      "guidePath": "./components/button/button.guide.json"
+    },
+    {
+      "id": "checkbox",
+      "name": "Checkbox",
+      "summary": "Field.Item checkbox option for standalone fields or CheckboxGroup children.",
+      "guidePath": "./components/checkbox/checkbox.guide.json"
+    },
     {
       "id": "chip",
       "name": "Chip",
       "summary": "Compact visual label primitive for short status, category, or metadata treatments.",
       "guidePath": "./components/chip/chip.guide.json"
     },
-    {
-      "id": "dialog",
-      "name": "Dialog",
-      "summary": "Compound drawer sheet with `Dialog.Trigger`, `Dialog.Sheet`, `Dialog.Close`, and Base UI pass-through `Dialog.Provider`, `Dialog.Indent`, and `Dialog.IndentBackground` for app-shell indent effects.",
-      "guidePath": "./components/dialog/dialog.guide.json"
-    },
     {
       "id": "clamp-text",
       "name": "ClampText",
       "summary": "Presentational utility that truncates overflowing copy to a fixed line count.",
       "guidePath": "./components/clamp-text/clamp-text.guide.json"
     },
+    {
+      "id": "dialog",
+      "name": "Dialog",
+      "summary": "Compound drawer sheet with `Dialog.Trigger`, `Dialog.Sheet`, `Dialog.Close`, and Base UI pass-through `Dialog.Provider`, `Dialog.Indent`, and `Dialog.IndentBackground` for app-shell indent effects.",
+      "guidePath": "./components/dialog/dialog.guide.json"
+    },
     {
       "id": "elevator",
       "name": "Elevator",
@@ -39,10 +63,16 @@
       "guidePath": "./components/elevator/elevator.guide.json"
     },
     {
-      "id": "button",
-      "name": "Button",
-      "summary": "Primary action control with size, variant, optional addon, optional pill shape, and loading state.",
-      "guidePath": "./components/button/button.guide.json"
+      "id": "fieldset",
+      "name": "Fieldset",
+      "summary": "Semantic field grouping with shared legend and optional group helper copy.",
+      "guidePath": "./components/fieldset/fieldset.guide.json"
+    },
+    {
+      "id": "icon",
+      "name": "Icon",
+      "summary": "Decorative Vira SVG icon selected by name and variant.",
+      "guidePath": "./components/icon/icon.guide.json"
     },
     {
       "id": "icon-button",
@@ -63,40 +93,22 @@
       "guidePath": "./components/masonry/masonry.guide.json"
     },
     {
-      "id": "textfield",
-      "name": "Textfield",
-      "summary": "Single-line field input with control-group chrome and optional addons.",
-      "guidePath": "./components/textfield/textfield.guide.json"
-    },
-    {
-      "id": "textarea",
-      "name": "Textarea",
-      "summary": "Multi-line field control with shared field copy and optional resize.",
-      "guidePath": "./components/textarea/textarea.guide.json"
-    },
-    {
-      "id": "slider",
-      "name": "Slider",
-      "summary": "Field-wrapped range input supporting single-thumb or two-thumb range selection.",
-      "guidePath": "./components/slider/slider.guide.json"
-    },
-    {
-      "id": "switch",
-      "name": "Switch",
-      "summary": "Field-wrapped toggle control with regular or small track and optional field copy.",
-      "guidePath": "./components/switch/switch.guide.json"
+      "id": "meter",
+      "name": "Meter",
+      "summary": "Shows a determinate metric in a compact horizontal track for static capacity, level, or score values.",
+      "guidePath": "./components/meter/meter.guide.json"
     },
     {
-      "id": "checkbox",
-      "name": "Checkbox",
-      "summary": "Field.Item checkbox option for standalone fields or CheckboxGroup children.",
-      "guidePath": "./components/checkbox/checkbox.guide.json"
+      "id": "popover",
+      "name": "Popover",
+      "summary": "Compound popover built on Base UI Popover with `Popover.Trigger`, `Popover.Sheet`, `Popover.Close`, `Popover.Title`, `Popover.Description`, and `Popover.createHandle` for detached and multiple triggers; `Sheet` encapsulates Portal + Positioner + Popup + Viewport + Title + Description and animates position, size, and content between triggers; `Sheet` with `unstyled` skips the built-in Surface and header so the consumer composes the popup chrome, including `Popover.Title` and `Popover.Description`.",
+      "guidePath": "./components/popover/popover.guide.json"
     },
     {
-      "id": "fieldset",
-      "name": "Fieldset",
-      "summary": "Semantic field grouping with shared legend and optional group helper copy.",
-      "guidePath": "./components/fieldset/fieldset.guide.json"
+      "id": "progressive-blur",
+      "name": "ProgressiveBlur",
+      "summary": "Decorative stacked backdrop-filter overlay that ramps blur from one edge toward the opposite edge.",
+      "guidePath": "./components/progressive-blur/progressive-blur.guide.json"
     },
     {
       "id": "radio",
@@ -122,36 +134,78 @@
       "summary": "Decorative inline text shimmer that inherits typography and color from a parent text primitive.",
       "guidePath": "./components/shimmer/shimmer.guide.json"
     },
-    {
-      "id": "icon",
-      "name": "Icon",
-      "summary": "Decorative Vira SVG icon selected by name and variant.",
-      "guidePath": "./components/icon/icon.guide.json"
-    },
     {
       "id": "skeleton",
       "name": "Skeleton",
       "summary": "Decorative loading placeholder sized by props, not children.",
       "guidePath": "./components/skeleton/skeleton.guide.json"
     },
+    {
+      "id": "slider",
+      "name": "Slider",
+      "summary": "Field-wrapped range input supporting single-thumb or two-thumb range selection.",
+      "guidePath": "./components/slider/slider.guide.json"
+    },
+    {
+      "id": "spinner",
+      "name": "Spinner",
+      "summary": "Decorative SVG pulsing loading indicator used inside interactive components.",
+      "guidePath": "./components/spinner/spinner.guide.json"
+    },
     {
       "id": "stack",
       "name": "Stack",
       "summary": "Flex layout primitive for arranging children with token spacing, alignment, and padding; root is a named CSS container query context (`stack`).",
       "guidePath": "./components/stack/stack.guide.json"
     },
+    {
+      "id": "static-noise",
+      "name": "StaticNoise",
+      "summary": "Decorative SVG turbulence noise overlay for textured surfaces and hero sections.",
+      "guidePath": "./components/static-noise/static-noise.guide.json"
+    },
     {
       "id": "surface",
       "name": "Surface",
       "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners; root is a named CSS container query context (`surface`).",
       "guidePath": "./components/surface/surface.guide.json"
     },
+    {
+      "id": "switch",
+      "name": "Switch",
+      "summary": "Field-wrapped toggle control with regular or small track and optional field copy.",
+      "guidePath": "./components/switch/switch.guide.json"
+    },
     {
       "id": "tabs",
       "name": "Tabs",
       "summary": "Compound segmented tab control with Surface list chrome, moving indicator, and animated panels.",
       "guidePath": "./components/tabs/tabs.guide.json"
     },
+    {
+      "id": "text",
+      "name": "Text",
+      "summary": "Theme-aware body-copy primitive with tone, family, and responsive body sizing.",
+      "guidePath": "./components/text/text.guide.json"
+    },
+    {
+      "id": "textarea",
+      "name": "Textarea",
+      "summary": "Multi-line field control with shared field copy and optional resize.",
+      "guidePath": "./components/textarea/textarea.guide.json"
+    },
+    {
+      "id": "textfield",
+      "name": "Textfield",
+      "summary": "Single-line field input with control-group chrome and optional addons.",
+      "guidePath": "./components/textfield/textfield.guide.json"
+    },
+    {
+      "id": "title",
+      "name": "Title",
+      "summary": "Theme-aware heading and display typography primitive.",
+      "guidePath": "./components/title/title.guide.json"
+    },
     {
       "id": "toast",
       "name": "Toast",
@@ -159,34 +213,28 @@
       "guidePath": "./components/toast/toast.guide.json"
     },
     {
-      "id": "spinner",
-      "name": "Spinner",
-      "summary": "Decorative SVG pulsing loading indicator used inside interactive components.",
-      "guidePath": "./components/spinner/spinner.guide.json"
-    },
-    {
-      "id": "static-noise",
-      "name": "StaticNoise",
-      "summary": "Decorative SVG turbulence noise overlay for textured surfaces and hero sections.",
-      "guidePath": "./components/static-noise/static-noise.guide.json"
+      "id": "toggle-button",
+      "name": "ToggleButton",
+      "summary": "Icon-only two-state toggle that swaps resting and optional pressed icons on Base UI Toggle state.",
+      "guidePath": "./components/toggle-button/toggle-button.guide.json"
     },
     {
-      "id": "progressive-blur",
-      "name": "ProgressiveBlur",
-      "summary": "Decorative stacked backdrop-filter overlay that ramps blur from one edge toward the opposite edge.",
-      "guidePath": "./components/progressive-blur/progressive-blur.guide.json"
+      "id": "toggle-group",
+      "name": "ToggleGroup",
+      "summary": "Toolbar toggle set with shared selection state and default Stack spacing on Base UI ToggleGroup.",
+      "guidePath": "./components/toggle-group/toggle-group.guide.json"
     },
     {
-      "id": "text",
-      "name": "Text",
-      "summary": "Theme-aware body-copy primitive with tone, family, and responsive body sizing.",
-      "guidePath": "./components/text/text.guide.json"
+      "id": "typewriter",
+      "name": "Typewriter",
+      "summary": "Decorative inline typewriter animation that inherits typography and color from a parent text primitive.",
+      "guidePath": "./components/typewriter/typewriter.guide.json"
     },
     {
-      "id": "title",
-      "name": "Title",
-      "summary": "Theme-aware heading and display typography primitive.",
-      "guidePath": "./components/title/title.guide.json"
+      "id": "tooltip",
+      "name": "Tooltip",
+      "summary": "Compound tooltip built on Base UI Tooltip with `Tooltip.Provider`, `Tooltip.Trigger`, `Tooltip.Content`, and `Tooltip.createHandle` for detached and multiple triggers; `Content` encapsulates Portal + Positioner + Popup + Viewport and animates position, size, and content between triggers.",
+      "guidePath": "./components/tooltip/tooltip.guide.json"
     }
   ],
   "consumption": "./consumption.json",

package/dist/components/accordion/accordion-item.d.ts

@@ -0,0 +1,58 @@
+import { AccordionItem } from '@base-ui/react/accordion';
+import { SurfaceProps } from '../surface';
+import type * as React from 'react';
+/**
+ * Public Accordion.Item props.
+ *
+ * Wraps Base UI accordion item parts with optional Surface layout and panel height animation.
+ * Island separation between open/closed blocks is controlled by the root `Accordion` `islands` prop for surface items.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type AccordionItemProps = AccordionItem.Props & {
+    /**
+     * Visible trigger label rendered inside the accordion header button.
+     *
+     * @default No trigger label is rendered.
+     */
+    trigger: React.ReactNode;
+    /**
+     * Panel content revealed when the item is open.
+     *
+     * @default No panel content is rendered.
+     */
+    children?: React.ReactNode;
+    /**
+     * When `true`, wraps the item in `Surface` with border and open-block background.
+     * When `false`, renders without `Surface` so consumers can insert `Separator` between items;
+     * island styling is skipped for that item.
+     *
+     * @default true
+     */
+    useSurface?: boolean;
+    /**
+     * Side of the trigger label where the expand/collapse icon is rendered.
+     *
+     * @default end
+     */
+    iconPosition?: 'start' | 'end';
+    /**
+     * Decorative icon shown when the item is closed.
+     *
+     * @default `<Icon name="Plus" size={16} />`
+     */
+    iconClosed?: React.ReactNode;
+    /**
+     * Decorative icon shown when the item is open.
+     *
+     * @default `<Icon name="Minus" size={16} />`
+     */
+    iconOpen?: React.ReactNode;
+    /**
+     * Resting background for the item card, forwarded to the wrapping `Surface` when `useSurface` is `true`.
+     *
+     * @default 1
+     */
+    color?: SurfaceProps['color'];
+};
+export declare const AccordionItemComponent: React.FC<AccordionItemProps>;

package/dist/components/accordion/accordion-item.js

@@ -0,0 +1,65 @@
+import { clsx } from "../../core/clsx.js";
+import accordion_module_default from "./accordion.module.js";
+import { Text } from "../text/text.js";
+import { Stack } from "../stack/stack.js";
+import { Icon } from "../icon/icon.js";
+import { Surface } from "../surface/surface.js";
+import { Accordion } from "@base-ui/react/accordion";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/accordion/accordion-item.tsx
+var AccordionItemComponent = ({ children, className, color = 1, iconClosed = /* @__PURE__ */ jsx(Icon, {
+	name: "Plus",
+	size: 16
+}), iconOpen = /* @__PURE__ */ jsx(Icon, {
+	name: "Minus",
+	size: 16
+}), iconPosition = "end", trigger, useSurface = true, ...otherProps }) => {
+	const iconAtStart = iconPosition === "start";
+	const triggerIcon = /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		className: accordion_module_default.IconSlot,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: accordion_module_default.Icon,
+			children: iconClosed
+		}), /* @__PURE__ */ jsx("span", {
+			className: accordion_module_default.Icon,
+			children: iconOpen
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Accordion.Item, {
+		className: clsx(accordion_module_default.Item, className),
+		"data-use-surface": useSurface ? "true" : "false",
+		...useSurface && { render: /* @__PURE__ */ jsx(Surface, {
+			border: "all",
+			color
+		}) },
+		...otherProps,
+		children: [/* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
+			className: accordion_module_default.Trigger,
+			render: /* @__PURE__ */ jsx(Stack, {
+				columnGap: iconAtStart ? "small" : void 0,
+				direction: iconAtStart ? "row" : "row-reverse",
+				fillChildren: false,
+				hAlign: iconPosition === "end" ? "space-between" : "start",
+				hPadding: "medium",
+				render: /* @__PURE__ */ jsx("button", { type: "button" }),
+				vAlign: "center",
+				vPadding: "medium"
+			}),
+			children: [triggerIcon, /* @__PURE__ */ jsx(Text, {
+				weight: "semibold",
+				children: trigger
+			})]
+		}) }), /* @__PURE__ */ jsx(Accordion.Panel, {
+			className: accordion_module_default.Panel,
+			children: /* @__PURE__ */ jsx(Stack, {
+				fillChildren: false,
+				hPadding: "medium",
+				vPadding: ["2x-small", "medium"],
+				children
+			})
+		})]
+	});
+};
+//#endregion
+export { AccordionItemComponent };

package/dist/components/accordion/accordion.css

@@ -0,0 +1 @@
+.viraui__accordion-module__Accordion_wFOlN{--vui-accordion-island-gap:var(--space-medium);--trigger-radius:var(--radius-large);inline-size:100%;&:dir(rtl) .viraui__accordion-module__Trigger_4HzIb[data-stack-direction=row-reverse]{direction:ltr;flex-direction:row}}.viraui__accordion-module__Item_66o2x{inline-size:100%;transition:margin var(--duration-fast) var(--easing-standard),background var(--duration-fast) var(--easing-standard),border-radius var(--duration-fast) var(--easing-standard);&[data-use-surface=true]{--vui-surface-border-radius-top-left:0;--vui-surface-border-radius-top-right:0;--vui-surface-border-radius-bottom-right:0;--vui-surface-border-radius-bottom-left:0;&:not([data-open]){--vui-surface-background:#0000}&:not([data-open])+&:not([data-open]),&[data-open]+&[data-open]{border-top-width:0}&:first-child,&:not([data-open])+&[data-open],&[data-open]+&:not([data-open]){--vui-surface-border-radius-top-left:var(--trigger-radius);--vui-surface-border-radius-top-right:var(--trigger-radius)}&:last-child,&:not([data-open]):has(+&[data-open]),&[data-open]:has(+&:not([data-open])){--vui-surface-border-radius-bottom-left:var(--trigger-radius);--vui-surface-border-radius-bottom-right:var(--trigger-radius)}&:not(:last-child):not([data-open]):has(+&[data-open]),&:not(:last-child)[data-open]:has(+&:not([data-open])){margin-block-end:var(--vui-accordion-island-gap)}}.viraui__accordion-module__Accordion_wFOlN[data-islands=false] &[data-use-surface=true]{&:not(:first-child){border-top-width:0}&:not([data-open])+&[data-open],&[data-open]+&:not([data-open]){--vui-surface-border-radius-top-left:0;--vui-surface-border-radius-top-right:0}&:not([data-open]):has(+&[data-open]),&[data-open]:has(+&:not([data-open])){--vui-surface-border-radius-bottom-left:0;--vui-surface-border-radius-bottom-right:0}&:not(:last-child):not([data-open]):has(+&[data-open]),&:not(:last-child)[data-open]:has(+&:not([data-open])){margin-block-end:0}}}.viraui__accordion-module__Trigger_4HzIb{inline-size:100%;border:0;background:#0000;cursor:pointer;text-align:start;color:inherit;&:focus-visible{outline-offset:-4px}&[data-disabled]{cursor:not-allowed;opacity:.5}.viraui__accordion-module__Item_66o2x[data-use-surface=true] &{&:focus-visible{border-radius:var(--radius-large);outline-offset:-4px}}}.viraui__accordion-module__IconSlot_AVQq3{position:relative;flex-shrink:0;inline-size:1rem;block-size:1rem}.viraui__accordion-module__Icon_qdu2v{position:absolute;inset:0;display:grid;place-items:center;transition:opacity var(--duration-fast) var(--easing-standard),rotate var(--duration-fast) var(--easing-standard);&:first-of-type{opacity:1;rotate:0deg}&:last-of-type{opacity:0;rotate:-90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:first-of-type{opacity:0;rotate:90deg}.viraui__accordion-module__Trigger_4HzIb[data-panel-open] &:last-of-type{opacity:1;rotate:0deg}@media (prefers-reduced-motion:reduce){transition:none}}.viraui__accordion-module__Panel_U1Ofk{block-size:var(--accordion-panel-height);overflow:hidden;transition:block-size var(--duration-fast) var(--easing-standard);&[data-ending-style],&[data-starting-style]{block-size:0}@media (prefers-reduced-motion:reduce){transition:none}}

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,26 @@
+import { AccordionRoot } from '@base-ui/react/accordion';
+import { AccordionItemProps } from './accordion-item';
+import type * as React from 'react';
+/**
+ * Public Accordion root props.
+ *
+ * Includes Base UI accordion root props such as `value`, `defaultValue`, `multiple`,
+ * and `onValueChange`.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type AccordionProps = AccordionRoot.Props & {
+    /**
+     * When `true`, open/closed blocks render as separated Surface islands with gap between them.
+     * When `false`, blocks stay attached with corner radius only on the first and last items.
+     * Applies only to items with `useSurface`.
+     *
+     * @default true
+     */
+    islands?: boolean;
+};
+type AccordionComponent = React.FC<AccordionProps> & {
+    Item: React.FC<AccordionItemProps>;
+};
+export declare const Accordion: AccordionComponent;
+export {};

package/dist/components/accordion/accordion.guide.json

@@ -0,0 +1,30 @@
+{
+  "name": "Accordion",
+  "summary": "Collapsible sections grouped into open/closed blocks with optional Surface wrapping, shared corner radius, and background on open items.",
+  "whenToUse": [
+    "Progressive disclosure for related content sections in one surface",
+    "FAQ or settings groups where only one section may be open by default",
+    "Multiple open sections when `multiple` is enabled"
+  ],
+  "whenNotToUse": [
+    "Primary navigation that should use links, tabs, or routes directly",
+    "Expecting to compose public Header/Trigger/Panel parts; those are owned by `Accordion.Item`"
+  ],
+  "accessibility": [
+    "Provide meaningful `trigger` text so each section has an accessible name",
+    "Use `value` when controlling or identifying items programmatically",
+    "Disabled items cannot be expanded through pointer or keyboard"
+  ],
+  "antiPatterns": [
+    "Trying to compose separate public `Accordion.Header`, `Accordion.Trigger`, or `Accordion.Panel` exports",
+    "Rendering an item without trigger text and without an external aria-label strategy"
+  ],
+  "related": ["Surface", "Separator", "Stack", "Text", "Icon"],
+  "properties": {
+    "css": {
+      "island-gap": {
+        "description": "Gap between separated Surface islands when islands={true}."
+      }
+    }
+  }
+}

package/dist/components/accordion/accordion.js

@@ -0,0 +1,22 @@
+import './accordion.css';
+import { clsx } from "../../core/clsx.js";
+import accordion_module_default from "./accordion.module.js";
+import { AccordionItemComponent } from "./accordion-item.js";
+import { Stack } from "../stack/stack.js";
+import { Accordion } from "@base-ui/react/accordion";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/accordion/accordion.tsx
+var AccordionRootComponent = ({ children, className, islands = true, ...otherProps }) => /* @__PURE__ */ jsx(Accordion.Root, {
+	...otherProps,
+	render: /* @__PURE__ */ jsx(Stack, {
+		className: clsx(accordion_module_default.Accordion, className),
+		"data-islands": islands ? "true" : "false",
+		direction: "column",
+		fillChildren: false
+	}),
+	hiddenUntilFound: true,
+	children
+});
+var Accordion$1 = Object.assign(AccordionRootComponent, { Item: AccordionItemComponent });
+//#endregion
+export { Accordion$1 as Accordion };

package/dist/components/accordion/accordion.module.js

@@ -0,0 +1,17 @@
+//#region src/components/accordion/accordion.module.css
+var Accordion = "viraui__accordion-module__Accordion_wFOlN";
+var Trigger = "viraui__accordion-module__Trigger_4HzIb";
+var Item = "viraui__accordion-module__Item_66o2x";
+var IconSlot = "viraui__accordion-module__IconSlot_AVQq3";
+var Icon = "viraui__accordion-module__Icon_qdu2v";
+var Panel = "viraui__accordion-module__Panel_U1Ofk";
+var accordion_module_default = {
+	Accordion,
+	Trigger,
+	Item,
+	IconSlot,
+	Icon,
+	Panel
+};
+//#endregion
+export { Accordion, Icon, IconSlot, Item, Panel, Trigger, accordion_module_default as default };

package/dist/components/accordion/index.d.ts

@@ -0,0 +1,3 @@
+export { Accordion } from './accordion';
+export type { AccordionProps } from './accordion';
+export type { AccordionItemProps } from './accordion-item';

package/dist/components/avatar/avatar.css

@@ -1 +1 @@
-.viraui__avatar-module__Avatar_BRuS3{--avatar-size:var(--space-2x-large);--avatar-background:var(--global-contrast);--avatar-foreground:var(--global-foreground);--avatar-radius:var(--radius-medium);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--avatar-size);block-size:var(--avatar-size);min-inline-size:var(--avatar-size);min-block-size:var(--avatar-size);overflow:hidden;border-radius:var(--avatar-radius);background:var(--avatar-background);color:var(--avatar-foreground);vertical-align:middle;-webkit-user-select:none;user-select:none;container-name:viraui-avatar;container-type:inline-size;&[data-size=x-small]{--avatar-size:var(--space-large)}&[data-size=small]{--avatar-size:var(--space-2x-large)}&[data-size=regular]{--avatar-size:var(--space-wide)}&[data-size=big]{--avatar-size:var(--space-2x-wide)}}.viraui__avatar-module__Image_Q7bHi{inline-size:100%;block-size:100%;display:block;object-fit:cover}.viraui__avatar-module__Label_QASTF{font-size:30cqw}
+.viraui__avatar-module__Avatar_BRuS3{--vui-avatar-size:var(--space-2x-large);--vui-avatar-background:var(--global-contrast);--vui-avatar-foreground:var(--global-foreground);--vui-avatar-radius:var(--radius-medium);display:inline-flex;align-items:center;justify-content:center;inline-size:var(--vui-avatar-size);block-size:var(--vui-avatar-size);min-inline-size:var(--vui-avatar-size);min-block-size:var(--vui-avatar-size);overflow:hidden;border-radius:var(--vui-avatar-radius);background:var(--vui-avatar-background);color:var(--vui-avatar-foreground);vertical-align:middle;-webkit-user-select:none;user-select:none;container-name:viraui-avatar;container-type:inline-size;&[data-size=x-small]{--vui-avatar-size:var(--space-large);--vui-avatar-radius:var(--radius-small)}&[data-size=small]{--vui-avatar-size:var(--space-2x-large)}&[data-size=regular]{--vui-avatar-size:var(--space-wide)}&[data-size=big]{--vui-avatar-size:var(--space-2x-wide);--vui-avatar-radius:var(--radius-large)}}.viraui__avatar-module__Image_Q7bHi{inline-size:100%;block-size:100%;display:block;object-fit:cover}.viraui__avatar-module__Label_QASTF{font-size:30cqw}

package/dist/components/avatar/avatar.guide.json

@@ -16,5 +16,29 @@
     "Relying on Avatar children for layout sizing",
     "Omitting meaningful alt text when the image conveys identity"
   ],
-  "related": ["Skeleton"]
+  "related": ["Skeleton"],
+  "properties": {
+    "react": {
+      "size": {
+        "description": "Selects the rendered avatar footprint.",
+        "refCss": "size"
+      }
+    },
+    "css": {
+      "size": {
+        "description": "Avatar inline and block size on the root.",
+        "refReact": "size"
+      },
+      "radius": {
+        "description": "Corner radius on the root; size presets also adjust this.",
+        "refReact": "size"
+      },
+      "background": {
+        "description": "Root background fill behind image or fallback."
+      },
+      "foreground": {
+        "description": "Root foreground color for fallback content."
+      }
+    }
+  }
 }

package/dist/components/avatar/avatar.js

@@ -4,8 +4,8 @@ import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props
 import avatar_module_default from "./avatar.module.js";
 import { Text } from "../text/text.js";
 import { Skeleton } from "../skeleton/skeleton.js";
-import { Avatar } from "@base-ui/react/avatar";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
 //#region src/components/avatar/avatar.tsx
 var fallbackTextSizeByAvatarSize = {
 	"x-small": "x-small",

package/dist/components/avatar/avatar.module.js

@@ -1,7 +1,11 @@
+//#region src/components/avatar/avatar.module.css
+var Avatar = "viraui__avatar-module__Avatar_BRuS3";
+var Image = "viraui__avatar-module__Image_Q7bHi";
+var Label = "viraui__avatar-module__Label_QASTF";
 var avatar_module_default = {
-	Avatar: "viraui__avatar-module__Avatar_BRuS3",
-	Image: "viraui__avatar-module__Image_Q7bHi",
-	Label: "viraui__avatar-module__Label_QASTF"
+	Avatar,
+	Image,
+	Label
 };
 //#endregion
-export { avatar_module_default as default };
+export { Avatar, Image, Label, avatar_module_default as default };

package/dist/components/avatar-group/avatar-group.css

@@ -1,7 +1,7 @@
-.viraui__avatar-group-module__AvatarGroup_zOrR-{--avatar-size:var(--space-2x-large);--avatar-overlap-distance:var(--space-small);--avatar-group-gap-size:var(--space-x-small);--avatar-group-item-radius:var(--radius-medium);display:inline-flex;flex-wrap:nowrap;align-items:flex-start;min-inline-size:max-content;vertical-align:middle;&[data-direction=vertical]{flex-direction:column}&[data-size=x-small]{--avatar-size:var(--space-large);--avatar-overlap-distance:var(--space-x-small);--avatar-group-gap-size:var(--space-2x-small)}&[data-size=regular]{--avatar-size:var(--space-wide);--avatar-overlap-distance:var(--space-medium);--avatar-group-gap-size:var(--space-x-small)}&[data-size=big]{--avatar-size:var(--space-2x-wide);--avatar-overlap-distance:var(--space-large);--avatar-group-gap-size:var(--space-small)}}.viraui__avatar-group-module__AvatarWrapper_0opqY{position:relative;display:inline-flex;flex:0 0 auto;inline-size:var(--avatar-size);block-size:var(--avatar-size);.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=horizontal] &:not(:first-child){margin-inline-start:calc(var(--avatar-overlap-distance) * -1)}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:first-child){margin-block-start:calc(var(--avatar-overlap-distance) * -1)}--avatar-hole-half:calc((var(--avatar-size) / 2) + var(--avatar-group-gap-size));--avatar-hole-r:calc(min(var(--avatar-group-item-radius), var(--avatar-size) / 2) + var(--avatar-group-gap-size));.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(ltr)[data-direction=horizontal] &:not(:last-child){--avatar-hole-cx:calc(100% + (var(--avatar-size) / 2) - var(--avatar-overlap-distance));--avatar-hole-cy:50%}.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(rtl)[data-direction=horizontal] &:not(:last-child){--avatar-hole-cx:calc(var(--avatar-overlap-distance) - (var(--avatar-size) / 2));--avatar-hole-cy:50%}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:last-child){--avatar-hole-cx:50%;--avatar-hole-cy:calc(100% + (var(--avatar-size) / 2) - var(--avatar-overlap-distance))}.viraui__avatar-group-module__AvatarGroup_zOrR- &:not(:last-child){--avatar-hole-edge:calc((var(--avatar-hole-half) - var(--avatar-hole-r)) * 2);--avatar-hole-corner-inset:calc(var(--avatar-hole-r) * 0.85);@supports (corner-shape:squircle){@container root not style(--corner-shape-enable: initial){--avatar-hole-corner-tr:curve by var(--avatar-hole-r) var(--avatar-hole-r) with var(--avatar-hole-corner-inset) 0px /var(--avatar-hole-r) calc(var(--avatar-hole-r) * 0.15);--avatar-hole-corner-br:curve by calc(var(--avatar-hole-r) * -1) var(--avatar-hole-r) with 0px var(--avatar-hole-corner-inset) /calc(var(--avatar-hole-r) * -0.15) var(--avatar-hole-r);--avatar-hole-corner-bl:curve by calc(var(--avatar-hole-r) * -1) calc(var(--avatar-hole-r) * -1) with calc(var(--avatar-hole-corner-inset) * -1) 0px /calc(var(--avatar-hole-r) * -1) calc(var(--avatar-hole-r) * -0.15);--avatar-hole-corner-tl:curve by var(--avatar-hole-r) calc(var(--avatar-hole-r) * -1) with 0px calc(var(--avatar-hole-corner-inset) * -1) /calc(var(--avatar-hole-r) * 0.15) calc(var(--avatar-hole-r) * -1)}}clip-path:shape(evenodd from 0 0,line to 100% 0,line to 100% 100%,line to 0 100%,close,move to calc(var(--avatar-hole-cx) - var(--avatar-hole-half) + var(--avatar-hole-r)) calc(var(--avatar-hole-cy) - var(--avatar-hole-half)),line by var(--avatar-hole-edge) 0,var(--avatar-hole-corner-tr,arc by var(--avatar-hole-r) var(--avatar-hole-r) of var(--avatar-hole-r) cw),line by 0 var(--avatar-hole-edge),var(
+.viraui__avatar-group-module__AvatarGroup_zOrR-{--vui-avatar-group-size:var(--space-2x-large);--vui-avatar-group-overlap-distance:var(--space-small);--vui-avatar-group-gap-size:var(--space-x-small);--vui-avatar-group-item-radius:var(--radius-medium);display:inline-flex;flex-wrap:nowrap;align-items:flex-start;min-inline-size:max-content;vertical-align:middle;&[data-direction=vertical]{flex-direction:column}&[data-size=x-small]{--vui-avatar-group-size:var(--space-large);--vui-avatar-group-overlap-distance:var(--space-x-small);--vui-avatar-group-gap-size:var(--space-2x-small);--vui-avatar-group-item-radius:var(--radius-small)}&[data-size=small]{--vui-avatar-group-size:var(--space-2x-large);--vui-avatar-group-overlap-distance:var(--space-medium);--vui-avatar-group-gap-size:var(--space-x-small)}&[data-size=regular]{--vui-avatar-group-size:var(--space-wide);--vui-avatar-group-overlap-distance:var(--space-medium);--vui-avatar-group-gap-size:var(--space-x-small)}&[data-size=big]{--vui-avatar-group-size:var(--space-2x-wide);--vui-avatar-group-overlap-distance:var(--space-large);--vui-avatar-group-gap-size:var(--space-small);--vui-avatar-group-item-radius:var(--radius-large)}}.viraui__avatar-group-module__AvatarWrapper_0opqY{position:relative;display:inline-flex;flex:0 0 auto;inline-size:var(--vui-avatar-group-size);block-size:var(--vui-avatar-group-size);.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=horizontal] &:not(:first-child){margin-inline-start:calc(var(--vui-avatar-group-overlap-distance) * -1)}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:first-child){margin-block-start:calc(var(--vui-avatar-group-overlap-distance) * -1)}--avatar-hole-half:calc((var(--vui-avatar-group-size) / 2) + var(--vui-avatar-group-gap-size));--avatar-hole-r:calc(min(var(--vui-avatar-group-item-radius), var(--vui-avatar-group-size) / 2) + var(--vui-avatar-group-gap-size));.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(ltr)[data-direction=horizontal] &:not(:last-child){--avatar-hole-cx:calc(100% + (var(--vui-avatar-group-size) / 2) - var(--vui-avatar-group-overlap-distance));--avatar-hole-cy:50%}.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(rtl)[data-direction=horizontal] &:not(:last-child){--avatar-hole-cx:calc(var(--vui-avatar-group-overlap-distance) - (var(--vui-avatar-group-size) / 2));--avatar-hole-cy:50%}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:last-child){--avatar-hole-cx:50%;--avatar-hole-cy:calc(100% + (var(--vui-avatar-group-size) / 2) - var(--vui-avatar-group-overlap-distance))}.viraui__avatar-group-module__AvatarGroup_zOrR- &:not(:last-child){--avatar-hole-edge:calc((var(--avatar-hole-half) - var(--avatar-hole-r)) * 2);--avatar-hole-corner-inset:calc(var(--avatar-hole-r) * 0.85);@supports (corner-shape:squircle){@container root not style(--corner-shape-enable: initial){--avatar-hole-corner-tr:curve by var(--avatar-hole-r) var(--avatar-hole-r) with var(--avatar-hole-corner-inset) 0px /var(--avatar-hole-r) calc(var(--avatar-hole-r) * 0.15);--avatar-hole-corner-br:curve by calc(var(--avatar-hole-r) * -1) var(--avatar-hole-r) with 0px var(--avatar-hole-corner-inset) /calc(var(--avatar-hole-r) * -0.15) var(--avatar-hole-r);--avatar-hole-corner-bl:curve by calc(var(--avatar-hole-r) * -1) calc(var(--avatar-hole-r) * -1) with calc(var(--avatar-hole-corner-inset) * -1) 0px /calc(var(--avatar-hole-r) * -1) calc(var(--avatar-hole-r) * -0.15);--avatar-hole-corner-tl:curve by var(--avatar-hole-r) calc(var(--avatar-hole-r) * -1) with 0px calc(var(--avatar-hole-corner-inset) * -1) /calc(var(--avatar-hole-r) * 0.15) calc(var(--avatar-hole-r) * -1)}}clip-path:shape(evenodd from 0 0,line to 100% 0,line to 100% 100%,line to 0 100%,close,move to calc(var(--avatar-hole-cx) - var(--avatar-hole-half) + var(--avatar-hole-r)) calc(var(--avatar-hole-cy) - var(--avatar-hole-half)),line by var(--avatar-hole-edge) 0,var(--avatar-hole-corner-tr,arc by var(--avatar-hole-r) var(--avatar-hole-r) of var(--avatar-hole-r) cw),line by 0 var(--avatar-hole-edge),var(
         --avatar-hole-corner-br,arc by calc(var(--avatar-hole-r) * -1) var(--avatar-hole-r) of var(--avatar-hole-r) cw
       ),line by calc(var(--avatar-hole-edge) * -1) 0,var(
         --avatar-hole-corner-bl,arc by calc(var(--avatar-hole-r) * -1) calc(var(--avatar-hole-r) * -1) of var(--avatar-hole-r) cw
       ),line by 0 calc(var(--avatar-hole-edge) * -1),var(
         --avatar-hole-corner-tl,arc by var(--avatar-hole-r) calc(var(--avatar-hole-r) * -1) of var(--avatar-hole-r) cw
-      ),close)}}.viraui__avatar-group-module__OverflowWrapper_bKv6I{inline-size:auto}.viraui__avatar-group-module__AvatarGroupItem_Vvlyh{--avatar-radius:var(--avatar-group-item-radius)}.viraui__avatar-group-module__OverflowPill_nMmTD{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--avatar-size);block-size:var(--avatar-size)}
+      ),close)}}.viraui__avatar-group-module__OverflowWrapper_bKv6I{inline-size:auto}.viraui__avatar-group-module__AvatarGroupItem_Vvlyh{--vui-avatar-radius:var(--vui-avatar-group-item-radius)}.viraui__avatar-group-module__OverflowPill_nMmTD{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--vui-avatar-group-size);block-size:var(--vui-avatar-group-size)}

package/dist/components/avatar-group/avatar-group.guide.json

@@ -18,5 +18,31 @@
     "Expecting grouped avatars to follow theme radius tokens instead of always rendering as circles",
     "Using non-positive maxVisible values expecting truncation"
   ],
-  "related": ["Avatar"]
+  "related": ["Avatar"],
+  "properties": {
+    "react": {
+      "size": {
+        "description": "Shared avatar footprint for every item in the group.",
+        "refCss": "size"
+      }
+    },
+    "css": {
+      "size": {
+        "description": "Rendered avatar size used for overlap layout.",
+        "refReact": "size"
+      },
+      "overlap-distance": {
+        "description": "Negative margin overlap between adjacent avatars.",
+        "refReact": "size"
+      },
+      "gap-size": {
+        "description": "Cutout gap used by overlap clip-path math.",
+        "refReact": "size"
+      },
+      "item-radius": {
+        "description": "Corner radius applied to grouped avatar items.",
+        "refReact": "size"
+      }
+    }
+  }
 }