@viraui/react 0.0.24 → 0.0.26

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,6 +20,18 @@
       "summary": "Overlapping avatar stack with shared sizing, directional layout, and an optional overflow pill.",
       "guidePath": "./components/avatar-group/avatar-group.guide.json"
     },
+    {
+      "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": "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": "chip",
       "name": "Chip",
@@ -56,12 +74,24 @@
       "summary": "Shows determinate or indeterminate progress for a task in a compact horizontal track.",
       "guidePath": "./components/linear-progress/linear-progress.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": "masonry",
       "name": "Masonry",
       "summary": "Multi-column layout primitive for read-only mixed-height content walls.",
       "guidePath": "./components/masonry/masonry.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": "textfield",
       "name": "Textfield",
@@ -116,6 +146,12 @@
       "summary": "Thematic or content divider with horizontal or vertical orientation, token padding, and preset line thickness.",
       "guidePath": "./components/separator/separator.guide.json"
     },
+    {
+      "id": "shimmer",
+      "name": "Shimmer",
+      "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",
@@ -131,13 +167,13 @@
     {
       "id": "stack",
       "name": "Stack",
-      "summary": "Flex layout primitive for arranging children with token spacing, alignment, and padding.",
+      "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": "surface",
       "name": "Surface",
-      "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners.",
+      "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"
     },
     {
@@ -146,6 +182,12 @@
       "summary": "Compound segmented tab control with Surface list chrome, moving indicator, and animated panels.",
       "guidePath": "./components/tabs/tabs.guide.json"
     },
+    {
+      "id": "toast",
+      "name": "Toast",
+      "summary": "Transient notification surface with stacked or anchored placement, Banner high-level API, and optional action buttons.",
+      "guidePath": "./components/toast/toast.guide.json"
+    },
     {
       "id": "spinner",
       "name": "Spinner",

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 { Stack } from "../stack/stack.js";
+import { Text } from "../text/text.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,10 @@
+var accordion_module_default = {
+	Accordion: "viraui__accordion-module__Accordion_wFOlN",
+	Trigger: "viraui__accordion-module__Trigger_4HzIb",
+	Item: "viraui__accordion-module__Item_66o2x",
+	IconSlot: "viraui__accordion-module__IconSlot_AVQq3",
+	Icon: "viraui__accordion-module__Icon_qdu2v",
+	Panel: "viraui__accordion-module__Panel_U1Ofk"
+};
+//#endregion
+export { 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-infinite);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-group/avatar-group.css

@@ -1 +1,7 @@
-.viraui__avatar-group-module__AvatarGroup_zOrR-{--avatar-size:var(--space-2x-large);--avatar-overlap-distance:var(--space-medium);--avatar-group-gap-size:var(--space-x-small);--avatar-mask-anti-alias-size:0.5px;--avatar-mask-radius:calc((var(--avatar-size) / 2) + var(--avatar-group-gap-size));display:inline-flex;flex-wrap:nowrap;align-items:flex-start;min-inline-size:max-content;vertical-align:middle;&[data-direction=horizontal]{flex-direction:row}&[data-direction=vertical]{flex-direction:column}&[data-size=x-small]{--avatar-size:var(--space-large);--avatar-overlap-distance:var(--space-x-small)}&[data-size=small]{--avatar-size:var(--space-2x-large);--avatar-overlap-distance:var(--space-small)}&[data-size=regular]{--avatar-size:var(--space-wide);--avatar-overlap-distance:var(--space-medium)}&[data-size=big]{--avatar-size:var(--space-2x-wide);--avatar-overlap-distance:var(--space-large)}}.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)}.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(ltr)[data-direction=horizontal] &:not(:last-child){mask-image:radial-gradient(circle var(--avatar-mask-radius) at calc(100% + (var(--avatar-size) / 2) - var(--avatar-overlap-distance)) 50%,transparent calc(var(--avatar-mask-radius) - var(--avatar-mask-anti-alias-size)),#000 calc(var(--avatar-mask-radius) + var(--avatar-mask-anti-alias-size)))}.viraui__avatar-group-module__AvatarGroup_zOrR-:dir(rtl)[data-direction=horizontal] &:not(:last-child){mask-image:radial-gradient(circle var(--avatar-mask-radius) at calc((var(--avatar-size) / 2) - var(--avatar-overlap-distance)) 50%,transparent calc(var(--avatar-mask-radius) - var(--avatar-mask-anti-alias-size)),#000 calc(var(--avatar-mask-radius) + var(--avatar-mask-anti-alias-size)))}.viraui__avatar-group-module__AvatarGroup_zOrR-[data-direction=vertical] &:not(:last-child){mask-image:radial-gradient(circle var(--avatar-mask-radius) at 50% calc(100% + (var(--avatar-size) / 2) - var(--avatar-overlap-distance)),transparent calc(var(--avatar-mask-radius) - var(--avatar-mask-anti-alias-size)),#000 calc(var(--avatar-mask-radius) + var(--avatar-mask-anti-alias-size)))}}.viraui__avatar-group-module__OverflowWrapper_bKv6I{inline-size:auto;min-inline-size:var(--avatar-size)}.viraui__avatar-group-module__AvatarGroupItem_Vvlyh{--avatar-radius:100%;corner-shape:unset}.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);min-block-size:var(--avatar-size);corner-shape:unset}
+.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{--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.d.ts

@@ -1,6 +1,5 @@
 import { AvatarProps } from '..';
 import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
-import { ThemeTypes } from '@viraui/foundation/vira/types';
 import type * as React from 'react';
 type AvatarGroupAvatarProps = Omit<AvatarProps, 'size' | 'ref'>;
 /**
@@ -30,12 +29,6 @@ export type AvatarGroupProps = React.ComponentPropsWithRef<'div'> & IntrinsicVir
      * @default 'horizontal'
      */
     direction?: 'horizontal' | 'vertical';
-    /**
-     * Sets the empty visual separation preserved inside the overlap cutout.
-     *
-     * @default 'x-small'
-     */
-    gap?: Extract<ThemeTypes['space'], '2x-small' | 'x-small' | 'small'>;
     /**
      * Limits how many real avatars render before the optional overflow pill is appended.
      *

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"
+      }
+    }
+  }
 }

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

@@ -2,7 +2,6 @@ import './avatar-group.css';
 import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Avatar } from "../avatar/avatar.js";
-import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
 import avatar_group_module_default from "./avatar-group.module.js";
 import { Stack } from "../stack/stack.js";
 import { Text } from "../text/text.js";
@@ -10,25 +9,19 @@ import { Surface } from "../surface/surface.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/avatar-group/avatar-group.tsx
 var getAvatarKey = (avatar, index) => `${avatar.src ?? "fallback"}-${typeof avatar.fallback === "string" ? avatar.fallback : "node"}-${index}`;
-var AvatarGroup = ({ avatars, className, direction = "horizontal", gap = "x-small", maxVisible, overflowText, ref, size = "small", style, ...otherProps }) => {
+var AvatarGroup = ({ avatars, className, direction = "horizontal", maxVisible, overflowText, ref, size = "small", style, ...otherProps }) => {
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const isOverflowing = typeof maxVisible === "number" && maxVisible > 0 && avatars.length > maxVisible;
 	const hasOverflow = isOverflowing && overflowText !== void 0 && overflowText !== null;
 	const truncatedAvatars = isOverflowing ? avatars.slice(0, maxVisible) : avatars;
-	const dynamicStyle = {
-		"--avatar-group-gap-size": resolveThemeValue(gap, "space", "var(--space-x-small)"),
-		...style
-	};
 	return /* @__PURE__ */ jsxs("div", {
 		...componentProps,
 		...intrinsicAttributes,
 		ref,
 		className: clsx(avatar_group_module_default.AvatarGroup, className),
 		"data-direction": direction,
-		"data-gap": gap,
-		"data-has-overflow": hasOverflow ? "true" : "false",
 		"data-size": size,
-		style: dynamicStyle,
+		style,
 		children: [truncatedAvatars.map((avatar, index) => /* @__PURE__ */ jsx("div", {
 			className: avatar_group_module_default.AvatarWrapper,
 			children: /* @__PURE__ */ jsx(Avatar, {
@@ -49,7 +42,7 @@ var AvatarGroup = ({ avatars, className, direction = "horizontal", gap = "x-smal
 					vAlign: "center",
 					hPadding: "medium"
 				}),
-				style: { "--surface-border-radius": "1e5px" },
+				style: { "--vui-surface-border-radius": "1e5px" },
 				children: /* @__PURE__ */ jsx(Text, {
 					whiteSpace: "nowrap",
 					children: overflowText

package/dist/components/basic-input/basic-input.css

@@ -1 +1 @@
-.viraui__basic-input-module__BasicInput_5uE64{--basic-input-background:var(--base-1);--basic-input-color:var(--global-foreground);--basic-input-placeholder-color:var(--global-disabled-foreground);--basic-input-padding-inline:var(--space-small);--basic-input-font-size:var(--font-scale-body-small);--basic-input-border-radius:var(--radius-medium);box-sizing:border-box;margin:0;inline-size:100%;min-inline-size:0;padding-inline:var(--basic-input-padding-inline);font-family:inherit;font-size:var(--basic-input-font-size);font-variation-settings:"wght" 400;color:var(--basic-input-color);background:var(--basic-input-background);border:none;border-radius:var(--basic-input-border-radius);appearance:none;&::-webkit-contacts-auto-fill-button{background-color:var(--basic-input-color)}&::placeholder{color:var(--basic-input-placeholder-color)}&:disabled{--basic-input-background:var(--global-disabled-background);--basic-input-color:var(--global-disabled-foreground);--basic-input-placeholder-color:var(--global-disabled-foreground);cursor:not-allowed}&[data-invalid]{outline-color:oklab(from var(--highlight-red) l a b/.3)}}
+.viraui__basic-input-module__BasicInput_5uE64{--vui-basic-input-background:var(--base-1);--vui-basic-input-color:var(--global-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);--vui-basic-input-padding-inline:var(--space-small);--vui-basic-input-font-size:var(--font-scale-body-small);--vui-basic-input-border-radius:var(--radius-medium);box-sizing:border-box;margin:0;inline-size:100%;min-inline-size:0;padding-inline:var(--vui-basic-input-padding-inline);font-family:inherit;font-size:var(--vui-basic-input-font-size);font-variation-settings:"wght" 400;color:var(--vui-basic-input-color);background:var(--vui-basic-input-background);border:none;border-radius:var(--vui-basic-input-border-radius);appearance:none;&::-webkit-contacts-auto-fill-button{background-color:var(--vui-basic-input-color)}&::placeholder{color:var(--vui-basic-input-placeholder-color)}&:disabled{--vui-basic-input-background:var(--global-disabled-background);--vui-basic-input-color:var(--global-disabled-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);cursor:not-allowed}&[data-invalid]{outline-color:oklab(from var(--highlight-red) l a b/.3)}}

package/dist/components/basic-input/basic-input.js

@@ -9,18 +9,18 @@ import { Input } from "@base-ui/react/input";
 function usesInputPrimitiveRender(render) {
 	return React.isValidElement(render) && render.type === Input;
 }
-var BasicInput = React.forwardRef(function BasicInput({ className, render, ...props }, ref) {
+var BasicInput = React.forwardRef(function BasicInput({ className, render, ...otherProps }, ref) {
 	const mergedClassName = clsx(basic_input_module_default.BasicInput, className);
 	if (usesInputPrimitiveRender(render)) return /* @__PURE__ */ jsx(Input, {
 		ref,
 		className: mergedClassName,
-		...props
+		...otherProps
 	});
 	return /* @__PURE__ */ jsx(Field.Control, {
 		ref,
 		className: mergedClassName,
 		render,
-		...props
+		...otherProps
 	});
 });
 //#endregion

package/dist/components/basic-input/field-label.css

@@ -1 +1 @@
-.viraui__field-label-module__FieldLabel_R9SYf{display:inline;flex-direction:column;align-items:stretch;inline-size:100%;padding-inline:var(--field-label-padding-inline,0)}
+.viraui__field-label-module__FieldLabel_R9SYf{display:inline;flex-direction:column;align-items:stretch;inline-size:100%;padding-inline:var(--vui-field-label-padding-inline,0)}

package/dist/components/bleed/bleed.css

@@ -0,0 +1 @@
+.viraui__bleed-module__Bleed_7rnR6{margin:0 calc(var(--vui-bleed-amount, 0) * -1);&[data-bleed-full=true]{width:100vw;margin-left:calc(50% - 50vw)}}

package/dist/components/bleed/bleed.d.ts

@@ -0,0 +1,26 @@
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
+import type * as React from 'react';
+/**
+ * Public Bleed props.
+ *
+ * Includes standard `div` attributes such as `children`, `id`, `className`, and event handlers,
+ * plus Vira-owned inline bleed controls.
+ *
+ * @default Native div pass-through props keep React defaults.
+ */
+export type BleedProps = React.ComponentPropsWithRef<'div'> & IntrinsicViraProps & {
+    /**
+     * Sets the inline bleed amount using a Vira space token.
+     *
+     * @default No bleed is applied.
+     */
+    amount?: ThemeTypes['space'];
+    /**
+     * Bleeds content to the viewport edges and ignores `amount`.
+     *
+     * @default false
+     */
+    full?: boolean;
+};
+export declare const Bleed: React.FC<BleedProps>;

package/dist/components/bleed/bleed.guide.json

@@ -0,0 +1,39 @@
+{
+  "name": "Bleed",
+  "summary": "Layout utility that pulls content past inline padding using negative margins or full viewport bleed.",
+  "whenToUse": [
+    "Edge-to-edge media or dividers inside padded Surface or Stack containers",
+    "Hero bands or callouts that should break out of card padding",
+    "Full-bleed sections that span the viewport width from a centered layout"
+  ],
+  "whenNotToUse": [
+    "Replacing Stack or Surface padding instead of composing with them",
+    "Interactive controls that need their own hit target sizing",
+    "Cases where overflow clipping on the parent should remain strict"
+  ],
+  "accessibility": [
+    "Bleed is a layout wrapper only — child content keeps native semantics",
+    "Parent containers should preserve readable line length for text content",
+    "Full bleed can introduce horizontal scroll when ancestors use overflow hidden incorrectly"
+  ],
+  "antiPatterns": [
+    "Nesting multiple full bleeds without checking ancestor overflow",
+    "Using Bleed to compensate for missing Stack padding instead of fixing layout composition",
+    "Applying full bleed inside narrow overflow-hidden cards without testing clipping"
+  ],
+  "related": ["Stack", "Surface", "Separator"],
+  "properties": {
+    "react": {
+      "amount": {
+        "description": "Sets the inline bleed amount using a Vira space token.",
+        "refCss": "amount"
+      }
+    },
+    "css": {
+      "amount": {
+        "description": "Negative inline margin bleed distance on the root.",
+        "refReact": "amount"
+      }
+    }
+  }
+}

package/dist/components/bleed/bleed.js

@@ -0,0 +1,24 @@
+import './bleed.css';
+import { clsx } from "../../core/clsx.js";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import bleed_module_default from "./bleed.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/bleed/bleed.tsx
+var Bleed = ({ amount, children, className, full = false, ref, style, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const dynamicStyle = {
+		...amount && !full && { "--vui-bleed-amount": `var(--space-${amount})` },
+		...style
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...componentProps,
+		...intrinsicAttributes,
+		ref,
+		className: clsx(bleed_module_default.Bleed, className),
+		"data-bleed-full": full ? "true" : void 0,
+		style: dynamicStyle,
+		children
+	});
+};
+//#endregion
+export { Bleed };