Expose builder chip selection beyond color, raise unselected contrast, and make the five-value limit visible.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/components/controls/Chip/Chip.types.ts

@@ -29,10 +29,9 @@ export interface ChipProps {
   className?: string;
   /**
    * Whether the chip should be non-interactive. Defaults to `true` when
-   * `state === "disabled"` to preserve historical behavior. Pass
-   * `disabled={false}` alongside `state="disabled"` to render the dimmed
-   * "disabled" visual while keeping the chip clickable — useful for toggle
-   * groups where the unselected state is the disabled visual.
+   * `state === "disabled"`. Toggle groups use `selected` / `unselected`
+   * (Chip sets `aria-pressed`); pass `disabled` only when the chip cannot
+   * be activated.
    */
   disabled?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;

app/components/controls/Chip/Chip.view.tsx

@@ -23,12 +23,12 @@ function ChipView({
   typeToAddPlaceholder,
   closeAriaLabel,
 }: ChipViewProps) {
-  // The container is the source of truth for `disabled`. This allows
-  // `state="disabled"` to be used purely as a visual (for toggle-group chips
-  // that look dimmed while remaining clickable) by passing `disabled={false}`.
+  // The container is the source of truth for `disabled`. `state="disabled"`
+  // is the non-interactive visual only — toggle groups use selected/unselected.
   const isDisabled = disabled ?? false;
   const isSelected = state === "selected";
   const isCustom = state === "custom";
+  const isToggle = !isCustom;
 
   const isInverse = palette === "inverse";
   const isDefault = palette === "default";
@@ -145,6 +145,7 @@ function ChipView({
 
   const sharedA11y = {
     "aria-label": ariaLabel,
+    ...(isToggle ? { "aria-pressed": isSelected } : {}),
   };
 
   // Custom state rendering with check/close buttons
@@ -265,6 +266,23 @@ function ChipView({
       onClick={handleClick}
       {...sharedA11y}
     >
+      {isSelected ? (
+        <svg
+          aria-hidden
+          viewBox="0 0 12 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={`shrink-0 ${isSmall ? "size-[12px]" : "size-[16px]"}`}
+        >
+          <path
+            d="M10 3L4.5 8.5L2 6"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ) : null}
       <span className="min-w-0 truncate">{label}</span>
       {onRemove && !isDisabled && (
         <button