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

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

app/(app)/create/components/ApplicableScopeField.tsx

@@ -74,11 +74,16 @@ function ApplicableScopeFieldComponent({
       <div className="flex flex-wrap items-center gap-2">
         {scopes.map((scope) => {
           const isSelected = selectedScopes.includes(scope);
+          const chipState = isSelected
+            ? "selected"
+            : readOnly
+              ? "disabled"
+              : "unselected";
           return (
             <Chip
               key={scope}
               label={scope}
-              state={isSelected ? "selected" : "disabled"}
+              state={chipState}
               palette="default"
               size="s"
               disabled={readOnly}

app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx

@@ -303,7 +303,6 @@ export function CommunityStructureSelectScreen() {
     <>
       <MultiSelect
         label={cs.organizationMultiSelect.label}
-        showHelpIcon
         size="s"
         options={organizationTypeOptions}
         onChipClick={handleOrganizationTypeClick}
@@ -313,7 +312,6 @@ export function CommunityStructureSelectScreen() {
       />
       <MultiSelect
         label={cs.scaleMultiSelect.label}
-        showHelpIcon
         size="s"
         options={scaleOptions}
         onChipClick={handleScaleClick}
@@ -323,7 +321,6 @@ export function CommunityStructureSelectScreen() {
       />
       <MultiSelect
         label={cs.maturityMultiSelect.label}
-        showHelpIcon
         size="s"
         options={maturityOptions}
         onChipClick={handleMaturityClick}

app/(app)/create/screens/select/CoreValuesSelectScreen.tsx

@@ -587,17 +587,23 @@ export function CoreValuesSelectScreen() {
     [draft, markCreateFlowInteraction, replaceState, wizardCustomizeChipId],
   );
 
+  const selectedCount = useMemo(
+    () => coreValueOptions.filter((o) => o.state === "selected").length,
+    [coreValueOptions],
+  );
+  const atSelectionLimit = selectedCount >= MAX_CORE_VALUES;
+  const selectionCountText = cv.multiSelect.selectionCount
+    .replace("{count}", String(selectedCount))
+    .replace("{max}", String(MAX_CORE_VALUES));
+
   const kebabMenuItems = useMemo(() => {
     if (!modalSession || !activeModalChipId) return [];
-    const selectedCount = coreValueOptions.filter(
-      (o) => o.state === "selected",
-    ).length;
     return buildCustomRuleModalKebabMenu(modalKebabMenu, {
       showCustomize: true,
       onCustomize: handleCustomize,
       onDuplicate:
         (state.editingPublishedRuleId?.trim() ?? "") !== "" ||
-        selectedCount >= MAX_CORE_VALUES
+        atSelectionLimit
           ? undefined
           : handleDuplicateCoreChip,
       showRemove: modalSession === "editing",
@@ -605,7 +611,7 @@ export function CoreValuesSelectScreen() {
     });
   }, [
     activeModalChipId,
-    coreValueOptions,
+    atSelectionLimit,
     handleCustomize,
     handleDuplicateCoreChip,
     handleRemoveFromKebab,
@@ -695,7 +701,8 @@ export function CoreValuesSelectScreen() {
       <button
         type="button"
         onClick={addHandlers.onAddClick}
-        className="cursor-pointer font-normal leading-[1.3] text-[color:var(--color-content-default-tertiary,#b4b4b4)] underline decoration-solid underline-offset-[3px] hover:opacity-90"
+        disabled={atSelectionLimit}
+        className="cursor-pointer font-normal leading-[1.3] text-[color:var(--color-content-default-tertiary,#b4b4b4)] underline decoration-solid underline-offset-[3px] hover:opacity-90 disabled:cursor-not-allowed disabled:no-underline disabled:opacity-60 disabled:hover:opacity-60"
       >
         {cv.header.addLink}
       </button>
@@ -730,6 +737,9 @@ export function CoreValuesSelectScreen() {
         onCustomChipClose={addHandlers.onCustomChipClose}
         addButton
         addButtonText={cv.multiSelect.addButtonText}
+        maxSelections={MAX_CORE_VALUES}
+        selectionCountText={selectionCountText}
+        limitReachedAnnouncement={cv.multiSelect.limitReached}
       />
 
       {detailModal && (