feat: introduce canonical active prop to Chip component family

apps/docs/docs/components/charts/Legend/_webExamples.mdx

@@ -710,7 +710,7 @@ function InteractiveLegend() {
         compact
         aria-label={`${isEmphasized ? 'Remove emphasis from' : 'Emphasize'} ${label} series`}
         aria-pressed={isEmphasized}
-        inverted={isEmphasized}
+        active={isEmphasized}
         onClick={() => handleToggle(seriesId)}
         style={{
           backgroundColor: `rgb(var(${baseColor}10))`,

apps/docs/docs/components/inputs/Chip/_mobileExamples.mdx

@@ -50,21 +50,41 @@ function Example() {
 
 ## Styling
 
-### Color
+### Active Color
 
-Use `invertColorScheme` to invert foreground and background for emphasis.
+Use `active` for high-contrast emphasis. When `active` is true, the Chip inverts the color scheme for everything inside its borders — `background`, `color`, icons, and other token-based colors are all resolved against the opposite light/dark palette. Set `background` and `color` to control the inactive appearance; those same tokens flip automatically when active.
 
 ```tsx
 function Example() {
   return (
     <HStack gap={2} flexWrap="wrap">
       <Chip>Default</Chip>
-      <Chip invertColorScheme>Inverted</Chip>
+      <Chip active>Active</Chip>
+      <Chip active background="bgPrimary" color="fgInverse">
+        Custom tokens
+      </Chip>
     </HStack>
   );
 }
 ```
 
+To break from the inverted convention, set `activeBackground` and/or `activeColor` while `active` is true. The Chip paints those tokens directly instead of inverting. **Any `start`, `end`, or `children` ReactNodes need explicit `color` props** — they are not updated automatically.
+
+```tsx
+function Example() {
+  return (
+    <Chip
+      active
+      activeBackground="bgPositive"
+      activeColor="fgInverse"
+      end={<Icon color="fgInverse" name="caretDown" size="s" />}
+    >
+      Positive active
+    </Chip>
+  );
+}
+```
+
 ### Sizes
 
 `size` accepts `xs` and `s`. Defaults to `s`.

apps/docs/docs/components/inputs/Chip/_webExamples.mdx

@@ -50,21 +50,41 @@ function Example() {
 
 ## Styling
 
-### Color
+### Active Color
 
-Use `invertColorScheme` to invert foreground and background for emphasis.
+Use `active` for high-contrast emphasis. When `active` is true, the Chip inverts the color scheme for everything inside its borders — `background`, `color`, icons, and other token-based colors are all resolved against the opposite light/dark palette. Set `background` and `color` to control the inactive appearance; those same tokens flip automatically when active.
 
 ```tsx live
 function Example() {
   return (
     <HStack gap={2} flexWrap="wrap">
       <Chip>Default</Chip>
-      <Chip invertColorScheme>Inverted</Chip>
+      <Chip active>Active</Chip>
+      <Chip active background="bgPrimary" color="fgInverse">
+        Custom tokens
+      </Chip>
     </HStack>
   );
 }
 ```
 
+To break from the inverted convention, set `activeBackground` and/or `activeColor` while `active` is true. The Chip paints those tokens directly instead of inverting. **Any `start`, `end`, or `children` ReactNodes need explicit `color` props** — they are not updated automatically.
+
+```tsx live
+function Example() {
+  return (
+    <Chip
+      active
+      activeBackground="bgPositive"
+      activeColor="fgInverse"
+      end={<Icon color="fgInverse" name="caretDown" size="s" />}
+    >
+      Positive active
+    </Chip>
+  );
+}
+```
+
 ### Sizes
 
 `size` accepts `xs` and `s`. Defaults to `s`.

apps/docs/docs/components/inputs/InputChip/_mobileExamples.mdx

@@ -79,20 +79,16 @@ function Example() {
 </InputChip>
 ```
 
-### Invert color scheme
+### Active
 
-Use `invertColorScheme` to emphasize removable values.
+InputChip is active by default. Set `active={false}` for a less emphasized appearance.
 
 ```tsx
 function Example() {
   return (
     <HStack gap={2} flexWrap="wrap">
-      <InputChip onPress={() => console.log('Remove Default')} value="Default" />
-      <InputChip
-        invertColorScheme
-        onPress={() => console.log('Remove Inverted')}
-        value="Inverted"
-      />
+      <InputChip onPress={() => console.log('Remove Active')} value="Active (default)" />
+      <InputChip active={false} onPress={() => console.log('Remove Inactive')} value="Inactive" />
     </HStack>
   );
 }

apps/docs/docs/components/inputs/InputChip/_webExamples.mdx

@@ -86,20 +86,16 @@ function Example() {
 }
 ```
 
-### Invert color scheme
+### Active
 
-Use `invertColorScheme` to emphasize removable values.
+InputChip is active by default. Set `active={false}` for a less emphasized appearance.
 
 ```tsx live
 function Example() {
   return (
     <HStack gap={2} flexWrap="wrap">
-      <InputChip onClick={() => console.log('Remove Default')} value="Default" />
-      <InputChip
-        invertColorScheme
-        onClick={() => console.log('Remove Inverted')}
-        value="Inverted"
-      />
+      <InputChip onClick={() => console.log('Remove Active')} value="Active (default)" />
+      <InputChip active={false} onClick={() => console.log('Remove Inactive')} value="Inactive" />
     </HStack>
   );
 }

apps/docs/docs/components/inputs/MediaChip/_mobileExamples.mdx

@@ -76,15 +76,15 @@ MediaChip supports all six content combinations automatically.
 </MediaChip>
 ```
 
-### Invert color scheme
+### Active
 
-Use `invertColorScheme` to emphasize the chip with inverted colors.
+Use `active` to emphasize the chip with high-contrast colors.
 
 ```tsx
 <HStack gap={2} flexWrap="wrap">
-  <MediaChip invertColorScheme>Selected</MediaChip>
+  <MediaChip active>Selected</MediaChip>
   <MediaChip
-    invertColorScheme
+    active
     end={<Icon active color="fg" name="check" size="xs" />}
     start={<RemoteImage height={24} shape="circle" source={assets.eth.imageUrl} width={24} />}
   >

apps/docs/docs/components/inputs/MediaChip/_webExamples.mdx

@@ -84,15 +84,15 @@ MediaChip supports all six content combinations automatically.
 </HStack>
 ```
 
-### Invert color scheme
+### Active
 
-Use `invertColorScheme` to emphasize the chip with inverted colors.
+Use `active` to emphasize the chip with high-contrast colors.
 
 ```tsx live
 <HStack gap={2} flexWrap="wrap">
-  <MediaChip invertColorScheme>Selected</MediaChip>
+  <MediaChip active>Selected</MediaChip>
   <MediaChip
-    invertColorScheme
+    active
     end={<Icon active color="fg" name="check" size="xs" />}
     start={<RemoteImage height={24} shape="circle" source={assets.eth.imageUrl} width={24} />}
   >

apps/docs/docs/components/inputs/SelectChipAlpha/_mobileExamples.mdx

@@ -4,6 +4,12 @@ SelectChip is a chip-styled control built on top of the [Alpha Select](/componen
 Avoid using options with duplicate values. Each option's `value` should be unique within the options array to ensure proper selection behavior.
 :::
 
+## Active state
+
+SelectChip uses the same `active` semantics as [Chip](/components/inputs/Chip/): when `active` is true, the control inverts the color scheme for everything inside the chip borders.
+
+By default, SelectChip sets `active` to `true` whenever one or more values are selected and `false` when the control is empty. You do not need to wire `active` to `value` manually. Pass `active` explicitly to force the emphasized state even when nothing is selected, or set `active={false}` to keep the chip visually inactive despite a selection.
+
 ## Basics
 
 ### Basic usage
@@ -256,32 +262,6 @@ function ExampleSizes() {
 }
 ```
 
-### Inverted
-
-```tsx
-function ExampleInverted() {
-  const exampleOptions = [
-    { value: null, label: 'Clear selection' },
-    { value: '1', label: 'Option 1' },
-    { value: '2', label: 'Option 2' },
-    { value: '3', label: 'Option 3' },
-    { value: '4', label: 'Option 4' },
-  ];
-  const [value, setValue] = useState<string | null>(null);
-  const hasValue = value !== null;
-  return (
-    <SelectChip
-      accessibilityLabel="Select a value"
-      invertColorScheme={!hasValue}
-      onChange={setValue}
-      options={exampleOptions}
-      placeholder="Choose an option"
-      value={value}
-    />
-  );
-}
-```
-
 ### Start and end nodes
 
 ```tsx

apps/docs/docs/components/inputs/SelectChipAlpha/_webExamples.mdx

@@ -4,6 +4,12 @@ SelectChip is a chip-styled control built on top of the [Alpha Select](/componen
 Avoid using options with duplicate values. Each option's `value` should be unique within the options array to ensure proper selection behavior.
 :::
 
+## Active state
+
+SelectChip uses the same `active` semantics as [Chip](/components/inputs/Chip/): when `active` is true, the control inverts the color scheme for everything inside the chip borders.
+
+By default, SelectChip sets `active` to `true` whenever one or more values are selected and `false` when the control is empty. You do not need to wire `active` to `value` manually. Pass `active` explicitly to force the emphasized state even when nothing is selected, or set `active={false}` to keep the chip visually inactive despite a selection.
+
 ## Basics
 
 ### Basic usage
@@ -277,32 +283,6 @@ function ExampleSizes() {
 }
 ```
 
-### Inverted
-
-```jsx live
-function ExampleInverted() {
-  const exampleOptions = [
-    { value: null, label: 'Clear selection' },
-    { value: '1', label: 'Option 1' },
-    { value: '2', label: 'Option 2' },
-    { value: '3', label: 'Option 3' },
-    { value: '4', label: 'Option 4' },
-  ];
-  const [value, setValue] = useState(null);
-  const hasValue = value !== null;
-  return (
-    <SelectChip
-      accessibilityLabel="Select a value"
-      invertColorScheme={!hasValue}
-      onChange={setValue}
-      options={exampleOptions}
-      placeholder="Choose an option"
-      value={value}
-    />
-  );
-}
-```
-
 ### Start and end nodes
 
 ```jsx live