@ctrl-ui/react 0.8.2 → 0.8.4

package/dist/scripts/contrast-eval.d.ts

@@ -1,46 +1,45 @@
 //#region src/scripts/contrast-eval.d.mts
-declare const stripComments: (css: any) => any;
-declare function parseBlocks(css: any): {
+export declare const stripComments: (css: any) => any;
+export declare function parseBlocks(css: any): {
   prelude: any;
   body: any;
 }[];
-declare function flattenBlocks(css: any): any;
-declare function declarations(body: any): Map<any, any>;
-/** Later source wins, so the order is Tailwind palette, core theme, skin theme, app overrides. */
-declare function tokenMaps(cssSources: any): {
+export declare function flattenBlocks(css: any): any;
+export declare function declarations(body: any): Map<any, any>;
+export declare function themeTokenBlocks(css: any): any;
+export declare function tokenMaps(cssSources: any): {
   light: Map<any, any>;
   dark: Map<any, any>;
 };
-declare function rgbToOklch(r255: any, g255: any, b255: any): {
+export declare function rgbToOklch(r255: any, g255: any, b255: any): {
   L: number;
   C: number;
   H: number;
 };
-declare function oklchToRgb(L: any, C: any, H: any): {
+export declare function oklchToRgb(L: any, C: any, H: any): {
   r: number;
   g: number;
   b: number;
 };
-declare const luminance: ({ r, g, b }: {
+export declare const luminance: ({ r, g, b }: {
   b: any;
   g: any;
   r: any;
 }) => number;
-declare function contrastRatio(a: any, b: any): number;
-declare function parseHex(value: any): {
+export declare function contrastRatio(a: any, b: any): number;
+export declare function parseHex(value: any): {
   r: number;
   g: number;
   b: number;
   alpha: number;
 } | null;
-declare function resolveColor(value: any, tokens: any, seen?: Set<any>, depth?: number): any;
-declare function composite(over: any, under: any): {
+export declare function resolveColor(value: any, tokens: any, seen?: Set<any>, depth?: number): any;
+export declare function composite(over: any, under: any): {
   r: number;
   g: number;
   b: number;
   alpha: any;
 };
-declare function evaluatePair(pair: any, tokens: any): any;
-declare function evaluate(tokens: any, pairs: any): any;
-//#endregion
-export { composite, contrastRatio, declarations, evaluate, evaluatePair, flattenBlocks, luminance, oklchToRgb, parseBlocks, parseHex, resolveColor, rgbToOklch, stripComments, tokenMaps };
+export declare function evaluatePair(pair: any, tokens: any): any;
+export declare function evaluate(tokens: any, pairs: any): any;
+//#endregion

package/dist/scripts/contrast-eval.js

@@ -40,20 +40,27 @@ function declarations(body) {
 	}
 	return properties;
 }
-const declaresTokens = (prelude) => prelude.includes("[data-skin") || prelude.startsWith("@theme") && !prelude.includes("inline");
+function declaresTokens(prelude) {
+	if (prelude.startsWith("@")) return prelude.startsWith("@theme") && !prelude.includes("inline");
+	return prelude.includes("[data-skin") || /(^|[\s,(])(?::root|\.dark)(?=$|[\s,.):])/.test(prelude);
+}
+function themeTokenBlocks(css) {
+	return parseBlocks(stripComments(css)).flatMap((block) => {
+		if (/^@layer\b/.test(block.prelude)) return themeTokenBlocks(block.body);
+		return declaresTokens(block.prelude) ? [block] : [];
+	});
+}
 function modesOf(prelude) {
 	if (/\.dark\b/.test(prelude.replaceAll(/:not\([^)]*\)/g, ""))) return ["dark"];
 	if (/:not\([^)]*\.dark\b/.test(prelude)) return ["light"];
 	return ["light", "dark"];
 }
-/** Later source wins, so the order is Tailwind palette, core theme, skin theme, app overrides. */
 function tokenMaps(cssSources) {
 	const maps = {
 		light: /* @__PURE__ */ new Map(),
 		dark: /* @__PURE__ */ new Map()
 	};
-	for (const css of cssSources) for (const block of flattenBlocks(stripComments(css))) {
-		if (!declaresTokens(block.prelude)) continue;
+	for (const css of cssSources) for (const block of themeTokenBlocks(css)) {
 		const modes = modesOf(block.prelude);
 		for (const [name, value] of declarations(block.body)) for (const mode of modes) maps[mode].set(name, value);
 	}
@@ -162,7 +169,6 @@ function splitTopLevel(text) {
 }
 const unresolved = (reason) => ({ unresolved: reason });
 const isUnresolved = (result) => Boolean(result?.unresolved);
-/** `calc(<base> <op> <n>)`, `calc(<n> * var(--x))` and `calc(<base> * <n>)` — the only calc shapes the packs write. */
 function evaluateCalc(expression, base, tokens, seen, depth) {
 	const inner = expression.slice(5, -1).trim();
 	const match = /^(\S+)\s*([+\-*])\s*(\S+)$/.exec(inner);
@@ -237,7 +243,7 @@ function literalOklch(inner, tokens, seen, depth) {
 	const numbers = channels.map((part, index) => literalChannel(part, index === 0));
 	if (numbers.some((number) => number === null)) return unresolved(`unsupported \`oklch(${inner})\``);
 	const alphaText = slash === -1 ? null : parts.slice(slash + 1).join(" ");
-	const alpha = alphaText === null ? 1 : resolveScalar(alphaText, tokens, seen, depth);
+	const alpha = alphaText === null ? 1 : alphaValue(alphaText, null, tokens, seen, depth);
 	if (alpha === null) return unresolved(`unsupported alpha in \`oklch(${inner})\``);
 	return {
 		...oklchToRgb(numbers[0], numbers[1], numbers[2]),
@@ -324,4 +330,4 @@ function evaluate(tokens, pairs) {
 	return pairs.map((pair) => evaluatePair(pair, tokens));
 }
 //#endregion
-export { composite, contrastRatio, declarations, evaluate, evaluatePair, flattenBlocks, luminance, oklchToRgb, parseBlocks, parseHex, resolveColor, rgbToOklch, stripComments, tokenMaps };
+export { composite, contrastRatio, declarations, evaluate, evaluatePair, flattenBlocks, luminance, oklchToRgb, parseBlocks, parseHex, resolveColor, rgbToOklch, stripComments, themeTokenBlocks, tokenMaps };

package/dist/skin-provider.d.ts

@@ -0,0 +1,14 @@
+import { ControlUiSkin, SkinAdornmentContexts, SkinAdornmentPart, SkinAdornmentScope } from "./skin.js";
+import { ReactNode } from "react";
+//#region src/skin-provider.d.ts
+export declare function SkinProvider({ skin, children }: {
+  skin: ControlUiSkin;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useSkin(): ControlUiSkin;
+export declare function SkinAdornment<Scope extends SkinAdornmentScope, Part extends SkinAdornmentPart<Scope>>({ scope, part, context }: {
+  scope: Scope;
+  part: Part;
+  context: SkinAdornmentContexts[Scope][Part];
+}): ReactNode;
+//#endregion

package/dist/skin-provider.js

@@ -0,0 +1,21 @@
+"use client";
+import { skinAdornment } from "./skin.js";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/skin-provider.tsx
+const SkinContext = createContext({});
+function SkinProvider({ skin, children }) {
+	return /* @__PURE__ */ jsx(SkinContext, {
+		value: skin,
+		children
+	});
+}
+function useSkin() {
+	return useContext(SkinContext);
+}
+function SkinAdornment({ scope, part, context }) {
+	const skin = useSkin();
+	return skinAdornment(skin, scope, part, context);
+}
+//#endregion
+export { SkinAdornment, SkinProvider, useSkin };

package/dist/skin.d.ts

@@ -3,7 +3,7 @@ import { ControlTone, ControlVariant } from "./control-variants.js";
 import { ReactNode } from "react";
 //#region src/skin.d.ts
 type StatelessPart = Record<never, never>;
-type SkinAdornmentContexts = {
+export type SkinAdornmentContexts = {
   button: {
     layer: {
       variant: ControlVariant;
@@ -13,9 +13,6 @@ type SkinAdornmentContexts = {
   "chat-layout": {
     titlebar: StatelessPart;
   };
-  "chat-thought": {
-    details: StatelessPart;
-  };
   dialog: {
     titlebar: StatelessPart;
   };
@@ -25,47 +22,31 @@ type SkinAdornmentContexts = {
     };
   };
 };
-type SkinAdornmentScope = keyof SkinAdornmentContexts;
-type SkinAdornmentPart<Scope extends SkinAdornmentScope> = keyof SkinAdornmentContexts[Scope];
+export type SkinAdornmentScope = keyof SkinAdornmentContexts;
+export type SkinAdornmentPart<Scope extends SkinAdornmentScope> = keyof SkinAdornmentContexts[Scope];
 type AdornmentEntry<Ctx> = ReactNode | ((ctx: Ctx) => ReactNode);
-type SkinIndicators = {
+export type SkinIndicators = {
   sidebar?: SelectionIndicator | HoverIndicator;
   tree?: SelectionIndicator;
   "button-group"?: HoverIndicator;
   "toggle-group"?: HoverIndicator;
   "checkbox-group"?: HoverIndicator;
 };
-type ControlUiSkin = {
-  /** Scopes theme.css/skin.css via data-skin; components stamp it on portal containers. */
-  id: string;
-  /** Stamps data-motion="reduced", collapsing --duration-* to 0ms. Never `animation:none` — ripple cleanup still needs `animationend` to fire. */
+export type ControlUiSkin = {
+  id?: string;
   motion?: "reduced";
-  /** Locks skin to one scheme; page's .dark class must then follow it, since Shiki, native color-scheme, and dark: utilities key off .dark, not skin tokens. Undefined = adaptive, both blocks authored. */
   colorScheme?: "light" | "dark";
-  /** Geometry, not slot restyle — padding, gap, rounding, and shadow across sidebar gap/container/inner. explicit `variant` prop wins; undefined keeps "sidebar". */
   sidebarLayout?: SidebarLayout;
+  scrollAreaBlur?: boolean;
   indicators?: SkinIndicators;
-  /** Any CSS length. Seeds --sidebar-width; caller's own value still wins. Undefined keeps shadcn's 16rem. */
   sidebarWidth?: string;
-  /** effects.css keys off data-effects ancestor attribute. top-shine is CSS-only; ripple needs runtime's document pointer listener. */
   effects?: ControlEffect[];
   adornments?: { [Scope in SkinAdornmentScope]?: { [Part in SkinAdornmentPart<Scope>]?: AdornmentEntry<SkinAdornmentContexts[Scope][Part]>; }; };
 };
-type SidebarLayout = "sidebar" | "floating" | "inset";
-type ControlEffect = "top-shine" | "ripple" | "hover-circle";
-type ControlEffectValue = ControlEffect | ControlEffect[];
-declare function controlEffectsAttribute(effects?: ControlEffectValue): string | undefined;
-/** Read at render time so getter-based configs stay live. Portals stamp it on their positioner, which lands outside any token-scoped ancestor. */
-declare function activeSkin(): ControlUiSkin;
-declare function skinId(): string;
-/** Sidebar falls back: variant prop → this → "sidebar". */
-declare function skinSidebarLayout(): SidebarLayout | undefined;
-declare function skinIndicator<Component extends keyof SkinIndicators>(component: Component): SkinIndicators[Component];
-/** SidebarProvider seeds --sidebar-width from this; caller-provided value still wins. */
-declare function skinSidebarWidth(): string | undefined;
-/** Portals stamp result next to data-skin; ControlEffectsRuntime mirrors it on <html>. */
-declare function skinEffects(): string | undefined;
-declare function skinAdornment<Scope extends SkinAdornmentScope, Part extends SkinAdornmentPart<Scope>>(scope: Scope, part: Part, ctx: SkinAdornmentContexts[Scope][Part]): ReactNode | undefined;
-declare function hasSkinAdornment<Scope extends SkinAdornmentScope, Part extends SkinAdornmentPart<Scope>>(scope: Scope, part: Part): boolean;
-//#endregion
-export { ControlEffect, ControlEffectValue, ControlUiSkin, SidebarLayout, SkinAdornmentContexts, SkinAdornmentPart, SkinAdornmentScope, SkinIndicators, activeSkin, controlEffectsAttribute, hasSkinAdornment, skinAdornment, skinEffects, skinId, skinIndicator, skinSidebarLayout, skinSidebarWidth };
+export type SidebarLayout = "sidebar" | "floating" | "inset" | "page";
+export type ControlEffect = "top-shine" | "ripple" | "hover-circle";
+export type ControlEffectValue = ControlEffect | ControlEffect[];
+export declare function controlEffectsAttribute(effects?: ControlEffectValue): string | undefined;
+export declare function skinAdornment<Scope extends SkinAdornmentScope, Part extends SkinAdornmentPart<Scope>>(skin: ControlUiSkin, scope: Scope, part: Part, ctx: SkinAdornmentContexts[Scope][Part]): ReactNode | undefined;
+export declare function hasSkinAdornment<Scope extends SkinAdornmentScope, Part extends SkinAdornmentPart<Scope>>(skin: ControlUiSkin, scope: Scope, part: Part): boolean;
+//#endregion

package/dist/skin.js

@@ -1,61 +1,18 @@
-import { skin } from "./skin.config.js";
 //#region src/skin.ts
 function controlEffectsAttribute(effects) {
 	if (!effects) return void 0;
 	const value = (Array.isArray(effects) ? effects : [effects]).join(" ");
 	return value.length > 0 ? value : void 0;
 }
-/** Read at render time so getter-based configs stay live. Portals stamp it on their positioner, which lands outside any token-scoped ancestor. */
-function activeSkin() {
-	return skin;
-}
-const verifiedSkinIds = /* @__PURE__ */ new Set();
-function skinScopeProblem(id) {
-	const boundary = document.querySelector(`[data-skin="${id}"]`);
-	if (!boundary) return `Control UI: skin.config id is "${id}" but no element carries data-skin="${id}" (root has ${JSON.stringify(document.documentElement.dataset.skin ?? null)}); every token is undeclared until they match.`;
-	if (getComputedStyle(boundary).getPropertyValue("--background").trim()) return void 0;
-	return `Control UI: skin-theme.css declares no tokens for data-skin="${id}"; check the CSS entry imports (../components/control-ui/styles/skin-theme.css) or run scripts/control-ui-doctor.mjs.`;
-}
-function verifySkinScope(id) {
-	if (process.env.NODE_ENV === "production" || typeof document === "undefined" || verifiedSkinIds.has(id)) return;
-	verifiedSkinIds.add(id);
-	setTimeout(() => {
-		if (skin.id !== id) {
-			verifiedSkinIds.delete(id);
-			return;
-		}
-		const problem = skinScopeProblem(id);
-		if (problem) console.error(problem);
-	}, 0);
-}
-function skinId() {
-	verifySkinScope(skin.id);
-	return skin.id;
-}
-/** Sidebar falls back: variant prop → this → "sidebar". */
-function skinSidebarLayout() {
-	return skin.sidebarLayout;
-}
-function skinIndicator(component) {
-	return skin.indicators?.[component];
-}
-/** SidebarProvider seeds --sidebar-width from this; caller-provided value still wins. */
-function skinSidebarWidth() {
-	return skin.sidebarWidth;
-}
-/** Portals stamp result next to data-skin; ControlEffectsRuntime mirrors it on <html>. */
-function skinEffects() {
-	return controlEffectsAttribute(skin.effects);
-}
 function resolveAdornment(entry, ctx) {
 	if (entry === void 0) return void 0;
 	return typeof entry === "function" ? entry(ctx) : entry;
 }
-function skinAdornment(scope, part, ctx) {
+function skinAdornment(skin, scope, part, ctx) {
 	return resolveAdornment(skin.adornments?.[scope]?.[part], ctx);
 }
-function hasSkinAdornment(scope, part) {
+function hasSkinAdornment(skin, scope, part) {
 	return skin.adornments?.[scope]?.[part] !== void 0;
 }
 //#endregion
-export { activeSkin, controlEffectsAttribute, hasSkinAdornment, skinAdornment, skinEffects, skinId, skinIndicator, skinSidebarLayout, skinSidebarWidth };
+export { controlEffectsAttribute, hasSkinAdornment, skinAdornment };

package/dist/source-badge.d.ts

@@ -3,21 +3,20 @@ import { SourceBadgeKnobStyle } from "./knob-contracts/source-badge-knobs.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/source-badge.d.ts
-type SourceBadgeProps = Omit<ComponentProps<"a">, "href" | "style"> & {
+export type SourceBadgeProps = Omit<ComponentProps<"a">, "href" | "style"> & {
   faviconSrc?: string | false;
   href: string;
   style?: CSSProperties & SourceBadgeKnobStyle & BadgeKnobStyle;
 };
-declare function sourceHostname(href: string): string;
-declare function sourceFaviconHref(href: string): string | undefined;
-type SourceFaviconProps = Omit<ComponentProps<typeof Avatar>, "children" | "style"> & {
+export declare function sourceHostname(href: string): string;
+export declare function sourceFaviconHref(href: string): string | undefined;
+export type SourceFaviconProps = Omit<ComponentProps<typeof Avatar>, "children" | "style"> & {
   faviconSrc?: string | false;
   href: string;
   imageProps?: Omit<ComponentProps<typeof AvatarImage>, "src">;
   fallbackProps?: ComponentProps<typeof AvatarFallback>;
   style?: CSSProperties & SourceBadgeKnobStyle;
 };
-declare function SourceFavicon({ faviconSrc, href, imageProps, fallbackProps, className, ...props }: SourceFaviconProps): import("react").JSX.Element;
-declare function SourceBadge({ faviconSrc, href, children, className, rel, target, ...props }: SourceBadgeProps): import("react").JSX.Element;
-//#endregion
-export { SourceBadge, SourceBadgeProps, SourceFavicon, SourceFaviconProps, sourceFaviconHref, sourceHostname };
+export declare function SourceFavicon({ faviconSrc, href, imageProps, fallbackProps, className, ...props }: SourceFaviconProps): import("react").JSX.Element;
+export declare function SourceBadge({ faviconSrc, href, children, className, rel, target, ...props }: SourceBadgeProps): import("react").JSX.Element;
+//#endregion

package/dist/styles/index.css

@@ -26,11 +26,11 @@
 @import "./recipes/chat-message.css";
 @import "./recipes/chat-composer.css";
 @import "./chat-composer-editor.css";
+@import "./recipes/spinner.css";
 @import "./recipes/chat-composer-attachment.css";
 @import "./recipes/choice.css";
 @import "./code.css";
 @import "./recipes/code.css";
-@import "./recipes/code-block-editor.css";
 @import "./recipes/code-diff.css";
 @import "./recipes/sidebar.css";
 @import "./recipes/sidebar-menu.css";
@@ -63,7 +63,6 @@
 @import "./recipes/phone-input.css";
 @import "./recipes/rich-tooltip.css";
 @import "./recipes/skeleton.css";
-@import "./recipes/spinner.css";
 @import "./recipes/stepper.css";
 @import "./recipes/switch.css";
 @import "./recipes/table.css";
@@ -79,5 +78,3 @@
 @import "./type-scale.css";
 @import "./recipes/user-ask.css";
 @import "./recipes/user-ask-details.css";
-@import "./skin-theme.css";
-@import "./skin.css";

package/dist/styles/recipes/accordion.css

@@ -1,12 +1,13 @@
 @layer components {
   :where([data-control-family="accordion"][data-slot="root"]) {
     --cui-accordion-item-border-color: var(--border);
+    --cui-accordion-item-border-width: 1px;
     --cui-accordion-trigger-foreground: var(--foreground);
     --cui-accordion-trigger-hover-foreground: oklch(from var(--foreground) l c h / 0.8);
     --cui-accordion-icon-foreground: var(--muted-foreground);
   }
   :where([data-control-family="accordion"][data-slot="item"]) {
-    border-block-end: 1px solid var(--cui-accordion-item-border-color);
+    border-block-end: var(--cui-accordion-item-border-width) solid var(--cui-accordion-item-border-color);
   }
 
   :where([data-control-family="accordion"][data-slot="item"]:last-child) {
@@ -19,7 +20,6 @@
     color: var(--cui-accordion-trigger-foreground);
     font-size: var(--text-body);
     outline: none;
-    transition: color var(--duration-fast) var(--ease-standard);
     text-align: left;
     font-weight: var(--font-weight-medium);
   }
@@ -68,6 +68,12 @@
   initial-value: transparent;
 }
 
+@property --cui-accordion-item-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-accordion-trigger-foreground {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/action-bar.css

@@ -3,11 +3,14 @@
     margin-block-start: calc(var(--spacing) * 1);
     min-block-size: calc(var(--spacing) * 8);
     gap: calc(var(--spacing) * 1);
-    opacity: 0;
-    transition: opacity var(--duration-base) var(--ease-standard);
+    opacity: 1;
   }
 
   @media (hover: hover) {
+    :where([data-control-family="chat-layout"][data-slot="turn"] [data-control-family="action-bar"][data-slot="root"]) {
+      opacity: 0;
+    }
+
     :where([data-control-family="chat-layout"][data-slot="turn"]:hover [data-control-family="action-bar"][data-slot="root"]) {
       opacity: 1;
     }

package/dist/styles/recipes/alert.css

@@ -4,33 +4,45 @@
     --cui-alert-background: var(--card);
     --cui-alert-border-color: var(--border);
     --cui-alert-shadow: none;
-    --_alert-foreground: var(--card-foreground);
-    --_alert-description-color: var(--muted-foreground);
-    row-gap: calc(var(--spacing) * 0.5);
-    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
-    border: 1px solid var(--cui-alert-border-color);
+    --cui-alert-foreground: var(--card-foreground);
+    --cui-alert-description-foreground: var(--muted-foreground);
+    --cui-alert-border-width: 1px;
+    --cui-alert-padding: calc(var(--spacing) * 3);
+    --cui-alert-padding-inline: calc(var(--spacing) * 4);
+    --cui-alert-gap: calc(var(--spacing) * 0.5);
+    --cui-alert-icon-gap: calc(var(--spacing) * 3);
+    --cui-alert-icon-size: calc(var(--spacing) * 4);
+    --cui-alert-font-size: var(--text-sm);
+    --cui-alert-title-font-weight: var(--font-weight-medium);
+    --cui-alert-description-gap: var(--spacing);
+    grid-template-columns: 0 minmax(0, 1fr);
+    row-gap: var(--cui-alert-gap);
+    padding: var(--cui-alert-padding) var(--cui-alert-padding-inline);
+    border: var(--cui-alert-border-width) solid var(--cui-alert-border-color);
     border-radius: var(--cui-alert-radius);
     background: var(--cui-alert-background);
     box-shadow: var(--cui-alert-shadow);
-    color: var(--_alert-foreground);
-    font-size: var(--text-sm);
+    color: var(--cui-alert-foreground);
+    font-size: var(--cui-alert-font-size);
     line-height: var(--text-sm--line-height);
+    overflow-wrap: anywhere;
   }
 
   :where([data-control-family="alert"][data-slot="root"][data-variant="destructive"]) {
-    --_alert-foreground: var(--destructive-text);
+    --cui-alert-foreground: var(--destructive-text);
     --cui-alert-border-color: oklch(from var(--destructive) l c h / 0.5);
-    --_alert-description-color: oklch(from var(--destructive-text) l c h / 0.9);
+    --cui-alert-description-foreground: oklch(from var(--destructive-text) l c h / 0.9);
   }
 
   :where([data-control-family="alert"][data-slot="root"]:has(> svg)) {
-    column-gap: calc(var(--spacing) * 3);
+    grid-template-columns: var(--cui-alert-icon-size) minmax(0, 1fr);
+    column-gap: var(--cui-alert-icon-gap);
   }
 
   :where([data-control-family="alert"][data-slot="description"]) {
-    gap: calc(var(--spacing) * 1);
-    color: var(--_alert-description-color);
-    font-size: var(--text-sm);
+    gap: var(--cui-alert-description-gap);
+    color: var(--cui-alert-description-foreground);
+    font-size: var(--cui-alert-font-size);
     line-height: var(--text-sm--line-height);
   }
 
@@ -39,14 +51,15 @@
   }
 
   :where([data-control-family="alert"][data-slot="title"]) {
-    min-block-size: calc(var(--spacing) * 4);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--cui-alert-title-font-weight);
     letter-spacing: var(--tracking-tight);
   }
 
   :where([data-control-family="alert"][data-slot="root"] > svg) {
     color: currentcolor;
-    translate: 0 calc(var(--spacing) * 0.5);
+    inline-size: var(--cui-alert-icon-size);
+    block-size: var(--cui-alert-icon-size);
+    margin-block-start: max(0px, calc((1lh - var(--cui-alert-icon-size)) / 2));
   }
 }
 
@@ -73,3 +86,69 @@
   inherits: true;
   initial-value: none;
 }
+
+@property --cui-alert-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-alert-description-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-alert-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-alert-padding {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-alert-padding-inline {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-alert-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-alert-icon-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-alert-icon-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-alert-font-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-alert-description-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-alert-title-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 500;
+}

package/dist/styles/recipes/avatar.css

@@ -1,5 +1,6 @@
 @layer components {
   :where([data-control-family="avatar"][data-slot="root"]) {
+    --cui-avatar-image-outline-color: oklch(from var(--foreground) l c h / 0.1);
     inline-size: calc(var(--spacing) * 9);
     block-size: calc(var(--spacing) * 9);
   }
@@ -14,12 +15,21 @@
     border-radius: var(--cui-avatar-radius);
   }
 
+  :where([data-control-family="avatar"][data-slot="root"])::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px var(--cui-avatar-image-outline-color);
+  }
+
   :where([data-control-family="avatar"][data-slot="group"] > [data-control-family="avatar"]) {
     box-shadow: 0 0 0 2px var(--cui-avatar-group-ring-color);
   }
 
   :where([data-control-family="avatar"][data-slot="fallback"]) {
-    border-radius: 9999px;
+    border-radius: inherit;
     background: var(--cui-avatar-fallback-background);
     color: var(--cui-avatar-fallback-foreground);
     font-size: var(--text-caption);
@@ -50,3 +60,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-avatar-image-outline-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/badge.css

@@ -16,7 +16,6 @@
     background: var(--cui-badge-background);
     color: var(--cui-badge-foreground);
     outline: none;
-    transition: background-color var(--duration-fast) var(--ease-standard);
   }
 
   :where([data-control-family="badge"][data-slot="root"][data-size="sm"]) {