nudge-ui 0.2.2 → 0.2.4

package/dist/inspector/tokens/TokenField.js

@@ -12,10 +12,14 @@ import { PopoverListbox } from "../ui/PopoverListbox.js";
 import { ColorSwatch } from "../ui/ColorSwatch.js";
 import { getStateStyleValue } from "../shell/stateValue.js";
 import { AtRuleIndicator, useFieldAtRules } from "../ui/AtRuleContext.js";
+import { Tooltip } from "../ui/Tooltip.js";
+import { cx } from "../ui/classNames.js";
 import { TokenChip } from "./TokenChip.js";
 import { startDragPointerLock } from "./dragPointerLock.js";
-import { createChangeHistoryGroup } from "../changes/workspaceChanges.js";
+import { createChangeHistoryGroup } from "../changes/draftChanges.js";
 import { isMultiTarget } from "../selection/editTarget.js";
+import { inlineBlockedBy } from "../styleEditors/inlineAuthored.js";
+import { InlineStyleWarning } from "../ui/InlineStyleWarning.js";
 const NON_COLOR_FACTS = { hasEmbeddedAlpha: false, isExpression: false, opacityEditable: false };
 function colorFacts(value) {
     return selectTokens({
@@ -100,11 +104,13 @@ function primaryFontFamily(value) {
     return value.trim();
 }
 function rgbToHex(value) {
-    const match = value.match(/^rgba?\(\s*(\d+(?:\.\d+)?)\D+(\d+(?:\.\d+)?)\D+(\d+(?:\.\d+)?)/i);
-    if (!match)
+    const rgb = value.match(/^rgba?\(\s*(\d+(?:\.\d+)?)\D+(\d+(?:\.\d+)?)\D+(\d+(?:\.\d+)?)/i);
+    const srgb = rgb ? null : value.match(/^color\(\s*srgb\s+([\d.e+-]+)\s+([\d.e+-]+)\s+([\d.e+-]+)/i);
+    const channels = rgb ? [rgb[1], rgb[2], rgb[3]].map(Number) : srgb ? [srgb[1], srgb[2], srgb[3]].map((part) => Number(part) * 255) : null;
+    if (!channels || channels.some((channel) => !Number.isFinite(channel)))
         return null;
-    return `#${[match[1], match[2], match[3]]
-        .map((part) => Math.max(0, Math.min(255, Math.round(Number(part)))).toString(16).padStart(2, "0"))
+    return `#${channels
+        .map((channel) => Math.max(0, Math.min(255, Math.round(channel))).toString(16).padStart(2, "0"))
         .join("")}`;
 }
 export function colorValueToHex(value) {
@@ -155,7 +161,8 @@ function NativeColorSwatch({ value, onChange, disabled, }) {
     return (_jsxs("label", { className: "token-color-control", "data-resolved": hasRenderableColor ? "true" : "false", children: [_jsx(ColorSwatch, { color: cssColor ?? "transparent", "data-test": "token-color-swatch" }), _jsx("input", { className: "token-color-control__input", "data-test": "token-color-input", type: "color", value: hex, disabled: disabled, "aria-label": "Choose color", onChange: (event) => onChange(event.target.value) })] }));
 }
 export function TokenValueField(props) {
-    const { property, domElement, semanticSlot, committedValue, resolvedValue = committedValue, activeTokenName: controlledTokenName = null, entries, suggestions = [], inputDataTest = "raw-input", allowedTokenNames, isColor = false, disabled = false, mixed = false, formatRawValue = (value) => value.trim(), onCommitRaw, onSelectToken, onUnlink, attributionTokens = [], leading, trailing, className, label, opacity, color, onCommitOpacity, atRules, chipVariant = "default", } = props;
+    const { property, nudgeProperty = property, domElement, semanticSlot, committedValue, resolvedValue = committedValue, activeTokenName: controlledTokenName = null, entries, suggestions = [], inputDataTest = "raw-input", allowedTokenNames, isColor = false, disabled = false, mixed = false, formatRawValue = (value) => value.trim(), onCommitRaw, onSelectToken, onUnlink, attributionTokens = [], leading, trailing, className, label, opacity, color, onCommitOpacity, atRules, chipVariant = "default", blockedBy = null, inlineWarningDataTest, inlineWarningTooltipDataTest, } = props;
+    const fieldDisabled = disabled || blockedBy !== null;
     const inheritedAtRules = useFieldAtRules(property);
     const fieldAtRules = atRules ?? inheritedAtRules;
     const controlledToken = controlledTokenName ? entries.find((entry) => entry.name === controlledTokenName) : null;
@@ -243,6 +250,8 @@ export function TokenValueField(props) {
             handleTokenSelect(chosen);
     }
     function commitRawValue(value = rawValue) {
+        if (fieldDisabled)
+            return;
         if (mixed && value.trim().toLowerCase() === "mixed")
             return;
         const formatted = formatRawValue(value);
@@ -286,7 +295,7 @@ export function TokenValueField(props) {
         if (direction && !event.altKey && !event.ctrlKey && !event.metaKey) {
             const next = property === "opacity"
                 ? nudgeOpacityValue(rawValue, direction, event.shiftKey)
-                : nudgeCssValue(property, rawValue, direction, event.shiftKey);
+                : nudgeCssValue(nudgeProperty, rawValue, direction, event.shiftKey);
             if (next) {
                 event.preventDefault();
                 event.stopPropagation();
@@ -336,9 +345,9 @@ export function TokenValueField(props) {
     function handleDragNudgePointerDown(event) {
         if (event.button !== 0)
             return;
-        if (disabled || !supportsDragNudge(property))
+        if (fieldDisabled || !supportsDragNudge(nudgeProperty))
             return;
-        if (!canNudgeCssValueByDrag(property, rawValue))
+        if (!canNudgeCssValueByDrag(nudgeProperty, rawValue))
             return;
         stopDragNudge();
         const handle = event.currentTarget;
@@ -386,7 +395,7 @@ export function TokenValueField(props) {
             drag.shiftSnapPending = event.shiftKey;
         }
         drag.deltaX += movementX;
-        const next = nudgeCssValueByDrag(property, drag.startValue, drag.deltaX, drag.shiftActive, drag.shiftActive && drag.shiftSnapPending);
+        const next = nudgeCssValueByDrag(nudgeProperty, drag.startValue, drag.deltaX, drag.shiftActive, drag.shiftActive && drag.shiftSnapPending);
         if (next === null || next === drag.lastValue)
             return;
         drag.lastValue = next;
@@ -409,15 +418,15 @@ export function TokenValueField(props) {
     function renderLeading() {
         if (!leading)
             return null;
-        const canDrag = !disabled
-            && supportsDragNudge(property)
-            && canNudgeCssValueByDrag(property, rawValue);
+        const canDrag = !fieldDisabled
+            && supportsDragNudge(nudgeProperty)
+            && canNudgeCssValueByDrag(nudgeProperty, rawValue);
         if (!canDrag)
             return _jsx("span", { className: "token-field__leading", children: leading });
-        return (_jsx("span", { className: "token-field__leading token-field__leading--nudge", "data-test": "nudge-handle", "data-dragging": isDraggingNudge ? "true" : undefined, title: `Drag to adjust ${label ?? property}`, onPointerDown: handleDragNudgePointerDown, onPointerMove: handleDragNudgePointerMove, onPointerUp: handleDragNudgePointerEnd, onPointerCancel: handleDragNudgePointerEnd, onBlur: stopDragNudge, children: leading }));
+        return (_jsx("span", { className: "token-field__leading token-field__leading--nudge", "data-test": "nudge-handle", "data-dragging": isDraggingNudge ? "true" : undefined, onPointerDown: handleDragNudgePointerDown, onPointerMove: handleDragNudgePointerMove, onPointerUp: handleDragNudgePointerEnd, onPointerCancel: handleDragNudgePointerEnd, onBlur: stopDragNudge, children: leading }));
     }
     function commitOpacityValue(value = opacityValue) {
-        if (!showOpacity || !onCommitOpacity)
+        if (fieldDisabled || !showOpacity || !onCommitOpacity)
             return;
         const normalized = normalizeOpacityPercent(value);
         if (normalized === null) {
@@ -430,7 +439,7 @@ export function TokenValueField(props) {
         }
         setOpacityValue(normalized);
     }
-    const opacityControl = showOpacity ? (_jsx("input", { className: "token-opacity-input", "data-test": "color-opacity-input", type: "text", inputMode: "decimal", value: opacityValue, disabled: disabled || !onCommitOpacity, "aria-label": `Opacity for ${property}`, onChange: (event) => setOpacityValue(event.target.value), onBlur: () => commitOpacityValue(), onKeyDown: (event) => {
+    const opacityControl = showOpacity ? (_jsx("input", { className: "token-opacity-input", "data-test": "color-opacity-input", type: "text", inputMode: "decimal", value: opacityValue, disabled: fieldDisabled || !onCommitOpacity, "aria-label": `Opacity for ${property}`, onChange: (event) => setOpacityValue(event.target.value), onBlur: () => commitOpacityValue(), onKeyDown: (event) => {
             const direction = arrowDirection(event.key);
             if (direction && !event.altKey && !event.ctrlKey && !event.metaKey) {
                 const next = nudgeOpacityValue(opacityValue, direction, event.shiftKey);
@@ -453,17 +462,17 @@ export function TokenValueField(props) {
             }
         } })) : null;
     const colorPreview = activeToken ? resolvedValue || activeToken.value : resolvedValue || rawValue;
-    const colorControlEl = isColor ? (_jsx(NativeColorSwatch, { value: colorPreview, disabled: disabled, onChange: (value) => commitRawValue(value) })) : null;
+    const colorControlEl = isColor ? (_jsx(NativeColorSwatch, { value: colorPreview, disabled: fieldDisabled, onChange: (value) => commitRawValue(value) })) : null;
     const rawSuggestionItems = availableSuggestions.map(rawSuggestion);
     if (activeToken) {
         const chipValue = chipVariant === "small" ? stripCssUnit(activeToken.value) : activeToken.name;
         const embedColorSwatch = isColor && chipVariant !== "small";
-        return (_jsxs("span", { className: `token-field${isColor ? " token-field--color" : ""}${embedColorSwatch ? " token-field--color-chip" : ""}${className ? ` ${className}` : ""}`, "data-test": "token-field", "data-property": property, "aria-label": label, title: label, children: [renderLeading(), embedColorSwatch ? null : colorControlEl, _jsxs(TokenChip, { size: chipVariant, "data-group": groupByTokenName.get(activeToken.name) ?? tokenGroup(activeToken), children: [_jsx(PopoverListbox, { query: "", value: activeToken.name, open: isTokenPickerOpen, trigger: (_jsxs(TokenChip.Picker, { children: [embedColorSwatch ? colorControlEl : null, _jsx(TokenChip.Label, { title: activeToken.name, children: chipValue })] })), triggerClassName: "token-chip__trigger", triggerDataTest: "token-chip", triggerAriaLabel: `Change ${property} token`, searchable: true, searchPlaceholder: "Search tokens\u2026", searchAriaLabel: "Search tokens", items: [...rawSuggestionItems, ...relevantTokens.map((entry) => tokenSuggestion(entry, groupByTokenName))], onQueryChange: () => undefined, onOpenChange: setTokenPickerOpen, disabled: disabled, onSelect: (value) => {
+        return (_jsxs("span", { className: cx("token-field", isColor && "token-field--color", embedColorSwatch && "token-field--color-chip", blockedBy !== null && "token-field--blocked", className), "data-test": "token-field", "data-property": property, "aria-disabled": fieldDisabled || undefined, "aria-label": label, children: [renderLeading(), embedColorSwatch ? null : colorControlEl, _jsxs(TokenChip, { size: chipVariant, "data-group": groupByTokenName.get(activeToken.name) ?? tokenGroup(activeToken), children: [_jsx(PopoverListbox, { query: "", value: activeToken.name, open: isTokenPickerOpen, trigger: (_jsxs(TokenChip.Picker, { children: [embedColorSwatch ? colorControlEl : null, _jsx(TokenChip.Label, { title: chipVariant === "small" ? activeToken.name : undefined, children: chipValue })] })), triggerClassName: "token-chip__trigger", triggerDataTest: "token-chip", triggerAriaLabel: `Change ${property} token`, searchable: true, searchPlaceholder: "Search tokens\u2026", searchAriaLabel: "Search tokens", items: [...rawSuggestionItems, ...relevantTokens.map((entry) => tokenSuggestion(entry, groupByTokenName))], onQueryChange: () => undefined, onOpenChange: setTokenPickerOpen, disabled: fieldDisabled, onSelect: (value) => {
                                 handleSuggestionSelect(value);
-                            } }), _jsx(TokenChip.Action, { children: _jsx(IconButton, { variant: "quiet", size: "compact", style: { borderRadius: "var(--radius-4)" }, label: "Replace with raw value", "data-test": "delink-btn", disabled: disabled, onClick: handleDelink, children: _jsx(IconLinkOff, { size: chipVariant === "small" ? 12 : 14, stroke: 1.75, "aria-hidden": "true" }) }) })] }), opacityControl, _jsx(AtRuleIndicator, { atRules: fieldAtRules }), trailing ? _jsx("span", { className: "token-field__trailing", children: trailing }) : null] }));
+                            } }), _jsx(TokenChip.Action, { children: _jsx(Tooltip, { stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", size: "compact", style: { borderRadius: "var(--radius-4)" }, label: "Replace with raw value", "data-test": "delink-btn", disabled: fieldDisabled, onClick: handleDelink, children: _jsx(IconLinkOff, { size: chipVariant === "small" ? 12 : 14, stroke: 1.75, "aria-hidden": "true" }) }) }) })] }), opacityControl, _jsx(AtRuleIndicator, { atRules: fieldAtRules }), trailing ? _jsx("span", { className: "token-field__trailing", children: trailing }) : null, _jsx(InlineStyleWarning, { blockedBy: blockedBy, dataTest: inlineWarningDataTest, tooltipDataTest: inlineWarningTooltipDataTest })] }));
     }
     const showPopover = isFocused && (filteredTokens.length > 0 || availableSuggestions.length > 0);
-    return (_jsxs("span", { className: `token-field token-field--raw${isColor ? " token-field--color" : ""}${className ? ` ${className}` : ""}`, "data-test": "token-field", "data-property": property, "aria-label": label, title: label, children: [renderLeading(), colorControlEl, _jsx(PopoverListbox, { query: rawValue, value: null, open: showPopover, placeholder: property, inputRef: inputRef, inputAppearance: "embedded", inputDataTest: inputDataTest, inputOnFocus: () => {
+    return (_jsxs("span", { className: cx("token-field", "token-field--raw", isColor && "token-field--color", blockedBy !== null && "token-field--blocked", className), "data-test": "token-field", "data-property": property, "aria-disabled": fieldDisabled || undefined, "aria-label": label, children: [renderLeading(), colorControlEl, _jsx(PopoverListbox, { query: rawValue, value: null, open: showPopover, placeholder: property, inputRef: inputRef, inputAppearance: "embedded", inputDataTest: inputDataTest, inputOnFocus: () => {
                     setIsFocused(true);
                     if (mixed && rawValue.trim().toLowerCase() === "mixed")
                         setRawValue("");
@@ -473,9 +482,9 @@ export function TokenValueField(props) {
                 ], onQueryChange: (value) => {
                     isNavigatingSuggestions.current = false;
                     setRawValue(value);
-                }, onOpenChange: setIsFocused, disabled: disabled, onSelect: (value) => {
+                }, onOpenChange: setIsFocused, disabled: fieldDisabled, onSelect: (value) => {
                     handleSuggestionSelect(value);
-                } }), opacityControl, _jsx(AtRuleIndicator, { atRules: fieldAtRules }), trailing ? _jsx("span", { className: "token-field__trailing", children: trailing }) : null] }));
+                } }), opacityControl, _jsx(AtRuleIndicator, { atRules: fieldAtRules }), trailing ? _jsx("span", { className: "token-field__trailing", children: trailing }) : null, _jsx(InlineStyleWarning, { blockedBy: blockedBy, dataTest: inlineWarningDataTest, tooltipDataTest: inlineWarningTooltipDataTest })] }));
 }
 function arrowDirection(key) {
     if (key === "ArrowUp")
@@ -485,7 +494,7 @@ function arrowDirection(key) {
     return null;
 }
 export function TokenField(props) {
-    const { property, semanticSlot, tokenRow, selection, initialValue, displayValue, domElement: el, editTarget, entries, suggestions, inputDataTest, onAfterEdit, editMetadata, leading, trailing, className, label, chipVariant, formatRawValue: formatRawValueProp, disabled = false, mixed = false, attributionTokens, } = props;
+    const { property, semanticSlot, tokenRow, selection, initialValue, displayValue, domElement: el, editTarget, entries, suggestions, inputDataTest, onAfterEdit, editMetadata, leading, trailing, className, label, chipVariant, formatRawValue: formatRawValueProp, disabled = false, mixed = false, attributionTokens, inlineWarningDataTest, inlineWarningTooltipDataTest, } = props;
     const selectedProperty = selection && selection.elements.length > 1
         ? selection.getProperty(property)
         : null;
@@ -495,6 +504,7 @@ export function TokenField(props) {
         ? selectedProperty.value.value
         : undefined;
     const effectiveMetadata = editTarget && isMultiTarget(editTarget) ? undefined : editMetadata;
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [el], property);
     const tokenBackedOpacityName = tokenRow?.tokenName
         && tokenRow.opacity
         && tokenRow.opacity.tokenName !== tokenRow.tokenName
@@ -544,7 +554,7 @@ export function TokenField(props) {
             ?? (selectedProperty?.token.kind === "mixed" ? ["Mixed tokens"] : undefined)
             ?? (expression
                 ? tokenRow?.tokens?.filter((token) => token.name !== tokenRow.opacity?.tokenName).map((token) => token.name)
-                : undefined), opacity: tokenRow?.opacity, color: tokenRow?.color, entries: entries, suggestions: suggestions, inputDataTest: inputDataTest, disabled: disabled, mixed: effectiveMixed, isColor: selectTokens({ property, slot: semanticSlot, entries: [] }).preferredGroup === "color", formatRawValue: (value) => {
+                : undefined), opacity: tokenRow?.opacity, color: tokenRow?.color, entries: entries, suggestions: suggestions, inputDataTest: inputDataTest, disabled: disabled, blockedBy: blockedBy, mixed: effectiveMixed, isColor: selectTokens({ property, slot: semanticSlot, entries: [] }).preferredGroup === "color", formatRawValue: (value) => {
             if (formatRawValueProp)
                 return formatRawValueProp(value);
             return completeCssValue(value.trim(), valuePolicyFor(property));
@@ -582,7 +592,7 @@ export function TokenField(props) {
         }, onUnlink: (value) => {
             setStyle(editTarget ?? el, property, value, effectiveMetadata);
             onAfterEdit?.();
-        }, leading: leading, trailing: trailing, className: className, label: label, chipVariant: chipVariant }));
+        }, leading: leading, trailing: trailing, className: className, label: label, chipVariant: chipVariant, inlineWarningDataTest: inlineWarningDataTest, inlineWarningTooltipDataTest: inlineWarningTooltipDataTest }));
 }
 function tokenSuggestion(entry, groups) {
     return {

package/dist/inspector/tokens/TokenLabel.js

@@ -1,23 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-function textContent(children) {
-    if (children === null || children === undefined || typeof children === "boolean")
-        return "";
-    if (typeof children === "string" || typeof children === "number" || typeof children === "bigint") {
-        return String(children);
-    }
-    if (Array.isArray(children))
-        return children.map(textContent).join("");
-    return "";
-}
+import { cx } from "../ui/classNames.js";
+import { Tooltip } from "../ui/Tooltip.js";
 export function TokenLabel({ as = "span", className, children, title, ...props }) {
-    const childText = textContent(children);
     const labelProps = {
         ...props,
-        className: `token-label${className ? ` ${className}` : ""}`,
-        title: title ?? childText,
+        className: cx("token-label", className),
     };
     const content = _jsx("span", { className: "token-label__content", children: children });
-    return as === "code"
+    const label = as === "code"
         ? _jsx("code", { ...labelProps, children: content })
         : _jsx("span", { ...labelProps, children: content });
+    return title === undefined ? label : _jsx(Tooltip, { content: title, children: label });
 }

package/dist/inspector/tokens/editActions.d.ts

@@ -2,7 +2,7 @@ import type { TokenEntry } from "../../css/model/index.js";
 import type { ElementChangeRecord } from "../changes/changesLog.js";
 import { type EditTarget } from "../selection/editTarget.js";
 export type { ChangeRecord } from "../changes/changesLog.js";
-export { getPendingRules, getChangesList as getChangeRecords, clearWorkspace as resetPendingRules } from "../changes/changesLog.js";
+export { getPendingRules, getChangesList as getChangeRecords, clearActiveDraft as resetPendingRules } from "../changes/changesLog.js";
 export interface StyleEditMetadata {
     sourceProperty?: string;
     sourceAuthoredValue?: string;

package/dist/inspector/tokens/editActions.js

@@ -42,9 +42,13 @@ function sourceFields(el) {
         file: parsed.file,
         line: parsed.line,
         column: parsed.column,
+        sourceEvidence: {
+            tagName: normalizeRuntimeTag(el.tagName),
+            props: boundRuntimeEvidence(el.getAttribute("data-cprops")),
+        },
     };
 }
-export { getPendingRules, getChangesList as getChangeRecords, clearWorkspace as resetPendingRules } from "../changes/changesLog.js";
+export { getPendingRules, getChangesList as getChangeRecords, clearActiveDraft as resetPendingRules } from "../changes/changesLog.js";
 /** Returns whether a style write can address every element in the target safely. */
 export function canEditStyles(target) {
     return canPlanBatchEditScopes(targetElements(target));
@@ -87,6 +91,7 @@ export function swapTokens(target, changes) {
                 newToken: change.newToken,
                 source: { file: source.file, line: source.line, component: cid },
                 runtimeEvidence: source.runtimeEvidence,
+                sourceEvidence: source.sourceEvidence,
                 state,
                 ...scopePlan.get(el),
             };
@@ -155,6 +160,7 @@ function buildStyleRecord(el, scopePlan, { property, value, oldRawValue, metadat
         oldRawValue: (oldRawValue ?? getStateStyleValue(el, property)) || undefined,
         source: { file: source.file, line: source.line, component: cid },
         runtimeEvidence: source.runtimeEvidence,
+        sourceEvidence: source.sourceEvidence,
         state,
         ...scopePlan.get(el),
     };

package/dist/inspector/ui/AtRuleContext.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo } from "react";
-import { Tooltip } from "@base-ui/react/tooltip";
+import { Tooltip } from "./Tooltip.js";
+import { cx } from "./classNames.js";
 const EMPTY_AT_RULES = [];
 const FieldAtRuleContext = createContext(new Map());
 /**
@@ -40,9 +41,6 @@ function countLabel(label, count) {
     const noun = label.toLowerCase().replace(/query$/, count === 1 ? "query" : "queries");
     return `${count} ${noun}`;
 }
-function portalContainer() {
-    return document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body;
-}
 /** Compact, field-level attribution for the conditional rule that currently wins. */
 export function AtRuleIndicator({ atRules = EMPTY_AT_RULES, className }) {
     if (atRules.length === 0)
@@ -50,5 +48,5 @@ export function AtRuleIndicator({ atRules = EMPTY_AT_RULES, className }) {
     const label = labelFor(atRules);
     const activeCount = atRules.filter((atRule) => !("active" in atRule) || atRule.active).length;
     const count = countLabel(label, atRules.length);
-    return (_jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { disableHoverablePopup: true, children: [_jsx(Tooltip.Trigger, { type: "button", delay: 0, className: `at-rule-indicator${className ? ` ${className}` : ""}`, "data-test": "at-rule-indicator", "aria-label": activeCount > 0 ? `Active ${count}` : count, children: _jsx("span", { className: "at-rule-indicator__symbol", "aria-hidden": "true", children: atRules.length }) }), _jsx(Tooltip.Portal, { container: portalContainer(), children: _jsx(Tooltip.Positioner, { className: "at-rule-tooltip-positioner", side: "top", align: "end", sideOffset: 7, children: _jsx(Tooltip.Popup, { className: "at-rule-tooltip", "data-test": "at-rule-tooltip", children: _jsx("div", { className: "at-rule-tooltip__rules", children: atRules.map((atRule, index) => (_jsx("div", { className: `at-rule-tooltip__rule${!("active" in atRule) || atRule.active ? " at-rule-tooltip__rule--active" : ""}`, "data-active": !("active" in atRule) || atRule.active ? "true" : "false", children: _jsx("code", { children: atRule.params }) }, `${atRule.kind}-${atRule.params}-${index}`))) }) }) }) })] }) }));
+    return (_jsx(Tooltip, { content: (_jsx("div", { className: "at-rule-tooltip__rules", children: atRules.map((atRule, index) => (_jsx("div", { className: cx("at-rule-tooltip__rule", (!("active" in atRule) || atRule.active) && "at-rule-tooltip__rule--active"), "data-active": !("active" in atRule) || atRule.active ? "true" : "false", children: _jsx("code", { children: atRule.params }) }, `${atRule.kind}-${atRule.params}-${index}`))) })), delay: 0, positionerClassName: "at-rule-tooltip-positioner", popupClassName: "at-rule-tooltip", "data-test": "at-rule-tooltip", children: _jsx("button", { type: "button", className: cx("at-rule-indicator", className), "data-test": "at-rule-indicator", "aria-label": activeCount > 0 ? `Active ${count}` : count, children: _jsx("span", { className: "at-rule-indicator__symbol", "aria-hidden": "true", children: atRules.length }) }) }));
 }

package/dist/inspector/ui/Button.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, ReactElement } from "react";
+import type { ButtonHTMLAttributes } from "react";
 export type ButtonVariant = "primary" | "secondary" | "quiet" | "danger" | "disabled";
 export type ButtonSize = "default" | "compact" | "large";
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -6,4 +6,8 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: ButtonSize;
     "data-test"?: string;
 };
-export declare function Button({ variant, size, className, ...props }: ButtonProps): ReactElement;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    "data-test"?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/inspector/ui/Button.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function Button({ variant = "secondary", size = "default", className, ...props }) {
-    return (_jsx("button", { ...props, className: `button button--${variant} button--${size}${className ? ` ${className}` : ""}` }));
-}
+import { forwardRef } from "react";
+export const Button = forwardRef(function Button({ variant = "secondary", size = "default", className, ...props }, ref) {
+    return (_jsx("button", { ref: ref, ...props, className: `button button--${variant} button--${size}${className ? ` ${className}` : ""}` }));
+});

package/dist/inspector/ui/ControlSurface.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
 /**
  * Visual boundary for an inspector control. It owns the shared control chrome
  * while the child owns its particular input or selection behaviour.
@@ -11,4 +11,4 @@ export interface ControlSurfaceProps extends HTMLAttributes<HTMLSpanElement> {
     "data-test"?: string;
     children?: ReactNode;
 }
-export declare function ControlSurface({ appearance, density, className, children, ...props }: ControlSurfaceProps): ReactElement;
+export declare const ControlSurface: import("react").ForwardRefExoticComponent<ControlSurfaceProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/inspector/ui/ControlSurface.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function ControlSurface({ appearance = "default", density = "default", className, children, ...props }) {
+import { forwardRef } from "react";
+export const ControlSurface = forwardRef(function ControlSurface({ appearance = "default", density = "default", className, children, ...props }, ref) {
     const classes = [
         "control-surface",
         appearance === "embedded" ? "control-surface--embedded" : "",
         density === "compact" ? "control-surface--compact" : "",
         className ?? "",
     ].filter(Boolean).join(" ");
-    return _jsx("span", { ...props, className: classes, children: children });
-}
+    return _jsx("span", { ref: ref, ...props, className: classes, children: children });
+});

package/dist/inspector/ui/InlineStyleWarning.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement } from "react";
+export interface InlineStyleWarningProps {
+    /** Inline declaration blocking the field; renders nothing when null. */
+    blockedBy: string | null;
+    dataTest?: string;
+    tooltipDataTest?: string;
+    className?: string;
+    symbolClassName?: string;
+}
+export declare function inlineStyleWarningContent(blockedBy: string | null): ReactElement | undefined;
+export declare function InlineStyleWarning({ blockedBy, dataTest, tooltipDataTest, className, symbolClassName, }: InlineStyleWarningProps): ReactElement | null;

package/dist/inspector/ui/InlineStyleWarning.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./classNames.js";
+import { Tooltip } from "./Tooltip.js";
+export function inlineStyleWarningContent(blockedBy) {
+    if (blockedBy === null)
+        return undefined;
+    return (_jsx("div", { className: "at-rule-tooltip__rules", children: _jsxs("div", { className: "at-rule-tooltip__rule at-rule-tooltip__rule--active", children: ["Set inline (", _jsx("code", { children: blockedBy }), "). Previews can't beat inline styles \u2014 move it to a stylesheet to edit it here."] }) }));
+}
+export function InlineStyleWarning({ blockedBy, dataTest = "inline-style-warning", tooltipDataTest, className, symbolClassName, }) {
+    if (blockedBy === null)
+        return null;
+    return (_jsx(Tooltip, { content: inlineStyleWarningContent(blockedBy), delay: 0, positionerClassName: "at-rule-tooltip-positioner", popupClassName: "at-rule-tooltip", "data-test": tooltipDataTest, children: _jsx("button", { type: "button", className: cx("inline-style-warning", className), "data-test": dataTest, "aria-label": `Blocked by inline style: ${blockedBy}`, children: _jsx("span", { className: cx("inline-style-warning__symbol", symbolClassName), "aria-hidden": "true", children: "!" }) }) }));
+}

package/dist/inspector/ui/InspectorPopover.d.ts

@@ -7,6 +7,7 @@ export interface InspectorPopoverProps {
     side?: "top" | "bottom" | "left" | "right";
     align?: "start" | "center" | "end";
     sideOffset?: number;
+    triggerTooltip?: ReactNode;
     "data-test"?: string;
 }
 /**
@@ -14,4 +15,4 @@ export interface InspectorPopoverProps {
  * listbox popover, this leaves the popup content to the caller for compound
  * settings panels and field controls.
  */
-export declare function InspectorPopover({ triggerElement, children, open, onOpenChange, side, align, sideOffset, "data-test": dataTest, }: InspectorPopoverProps): ReactElement;
+export declare function InspectorPopover({ triggerElement, children, open, onOpenChange, side, align, sideOffset, triggerTooltip, "data-test": dataTest, }: InspectorPopoverProps): ReactElement;

package/dist/inspector/ui/InspectorPopover.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Popover as BasePopover } from "@base-ui/react/popover";
+import { Tooltip } from "./Tooltip.js";
+import { portalContainer } from "./portalContainer.js";
 /**
  * Base UI popover anchored inside the inspector shadow root. Unlike the
  * listbox popover, this leaves the popup content to the caller for compound
  * settings panels and field controls.
  */
-export function InspectorPopover({ triggerElement, children, open, onOpenChange, side = "bottom", align = "center", sideOffset = 6, "data-test": dataTest, }) {
-    const portalContainer = typeof document !== "undefined"
-        ? document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body
-        : null;
-    return (_jsxs(BasePopover.Root, { open: open, onOpenChange: onOpenChange, children: [_jsx(BasePopover.Trigger, { render: triggerElement, "data-test": dataTest }), _jsx(BasePopover.Portal, { container: portalContainer, children: _jsx(BasePopover.Positioner, { className: "inspector-popover__positioner", side: side, align: align, sideOffset: sideOffset, children: _jsx(BasePopover.Popup, { className: "inspector-popover__popup", "data-test": dataTest ? `${dataTest}-popover` : undefined, children: children }) }) })] }));
+export function InspectorPopover({ triggerElement, children, open, onOpenChange, side = "bottom", align = "center", sideOffset = 6, triggerTooltip, "data-test": dataTest, }) {
+    return (_jsxs(BasePopover.Root, { open: open, onOpenChange: onOpenChange, children: [_jsx(Tooltip, { content: triggerTooltip, disabled: triggerTooltip === undefined, children: _jsx(BasePopover.Trigger, { render: triggerElement, "data-test": dataTest }) }), _jsx(BasePopover.Portal, { container: portalContainer(), children: _jsx(BasePopover.Positioner, { className: "inspector-popover__positioner", side: side, align: align, sideOffset: sideOffset, children: _jsx(BasePopover.Popup, { className: "inspector-popover__popup", "data-test": dataTest ? `${dataTest}-popover` : undefined, children: children }) }) })] }));
 }

package/dist/inspector/ui/PopoverListbox.d.ts

@@ -17,6 +17,7 @@ export interface PopoverListboxProps {
     triggerClassName?: string;
     triggerDataTest?: string;
     triggerAriaLabel?: string;
+    triggerTooltip?: ReactNode;
     searchable?: boolean;
     searchPlaceholder?: string;
     searchAriaLabel?: string;
@@ -34,4 +35,4 @@ export interface PopoverListboxProps {
     onOpenChange: (open: boolean) => void;
     onSelect: (value: string) => void;
 }
-export declare function PopoverListbox({ value, query, items, open, trigger, triggerElement, triggerClassName, triggerDataTest, triggerAriaLabel, searchable, searchPlaceholder, searchAriaLabel, placeholder, inputRef, inputClassName, inputAppearance, inputDataTest, inputOnFocus, inputOnBlur, inputOnKeyDown, disabled, className, onQueryChange, onOpenChange, onSelect, }: PopoverListboxProps): ReactElement;
+export declare function PopoverListbox({ value, query, items, open, trigger, triggerElement, triggerClassName, triggerDataTest, triggerAriaLabel, triggerTooltip, searchable, searchPlaceholder, searchAriaLabel, placeholder, inputRef, inputClassName, inputAppearance, inputDataTest, inputOnFocus, inputOnBlur, inputOnKeyDown, disabled, className, onQueryChange, onOpenChange, onSelect, }: PopoverListboxProps): ReactElement;

package/dist/inspector/ui/PopoverListbox.js

@@ -1,21 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react/combobox";
 import { Autocomplete } from "@base-ui/react/autocomplete";
-export function PopoverListbox({ value = null, query, items, open, trigger, triggerElement, triggerClassName, triggerDataTest, triggerAriaLabel, searchable = false, searchPlaceholder = "Search…", searchAriaLabel = "Search options", placeholder, inputRef, inputClassName, inputAppearance = "default", inputDataTest, inputOnFocus, inputOnBlur, inputOnKeyDown, disabled = false, className, onQueryChange, onOpenChange, onSelect, }) {
-    const portalContainer = typeof document !== "undefined"
-        ? document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body
-        : null;
+import { cx } from "./classNames.js";
+import { Tooltip } from "./Tooltip.js";
+import { portalContainer } from "./portalContainer.js";
+export function PopoverListbox({ value = null, query, items, open, trigger, triggerElement, triggerClassName, triggerDataTest, triggerAriaLabel, triggerTooltip, searchable = false, searchPlaceholder = "Search…", searchAriaLabel = "Search options", placeholder, inputRef, inputClassName, inputAppearance = "default", inputDataTest, inputOnFocus, inputOnBlur, inputOnKeyDown, disabled = false, className, onQueryChange, onOpenChange, onSelect, }) {
     const itemByValue = new Map(items.map((item) => [item.value, item]));
+    const resolvedTriggerTooltip = triggerTooltip ?? (triggerElement ? triggerAriaLabel : undefined);
     function renderComboboxItem(item) {
         return (_jsxs(Combobox.Item, { value: item.value, className: "popover-listbox__item", "data-test": item["data-test"], children: [item.leading ? _jsx("span", { className: "popover-listbox__leading", children: item.leading }) : null, _jsx("span", { className: "popover-listbox__label", children: item.label }), item.trailing ? _jsx("span", { className: "popover-listbox__trailing", children: item.trailing }) : null] }, item.value));
     }
-    return (_jsx("div", { className: `popover-listbox${className ? ` ${className}` : ""}`, children: trigger || triggerElement ? (_jsxs(Combobox.Root, { value: value, inputValue: searchable ? undefined : query, open: open, items: items.map((item) => item.value), filteredItems: searchable ? undefined : items.map((item) => item.value), autoHighlight: true, itemToStringLabel: (item) => itemByValue.get(item)?.label ?? item, onInputValueChange: (next) => onQueryChange(next), onOpenChange: (next) => onOpenChange(next), onValueChange: (next) => {
+    return (_jsx("div", { className: cx("popover-listbox", className), children: trigger || triggerElement ? (_jsxs(Combobox.Root, { value: value, inputValue: searchable ? undefined : query, open: open, items: items.map((item) => item.value), filteredItems: searchable ? undefined : items.map((item) => item.value), autoHighlight: true, itemToStringLabel: (item) => itemByValue.get(item)?.label ?? item, onInputValueChange: (next) => onQueryChange(next), onOpenChange: (next) => onOpenChange(next), onValueChange: (next) => {
                 if (typeof next === "string")
                     onSelect(next);
-            }, children: [triggerElement ? (_jsx(Combobox.Trigger, { render: triggerElement, className: `popover-listbox__trigger${triggerClassName ? ` ${triggerClassName}` : ""}`, "data-test": triggerDataTest, "aria-label": triggerAriaLabel, disabled: disabled })) : (_jsx(Combobox.Trigger, { className: `popover-listbox__trigger${triggerClassName ? ` ${triggerClassName}` : ""}`, "data-test": triggerDataTest, "aria-label": triggerAriaLabel, disabled: disabled, children: trigger })), _jsx(Combobox.Portal, { container: portalContainer, children: _jsx(Combobox.Positioner, { className: "popover-listbox__positioner", children: _jsxs(Combobox.Popup, { className: `popover-listbox__popup${searchable ? " popover-listbox__popup--searchable" : ""}`, children: [searchable ? (_jsxs(_Fragment, { children: [_jsx(Combobox.Input, { className: "popover-listbox__search-input", placeholder: searchPlaceholder, "aria-label": searchAriaLabel, "data-test": triggerDataTest ? `${triggerDataTest}-search` : "popover-listbox-search" }), _jsx(Combobox.Empty, { className: "popover-listbox__empty", children: "No matching options." })] })) : null, _jsx(Combobox.List, { className: `popover-listbox__list${searchable ? " popover-listbox__list--searchable" : ""}`, children: searchable
+            }, children: [_jsx(Tooltip, { content: resolvedTriggerTooltip, disabled: resolvedTriggerTooltip === undefined, stableTrigger: true, children: _jsx(Combobox.Trigger, { render: triggerElement, className: cx("popover-listbox__trigger", triggerClassName), "data-test": triggerDataTest, "aria-label": triggerAriaLabel, disabled: disabled, children: triggerElement ? undefined : trigger }) }), _jsx(Combobox.Portal, { container: portalContainer(), children: _jsx(Combobox.Positioner, { className: "popover-listbox__positioner", children: _jsxs(Combobox.Popup, { className: cx("popover-listbox__popup", searchable && "popover-listbox__popup--searchable"), children: [searchable ? (_jsxs(_Fragment, { children: [_jsx(Combobox.Input, { className: "popover-listbox__search-input", placeholder: searchPlaceholder, "aria-label": searchAriaLabel, "data-test": triggerDataTest ? `${triggerDataTest}-search` : "popover-listbox-search" }), _jsx(Combobox.Empty, { className: "popover-listbox__empty", children: "No matching options." })] })) : null, _jsx(Combobox.List, { className: cx("popover-listbox__list", searchable && "popover-listbox__list--searchable"), children: searchable
                                         ? ((itemValue) => {
                                             const item = itemByValue.get(itemValue);
                                             return item ? renderComboboxItem(item) : null;
                                         })
-                                        : items.map((item) => renderComboboxItem(item)) })] }) }) })] })) : (_jsxs(Autocomplete.Root, { value: query, open: open, items: items.map((item) => item.value), filteredItems: items.map((item) => item.value), autoHighlight: true, mode: "none", openOnInputClick: true, onValueChange: onQueryChange, onOpenChange: (next) => onOpenChange(next), children: [_jsx(Autocomplete.Input, { ref: inputRef, className: `text-input${inputAppearance === "embedded" ? " text-input--embedded" : ""}${inputClassName ? ` ${inputClassName}` : ""}`, placeholder: placeholder, "data-test": inputDataTest, onFocus: inputOnFocus, onBlur: inputOnBlur, onKeyDownCapture: inputOnKeyDown, disabled: disabled }), _jsx(Autocomplete.Portal, { container: portalContainer, children: _jsx(Autocomplete.Positioner, { className: "popover-listbox__positioner", children: _jsx(Autocomplete.Popup, { className: "popover-listbox__popup", children: _jsx(Autocomplete.List, { className: "popover-listbox__list", children: items.map((item) => (_jsxs(Autocomplete.Item, { value: item.value, className: "popover-listbox__item", "data-test": item["data-test"], onClick: () => onSelect(item.value), children: [item.leading ? _jsx("span", { className: "popover-listbox__leading", children: item.leading }) : null, _jsx("span", { className: "popover-listbox__label", children: item.label }), item.trailing ? _jsx("span", { className: "popover-listbox__trailing", children: item.trailing }) : null] }, item.value))) }) }) }) })] })) }));
+                                        : items.map((item) => renderComboboxItem(item)) })] }) }) })] })) : (_jsxs(Autocomplete.Root, { value: query, open: open, items: items.map((item) => item.value), filteredItems: items.map((item) => item.value), autoHighlight: true, mode: "none", openOnInputClick: true, onValueChange: onQueryChange, onOpenChange: (next) => onOpenChange(next), children: [_jsx(Autocomplete.Input, { ref: inputRef, className: cx("text-input", inputAppearance === "embedded" && "text-input--embedded", inputClassName), placeholder: placeholder, "data-test": inputDataTest, onFocus: inputOnFocus, onBlur: inputOnBlur, onKeyDownCapture: inputOnKeyDown, disabled: disabled }), _jsx(Autocomplete.Portal, { container: portalContainer(), children: _jsx(Autocomplete.Positioner, { className: "popover-listbox__positioner", children: _jsx(Autocomplete.Popup, { className: "popover-listbox__popup", children: _jsx(Autocomplete.List, { className: "popover-listbox__list", children: items.map((item) => (_jsxs(Autocomplete.Item, { value: item.value, className: "popover-listbox__item", "data-test": item["data-test"], onClick: () => onSelect(item.value), children: [item.leading ? _jsx("span", { className: "popover-listbox__leading", children: item.leading }) : null, _jsx("span", { className: "popover-listbox__label", children: item.label }), item.trailing ? _jsx("span", { className: "popover-listbox__trailing", children: item.trailing }) : null] }, item.value))) }) }) }) })] })) }));
 }

package/dist/inspector/ui/SegmentedControl.d.ts

@@ -14,11 +14,12 @@ interface SegmentedControlProps<T extends string> {
     "data-test"?: string;
     "data-property"?: string;
     className?: string;
+    disabled?: boolean;
     /** Allows the active option to be cleared by clicking it again. */
     allowDeselect?: boolean;
     /** Restores the value represented by an unselected control. */
     onDeselect?: () => void;
 }
 /** A compact single-choice control for adjacent, peer actions. */
-export declare function SegmentedControl<T extends string>({ value, options, onChange, "aria-label": ariaLabel, "data-test": dataTest, "data-property": dataProperty, className, allowDeselect, onDeselect, }: SegmentedControlProps<T>): ReactElement;
+export declare function SegmentedControl<T extends string>({ value, options, onChange, "aria-label": ariaLabel, "data-test": dataTest, "data-property": dataProperty, className, disabled, allowDeselect, onDeselect, }: SegmentedControlProps<T>): ReactElement;
 export {};

package/dist/inspector/ui/SegmentedControl.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
 /** A compact single-choice control for adjacent, peer actions. */
-export function SegmentedControl({ value, options, onChange, "aria-label": ariaLabel, "data-test": dataTest, "data-property": dataProperty, className, allowDeselect = false, onDeselect, }) {
+export function SegmentedControl({ value, options, onChange, "aria-label": ariaLabel, "data-test": dataTest, "data-property": dataProperty, className, disabled = false, allowDeselect = false, onDeselect, }) {
     return (_jsx("div", { className: `segmented-control${className ? ` ${className}` : ""}`, role: "group", "aria-label": ariaLabel, "data-test": dataTest, "data-property": dataProperty, children: options.map((option) => {
             const selected = option.value === value;
-            return (_jsx(Toggle, { type: "button", className: `button segmented-control__button${selected ? " segmented-control__button--selected" : ""}`, pressed: selected, "aria-label": option.label, title: option.label, "data-test": option.testId, "data-active": selected ? "true" : "false", onPressedChange: (pressed) => {
+            return (_jsx(Toggle, { type: "button", className: `button segmented-control__button${selected ? " segmented-control__button--selected" : ""}`, pressed: selected, disabled: disabled, "aria-label": option.label, "data-test": option.testId, "data-active": selected ? "true" : "false", onPressedChange: (pressed) => {
                     if (pressed) {
                         onChange(option.value);
                     }

package/dist/inspector/ui/Select.d.ts

@@ -1,4 +1,5 @@
-import type { ButtonHTMLAttributes, ReactElement } from "react";
+import { Select as BaseSelect } from "@base-ui/react/select";
+import type { ButtonHTMLAttributes, ComponentProps, ReactElement } from "react";
 import type { ControlAppearance } from "./ControlSurface.js";
 export interface SelectOption {
     value: string;
@@ -15,7 +16,11 @@ export type SelectProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChang
     groups?: SelectGroup[];
     placeholder?: string;
     compact?: boolean;
+    /** Uses the shared icon button as the trigger; requires an accessible label. */
+    iconOnly?: boolean;
     appearance?: ControlAppearance;
+    /** Overrides popup placement, including text alignment for icon-only triggers. */
+    popupPosition?: Pick<ComponentProps<typeof BaseSelect.Positioner>, "side" | "align" | "alignItemWithTrigger">;
     searchable?: boolean;
     searchPlaceholder?: string;
     searchAriaLabel?: string;

package/dist/inspector/ui/Select.js

@@ -2,25 +2,24 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select as BaseSelect } from "@base-ui/react/select";
 import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
 import { IconCheck, IconChevronDown } from "@tabler/icons-react";
+import { portalContainer } from "./portalContainer.js";
+import { IconButton } from "./IconButton.js";
 export function Select(props) {
     if (props.searchable)
         return _jsx(SearchableSelect, { ...props });
     return _jsx(NativeSelect, { ...props });
 }
-function NativeSelect({ value, options = [], groups = [], placeholder, compact, appearance = "default", searchable: _searchable, searchPlaceholder: _searchPlaceholder, searchAriaLabel: _searchAriaLabel, className, disabled, children, ...props }) {
+function NativeSelect({ value, options = [], groups = [], placeholder, compact, iconOnly, appearance = "default", popupPosition, searchable: _searchable, searchPlaceholder: _searchPlaceholder, searchAriaLabel: _searchAriaLabel, className, disabled, children, ...props }) {
     const allOptions = [...options, ...groups.flatMap((group) => group.options)];
     const selectedOption = allOptions.find((option) => option.value === value);
-    const portalContainer = typeof document !== "undefined"
-        ? document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body
-        : null;
     function handleValueChange(next) {
         if (typeof next === "string")
             props.onValueChange?.(next);
     }
     const { onValueChange: _onValueChange, ...triggerProps } = props;
-    return (_jsxs(BaseSelect.Root, { value: value || null, disabled: disabled, items: allOptions.map((option) => ({ value: option.value, label: option.label })), onValueChange: handleValueChange, children: [_jsxs(BaseSelect.Trigger, { ...triggerProps, disabled: disabled, className: `select${compact ? " select--compact" : ""}${appearance === "embedded" ? " select--embedded" : ""}${className ? ` ${className}` : ""}`, children: [_jsx(BaseSelect.Value, { className: "select__value", placeholder: placeholder, children: selectedOption?.label ?? (value || undefined) }), _jsx(BaseSelect.Icon, { className: "select__icon", children: _jsx(IconChevronDown, { size: 15, stroke: 1.8, "aria-hidden": "true" }) }), children] }), _jsx(BaseSelect.Portal, { container: portalContainer, children: _jsx(BaseSelect.Positioner, { className: "select__positioner", sideOffset: 4, children: _jsx(BaseSelect.Popup, { className: "select__popup", children: _jsxs(BaseSelect.List, { className: "select__list", children: [options.map((option) => _jsx(SelectItem, { option: option }, option.value)), groups.map((group) => (_jsxs(BaseSelect.Group, { className: "select__group", children: [_jsx(BaseSelect.GroupLabel, { className: "select__group-label", children: group.label }), group.options.map((option) => _jsx(SelectItem, { option: option }, `${group.label}-${option.value}`))] }, group.label)))] }) }) }) })] }));
+    return (_jsxs(BaseSelect.Root, { value: value || null, disabled: disabled, items: allOptions.map((option) => ({ value: option.value, label: option.label })), onValueChange: handleValueChange, children: [_jsxs(BaseSelect.Trigger, { ...triggerProps, render: iconOnly ? _jsx(IconButton, { label: props["aria-label"] ?? "Select option" }) : undefined, disabled: disabled, className: `select${iconOnly ? " select--icon-only" : ""}${compact ? " select--compact" : ""}${appearance === "embedded" ? " select--embedded" : ""}${className ? ` ${className}` : ""}`, children: [_jsx(BaseSelect.Value, { className: "select__value", placeholder: placeholder, children: selectedOption?.label ?? (value || undefined) }), _jsx(BaseSelect.Icon, { className: "select__icon", children: _jsx(IconChevronDown, { size: 15, stroke: 1.8, "aria-hidden": "true" }) }), children] }), _jsx(BaseSelect.Portal, { container: portalContainer(), children: _jsx(BaseSelect.Positioner, { className: "select__positioner", sideOffset: 4, ...popupPosition, alignItemWithTrigger: iconOnly ? false : popupPosition?.alignItemWithTrigger, children: _jsx(BaseSelect.Popup, { className: "select__popup", children: _jsxs(BaseSelect.List, { className: "select__list", children: [options.map((option) => _jsx(SelectItem, { option: option }, option.value)), groups.map((group) => (_jsxs(BaseSelect.Group, { className: "select__group", children: [_jsx(BaseSelect.GroupLabel, { className: "select__group-label", children: group.label }), group.options.map((option) => _jsx(SelectItem, { option: option }, `${group.label}-${option.value}`))] }, group.label)))] }) }) }) })] }));
 }
-function SearchableSelect({ value, options = [], groups = [], placeholder, compact, appearance = "default", searchable: _searchable, searchPlaceholder = "Search…", searchAriaLabel = "Search options", className, disabled, children, "data-test": dataTest, ...props }) {
+function SearchableSelect({ value, options = [], groups = [], placeholder, compact, iconOnly, appearance = "default", popupPosition, searchable: _searchable, searchPlaceholder = "Search…", searchAriaLabel = "Search options", className, disabled, children, "data-test": dataTest, ...props }) {
     const allOptions = [...options, ...groups.flatMap((group) => group.options)];
     const selectedOption = allOptions.find((option) => option.value === value);
     const optionByValue = new Map(allOptions.map((option) => [option.value, option]));
@@ -34,16 +33,13 @@ function SearchableSelect({ value, options = [], groups = [], placeholder, compa
             items: group.options.map((option) => option.value),
         })),
     ];
-    const portalContainer = typeof document !== "undefined"
-        ? document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body
-        : null;
     function handleValueChange(next) {
         if (typeof next === "string")
             props.onValueChange?.(next);
     }
     const { onValueChange: _onValueChange, ...triggerProps } = props;
-    const triggerClassName = `select${compact ? " select--compact" : ""}${appearance === "embedded" ? " select--embedded" : ""}${className ? ` ${className}` : ""}`;
-    return (_jsxs(BaseCombobox.Root, { value: value || null, disabled: disabled, items: searchableGroups, itemToStringLabel: (item) => optionByValue.get(item)?.label ?? item, autoHighlight: true, onValueChange: handleValueChange, children: [_jsxs(BaseCombobox.Trigger, { ...triggerProps, "data-test": dataTest, disabled: disabled, className: triggerClassName, children: [_jsx("span", { className: "select__value", children: _jsx(BaseCombobox.Value, { placeholder: placeholder, children: selectedOption?.label ?? (value || undefined) }) }), _jsx(BaseCombobox.Icon, { className: "select__icon", children: _jsx(IconChevronDown, { size: 15, stroke: 1.8, "aria-hidden": "true" }) }), children] }), _jsx(BaseCombobox.Portal, { container: portalContainer, children: _jsx(BaseCombobox.Positioner, { className: "select__positioner", sideOffset: 4, children: _jsxs(BaseCombobox.Popup, { className: "select__popup select__popup--searchable", children: [_jsx(BaseCombobox.Input, { className: "select__search-input", placeholder: searchPlaceholder, "aria-label": searchAriaLabel, "data-test": dataTest ? `${dataTest}-search` : "select-search" }), _jsx(BaseCombobox.Empty, { className: "select__empty", children: "No matching options." }), _jsx(BaseCombobox.List, { className: "select__list select__list--searchable", children: (group) => (_jsxs(BaseCombobox.Group, { className: "select__group", items: group.items, children: [group.label ? (_jsx(BaseCombobox.GroupLabel, { className: "select__group-label", children: group.label })) : null, _jsx(BaseCombobox.Collection, { children: (item) => {
+    const triggerClassName = `select${iconOnly ? " select--icon-only" : ""}${compact ? " select--compact" : ""}${appearance === "embedded" ? " select--embedded" : ""}${className ? ` ${className}` : ""}`;
+    return (_jsxs(BaseCombobox.Root, { value: value || null, disabled: disabled, items: searchableGroups, itemToStringLabel: (item) => optionByValue.get(item)?.label ?? item, autoHighlight: true, onValueChange: handleValueChange, children: [_jsxs(BaseCombobox.Trigger, { ...triggerProps, render: iconOnly ? _jsx(IconButton, { label: props["aria-label"] ?? "Select option" }) : undefined, "data-test": dataTest, disabled: disabled, className: triggerClassName, children: [_jsx("span", { className: "select__value", children: _jsx(BaseCombobox.Value, { placeholder: placeholder, children: selectedOption?.label ?? (value || undefined) }) }), _jsx(BaseCombobox.Icon, { className: "select__icon", children: _jsx(IconChevronDown, { size: 15, stroke: 1.8, "aria-hidden": "true" }) }), children] }), _jsx(BaseCombobox.Portal, { container: portalContainer(), children: _jsx(BaseCombobox.Positioner, { className: "select__positioner", sideOffset: 4, side: popupPosition?.side, align: popupPosition?.align, children: _jsxs(BaseCombobox.Popup, { className: "select__popup select__popup--searchable", children: [_jsx(BaseCombobox.Input, { className: "select__search-input", placeholder: searchPlaceholder, "aria-label": searchAriaLabel, "data-test": dataTest ? `${dataTest}-search` : "select-search" }), _jsx(BaseCombobox.Empty, { className: "select__empty", children: "No matching options." }), _jsx(BaseCombobox.List, { className: "select__list select__list--searchable", children: (group) => (_jsxs(BaseCombobox.Group, { className: "select__group", items: group.items, children: [group.label ? (_jsx(BaseCombobox.GroupLabel, { className: "select__group-label", children: group.label })) : null, _jsx(BaseCombobox.Collection, { children: (item) => {
                                                 const option = optionByValue.get(item);
                                                 return option ? _jsx(SearchableSelectItem, { option: option }, item) : null;
                                             } })] }, group.value)) })] }) }) })] }));