@yahoo/uds 3.108.2 → 3.109.0-beta.1

package/dist/cli/dist/utils/rules/config.cjs

@@ -1,74 +1,158 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 const require_runtime = require('../../../../_virtual/_rolldown/runtime.cjs');
-let node_path = require("node:path");
 let node_fs = require("node:fs");
+let node_path = require("node:path");
 let node_url = require("node:url");
 
 //#region ../cli/dist/utils/rules/config.mjs
 /*! © 2026 Yahoo, Inc. UDS CLI v0.0.0-development */
 const __dirname$1 = (0, node_path.dirname)((0, node_url.fileURLToPath)(require("url").pathToFileURL(__filename).href));
-const EDITOR_CONFIGS = { cursor: {
-	name: "Cursor",
-	description: "AI-powered coding assistant rules for UDS development",
-	rules: [
-		{
-			name: "UDS Components",
-			description: "Component development guidelines and patterns",
-			files: [{
-				source: "rules/cursor/uds/components.mdc",
-				target: ".cursor/rules/uds/components.mdc",
-				type: "file"
-			}]
-		},
-		{
-			name: "UDS Tailwind",
-			description: "Tailwind CSS configuration and setup guidelines",
-			files: [{
-				source: "rules/cursor/uds/tailwind.mdc",
-				target: ".cursor/rules/uds/tailwind.mdc",
-				type: "file"
-			}]
-		},
-		{
-			name: "UDS Icons",
-			description: "Icon usage and documentation guidelines",
-			files: [{
-				source: "rules/cursor/uds/icons.mdc",
-				target: ".cursor/rules/uds/icons.mdc",
-				type: "file"
-			}]
-		},
-		{
-			name: "UDS Elevation",
-			description: "Elevation prop usage for layered surfaces",
-			files: [{
-				source: "rules/cursor/uds/elevation.mdc",
-				target: ".cursor/rules/uds/elevation.mdc",
-				type: "file"
-			}]
-		},
-		{
-			name: "UDS Styling",
-			description: "Color palette and styling guidelines",
-			files: [{
-				source: "rules/cursor/uds/styling.mdc",
-				target: ".cursor/rules/uds/styling.mdc",
-				type: "file"
-			}]
-		}
-	]
-} };
+const EDITOR_CONFIGS = {
+	cursor: {
+		name: "Cursor",
+		description: "AI-powered coding assistant rules for UDS development",
+		rules: [
+			{
+				name: "UDS Components",
+				description: "Component development guidelines and patterns",
+				files: [{
+					source: "rules/cursor/uds/components.mdc",
+					target: ".cursor/rules/uds/components.mdc",
+					type: "file"
+				}]
+			},
+			{
+				name: "UDS Tailwind",
+				description: "Tailwind CSS configuration and setup guidelines",
+				files: [{
+					source: "rules/cursor/uds/tailwind.mdc",
+					target: ".cursor/rules/uds/tailwind.mdc",
+					type: "file"
+				}]
+			},
+			{
+				name: "UDS Icons",
+				description: "Icon usage and documentation guidelines",
+				files: [{
+					source: "rules/cursor/uds/icons.mdc",
+					target: ".cursor/rules/uds/icons.mdc",
+					type: "file"
+				}]
+			},
+			{
+				name: "UDS Elevation",
+				description: "Elevation prop usage for layered surfaces",
+				files: [{
+					source: "rules/cursor/uds/elevation.mdc",
+					target: ".cursor/rules/uds/elevation.mdc",
+					type: "file"
+				}]
+			},
+			{
+				name: "UDS Styling",
+				description: "Color palette and styling guidelines",
+				files: [{
+					source: "rules/cursor/uds/styling.mdc",
+					target: ".cursor/rules/uds/styling.mdc",
+					type: "file"
+				}]
+			}
+		]
+	},
+	claude: {
+		name: "Claude Code",
+		description: "AI-powered coding assistant rules for UDS development",
+		rules: [
+			{
+				name: "UDS Components",
+				description: "Component development guidelines and patterns",
+				files: [{
+					source: "rules/claude/uds/components.md",
+					target: ".claude/rules/uds/components.md",
+					type: "file"
+				}]
+			},
+			{
+				name: "UDS Tailwind",
+				description: "Tailwind CSS configuration and setup guidelines",
+				files: [{
+					source: "rules/claude/uds/tailwind.md",
+					target: ".claude/rules/uds/tailwind.md",
+					type: "file"
+				}]
+			},
+			{
+				name: "UDS Icons",
+				description: "Icon usage and documentation guidelines",
+				files: [{
+					source: "rules/claude/uds/icons.md",
+					target: ".claude/rules/uds/icons.md",
+					type: "file"
+				}]
+			},
+			{
+				name: "UDS Elevation",
+				description: "Elevation prop usage for layered surfaces",
+				files: [{
+					source: "rules/claude/uds/elevation.md",
+					target: ".claude/rules/uds/elevation.md",
+					type: "file"
+				}]
+			},
+			{
+				name: "UDS Styling",
+				description: "Color palette and styling guidelines",
+				files: [{
+					source: "rules/claude/uds/styling.md",
+					target: ".claude/rules/uds/styling.md",
+					type: "file"
+				}]
+			}
+		]
+	}
+};
 function getAvailableEditors() {
 	return Object.keys(EDITOR_CONFIGS);
 }
 function getEditorConfig(editor) {
 	return EDITOR_CONFIGS[editor];
 }
+const AUTO_GENERATED_HEADER = "<!-- Auto-generated by UDS CLI (`uds editor-rules`). Do not edit manually. -->";
 function getRuleContent(rulePath) {
-	return (0, node_fs.readFileSync)((0, node_path.join)(__dirname$1, "..", "..", "..", rulePath), "utf-8");
+	return addAutoGeneratedHeader((0, node_fs.readFileSync)((0, node_path.join)(__dirname$1, "..", "..", "..", rulePath), "utf-8"));
+}
+function addAutoGeneratedHeader(content) {
+	if (content.startsWith("---\n")) {
+		const closingIndex = content.indexOf("\n---\n", 4);
+		if (closingIndex !== -1) return `${content.slice(0, closingIndex + 5)}${AUTO_GENERATED_HEADER}\n${content.slice(closingIndex + 5)}`;
+	}
+	return `${AUTO_GENERATED_HEADER}\n\n${content}`;
+}
+/**
+* Checks which editors have installed UDS rules that are out of date
+* compared to the latest rules shipped with the CLI.
+* Only checks editors whose rule directories already exist.
+*/
+function getEditorsWithStaleRules(projectDir) {
+	const staleEditors = [];
+	for (const [_editorId, editorConfig] of Object.entries(EDITOR_CONFIGS)) {
+		let hasAnyRule = false;
+		let hasStaleRule = false;
+		for (const rule of editorConfig.rules) for (const file of rule.files) {
+			const targetPath = (0, node_path.join)(projectDir, file.target);
+			if (!(0, node_fs.existsSync)(targetPath)) continue;
+			hasAnyRule = true;
+			try {
+				if ((0, node_fs.readFileSync)(targetPath, "utf-8") !== getRuleContent(file.source)) hasStaleRule = true;
+			} catch {}
+		}
+		if (hasAnyRule && hasStaleRule) staleEditors.push(editorConfig.name);
+	}
+	return staleEditors;
 }
 
 //#endregion
 exports.getAvailableEditors = getAvailableEditors;
 exports.getEditorConfig = getEditorConfig;
+exports.getEditorsWithStaleRules = getEditorsWithStaleRules;
 exports.getRuleContent = getRuleContent;

package/dist/cli/dist/utils/rules/config.js

@@ -1,71 +1,154 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { existsSync, readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
-import { readFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 
 //#region ../cli/dist/utils/rules/config.mjs
 /*! © 2026 Yahoo, Inc. UDS CLI v0.0.0-development */
 const __dirname = dirname(fileURLToPath(import.meta.url));
-const EDITOR_CONFIGS = { cursor: {
-	name: "Cursor",
-	description: "AI-powered coding assistant rules for UDS development",
-	rules: [
-		{
-			name: "UDS Components",
-			description: "Component development guidelines and patterns",
-			files: [{
-				source: "rules/cursor/uds/components.mdc",
-				target: ".cursor/rules/uds/components.mdc",
-				type: "file"
-			}]
-		},
-		{
-			name: "UDS Tailwind",
-			description: "Tailwind CSS configuration and setup guidelines",
-			files: [{
-				source: "rules/cursor/uds/tailwind.mdc",
-				target: ".cursor/rules/uds/tailwind.mdc",
-				type: "file"
-			}]
-		},
-		{
-			name: "UDS Icons",
-			description: "Icon usage and documentation guidelines",
-			files: [{
-				source: "rules/cursor/uds/icons.mdc",
-				target: ".cursor/rules/uds/icons.mdc",
-				type: "file"
-			}]
-		},
-		{
-			name: "UDS Elevation",
-			description: "Elevation prop usage for layered surfaces",
-			files: [{
-				source: "rules/cursor/uds/elevation.mdc",
-				target: ".cursor/rules/uds/elevation.mdc",
-				type: "file"
-			}]
-		},
-		{
-			name: "UDS Styling",
-			description: "Color palette and styling guidelines",
-			files: [{
-				source: "rules/cursor/uds/styling.mdc",
-				target: ".cursor/rules/uds/styling.mdc",
-				type: "file"
-			}]
-		}
-	]
-} };
+const EDITOR_CONFIGS = {
+	cursor: {
+		name: "Cursor",
+		description: "AI-powered coding assistant rules for UDS development",
+		rules: [
+			{
+				name: "UDS Components",
+				description: "Component development guidelines and patterns",
+				files: [{
+					source: "rules/cursor/uds/components.mdc",
+					target: ".cursor/rules/uds/components.mdc",
+					type: "file"
+				}]
+			},
+			{
+				name: "UDS Tailwind",
+				description: "Tailwind CSS configuration and setup guidelines",
+				files: [{
+					source: "rules/cursor/uds/tailwind.mdc",
+					target: ".cursor/rules/uds/tailwind.mdc",
+					type: "file"
+				}]
+			},
+			{
+				name: "UDS Icons",
+				description: "Icon usage and documentation guidelines",
+				files: [{
+					source: "rules/cursor/uds/icons.mdc",
+					target: ".cursor/rules/uds/icons.mdc",
+					type: "file"
+				}]
+			},
+			{
+				name: "UDS Elevation",
+				description: "Elevation prop usage for layered surfaces",
+				files: [{
+					source: "rules/cursor/uds/elevation.mdc",
+					target: ".cursor/rules/uds/elevation.mdc",
+					type: "file"
+				}]
+			},
+			{
+				name: "UDS Styling",
+				description: "Color palette and styling guidelines",
+				files: [{
+					source: "rules/cursor/uds/styling.mdc",
+					target: ".cursor/rules/uds/styling.mdc",
+					type: "file"
+				}]
+			}
+		]
+	},
+	claude: {
+		name: "Claude Code",
+		description: "AI-powered coding assistant rules for UDS development",
+		rules: [
+			{
+				name: "UDS Components",
+				description: "Component development guidelines and patterns",
+				files: [{
+					source: "rules/claude/uds/components.md",
+					target: ".claude/rules/uds/components.md",
+					type: "file"
+				}]
+			},
+			{
+				name: "UDS Tailwind",
+				description: "Tailwind CSS configuration and setup guidelines",
+				files: [{
+					source: "rules/claude/uds/tailwind.md",
+					target: ".claude/rules/uds/tailwind.md",
+					type: "file"
+				}]
+			},
+			{
+				name: "UDS Icons",
+				description: "Icon usage and documentation guidelines",
+				files: [{
+					source: "rules/claude/uds/icons.md",
+					target: ".claude/rules/uds/icons.md",
+					type: "file"
+				}]
+			},
+			{
+				name: "UDS Elevation",
+				description: "Elevation prop usage for layered surfaces",
+				files: [{
+					source: "rules/claude/uds/elevation.md",
+					target: ".claude/rules/uds/elevation.md",
+					type: "file"
+				}]
+			},
+			{
+				name: "UDS Styling",
+				description: "Color palette and styling guidelines",
+				files: [{
+					source: "rules/claude/uds/styling.md",
+					target: ".claude/rules/uds/styling.md",
+					type: "file"
+				}]
+			}
+		]
+	}
+};
 function getAvailableEditors() {
 	return Object.keys(EDITOR_CONFIGS);
 }
 function getEditorConfig(editor) {
 	return EDITOR_CONFIGS[editor];
 }
+const AUTO_GENERATED_HEADER = "<!-- Auto-generated by UDS CLI (`uds editor-rules`). Do not edit manually. -->";
 function getRuleContent(rulePath) {
-	return readFileSync(join(__dirname, "..", "..", "..", rulePath), "utf-8");
+	return addAutoGeneratedHeader(readFileSync(join(__dirname, "..", "..", "..", rulePath), "utf-8"));
+}
+function addAutoGeneratedHeader(content) {
+	if (content.startsWith("---\n")) {
+		const closingIndex = content.indexOf("\n---\n", 4);
+		if (closingIndex !== -1) return `${content.slice(0, closingIndex + 5)}${AUTO_GENERATED_HEADER}\n${content.slice(closingIndex + 5)}`;
+	}
+	return `${AUTO_GENERATED_HEADER}\n\n${content}`;
+}
+/**
+* Checks which editors have installed UDS rules that are out of date
+* compared to the latest rules shipped with the CLI.
+* Only checks editors whose rule directories already exist.
+*/
+function getEditorsWithStaleRules(projectDir) {
+	const staleEditors = [];
+	for (const [_editorId, editorConfig] of Object.entries(EDITOR_CONFIGS)) {
+		let hasAnyRule = false;
+		let hasStaleRule = false;
+		for (const rule of editorConfig.rules) for (const file of rule.files) {
+			const targetPath = join(projectDir, file.target);
+			if (!existsSync(targetPath)) continue;
+			hasAnyRule = true;
+			try {
+				if (readFileSync(targetPath, "utf-8") !== getRuleContent(file.source)) hasStaleRule = true;
+			} catch {}
+		}
+		if (hasAnyRule && hasStaleRule) staleEditors.push(editorConfig.name);
+	}
+	return staleEditors;
 }
 
 //#endregion
-export { getAvailableEditors, getEditorConfig, getRuleContent };
+export { getAvailableEditors, getEditorConfig, getEditorsWithStaleRules, getRuleContent };

package/dist/cli/rules/claude/uds/components.md

@@ -0,0 +1,50 @@
+# UDS Components
+
+## MCP tool usage
+
+- Always fetch components type definition using the UDS MCP server
+- Always fetch the possible components from UDS using the UDS MCP server
+- Before using any component, fetch its type definition and documentation examples via the MCP server
+- Use `get_components` to retrieve the full list of exported UDS components
+- Use `get_component_documentation_examples` with a component name (e.g., "tooltip", "toast") to fetch usage docs and examples
+- Use `get_documentation` with path "core-concepts/elevation" for detailed elevation guidance
+
+## Never rebuild existing UDS primitives
+
+- Before building ANY custom tooltip, toast, notification, popover, dropdown, select, dialog, modal, drawer, sheet, accordion, tabs, alert, snackbar, or banner, call `get_components` first to check if UDS already exports it
+- If a matching component exists, use it and call `get_component_documentation_examples` to learn its API
+- Never recreate functionality that UDS provides — only create custom components when UDS doesn't offer the needed functionality
+
+## Use UDS components instead of raw HTML
+
+- Always use UDS UI library components instead of raw HTML tags
+- Use `<Text>` instead of `<p>`, `<span>`, `<h1>`–`<h6>`
+- Use `<Button>` instead of `<button>`
+- Use `<Input>` instead of `<input>`
+- Use `<Checkbox>` instead of `<input type="checkbox">`
+- Use `<Radio>` instead of `<input type="radio">`
+- Use `<Switch>` instead of custom toggle components
+- Use `<Link>` instead of `<a>`
+- Use `<Icon>` instead of SVG elements
+- Use `<Tooltip>`, `<TooltipTrigger>`, `<TooltipContent>` instead of custom tooltip implementations
+- Use `createToast()` from `@yahoo/uds` instead of custom toast/notification components
+
+## Box constraints
+
+- `<Box>` has `display="flex"` by default — use `<VStack>` for vertical stacking, `<HStack>` for horizontal, or `<div>` for simple containers
+- Always set an explicit `display` prop on every `<Box>` (`display="block"` or `display="flex"`). Omitting it causes broken UI.
+- `<Box>` does NOT have a `gap` prop — use `rowGap` or `columnGap` instead. Only `<HStack>` and `<VStack>` have `gap`.
+- Every `<Box>` with `flexDirection="column"` must have `rowGap` specified. Every `<Box>` with `flexDirection="row"` must have `columnGap` specified if spacing between children is needed. The `spacing` prop is for padding only, not gaps.
+
+## HStack and VStack constraints
+
+- Always set `alignItems` and `justifyContent` on every `<HStack>` and `<VStack>` — never rely on default flex behavior
+- Flexbox alignment values must use full CSS syntax: `"flex-start"` not `"start"`, `"flex-end"` not `"end"`
+- Valid `justifyContent` values: `"flex-start"` | `"flex-end"` | `"center"` | `"space-between"` | `"space-around"` | `"space-evenly"`
+- Valid `alignItems` values: `"flex-start"` | `"flex-end"` | `"center"` | `"baseline"` | `"stretch"`
+
+## Styling rules
+
+- Box, HStack, and VStack provide TypeScript props for all styling — prefer using props (`backgroundColor`, `spacing`, `borderRadius`, etc.) over Tailwind `className` for UDS design tokens
+- Never override styling properties on components that use `size` and `variant` props (Button, IconButton, Chip, Badge, Avatar, Radio, Checkbox, Menu, Divider, Switch) with Tailwind classes — always use only the available `size` and `variant` options
+- When placing fixed-size components (Button, IconButton, Chip, Badge, Avatar) in a horizontal flex container, add `className="shrink-0"` to prevent them from being compressed

package/dist/cli/rules/claude/uds/elevation.md

@@ -0,0 +1,33 @@
+# UDS Elevation
+
+## When to use elevation
+
+- Any surface that overlaps or sits on top of another MUST use the `elevation` prop on `<Box>`, `<VStack>`, or `<HStack>`
+- This includes cards, modals, popovers, dropdowns, drawers, toasts, sheets, and floating elements
+
+## The elevation scale
+
+- `elevation="0"` — Background or flat surfaces
+- `elevation="1"` — Cards, list items, secondary surfaces
+- `elevation="2"` — Floating elements like popovers, dropdowns
+- `elevation="3"` — Modals, sheets, key actions
+- `elevation="4"` — Drawers or toasts
+- `elevation="5"` — System overlays
+
+## Always use the shorthand prop
+
+- The `elevation` prop is a shorthand that sets `backgroundColor`, `borderColor`, `borderWidth`, and `dropShadow` together in one prop
+- Never use `dropShadow` alone for layered surfaces — it only adds a shadow and misses the required `backgroundColor`, `borderColor`, and `borderWidth` changes
+- Never use individual elevation token props (`backgroundColor="elevation-X"`, `borderColor="elevation-X"`, `borderWidth="elevation-X"`, `dropShadow="elevation-X"`) — always use the shorthand `elevation` prop instead
+- Individual props override the shorthand if needed: `<Box elevation="2" backgroundColor="primary" />`
+
+## Examples
+
+- Wrong: `<Box dropShadow="md" backgroundColor="primary" borderRadius="lg">` (incomplete elevation)
+- Wrong: `<Box backgroundColor="elevation-2" borderColor="elevation-2" borderWidth="elevation-2" dropShadow="elevation-2">` (verbose, use shorthand)
+- Correct: `<Box elevation="1" borderRadius="lg">` (single prop sets all 4 properties)
+- Correct: `<VStack elevation="2" gap="4" alignItems="stretch" justifyContent="flex-start">Popover content</VStack>`
+
+## More information
+
+- Use `get_documentation` MCP tool with path "core-concepts/elevation" for detailed guidance on applying elevation

package/dist/cli/rules/claude/uds/icons.md

@@ -0,0 +1,4 @@
+# UDS Icons
+
+- Anytime you have to use an icon in a UDS component or use UDS icons outside UDS components, fetch Icon documentation for more context from the MCP server
+- Always check what icons are available in UDS through the MCP server

package/dist/cli/rules/claude/uds/styling.md

@@ -0,0 +1,18 @@
+# UDS Styling
+
+## Use UDS palette colors only
+
+- Only use UDS palette colors — never use raw color values like `bg-white`, `text-white`, `bg-gray-100`, etc.
+- Background colors: `primary`, `secondary`, `brand`, `brand-secondary`, `alert`, `alert-secondary`, `positive`, `positive-secondary`, `warning`, `warning-secondary`, `info`, `info-secondary`
+- Foreground (text/icon) colors: `primary`, `secondary`, `tertiary`, `muted`, `on-color`, `brand`, `alert`, `positive`, `warning`, `info`
+
+## Color pairing rules
+
+- On dark or brand backgrounds (`brand`, `positive`, `info`, `warning`, `alert`), use `color="on-color"` for text and icons
+- On secondary/lighter background variants (`brand-secondary`, `positive-secondary`, etc.), use the matching semantic color (e.g., `color="brand"` on `backgroundColor="brand-secondary"`)
+- Never use `color="on-color"` on white or light backgrounds — it creates invisible white text
+- Never use a dark semantic color (e.g., `brand`, `positive`) directly on its own secondary background variant as contrast will be poor
+
+## General styling
+
+- Prefer UDS TypeScript props (`backgroundColor`, `spacing`, `borderRadius`, etc.) over Tailwind `className` for design tokens

package/dist/cli/rules/claude/uds/tailwind.md

@@ -0,0 +1,5 @@
+# UDS Tailwind
+
+- Never create a UDS config manually
+- If `uds.config.ts` or `uds.config.js` is not present at the root of the project, ask the user to create it using UDS CLI sync command
+- Make sure that tailwind configuration has the UDS tailwind plugin

package/dist/cli/runner.cjs

@@ -2,16 +2,17 @@
 const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 const require_styles_variants = require('../styles/variants.cjs');
 const require_components_index = require('../components/index.cjs');
-const require_cli = require('./dist/cli.cjs');
+const require_css = require('../tailwind/dist/commands/css.cjs');
 const require_generateComponentData = require('../tailwind/dist/commands/generateComponentData.cjs');
 const require_generatePurgeCSSData = require('../tailwind/dist/commands/generatePurgeCSSData.cjs');
 const require_purge = require('../tailwind/dist/commands/purge.cjs');
+const require_cli = require('./dist/cli.cjs');
 const require_package = require('../uds/package.cjs');
 const require_components_experimental_index = require('../components/experimental/index.cjs');
 const require_cli_commands_sync = require('./commands/sync.cjs');
 const require_cli_commands_version = require('./commands/version.cjs');
-let node_path = require("node:path");
 let ts_morph = require("ts-morph");
+let node_path = require("node:path");
 
 //#region src/cli/runner.ts
 require_cli.run([
@@ -44,6 +45,14 @@ require_cli.run([
 			outputFile: (0, node_path.join)(process.cwd(), "generated/componentData.json")
 		};
 	}),
+	require_css.makeCSSCommand(async () => {
+		const componentData = await Promise.resolve().then(() => require("../uds/generated/componentData.cjs"));
+		return {
+			variants: require_styles_variants.variants,
+			autoVariants: (await Promise.resolve().then(() => require("../automated-config/dist/generated/autoVariants.cjs"))).autoVariants,
+			componentData
+		};
+	}),
 	require_cli_commands_sync.syncCommand
 ]);
 

package/dist/cli/runner.js

@@ -1,16 +1,17 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { variants } from "../styles/variants.js";
 import { components_exports } from "../components/index.js";
-import { run } from "./dist/cli.js";
+import { makeCSSCommand } from "../tailwind/dist/commands/css.js";
 import { makeGenerateComponentDataCommand } from "../tailwind/dist/commands/generateComponentData.js";
 import { makeGeneratePurgeCSSDataCommand } from "../tailwind/dist/commands/generatePurgeCSSData.js";
 import { makePurgeCommand } from "../tailwind/dist/commands/purge.js";
+import { run } from "./dist/cli.js";
 import package_default from "../uds/package.js";
 import { experimental_exports } from "../components/experimental/index.js";
 import { syncCommand } from "./commands/sync.js";
 import { versionCommand } from "./commands/version.js";
-import { join } from "node:path";
 import { Project } from "ts-morph";
+import { join } from "node:path";
 
 //#region src/cli/runner.ts
 run([
@@ -43,6 +44,14 @@ run([
 			outputFile: join(process.cwd(), "generated/componentData.json")
 		};
 	}),
+	makeCSSCommand(async () => {
+		const componentData = await import("../uds/generated/componentData.js");
+		return {
+			variants,
+			autoVariants: (await import("../automated-config/dist/generated/autoVariants.js")).autoVariants,
+			componentData
+		};
+	}),
 	syncCommand
 ]);
 

package/dist/components/client/Avatar/AvatarImage.cjs

@@ -55,6 +55,7 @@ const AvatarImage = ({ size = require_components_client_Avatar_utils.DEFAULT_AVA
 	if (loadingState === "loaded") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
 		className: classNames.root,
 		style: inlineStyles.root,
+		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Image.Image, {
 			src,
 			srcSet,

package/dist/components/client/Avatar/AvatarImage.js

@@ -53,6 +53,7 @@ const AvatarImage = ({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_AVATAR_VARI
 	if (loadingState === "loaded") return /* @__PURE__ */ jsx(Box, {
 		className: classNames.root,
 		style: inlineStyles.root,
+		...props,
 		children: /* @__PURE__ */ jsx(Image$1, {
 			src,
 			srcSet,

package/dist/components/client/Chip/ChipDismissible.cjs

@@ -20,7 +20,7 @@ const ChipDismissible = (0, react.forwardRef)(function ChipDismissible({ dismiss
 			className
 		}),
 		icon: require_styles_styler.getStyles({ chipDismissibleVariantIcon: variant }),
-		iconPressable: require_styles_styler.cx("uds-chip-dismissible-button", "uds-hit-target")
+		iconPressable: require_styles_styler.cx("uds-chip-dismissible-button", "uds-hit-target", "uds-ring", "rounded-full")
 	}), [className, variant]);
 	/**
 	* Handlers

package/dist/components/client/Chip/ChipDismissible.js

@@ -17,7 +17,7 @@ const ChipDismissible = forwardRef(function ChipDismissible({ dismissButtonAriaL
 			className
 		}),
 		icon: getStyles({ chipDismissibleVariantIcon: variant }),
-		iconPressable: cx("uds-chip-dismissible-button", "uds-hit-target")
+		iconPressable: cx("uds-chip-dismissible-button", "uds-hit-target", "uds-ring", "rounded-full")
 	}), [className, variant]);
 	/**
 	* Handlers