@mcp-b/react-components 0.34.1 → 0.36.0

package/dist/{format-CmopcfqJ.js → format-DB2mX9DA.js}

@@ -37,5 +37,20 @@ function formatClock(totalSeconds) {
 function formatErrorMessage(error) {
 	return error instanceof Error ? error.message : String(error);
 }
+/**
+* Renders an unknown upstream value as display text. Tool arguments, results,
+* and audit records arrive in shapes this package never declared, so a bigint,
+* a cycle, or a value `JSON.stringify` has no answer for is an ordinary input
+* here rather than a thrown render. `space` is `JSON.stringify`'s, so a block
+* panel passes `2` and an inline row passes nothing.
+*/
+function formatUnknownValue(value, space) {
+	if (typeof value === "string") return value;
+	try {
+		return JSON.stringify(value, (_key, item) => typeof item === "bigint" ? `${item}n` : item, space) ?? String(value);
+	} catch {
+		return String(value);
+	}
+}
 //#endregion
-export { titleCase as a, formatErrorMessage as i, clamp as n, formatClock as r, capitalize as t };
+export { formatUnknownValue as a, formatErrorMessage as i, clamp as n, titleCase as o, formatClock as r, capitalize as t };

package/dist/{mcp-server-U71zhxFF.js → mcp-server-SD_S-IpB.js}

@@ -1,4 +1,4 @@
-import { getMcpServerIconSrc, getMcpServerRuntimeState } from "./utils/mcp-server-catalog.js";
+import { getMcpServerEntry, getMcpServerIconSrc, getMcpServerRuntimeState } from "./utils/mcp-server-catalog.js";
 import { AppIcon } from "./components/foundations/AppIcon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/mcp-server.tsx
@@ -9,6 +9,22 @@ function getMcpServerConnectionKind(server) {
 	if (state === "connecting" || state === "discovering" || state === "connected" && !server.error) return "connecting";
 	return "reconnect";
 }
+/**
+* Resolve one catalog card to the exact Agents SDK entry that owns its live
+* connection state. An explicit server ID is authoritative for authorization
+* flows and deliberately never falls back to a matching catalog entry.
+*/
+function getMcpServerProjection(card, mcp, serverId) {
+	const assignedServer = serverId === void 0 ? void 0 : mcp?.servers[serverId];
+	const entry = serverId === void 0 ? getMcpServerEntry(card, mcp) : assignedServer ? [serverId, assignedServer] : void 0;
+	const server = entry?.[1];
+	return {
+		connectionKind: getMcpServerConnectionKind(server),
+		runtimeState: server ? getMcpServerRuntimeState(server) : void 0,
+		server,
+		serverId: entry?.[0]
+	};
+}
 function McpServerIcon({ server, size = "lg", variant }) {
 	const src = getMcpServerIconSrc(server);
 	return /* @__PURE__ */ jsxs(AppIcon.Root, {
@@ -23,4 +39,4 @@ function McpServerIcon({ server, size = "lg", variant }) {
 	});
 }
 //#endregion
-export { getMcpServerConnectionKind as n, McpServerIcon as t };
+export { getMcpServerProjection as n, McpServerIcon as t };

package/dist/message-scroller-C8cplcQO.js

@@ -0,0 +1,32 @@
+//#region src/components/_internal/message-scroller.ts
+const messageScrollerContract = {
+	root: {
+		className: "message-scroller",
+		slot: "message-scroller"
+	},
+	viewport: {
+		ariaLabel: "Messages",
+		className: "message-scroller__viewport",
+		role: "region",
+		slot: "message-scroller-viewport",
+		tabIndex: 0
+	},
+	content: {
+		ariaRelevant: "additions",
+		className: "message-scroller__content",
+		role: "log",
+		slot: "message-scroller-content",
+		virtualClassName: "message-scroller__virtual-content"
+	},
+	item: {
+		className: "message-scroller__item",
+		slot: "message-scroller-item",
+		virtualClassName: "message-scroller__virtual-item"
+	},
+	button: {
+		className: "message-scroller__button",
+		slot: "message-scroller-button"
+	}
+};
+//#endregion
+export { messageScrollerContract as t };

package/dist/{progress-ring-Dz_ztrW2.js → progress-ring-BEocM1e3.js}

@@ -1,4 +1,4 @@
-import { n as clamp } from "./format-CmopcfqJ.js";
+import { n as clamp } from "./format-DB2mX9DA.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/progress-ring.tsx
 /**

package/dist/provider-logos-zjZycgV6.js

@@ -0,0 +1,74 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/_internal/provider-logos.tsx
+function Svg({ children, size = 16, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": "true",
+		focusable: "false",
+		...props,
+		children
+	});
+}
+const OpenAILogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M22.28 9.81a5.99 5.99 0 0 0-.52-4.91 6.05 6.05 0 0 0-6.52-2.9A6.05 6.05 0 0 0 10.58 0a6.05 6.05 0 0 0-5.77 4.18 5.99 5.99 0 0 0-4 2.9 6.05 6.05 0 0 0 .74 7.09 5.99 5.99 0 0 0 .52 4.91 6.05 6.05 0 0 0 6.52 2.9A5.99 5.99 0 0 0 13.25 24a6.05 6.05 0 0 0 5.77-4.19 5.99 5.99 0 0 0 4-2.9 6.05 6.05 0 0 0-.74-7.1ZM13.25 22.44a4.48 4.48 0 0 1-2.88-1.04l.14-.08 4.79-2.76a.78.78 0 0 0 .39-.68v-6.75l2.02 1.17c.02 0 .04.03.04.05v5.58a4.5 4.5 0 0 1-4.5 4.5ZM3.57 18.3a4.5 4.5 0 0 1-.54-3.03l.14.09 4.79 2.76a.78.78 0 0 0 .78 0l5.85-3.37v2.33c0 .02 0 .04-.03.06L9.72 19.94a4.5 4.5 0 0 1-6.15-1.64ZM2.31 7.88a4.48 4.48 0 0 1 2.35-1.97v5.69a.78.78 0 0 0 .39.67l5.83 3.36-2.02 1.17a.07.07 0 0 1-.07 0l-4.83-2.8A4.5 4.5 0 0 1 2.3 7.9Zm16.64 3.87L13.1 8.37l2.02-1.17c.02 0 .05-.01.07 0l4.83 2.8a4.5 4.5 0 0 1-.67 8.11V12.4a.77.77 0 0 0-.4-.66Zm2-3.03-.14-.09-4.78-2.78a.78.78 0 0 0-.79 0L9.4 9.25V6.92c0-.02 0-.04.02-.05l4.83-2.79a4.5 4.5 0 0 1 6.68 4.66Zm-12.68 4.17-2.02-1.17a.07.07 0 0 1-.04-.06V6.1a4.5 4.5 0 0 1 7.38-3.45l-.14.08L8.66 5.5a.78.78 0 0 0-.4.68v6.74Zm1.1-2.36 2.6-1.5 2.61 1.5v3l-2.6 1.5-2.6-1.5Z" })
+});
+const AnthropicLogo = (props) => /* @__PURE__ */ jsxs(Svg, {
+	...props,
+	children: [/* @__PURE__ */ jsx("path", { d: "M13.83 4H17.3L24 20h-3.47l-1.37-3.52h-7L10.82 20H7.36ZM13.25 13.58h4.8l-2.4-6.15Z" }), /* @__PURE__ */ jsx("path", { d: "M0 4h3.47l6.7 16H6.7Z" })]
+});
+const GoogleLogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 0 1 5.34 2.05l-2.2 2.2A5 5 0 1 0 17 12.6h-5v-2.6h7.9A8 8 0 0 1 12 20 8 8 0 0 1 12 4Z" })
+});
+const MetaLogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M2 12.5c0-3.5 1.8-6.5 4.4-6.5 1.8 0 3.2 1.3 4.9 3.8 2.2 3.2 3.3 5 4.6 5 1 0 1.5-.8 1.5-2.3 0-2.1-1-4.3-2.7-4.3-1 0-2 .6-3.2 2l-1.3-1.7C11.5 6.8 12.9 6 14.5 6c3 0 5.5 3.3 5.5 7 0 3.3-1.6 5-3.8 5-2.3 0-3.6-1.6-6-5.3C8.9 10.4 8 9.2 6.8 9.2 5.4 9.2 4.3 10.6 4.3 13c0 1.8.5 3 1.3 3 .6 0 1.1-.3 1.8-1.1l1.3 1.7C7.6 17.6 6.3 18 5.3 18 3.3 18 2 16 2 12.5Z" })
+});
+const KimiLogo = (props) => /* @__PURE__ */ jsxs(Svg, {
+	...props,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "9.5",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M8 7.5v9M8 12l4.5-4.5M8 12l5 4.5M14 7.5h2.5v9H14z",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	})]
+});
+const FallbackLogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	children: /* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "3"
+	})
+});
+/**
+* Resolves a provider string to its logo component.
+* Unknown providers get a neutral dot fallback.
+*/
+function ProviderLogo({ provider, ...props }) {
+	switch (provider.toLowerCase()) {
+		case "openai": return /* @__PURE__ */ jsx(OpenAILogo, { ...props });
+		case "anthropic": return /* @__PURE__ */ jsx(AnthropicLogo, { ...props });
+		case "google": return /* @__PURE__ */ jsx(GoogleLogo, { ...props });
+		case "meta": return /* @__PURE__ */ jsx(MetaLogo, { ...props });
+		case "kimi": return /* @__PURE__ */ jsx(KimiLogo, { ...props });
+		default: return /* @__PURE__ */ jsx(FallbackLogo, { ...props });
+	}
+}
+//#endregion
+export { ProviderLogo as t };

package/dist/styles/agent-chat.css

@@ -57,6 +57,22 @@
   --message-scroller-button-inset-block-end: var(--sigvelo-spacing-2);
 }
 
+/* Takes the whole transcript region, the way the scroller it stands in for
+   does, so nothing moves when the rows arrive. The composer floats over its
+   lower edge, so the spinner sits slightly high rather than under it. */
+.agent-chat__transcript-loading {
+  display: grid;
+  block-size: 100%;
+  min-block-size: 0;
+  place-items: center;
+  padding-block-end: var(--agent-chat-composer-size, 5rem);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.agent-chat[data-composer-hidden] .agent-chat__transcript-loading {
+  padding-block-end: 0;
+}
+
 .agent-chat-start-screen {
   block-size: 100%;
   min-block-size: 0;
@@ -420,6 +436,15 @@
   block-size: var(--sigvelo-text-sm);
 }
 
+.agent-chat__queued-content {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.agent-chat__queued-actions {
+  opacity: 1;
+}
+
 .agent-chat__queued-action {
   flex: none;
   font-weight: var(--sigvelo-font-weight-normal);

package/dist/styles/agent-connection.css

@@ -49,35 +49,18 @@
   text-wrap: pretty;
 }
 
-.agent-connect__targets {
+.agent-connect .agent-connect__targets {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: var(--sigvelo-spacing-1);
   min-inline-size: 0;
   margin: 0;
   padding: var(--sigvelo-spacing-1);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
-  background: var(--sigvelo-color-neutral-bg-subtle);
 }
 
 .agent-connect__target {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-block-size: var(--sigvelo-spacing-7);
   min-inline-size: 0;
-  padding: 0 var(--sigvelo-spacing-2);
-  border: 0;
-  border-radius: var(--sigvelo-radius-sm);
-  background: transparent;
-  color: var(--sigvelo-color-text-muted);
-  cursor: pointer;
-  font: inherit;
-  font-size: var(--sigvelo-text-xs);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: var(--sigvelo-leading-tight);
   overflow-wrap: anywhere;
   text-align: center;
 }
@@ -92,23 +75,13 @@
 }
 
 @media (pointer: coarse) {
-  .agent-connect__target {
+  .agent-connect .agent-connect__target {
     min-block-size: var(--sigvelo-spacing-10);
     padding-inline: var(--sigvelo-spacing-3);
   }
 }
 
-.agent-connect__target:hover {
-  color: var(--sigvelo-color-text);
-  background: color-mix(in oklab, var(--sigvelo-color-neutral-bg-muted), transparent 38%);
-}
-
-.agent-connect__target:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
-}
-
-.agent-connect__target[data-selected="true"] {
+.agent-connect .agent-connect__target[data-pressed] {
   border-color: var(--sigvelo-color-primary-border-muted);
   background: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
@@ -174,7 +147,7 @@
     border-color: ButtonText;
   }
 
-  .agent-connect__target[data-selected="true"] {
+  .agent-connect .agent-connect__target[data-pressed] {
     outline: var(--sigvelo-focus-ring-forced);
     outline-offset: -2px;
   }

package/dist/styles/agent-tool-detail.css

@@ -47,13 +47,6 @@
   block-size: 100%;
 }
 
-.agent-tool-detail__chat-loading {
-  display: grid;
-  place-items: center;
-  block-size: 100%;
-  color: var(--sigvelo-color-text-muted);
-}
-
 .agent-tool-detail > .subagent-run__actions {
   grid-row: 4;
   display: flex;

package/dist/styles/alert-dialog.css

@@ -3,7 +3,6 @@
 .alert-dialog__backdrop {
   background-color: var(--sigvelo-color-backdrop);
   backdrop-filter: var(--sigvelo-glass-filter);
-  z-index: var(--sigvelo-z-overlay);
 }
 
 .alert-dialog__popup {
@@ -13,7 +12,6 @@
   inset-block-start: 50%;
   inset-inline-start: 50%;
   translate: -50% -50%;
-  z-index: var(--sigvelo-z-overlay);
   inline-size: calc(100% - var(--sigvelo-control-height-sm));
   max-inline-size: 28rem;
   max-block-size: calc(100dvb - var(--sigvelo-control-height-sm));

package/dist/styles/base-ui-motion.css

@@ -2,7 +2,9 @@
  * Base UI exposes presence state on popup parts. Keep its state contract in
  * CSS so all anchored surfaces enter, exit, and respect reduced motion alike.
  */
-.base-ui-positioner {
+.base-ui-positioner,
+.base-ui-backdrop,
+.base-ui-modal-popup {
   z-index: var(--sigvelo-z-overlay);
 }
 
@@ -170,26 +172,26 @@
 .base-ui-adaptive-viewport[data-activation-direction~="left"] > [data-current][data-starting-style],
 .base-ui-adaptive-viewport[data-activation-direction~="right"]
   > [data-previous][data-ending-style] {
-  translate: 25% 0;
+  translate: -25% 0;
   opacity: 0;
 }
 
 .base-ui-adaptive-viewport[data-activation-direction~="right"]
   > [data-current][data-starting-style],
 .base-ui-adaptive-viewport[data-activation-direction~="left"] > [data-previous][data-ending-style] {
-  translate: -25% 0;
+  translate: 25% 0;
   opacity: 0;
 }
 
 .base-ui-adaptive-viewport[data-activation-direction~="up"] > [data-current][data-starting-style],
 .base-ui-adaptive-viewport[data-activation-direction~="down"] > [data-previous][data-ending-style] {
-  translate: 0 25%;
+  translate: 0 -25%;
   opacity: 0;
 }
 
 .base-ui-adaptive-viewport[data-activation-direction~="down"] > [data-current][data-starting-style],
 .base-ui-adaptive-viewport[data-activation-direction~="up"] > [data-previous][data-ending-style] {
-  translate: 0 -25%;
+  translate: 0 25%;
   opacity: 0;
 }
 

package/dist/styles/chatgpt-sign-in-screen.css

@@ -96,8 +96,7 @@
   line-height: var(--sigvelo-leading-compact);
 }
 
-.chatgpt-sign-in__brand-mark,
-.chatgpt-sign-in__logo {
+.chatgpt-sign-in__brand-mark {
   display: inline-flex;
 }
 
@@ -198,7 +197,10 @@
   scale: 1.06;
 }
 
-.chatgpt-sign-in__logo {
+.chatgpt-sign-in__button .chatgpt-sign-in__logo {
+  display: block;
+  inline-size: var(--sigvelo-control-icon-size-sm);
+  block-size: var(--sigvelo-control-icon-size-sm);
   color: inherit;
 }
 

package/dist/styles/dialog.css

@@ -15,7 +15,6 @@
 .dialog__backdrop {
   background-color: var(--sigvelo-color-backdrop);
   backdrop-filter: var(--sigvelo-glass-filter);
-  z-index: var(--sigvelo-z-overlay);
 }
 
 .dialog__popup {
@@ -25,7 +24,6 @@
   inset-block-start: 50%;
   inset-inline-start: 50%;
   translate: -50% -50%;
-  z-index: var(--sigvelo-z-overlay);
   inline-size: calc(100% - var(--sigvelo-control-height-sm));
   max-inline-size: 32rem;
   max-block-size: calc(100dvb - var(--sigvelo-spacing-8));

package/dist/styles/field.css

@@ -8,7 +8,7 @@
 
 .field[data-invalid] .field__label,
 .field[data-invalid] .field-title {
-  color: var(--sigvelo-color-danger-bg);
+  color: var(--sigvelo-color-danger-text);
 }
 
 .field--horizontal {
@@ -103,7 +103,7 @@
   font-family: inherit;
   font-size: var(--sigvelo-text-xs);
   line-height: var(--sigvelo-leading-snug);
-  color: var(--sigvelo-color-danger-bg);
+  color: var(--sigvelo-color-danger-text);
   margin: 0;
   opacity: 1;
   translate: 0;

package/dist/styles/model-selector.css

@@ -40,12 +40,16 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.model-selector__input.input {
+.model-selector__input {
+  box-sizing: border-box;
   flex: 1;
   min-inline-size: 0;
+  inline-size: 100%;
   block-size: auto;
+  margin: 0;
   padding: 0;
   border: none;
+  border-radius: 0;
   outline: none;
   background-color: transparent;
   color: var(--sigvelo-color-text);
@@ -53,7 +57,7 @@
   font-size: var(--sigvelo-text-sm);
 }
 
-.model-selector__input.input:focus-visible {
+.model-selector__input:focus-visible {
   box-shadow: none;
 }
 
@@ -66,9 +70,28 @@
 }
 
 .model-selector__list {
-  flex: 1;
-  overflow: auto;
+  position: relative;
+  display: flex;
+  flex: 0 1 auto;
+  min-block-size: 0;
+  max-block-size: min(26rem, calc(100dvb - var(--sigvelo-spacing-24)));
+  overflow: hidden;
+}
+
+.model-selector__list-viewport {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  overscroll-behavior: contain;
+  scroll-padding-block: var(--sigvelo-spacing-1);
+}
+
+.model-selector__list-content {
+  min-inline-size: 100%;
+}
+
+.model-selector__options {
   padding-block: var(--sigvelo-spacing-1);
+  outline: none;
 }
 
 .model-selector__group {
@@ -106,11 +129,11 @@
 }
 
 .model-selector__item:hover:not(:disabled):not([data-disabled]),
-.model-selector__item:focus-visible {
+.model-selector__item[data-highlighted] {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
-.model-selector__item:focus-visible {
+.model-selector__item[data-highlighted] {
   outline: none;
   box-shadow: var(--sigvelo-recipe-focus-shadow-inset);
 }
@@ -135,11 +158,6 @@
   }
 }
 
-/* Hide empty state when any group sibling has visible items. */
-.model-selector__list:has(.model-selector__group) .model-selector__empty {
-  display: none;
-}
-
 .model-selector__separator {
   margin-block: var(--sigvelo-spacing-1);
   margin-inline: 0;
@@ -176,7 +194,7 @@
 }
 
 @media (forced-colors: active) {
-  .model-selector__item:focus-visible,
+  .model-selector__item[data-highlighted],
   .model-selector__item:hover {
     outline: var(--sigvelo-focus-ring-forced);
     outline-offset: -2px;

package/dist/styles/popover.css

@@ -1,5 +1,4 @@
 .popover__backdrop {
-  z-index: var(--sigvelo-z-overlay);
   background-color: color-mix(in oklab, var(--sigvelo-color-text), transparent 50%);
 }
 

package/dist/styles/preview-card.css

@@ -16,10 +16,6 @@
   border-radius: var(--sigvelo-radius-sm);
 }
 
-.preview-card__backdrop {
-  z-index: var(--sigvelo-z-overlay);
-}
-
 .preview-card__popup {
   --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-3);
 

package/dist/styles/pricing-page.css

@@ -33,19 +33,7 @@
 
 .pricing-page__billing-toggle {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--sigvelo-spacing-4);
-}
-
-.pricing-page__toggle-options {
-  display: flex;
-  align-items: center;
-  gap: var(--sigvelo-spacing-2);
-}
-
-.pricing-page__toggle-label {
-  font-size: var(--sigvelo-text-xs);
+  justify-content: center;
 }
 
 .pricing-page__switch-container {

package/dist/styles/prompt-input.css

@@ -480,17 +480,19 @@
   display: inline-block;
 }
 
+.prompt-input__hover-card-trigger {
+  color: inherit;
+  text-decoration: none;
+  cursor: inherit;
+  transition: none;
+}
+
+.prompt-input__hover-card-trigger:hover {
+  color: inherit;
+}
+
 .prompt-input__hover-card-content {
-  position: absolute;
-  z-index: var(--sigvelo-z-chrome);
-  inset-block-start: calc(100% + var(--sigvelo-spacing-1-5));
-  inset-inline-start: 0;
   min-inline-size: 14rem;
-  padding: var(--sigvelo-spacing-3);
-  color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-surface-raised);
-  border-radius: var(--sigvelo-radius-md);
-  box-shadow: var(--sigvelo-elevation-overlay);
 }
 
 .prompt-input__tab-label {
@@ -529,7 +531,7 @@
   overflow-block: auto;
 }
 
-.prompt-input__command-popup [data-slot="combobox-empty"]:empty {
+.prompt-input__command-popup [data-slot="autocomplete-empty"]:empty {
   display: none;
 }
 

package/dist/styles/recipes.css

@@ -521,8 +521,9 @@
   [data-slot="hover-card-arrow"],
   [data-slot="navigation-menu-arrow"]
 )[data-side="top"] {
-  border-block-start: none;
-  border-inline-start: none;
+  bottom: calc(var(--sigvelo-recipe-popup-arrow-size) * -0.5);
+  border-top: none;
+  border-left: none;
 }
 
 :where(
@@ -532,8 +533,9 @@
   [data-slot="hover-card-arrow"],
   [data-slot="navigation-menu-arrow"]
 )[data-side="bottom"] {
-  border-block-end: none;
-  border-inline-end: none;
+  top: calc(var(--sigvelo-recipe-popup-arrow-size) * -0.5);
+  border-right: none;
+  border-bottom: none;
 }
 
 :where(
@@ -542,9 +544,14 @@
   [data-slot="tooltip-arrow"],
   [data-slot="hover-card-arrow"],
   [data-slot="navigation-menu-arrow"]
-)[data-side="left"] {
-  border-block-end: none;
-  border-inline-start: none;
+):where(
+  [data-side="left"],
+  [data-side="inline-start"]:dir(ltr),
+  [data-side="inline-end"]:dir(rtl)
+) {
+  right: calc(var(--sigvelo-recipe-popup-arrow-size) * -0.5);
+  border-bottom: none;
+  border-left: none;
 }
 
 :where(
@@ -553,9 +560,14 @@
   [data-slot="tooltip-arrow"],
   [data-slot="hover-card-arrow"],
   [data-slot="navigation-menu-arrow"]
-)[data-side="right"] {
-  border-block-start: none;
-  border-inline-end: none;
+):where(
+  [data-side="right"],
+  [data-side="inline-end"]:dir(ltr),
+  [data-side="inline-start"]:dir(rtl)
+) {
+  left: calc(var(--sigvelo-recipe-popup-arrow-size) * -0.5);
+  border-top: none;
+  border-right: none;
 }
 
 :where([data-slot="context-menu-item-indicator"], [data-slot="menubar-item-indicator"]) {
@@ -618,7 +630,6 @@
 
 :where(
   [data-slot="combobox-trigger"],
-  [data-slot="combobox-clear"],
   [data-slot="autocomplete-trigger"],
   [data-slot="autocomplete-clear"]
 ) {
@@ -638,7 +649,6 @@
 
 :where(
   [data-slot="combobox-trigger"],
-  [data-slot="combobox-clear"],
   [data-slot="autocomplete-trigger"],
   [data-slot="autocomplete-clear"]
 ):hover:not([data-disabled]) {
@@ -648,7 +658,6 @@
 
 :where(
   [data-slot="combobox-trigger"],
-  [data-slot="combobox-clear"],
   [data-slot="autocomplete-trigger"],
   [data-slot="autocomplete-clear"]
 ):focus-visible {
@@ -658,7 +667,6 @@
 
 :where(
   [data-slot="combobox-trigger"],
-  [data-slot="combobox-clear"],
   [data-slot="autocomplete-trigger"],
   [data-slot="autocomplete-clear"]
 )[data-disabled] {